@extends('layouts.auth')

@section('title', 'Sign In')

@section('content')
<div class="auth-card">
    <div class="auth-brand">
        <h4 class="mb-1 fw-bold"><i class="bi bi-tree me-2"></i>Pavitram Agroz</h4>
        <div class="text-white-50 small">Centralized Multi-Store Management Portal</div>
    </div>

    <div class="p-4">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show small" role="alert">
                <i class="bi bi-check-circle me-1"></i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if($errors->has('email'))
            <div class="alert alert-danger small" role="alert">
                <i class="bi bi-exclamation-circle me-1"></i> {{ $errors->first('email') }}
            </div>
        @endif

        <form method="POST" action="{{ route('login.post') }}" novalidate>
            @csrf

            <div class="mb-3">
                <label for="email" class="form-label small fw-semibold">Email Address</label>
                <div class="input-group">
                    <span class="input-group-text bg-light text-muted"><i class="bi bi-envelope"></i></span>
                    <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" required autofocus autocomplete="email" placeholder="name@pavitramagroz.com">
                </div>
            </div>

            <div class="mb-3">
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <label for="password" class="form-label small fw-semibold mb-0">Password</label>
                    <a href="{{ route('password.request') }}" class="small text-decoration-none text-success">Forgot password?</a>
                </div>
                <div class="input-group">
                    <span class="input-group-text bg-light text-muted"><i class="bi bi-lock"></i></span>
                    <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" required autocomplete="current-password" placeholder="••••••••">
                </div>
                @error('password')
                    <div class="invalid-feedback d-block small">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3 form-check">
                <input type="checkbox" class="form-check-input" id="remember" name="remember" {{ old('remember') ? 'checked' : '' }}>
                <label class="form-check-label small text-muted" for="remember">Keep me signed in on this computer</label>
            </div>

            <button type="submit" class="btn btn-agri w-100 py-2 mb-3">
                <i class="bi bi-box-arrow-in-right me-1"></i> Authenticate & Enter
            </button>
        </form>

        <div class="border-top pt-3 mt-3">
            <div class="text-muted small fw-semibold mb-2 text-center">Quick Demo Login Accounts:</div>
            <div class="d-flex flex-column gap-2">
                <button type="button" class="btn btn-sm btn-outline-success text-start d-flex justify-content-between align-items-center" onclick="fillCredentials('superadmin@pavitramagroz.com', 'Pavitram@Admin2026!')">
                    <span><i class="bi bi-shield-lock me-1"></i> <strong>Super Admin</strong></span>
                    <span class="badge bg-success-subtle text-success">Full System</span>
                </button>
                <button type="button" class="btn btn-sm btn-outline-primary text-start d-flex justify-content-between align-items-center" onclick="fillCredentials('admin.central@pavitramagroz.com', 'Central@Admin2026!')">
                    <span><i class="bi bi-shop me-1"></i> <strong>Store Admin</strong></span>
                    <span class="badge bg-primary-subtle text-primary">Central Depot</span>
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary text-start d-flex justify-content-between align-items-center" onclick="fillCredentials('cashier.central@pavitramagroz.com', 'Cashier@Central2026!')">
                    <span><i class="bi bi-calculator me-1"></i> <strong>Cashier / Staff</strong></span>
                    <span class="badge bg-secondary-subtle text-secondary">POS Terminal</span>
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    function fillCredentials(email, password) {
        document.getElementById('email').value = email;
        document.getElementById('password').value = password;
    }
</script>
@endsection