@php
    $sysAppName = \App\Models\SchoolSetting::get('app_name', 'Sistem Absensi Fingerprint');
    $sysSchoolNameFormal = \App\Models\SchoolSetting::get('school_name_formal', 'SMK Negeri 1 Gunung Agung');
    $sysLogoUrl = \App\Models\SchoolSetting::getFileUrl('school_logo');
@endphp

<div class="bg-slate-800/80 backdrop-blur-md rounded-2xl border border-slate-700/60 p-8 shadow-2xl">
    <!-- Header Logo & Title -->
    <div class="text-center mb-8">
        @if($sysLogoUrl)
            <img src="{{ $sysLogoUrl }}" alt="Logo" class="inline-block w-20 h-20 object-contain rounded-2xl bg-slate-900 p-2 border border-slate-700 shadow-lg shadow-sky-500/10 mb-4">
        @else
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-tr from-sky-600 to-indigo-600 shadow-lg shadow-sky-500/20 mb-4">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457-.39-2.823-1.07-4" />
                </svg>
            </div>
        @endif
        <h1 class="text-2xl font-bold text-white tracking-tight">{{ $sysAppName }}</h1>
        <p class="text-xs font-medium text-slate-400 mt-1">{{ $sysSchoolNameFormal }}</p>
    </div>

    <!-- Notifications / Alerts -->
    @if(session('success'))
        <div class="mb-4 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-sm flex items-center gap-2">
            <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    @if(session('warning'))
        <div class="mb-4 p-4 rounded-xl bg-amber-500/10 border border-amber-500/30 text-amber-400 text-sm flex items-center gap-2">
            <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
            <span>{{ session('warning') }}</span>
        </div>
    @endif

    <form wire:submit="login" class="space-y-5">
        <!-- Email Field -->
        <div>
            <label for="email" class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-2">Alamat Email</label>
            <div class="relative">
                <input wire:model="email" type="email" id="email" 
                    class="w-full px-4 py-3 rounded-xl bg-slate-900/80 border border-slate-700 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent transition-all text-sm @error('email') border-rose-500 ring-1 ring-rose-500 @enderror" 
                    placeholder="admin@smkn1gunungagung.sch.id" required autofocus>
            </div>
            @error('email')
                <p class="text-xs text-rose-400 mt-1.5 font-medium">{{ $message }}</p>
            @enderror
        </div>

        <!-- Password Field -->
        <div>
            <label for="password" class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-2">Password</label>
            <div class="relative">
                <input wire:model="password" type="password" id="password" 
                    class="w-full px-4 py-3 rounded-xl bg-slate-900/80 border border-slate-700 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent transition-all text-sm @error('password') border-rose-500 ring-1 ring-rose-500 @enderror" 
                    placeholder="••••••••" required>
            </div>
            @error('password')
                <p class="text-xs text-rose-400 mt-1.5 font-medium">{{ $message }}</p>
            @enderror
        </div>

        <!-- Remember Me Checkbox -->
        <div class="flex items-center justify-between">
            <label class="flex items-center gap-2 cursor-pointer">
                <input wire:model="remember" type="checkbox" class="w-4 h-4 rounded border-slate-700 bg-slate-900 text-sky-600 focus:ring-sky-500 focus:ring-offset-slate-900">
                <span class="text-xs text-slate-400 font-medium">Ingat Saya di Perangkat Ini</span>
            </label>
        </div>

        <!-- Submit Button -->
        <button type="submit" wire:loading.attr="disabled"
            class="w-full py-3.5 px-4 rounded-xl bg-gradient-to-r from-sky-600 to-indigo-600 hover:from-sky-500 hover:to-indigo-500 text-white font-semibold text-sm shadow-lg shadow-sky-600/25 transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-50">
            <span wire:loading.remove wire:target="login">Masuk ke Sistem</span>
            <span wire:loading wire:target="login" class="inline-flex items-center gap-2">
                <svg class="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                Memproses...
            </span>
        </button>
    </form>

    <div class="mt-8 pt-6 border-t border-slate-700/50 text-center">
        <p class="text-xs text-slate-500">© {{ date('Y') }} {{ $sysSchoolNameFormal }}. All rights reserved.</p>
    </div>
</div>
