<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buku Tamu - 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; }
        .toggle-option { transition: all 0.3s ease; cursor: pointer; }
        .toggle-option.active { background-color: rgba(255,255,255,0.12); border-color: rgba(129,140,248,0.5); }
        @keyframes blob { 0% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-50px) scale(1.1); } 66% { transform: translate(-20px,20px) scale(0.9); } 100% { transform: translate(0,0) scale(1); } }
        .animate-blob { animation: blob 7s infinite; }
        .animation-delay-2000 { animation-delay: 2s; }
    </style>
</head>

<body class="min-h-screen flex items-center justify-center p-4 lg:p-8 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-[85vh]">

        {{-- LEFT PANEL --}}
        <div class="w-full md:w-5/12 bg-white p-10 flex flex-col justify-between relative overflow-hidden">
            <div class="absolute -top-20 -left-20 w-72 h-72 bg-primary-100 rounded-full mix-blend-multiply filter blur-3xl opacity-50 animate-blob"></div>
            <div class="absolute bottom-0 right-0 w-72 h-72 bg-primary-50 rounded-full mix-blend-multiply filter blur-3xl opacity-50 animate-blob animation-delay-2000"></div>

            <div class="relative z-10">
                <div class="flex items-center gap-3 mb-8">
                    <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>

                <div class="space-y-6 mt-10">
                    <h1 class="text-4xl font-black text-gray-900 leading-tight">
                        Selamat Datang <br> <span class="gradient-text">Kembali!</span>
                    </h1>
                    <p class="text-gray-400 leading-relaxed text-sm">
                        Silakan isi buku tamu digital untuk mencatat kehadiran Anda sebelum beraktivitas di 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>
                            Pencatatan Otomatis
                        </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>
                            Akses Layanan Cepat
                        </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
                        </div>
                    </div>
                </div>
            </div>

            <div class="relative z-10 mt-12">
                <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="mb-6 pb-4">
                <h2 class="text-2xl font-bold text-white tracking-wide mb-2">Buku Tamu</h2>
                <p class="text-primary-300/60 text-sm">Isi data kunjungan Anda hari ini.</p>
            </div>

            <div class="flex-1 overflow-y-auto 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

                {{-- Toggle --}}
                <div class="flex gap-3 mb-6">
                    <label class="toggle-option flex-1 flex items-center gap-3 p-4 rounded-xl border border-white/10 active" id="toggle-member" onclick="switchMode('member')">
                        <input type="radio" name="mode_toggle" value="member" checked class="hidden">
                        <div class="w-5 h-5 rounded-full border-2 border-white/40 flex items-center justify-center" id="radio-member">
                            <div class="w-3 h-3 rounded-full bg-primary-400"></div>
                        </div>
                        <div>
                            <p class="text-white text-sm font-semibold">Anggota</p>
                            <p class="text-primary-300/50 text-[10px]">Sudah punya No. Anggota</p>
                        </div>
                    </label>
                    <label class="toggle-option flex-1 flex items-center gap-3 p-4 rounded-xl border border-white/10" id="toggle-tamu" onclick="switchMode('tamu')">
                        <input type="radio" name="mode_toggle" value="tamu" class="hidden">
                        <div class="w-5 h-5 rounded-full border-2 border-white/40 flex items-center justify-center" id="radio-tamu"></div>
                        <div>
                            <p class="text-white text-sm font-semibold">Pengunjung</p>
                            <p class="text-primary-300/50 text-[10px]">Belum punya No. Anggota</p>
                        </div>
                    </label>
                </div>

                <form method="POST" action="{{ route('buku_tamu.store') }}" class="space-y-6" id="buku-tamu-form">
                    @csrf
                    <input type="hidden" name="tipe" id="tipe-input" value="member">

                    <div id="form-member" class="space-y-5">
                        <div>
                            <label class="block text-xs font-semibold text-primary-200/70 mb-2 ml-1 uppercase tracking-wider">No. Anggota</label>
                            <input type="text" name="no_anggota" placeholder="Masukkan Nomor Anggota"
                                   class="w-full glass-input rounded-xl px-5 py-4 text-sm" value="{{ old('no_anggota') }}">
                        </div>
                    </div>

                    <div id="form-tamu" class="space-y-5" style="display: none;">
                        <div>
                            <label class="block text-xs font-semibold text-primary-200/70 mb-2 ml-1 uppercase tracking-wider">Nama Lengkap</label>
                            <input type="text" name="nama_tamu" placeholder="Isi nama lengkap anda"
                                   class="w-full glass-input rounded-xl px-5 py-4 text-sm" value="{{ old('nama_tamu') }}">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-primary-200/70 mb-2 ml-1 uppercase tracking-wider">Email</label>
                            <input type="email" name="email" placeholder="Isi email anda"
                                   class="w-full glass-input rounded-xl px-5 py-4 text-sm" value="{{ old('email') }}">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-primary-200/70 mb-2 ml-1 uppercase tracking-wider">No HP</label>
                            <input type="text" name="no_hp" placeholder="+62"
                                   class="w-full glass-input rounded-xl px-5 py-4 text-sm" value="{{ old('no_hp') }}">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-primary-200/70 mb-2 ml-1 uppercase tracking-wider">Asal Instansi/ Sekolah / Kampus</label>
                            <input type="text" name="asal_instansi" placeholder="Politeknik Negeri Jember"
                                   class="w-full glass-input rounded-xl px-5 py-4 text-sm" value="{{ old('asal_instansi') }}">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-primary-200/70 mb-2 ml-1 uppercase tracking-wider">Status</label>
                            <div class="relative">
                                <select name="status" class="w-full glass-input rounded-xl px-5 py-4 text-sm appearance-none cursor-pointer">
                                    <option value="" disabled selected>Pilih Status</option>
                                    <option value="Siswa" {{ old('status') == 'Siswa' ? 'selected' : '' }}>Siswa</option>
                                    <option value="Mahasiswa" {{ old('status') == 'Mahasiswa' ? 'selected' : '' }}>Mahasiswa</option>
                                    <option value="Guru/Dosen" {{ old('status') == 'Guru/Dosen' ? 'selected' : '' }}>Guru/Dosen</option>
                                    <option value="Umum" {{ old('status') == 'Umum' ? 'selected' : '' }}>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>

                    <div>
                        <label class="block text-xs font-semibold text-primary-200/70 mb-2 ml-1 uppercase tracking-wider">Tujuan Kunjungan</label>
                        <div class="relative">
                            <select name="keperluan" required class="w-full glass-input rounded-xl px-5 py-4 text-sm appearance-none cursor-pointer">
                                <option value="" disabled selected>Pilih Keperluan</option>
                                <option value="Membaca & Meminjam" {{ old('keperluan') == 'Membaca & Meminjam' ? 'selected' : '' }}>Membaca & Meminjam</option>
                                <option value="Membaca" {{ old('keperluan') == 'Membaca' ? 'selected' : '' }}>Membaca Buku</option>
                                <option value="Meminjam" {{ old('keperluan') == 'Meminjam' ? 'selected' : '' }}>Meminjam Buku</option>
                                <option value="Pengembalian" {{ old('keperluan') == 'Pengembalian' ? 'selected' : '' }}>Pengembalian Buku</option>
                                <option value="Diskusi" {{ old('keperluan') == 'Diskusi' ? 'selected' : '' }}>Diskusi / Kerja Kelompok</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-2 ml-1 uppercase tracking-wider">Tanggal Kunjungan</label>
                        <div class="relative">
                            <input type="text" readonly value="{{ \Carbon\Carbon::now()->translatedFormat('l, d F Y') }}"
                                   class="w-full glass-input rounded-xl px-5 py-4 text-sm cursor-not-allowed opacity-80">
                            <div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none text-primary-300/40">
                                <i class="fas fa-calendar text-xs"></i>
                            </div>
                        </div>
                    </div>

                    <div class="pt-4">
                        <button type="submit"
                                class="group w-full py-4 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 uppercase flex items-center justify-center gap-3">
                            <span>MASUK PERPUSTAKAAN</span>
                            <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                        </button>
                    </div>

                    <div class="text-center pt-2">
                        <p class="text-sm text-primary-200/40">
                            Belum punya akun anggota?
                            <a href="{{ route('register') }}" class="text-white font-semibold hover:text-primary-300 transition underline decoration-primary-400/30 underline-offset-4">
                                Daftar Sekarang
                            </a>
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function switchMode(mode) {
            const formMember = document.getElementById('form-member');
            const formTamu = document.getElementById('form-tamu');
            const toggleMember = document.getElementById('toggle-member');
            const toggleTamu = document.getElementById('toggle-tamu');
            const radioMember = document.getElementById('radio-member');
            const radioTamu = document.getElementById('radio-tamu');
            const tipeInput = document.getElementById('tipe-input');

            if (mode === 'member') {
                formMember.style.display = 'block';
                formTamu.style.display = 'none';
                toggleMember.classList.add('active');
                toggleTamu.classList.remove('active');
                radioMember.innerHTML = '<div class="w-3 h-3 rounded-full bg-primary-400"></div>';
                radioTamu.innerHTML = '';
                tipeInput.value = 'member';
            } else {
                formMember.style.display = 'none';
                formTamu.style.display = 'block';
                toggleMember.classList.remove('active');
                toggleTamu.classList.add('active');
                radioMember.innerHTML = '';
                radioTamu.innerHTML = '<div class="w-3 h-3 rounded-full bg-primary-400"></div>';
                tipeInput.value = 'tamu';
            }
        }
    </script>

</body>
</html>
