<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Admin Login | Quickro POS</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <style>body { font-family: 'Inter', sans-serif; }</style>
</head>
<body class="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(216,27,42,0.18),transparent_24%),radial-gradient(circle_at_bottom_right,rgba(27,138,58,0.14),transparent_24%),linear-gradient(180deg,#fff7f7_0%,#f8fafc_48%,#ffffff_100%)] text-slate-950">
    <div class="mx-auto flex min-h-screen max-w-7xl items-center px-6 py-10 lg:grid lg:grid-cols-[1.05fr_0.95fr] lg:gap-12 lg:px-8">
        <div class="hidden lg:block">
            <div class="max-w-xl rounded-[2.5rem] border border-white/60 bg-slate-950 px-10 py-12 text-white shadow-[0_40px_120px_rgba(15,23,42,0.25)]">
                <div class="inline-flex items-center gap-3 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-white/80 backdrop-blur">
                    <span class="h-2.5 w-2.5 rounded-full bg-accent-500"></span>
                    Secure administration portal
                </div>
                <h1 class="mt-8 text-5xl font-black leading-tight">Run Quickro POS operations from one control center.</h1>
                <p class="mt-6 text-lg leading-8 text-slate-200">Monitor subscriptions, devices, sync health, storage growth, and backups without leaving the admin console.</p>
                <div class="mt-10 grid gap-4 sm:grid-cols-2">
                    <div class="rounded-3xl border border-white/10 bg-white/5 p-5 backdrop-blur">
                        <p class="text-sm uppercase tracking-[0.26em] text-slate-300">Realtime Ops</p>
                        <p class="mt-3 text-2xl font-bold">Sync, backup, storage</p>
                    </div>
                    <div class="rounded-3xl border border-white/10 bg-white/5 p-5 backdrop-blur">
                        <p class="text-sm uppercase tracking-[0.26em] text-slate-300">Growth</p>
                        <p class="mt-3 text-2xl font-bold">Users, plans, vouchers</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="w-full max-w-md justify-self-end">
            <div class="rounded-4xl border border-white/10 bg-white p-8 text-slate-900 shadow-2xl shadow-black/20">
                <div class="mb-8 flex items-center gap-4">
                    <span class="flex h-14 w-14 items-center justify-center rounded-2xl brand-gradient text-2xl font-black text-white">Q</span>
                    <div>
                        <p class="text-sm font-semibold uppercase tracking-[0.28em] text-brand-600">Quickro POS</p>
                        <h2 class="text-2xl font-bold">Admin Sign In</h2>
                    </div>
                </div>

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

                <form method="POST" action="{{ route('admin.login.post') }}" class="space-y-5">
                    @csrf
                    <div>
                        <label for="email" class="mb-2 block text-sm font-semibold text-slate-700">Email address</label>
                        <input id="email" name="email" type="email" value="{{ old('email') }}" required autofocus class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    </div>
                    <div>
                        <label for="password" class="mb-2 block text-sm font-semibold text-slate-700">Password</label>
                        <input id="password" name="password" type="password" required class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                    </div>
                    <label class="flex items-center gap-3 text-sm text-slate-600">
                        <input type="checkbox" name="remember" class="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-600">
                        Keep me signed in
                    </label>
                    <button type="submit" class="inline-flex w-full items-center justify-center rounded-2xl bg-brand-600 px-5 py-3.5 text-sm font-semibold text-white shadow-lg shadow-brand-600/20 transition hover:bg-brand-700">Sign In</button>
                </form>

                <p class="mt-6 text-center text-sm text-slate-500">Protected access for Quickro administrators only.</p>
            </div>
        </div>
    </div>
</body>
</html>
