<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex, nofollow, noarchive, nosnippet" />
    @php
        $panel = $panel ?? 'admin';
        $isEmployee = $panel === 'employee';
        $titlePrefix = $isEmployee ? 'Employee Login' : 'Admin Login';
        $panelLabel = $isEmployee ? 'Employee Access Panel' : 'Admin Control Panel';
        $placeholderEmail = $isEmployee ? 'employee@example.com' : 'owner@example.com';
        $formAction = $formAction ?? route('login');
        $switchUrl = $switchUrl ?? null;
        $switchLabel = $switchLabel ?? null;
        $siteSettings = \App\Models\GeneralSetting::getContent();
        $siteLogo = $siteSettings['site']['logo'] ?? null;
        $logoUrl = $siteLogo
            ? ((str_starts_with($siteLogo, 'http://') || str_starts_with($siteLogo, 'https://'))
                ? $siteLogo
                : asset('storage/' . ltrim($siteLogo, '/')))
            : null;
    @endphp
    <title>{{ $titlePrefix }} - {{ config('app.name') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
    <style>body { font-family: 'Inter', sans-serif; }</style>
</head>
<body class="min-h-screen bg-gradient-to-br from-blue-900 via-blue-800 to-slate-950 flex items-center justify-center p-4">

<div class="w-full max-w-lg">
    <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-white rounded-2xl shadow-lg mb-4">
            @if($logoUrl)
                <img src="{{ $logoUrl }}" alt="{{ config('app.name') }} logo" class="max-h-10 w-auto object-contain" />
            @else
                <span class="text-blue-900 font-bold text-2xl">G</span>
            @endif
        </div>
        <h1 class="text-2xl font-bold text-white">GPS Migration</h1>
        <p class="text-blue-200 text-sm mt-1">{{ $panelLabel }}</p>
    </div>

    <div class="bg-white rounded-[28px] shadow-2xl overflow-hidden">
        <div class="px-8 pt-8 pb-6 border-b border-blue-50 bg-gradient-to-r from-white to-blue-50/80">
            <span class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-blue-700">
                {{ $isEmployee ? 'Employee Access' : 'Admin Access' }}
            </span>
            <h2 class="mt-4 text-2xl font-bold text-slate-900">Sign in to your account</h2>
            <p class="mt-2 text-sm leading-6 text-slate-500">
                Use your email and password to access the {{ $isEmployee ? 'employee workspace' : 'admin control panel' }} securely.
            </p>
        </div>

        <div class="p-8">
            @if (session('status'))
                <div class="mb-5 rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
                    {{ session('status') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="mb-5 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                    <ul class="space-y-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ $formAction }}" class="space-y-5">
                @csrf

                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1.5">Email address</label>
                    <input
                        id="email"
                        type="email"
                        name="email"
                        value="{{ old('email') }}"
                        required
                        autofocus
                        autocomplete="username"
                        class="w-full px-4 py-3 rounded-xl border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition @error('email') border-red-400 @enderror"
                        placeholder="{{ $placeholderEmail }}"
                    />
                    @error('email')
                        <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1.5">Password</label>
                    <input
                        id="password"
                        type="password"
                        name="password"
                        required
                        autocomplete="current-password"
                        class="w-full px-4 py-3 rounded-xl border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition @error('password') border-red-400 @enderror"
                        placeholder="Enter your password"
                    />
                    @error('password')
                        <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex items-center justify-between gap-4">
                    <label class="flex items-center gap-2 text-sm text-gray-600 cursor-pointer">
                        <input type="checkbox" name="remember" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
                        Remember me
                    </label>
                    @if (Route::has('password.request'))
                        <a href="{{ route('password.request') }}" class="text-sm text-blue-600 hover:text-blue-800 font-medium">
                            Forgot password?
                        </a>
                    @endif
                </div>

                <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-xl text-sm transition shadow-sm">
                    Sign In
                </button>

                @if($switchUrl && $switchLabel)
                    <a href="{{ $switchUrl }}"
                       class="block w-full text-center border border-gray-200 hover:bg-gray-50 text-gray-700 font-semibold py-3 rounded-xl text-sm transition">
                        Switch to {{ $switchLabel }}
                    </a>
                @endif
            </form>
        </div>
    </div>

    <p class="text-center text-blue-200 text-xs mt-6">
        &copy; {{ date('Y') }} {{ config('app.name') }}. All rights reserved.
    </p>
</div>

</body>
</html>
