<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Admin — Desa Suka Baru</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="min-h-screen flex items-center justify-center py-10 px-4" style="background: linear-gradient(135deg, #1E3A8A 0%, #172554 50%, #2563EB 100%);">
    <div class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
        
        <!-- SIDE 1: Informasi Peranan & Fungsi Admin -->
        <div class="text-white space-y-6">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-white/10 rounded-2xl flex items-center justify-center text-white border border-white/20 shadow-inner flex-shrink-0">
                    <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                </div>
                <div>
                    <h1 class="text-2xl font-bold leading-tight">Desa Suka Baru</h1>
                    <p class="text-blue-200 text-sm">Kec. Marga Sakti Sebelat, Bengkulu Utara</p>
                </div>
            </div>

            <div>
                <h2 class="text-xl font-bold text-white mb-2">Panel Administrasi Sistem</h2>
                <p class="text-blue-100 text-sm leading-relaxed">
                    Portal terpusat untuk mengelola seluruh data publik, statistik penduduk, publikasi berita, dan peta digital Desa Suka Baru.
                </p>
            </div>

            <!-- Peranan Admin Checklist -->
            <div class="bg-white/10 backdrop-blur-md rounded-2xl p-5 border border-white/15 space-y-3">
                <h3 class="font-semibold text-xs uppercase tracking-wider text-blue-200 flex items-center gap-2">
                    <svg class="w-4 h-4 text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                    Fungsi & Hak Akses Pengelola
                </h3>
                <ul class="space-y-2 text-xs text-blue-100">
                    <li class="flex items-center gap-2">
                        <span class="text-emerald-400">✓</span> Kelola Profil Desa, Visi Misi & Sambutan Kepala Desa
                    </li>
                    <li class="flex items-center gap-2">
                        <span class="text-emerald-400">✓</span> Update Data Demografi & Statistik Penduduk
                    </li>
                    <li class="flex items-center gap-2">
                        <span class="text-emerald-400">✓</span> Kelola Data Perangkat Desa & Potensi Unggulan
                    </li>
                    <li class="flex items-center gap-2">
                        <span class="text-emerald-400">✓</span> Publikasi Berita & Pengumuman Resmi Desa
                    </li>
                    <li class="flex items-center gap-2">
                        <span class="text-emerald-400">✓</span> Upload Galeri Foto (Kompresi WebP Otomatis)
                    </li>
                    <li class="flex items-center gap-2">
                        <span class="text-emerald-400">✓</span> Manajemen Titik Lokasi Peta Interaktif Leaflet
                    </li>
                </ul>
            </div>

            <div class="text-xs text-blue-200">
                <a href="{{ route('home') }}" class="inline-flex items-center gap-1 hover:text-white transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                    Kembali ke Halaman Utama Website
                </a>
            </div>
        </div>

        <!-- SIDE 2: Form Login -->
        <div class="bg-white rounded-3xl shadow-2xl p-8 border border-white/20 relative">
            <div class="text-center mb-6">
                <div class="w-12 h-12 bg-blue-50 text-secondary rounded-2xl flex items-center justify-center mx-auto mb-3">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                </div>
                <h2 class="text-2xl font-bold text-gray-800">Masuk Admin</h2>
                <p class="text-xs text-gray-400 mt-1">Gunakan akun administrator terdaftar</p>
            </div>

            @if($errors->any())
            <div class="bg-red-50 border border-red-200 rounded-xl p-3.5 mb-5 flex items-start gap-2">
                <svg class="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <div class="text-xs text-red-600 leading-relaxed">
                    @foreach($errors->all() as $error)
                        <p>{{ $error }}</p>
                    @endforeach
                </div>
            </div>
            @endif

            @if(session('status'))
            <div class="bg-green-50 border border-green-200 rounded-xl p-3.5 mb-5 flex items-center gap-2">
                <svg class="w-5 h-5 text-green-600 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"/></svg>
                <p class="text-xs text-green-700 font-medium">{{ session('status') }}</p>
            </div>
            @endif

            <form method="POST" action="{{ route('login') }}" class="space-y-4">
                @csrf

                <div>
                    <label class="form-label">Email Administrator</label>
                    <div class="relative">
                        <input type="email" name="email" value="{{ old('email', 'admin@desakukaru.desa.id') }}"
                               class="form-input pl-10 @error('email') border-red-400 @enderror"
                               placeholder="admin@desakukaru.desa.id"
                               required autofocus autocomplete="email">
                        <svg class="w-5 h-5 text-gray-400 absolute left-3 top-2.5 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                    </div>
                </div>

                <div>
                    <label class="form-label">Kata Sandi</label>
                    <div class="relative">
                        <input type="password" name="password"
                               class="form-input pl-10 @error('password') border-red-400 @enderror"
                               placeholder="••••••••"
                               required autocomplete="current-password">
                        <svg class="w-5 h-5 text-gray-400 absolute left-3 top-2.5 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                    </div>
                </div>

                <div class="flex items-center justify-between text-xs text-gray-500 py-1">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="remember" id="remember" class="rounded border-gray-300 text-secondary focus:ring-secondary">
                        <span>Ingat Sesi Saya</span>
                    </label>
                    <span class="text-gray-400">Default: Admin123!</span>
                </div>

                <button type="submit" class="w-full btn-primary justify-center py-3 text-sm font-semibold rounded-xl shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 transition-all">
                    Masuk ke Dashboard
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                </button>
            </form>

            <div class="mt-6 pt-4 border-t border-gray-100 text-center">
                <p class="text-xs text-gray-400">
                    Sistem Profil & Informasi Desa Suka Baru &copy; {{ date('Y') }}
                </p>
            </div>
        </div>

    </div>
</body>
</html>
