@extends('customer.auth.layout')

@section('title','Login')
@section('subtitle','Sign in to track your orders')

@section('content')

<div class="row align-items-center g-4">

    <!-- ================= LEFT SIDE (INFO / BRAND) ================= -->
    <div class="col-md-6 d-none d-md-block">
        <div class="h-100 p-4 rounded-4 text-white"
             style="background:linear-gradient(135deg,#f97316,#fb923c);">

            <h3 class="fw-bold mb-3">
                Welcome Back 👋
            </h3>

            <p class="opacity-75 mb-4">
                Track deliveries, view order history and manage your account
                from one smart dashboard.
            </p>

            <ul class="list-unstyled small">
                <li class="mb-2">
                    <i class="bi bi-check-circle-fill me-2"></i>
                    Real-time parcel tracking
                </li>
                <li class="mb-2">
                    <i class="bi bi-check-circle-fill me-2"></i>
                    Secure payments & invoices
                </li>
                <li class="mb-2">
                    <i class="bi bi-check-circle-fill me-2"></i>
                    AI-powered delivery insights
                </li>
            </ul>

            <div class="mt-4 opacity-75 small">
                © {{ date('Y') }} SriCourier
            </div>
        </div>
    </div>

    <!-- ================= RIGHT SIDE (FORM) ================= -->
    <div class="col-md-6">

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

        {{-- SUCCESS --}}
        @if (session('success'))
            <div class="alert alert-success d-flex align-items-center">
                <i class="bi bi-check-circle-fill me-2"></i>
                {{ session('success') }}
            </div>
        @endif

        {{-- ERROR --}}
        @if (session('error'))
            <div class="alert alert-danger d-flex align-items-center">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                {{ session('error') }}
            </div>
        @endif

        {{-- VALIDATION --}}
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0 ps-3">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <!-- EMAIL -->
        <div class="mb-3">
            <label class="form-label fw-semibold">Email Address</label>
            <input type="email"
                   name="email"
                   class="form-control"
                   placeholder="you@email.com"
                   required>
        </div>

        <!-- PASSWORD -->
        <div class="mb-3">
            <label class="form-label fw-semibold">Password</label>

            <div class="input-group">
                <input type="password"
                       name="password"
                       id="password"
                       class="form-control"
                       placeholder="••••••••"
                       required>

                <button type="button"
                        class="btn btn-outline-secondary"
                        onclick="togglePassword()">
                    <i class="bi bi-eye" id="eyeIcon"></i>
                </button>
            </div>
        </div>

        <!-- ACTION -->
        <button class="btn btn-primary w-100 mb-3">
            <i class="bi bi-box-arrow-in-right me-1"></i>
            Login
        </button>

        <!-- LINKS -->
        <div class="text-center auth-footer">
            <a href="{{ route('customer.password.request') }}">
                Forgot password?
            </a><br>

            <span class="text-muted">New here?</span>
            <a href="{{ route('customer.register') }}" class="fw-semibold">
                Create account
            </a>
        </div>

        </form>

    </div>
</div>

@endsection

@push('scripts')
<script>
function togglePassword(){
    const input = document.getElementById('password');
    const icon  = document.getElementById('eyeIcon');

    if(input.type === 'password'){
        input.type = 'text';
        icon.classList.replace('bi-eye','bi-eye-slash');
    }else{
        input.type = 'password';
        icon.classList.replace('bi-eye-slash','bi-eye');
    }
}
</script>
@endpush