@extends('layouts.guest')

@section('content')
    <div x-data="loginPage()" class="w-full max-w-md">
        <div class="rounded-[2rem] border border-slate-200/80 bg-white/80 p-8 shadow-[0_24px_60px_rgba(15,23,42,0.1)] backdrop-blur-xl sm:p-10">
            {{-- Role selector cards (commented out for now)
            <div class="mb-8 space-y-3">
                <p class="text-xs font-bold uppercase tracking-widest text-slate-400">Access Level</p>
                <div class="grid grid-cols-3 gap-2">
                    <button type="button" :class="role === 'admin' ? 'ring-2 ring-amber-500 bg-amber-50 border-amber-200' : 'border-slate-200 hover:border-slate-300'" class="rounded-xl border px-3 py-3 text-center transition-all">
                        <div class="text-lg">🔐</div>
                        <p class="text-xs font-semibold text-slate-800 mt-1">Admin</p>
                        <p class="text-[10px] text-slate-400">Full access</p>
                    </button>
                    <button type="button" :class="role === 'manager' ? 'ring-2 ring-amber-500 bg-amber-50 border-amber-200' : 'border-slate-200 hover:border-slate-300'" class="rounded-xl border px-3 py-3 text-center transition-all">
                        <div class="text-lg">📋</div>
                        <p class="text-xs font-semibold text-slate-800 mt-1">Manager</p>
                        <p class="text-[10px] text-slate-400">Branch view</p>
                    </button>
                    <button type="button" :class="role === 'employee' ? 'ring-2 ring-amber-500 bg-amber-50 border-amber-200' : 'border-slate-200 hover:border-slate-300'" class="rounded-xl border px-3 py-3 text-center transition-all">
                        <div class="text-lg">👤</div>
                        <p class="text-xs font-semibold text-slate-800 mt-1">Employee</p>
                        <p class="text-[10px] text-slate-400">Self view</p>
                    </button>
                </div>
            </div>
            --}}

            <div class="flex justify-center mb-8">
                <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-amber-500 to-amber-600 text-2xl font-bold text-white shadow-lg shadow-amber-200">P</div>
            </div>

            <h2 class="text-center text-2xl font-semibold tracking-tight text-slate-900">Welcome back</h2>
            <p class="mt-1 text-center text-sm text-slate-500">Sign in to your payroll account</p>

            <div x-show="error" x-transition class="mt-6 rounded-xl bg-red-50 border border-red-200 px-4 py-3">
                <p class="text-sm text-red-600" x-text="error"></p>
            </div>

            <form @submit.prevent="login" class="mt-6 space-y-5">
                <div>
                    <label for="email" class="block text-sm font-medium text-slate-700">Email</label>
                    <input id="email" type="email" x-model="email"
                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 placeholder-slate-400 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100"
                           placeholder="admin@gmail.com" required>
                </div>
                <div>
                    <label for="password" class="block text-sm font-medium text-slate-700">Password</label>
                    <input id="password" type="password" x-model="password"
                           class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 placeholder-slate-400 transition-colors focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100"
                           placeholder="Enter your password" required>
                </div>
                <button type="submit" :disabled="!isValid || loading"
                        :class="!isValid || loading ? 'opacity-50 cursor-not-allowed' : 'hover:-translate-y-0.5 hover:shadow-lg hover:shadow-amber-200'"
                        class="w-full rounded-2xl bg-gradient-to-r from-slate-950 via-slate-900 to-amber-700 px-5 py-3 text-sm font-semibold text-white transition-all">
                    <span x-show="!loading">Sign in</span>
                    <span x-show="loading">Signing in...</span>
                </button>

                {{-- Forgot password (commented out for now)
                <div class="text-center">
                    <button type="button" @click="showForgot = true" class="text-sm font-medium text-amber-600 hover:text-amber-700 transition-colors">Forgot password?</button>
                </div>
                --}}
            </form>

            {{-- Forgot password view (commented out for now)
            <div x-show="showForgot" class="mt-6 pt-6 border-t border-slate-100">
                <h3 class="text-sm font-semibold text-slate-900">Reset Password</h3>
                <p class="text-xs text-slate-500 mt-1">Enter your email and we'll send you a reset link.</p>
                <div class="mt-4">
                    <input type="email" x-model="resetEmail" placeholder="your@email.com" class="block w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm">
                </div>
                <button type="button" class="mt-3 w-full rounded-2xl bg-slate-900 px-5 py-2.5 text-sm font-semibold text-white">Send Reset Link</button>
                <button type="button" @click="showForgot = false" class="mt-2 w-full text-center text-xs text-slate-400 hover:text-slate-600">Back to login</button>
            </div>
            --}}
        </div>
    </div>
@endsection