@extends('layouts.landing')

@section('content')
<div class="min-h-screen bg-sdn-gradient flex items-center justify-center p-6 relative overflow-hidden">
    <div class="floating-shape w-64 h-64 bg-white top-10 -left-20"></div>
    <div class="floating-shape w-48 h-48 bg-purple-300 bottom-10 right-10"></div>

    <div class="card-sdn w-full max-w-md relative z-10 shadow-2xl">
        <div class="text-center mb-8">
            <x-brand-logo size="lg" class="mx-auto mb-4" />
            <h2 class="text-2xl font-extrabold text-gray-800">Masuk CBT</h2>
            <p class="text-gray-500 mt-1">{{ $branding['school_name'] }}</p>
        </div>

        <form method="POST" action="{{ route('login') }}" class="space-y-5">
            @csrf
            <div>
                <label class="form-label">Email / Username / NIS</label>
                <input type="text" name="identifier" value="{{ old('identifier') }}" required autofocus
                    class="form-input" placeholder="Admin: email | Guru: username | Siswa: NIS">
                @error('identifier')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="form-label">Password</label>
                <input type="password" name="password" required class="form-input" placeholder="Masukkan password">
            </div>
            <div class="flex items-center gap-2">
                <input type="checkbox" name="remember" id="remember" class="rounded">
                <label for="remember" class="text-sm text-gray-600">Ingat saya</label>
            </div>
            <button type="submit" class="btn-sdn-primary w-full justify-center text-lg py-3">
                Masuk
            </button>
        </form>

        <div class="mt-6 p-4 bg-gray-50 rounded-xl text-sm text-gray-600">
            <p class="font-bold mb-2">Panduan Login:</p>
            <ul class="space-y-1 text-xs">
                <li><strong>Admin:</strong> admin@sdn08.sch.id</li>
                <li><strong>Guru:</strong> guru.mtk / guru.ipa</li>
                <li><strong>Siswa:</strong> NIS (contoh: 2024001)</li>
                <li><strong>Password default:</strong> password</li>
            </ul>
        </div>

        <div class="text-center mt-4">
            <a href="{{ route('landing') }}" class="text-sm text-gray-500 hover:text-sdn-red font-semibold">&larr; Kembali ke Beranda</a>
        </div>
    </div>
</div>
@endsection