<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daftar Anggota - Sarakata</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: { extend: {
                fontFamily: { sans: ['Inter', 'sans-serif'] },
                colors: { primary: { 50:'#eef2ff',100:'#e0e7ff',200:'#c7d2fe',300:'#a5b4fc',400:'#818cf8',500:'#6366f1',600:'#4f46e5',700:'#4338ca',800:'#3730a3',900:'#312e81' } }
            }}
        }
    </script>
    <style>
        .gradient-text { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #2563eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .glass-input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: white; transition: all 0.3s; }
        .glass-input:focus { background: rgba(255,255,255,0.12); border-color: rgba(129,140,248,0.6); box-shadow: 0 0 20px rgba(99,102,241,0.15); outline: none; }
        .glass-input::placeholder { color: rgba(165,180,252,0.4); }
        select.glass-input option { background-color: #312e81; color: white; }
        .no-scrollbar::-webkit-scrollbar { width: 4px; }
        .no-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .no-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 10px; }
    </style>
</head>

<body class="min-h-screen flex items-center justify-center p-4 bg-gray-50 font-sans antialiased">

    <div class="w-full max-w-6xl bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col md:flex-row h-auto md:h-[88vh]">

        {{-- LEFT PANEL --}}
        <div class="w-full md:w-5/12 p-10 md:p-12 flex flex-col justify-between relative overflow-hidden">
            <div class="absolute -top-10 -left-10 w-40 h-40 bg-primary-100 rounded-full blur-3xl opacity-50"></div>
            <div class="absolute bottom-10 right-10 w-60 h-60 bg-primary-50 rounded-full blur-3xl opacity-50"></div>

            <div class="relative z-10">
                <div class="flex items-center gap-3 mb-10">
                    <div class="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-700 rounded-xl flex items-center justify-center shadow-lg shadow-primary-200">
                        <i class="fas fa-book-open text-white text-sm"></i>
                    </div>
                    <span class="font-extrabold text-xl text-gray-900 tracking-tight">Sara<span class="gradient-text">kata</span></span>
                </div>

                <h1 class="text-3xl md:text-4xl font-black text-gray-900 mb-4 leading-tight">
                    Mulai Perjalanan<br>Literasi Anda.
                </h1>
                <p class="text-gray-400 leading-relaxed text-sm">
                    Daftarkan diri Anda sekarang untuk mengakses ribuan koleksi buku digital, jurnal, dan fasilitas perpustakaan.
                </p>

                <div class="mt-8 space-y-3">
                    <div class="flex items-center gap-3 text-sm text-gray-500">
                        <span class="w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-xs"><i class="fas fa-check"></i></span>
                        Akses Peminjaman Buku
                    </div>
                    <div class="flex items-center gap-3 text-sm text-gray-500">
                        <span class="w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-xs"><i class="fas fa-check"></i></span>
                        Riwayat Kunjungan Digital
                    </div>
                    <div class="flex items-center gap-3 text-sm text-gray-500">
                        <span class="w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-xs"><i class="fas fa-check"></i></span>
                        Gratis untuk Sivitas Akademika
                    </div>
                </div>
            </div>

            <div class="relative z-10 mt-6 md:mt-0">
                <p class="text-xs text-gray-300 font-medium">© {{ date('Y') }} Sarakata Library System</p>
            </div>
        </div>

        {{-- RIGHT PANEL (Form) --}}
        <div class="w-full md:w-7/12 bg-gradient-to-br from-primary-900 via-primary-800 to-primary-900 relative flex flex-col p-8 md:p-12">

            <div class="flex justify-between items-center mb-6 border-b border-white/10 pb-4">
                <div>
                    <h2 class="text-2xl font-bold text-white">Formulir Pendaftaran</h2>
                    <p class="text-primary-300/60 text-xs mt-1">Isi data diri dengan lengkap dan benar.</p>
                </div>
                <div class="hidden md:block text-white/10">
                    <i class="fas fa-file-alt text-3xl"></i>
                </div>
            </div>

            <div class="flex-1 overflow-y-auto no-scrollbar pr-2">

                @if ($errors->any())
                    <div class="mb-6 bg-red-500/20 border border-red-500/30 text-white text-xs p-4 rounded-xl">
                        <ul class="list-disc pl-4 space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

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

                    <div>
                        <label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">Nama Lengkap</label>
                        <input type="text" name="name" required placeholder="Masukkan nama sesuai KTP" value="{{ old('name') }}"
                               class="w-full px-5 py-3.5 rounded-xl glass-input text-sm">
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">Email</label>
                            <input type="email" name="email" required placeholder="nama@email.com" value="{{ old('email') }}"
                                   class="w-full px-5 py-3.5 rounded-xl glass-input text-sm">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">No. WhatsApp</label>
                            <input type="text" name="no_hp" required placeholder="08xxxxxxxxxx" value="{{ old('no_hp') }}"
                                   class="w-full px-5 py-3.5 rounded-xl glass-input text-sm">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">Asal Instansi</label>
                        <input type="text" name="instansi" required placeholder="Contoh: Politeknik Negeri Jember" value="{{ old('instansi') }}"
                               class="w-full px-5 py-3.5 rounded-xl glass-input text-sm">
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">Status</label>
                            <div class="relative">
                                <select name="status" required class="w-full px-5 py-3.5 rounded-xl glass-input text-sm appearance-none cursor-pointer">
                                    <option value="" disabled selected>Pilih Status</option>
                                    <option value="Mahasiswa">Mahasiswa</option>
                                    <option value="Siswa">Siswa</option>
                                    <option value="Dosen">Dosen/Guru</option>
                                    <option value="Umum">Umum</option>
                                </select>
                                <div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none text-primary-300/40">
                                    <i class="fas fa-chevron-down text-xs"></i>
                                </div>
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">No. Identitas (NIK/NISN)</label>
                            <input type="text" name="no_ktp" required placeholder="16 digit angka" value="{{ old('no_ktp') }}"
                                   class="w-full px-5 py-3.5 rounded-xl glass-input text-sm">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">Tujuan Pendaftaran</label>
                        <div class="relative">
                            <select name="alasan" required class="w-full px-5 py-3.5 rounded-xl glass-input text-sm appearance-none cursor-pointer">
                                <option value="Membaca & Meminjam">Membaca & Meminjam Buku</option>
                                <option value="Penelitian">Penelitian / Tugas Akhir</option>
                                <option value="Berkunjung">Sekedar Berkunjung</option>
                            </select>
                            <div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none text-primary-300/40">
                                <i class="fas fa-chevron-down text-xs"></i>
                            </div>
                        </div>
                    </div>

                    <div class="border-t border-white/10 my-2"></div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">Password</label>
                            <input type="password" name="password" required placeholder="Min. 8 karakter"
                                   class="w-full px-5 py-3.5 rounded-xl glass-input text-sm">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-primary-200/70 mb-1.5 ml-1 uppercase tracking-wider">Konfirmasi Password</label>
                            <input type="password" name="password_confirmation" required placeholder="Ketik ulang"
                                   class="w-full px-5 py-3.5 rounded-xl glass-input text-sm">
                        </div>
                    </div>

                    <div class="pt-2">
                        <button type="submit"
                                class="w-full py-3.5 bg-gradient-to-r from-primary-400 to-primary-500 hover:from-primary-500 hover:to-primary-600 text-white font-bold rounded-xl shadow-xl shadow-primary-500/20 active:scale-[0.98] transition-all text-sm tracking-wide">
                            <i class="fas fa-user-plus mr-2"></i> Daftar Sekarang
                        </button>
                    </div>
                </form>

                <div class="text-center mt-6 mb-2">
                    <p class="text-xs text-primary-200/50">
                        Sudah memiliki akun anggota?
                        <a href="{{ route('login') }}" class="text-white font-semibold hover:text-primary-300 transition underline decoration-primary-400/40 underline-offset-4">Masuk disini</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
