@extends('tamu.layouts.app')

@section('content')
@php
    $brandLogo = asset('assets/tamu/favicon.ico');
    $popupModal = asset('assets/tamu/popup_modal.jpeg');
@endphp

<div class="min-h-screen bg-gradient-to-br from-[#4d39dc] via-[#5146ee] to-[#12a9dc] text-white">
    <header class="bg-white text-[#111827]">
        <div class="mx-auto flex h-[74px] max-w-[1500px] items-center justify-between px-5 sm:px-8 lg:px-12">
            <a href="{{ route('tamu.home') }}" class="flex items-center gap-3">
                <span class="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-white shadow-[0_8px_18px_rgba(79,70,229,.16)] ring-1 ring-slate-200">
                    <img src="{{ $brandLogo }}" alt="DPRD Ogan Ilir" class="h-10 w-10 object-contain" onerror="this.style.display='none'; this.nextElementSibling.style.display='grid';">
                    <span class="hidden h-full w-full place-items-center bg-[#4f46e5] text-xl font-black text-white">D</span>
                </span>
                <span>
                    <span class="block text-[18px] font-black uppercase leading-tight tracking-wide text-[#4f46e5]">Layanan Tamu DPRD</span>
                    <span class="block text-sm font-medium text-[#64748b]">Akses daftar hadir melalui QR resmi</span>
                </span>
            </a>
            <nav class="flex items-center gap-5 text-base font-bold text-[#344054]">
                <a href="{{ route('tamu.survey') }}" class="transition hover:text-[#4f46e5]">Isi Survey</a>
                <a href="{{ route('tamu.admin.login') }}" class="rounded-full bg-[#111827] px-6 py-3 text-white shadow-sm transition hover:bg-[#0b1220]">Login</a>
            </nav>
        </div>
    </header>

    <div class="mx-auto grid min-h-[calc(100vh-74px)] max-w-[1500px] items-center gap-8 px-5 py-8 sm:px-8 lg:grid-cols-[.95fr_1.05fr] lg:px-12 lg:py-6">
        <section class="max-w-[620px]">
            <p class="inline-flex rounded-full bg-white/15 px-5 py-2.5 text-base font-bold shadow-sm ring-1 ring-white/20">Layanan kunjungan tamu</p>
            <h1 class="mt-5 text-4xl font-black leading-[1.06] tracking-normal md:text-6xl">Selamat Datang di Layanan Tamu DPRD</h1>
            <p class="mt-5 max-w-[620px] text-xl font-normal leading-relaxed text-white/95">
                Formulir daftar hadir hanya dapat diakses melalui QR code resmi yang tersedia di kantor. Silakan pindai QR code untuk membuka formulir kunjungan.
            </p>
            <div class="mt-6 grid gap-3 md:grid-cols-3">
                <div class="min-h-[104px] rounded-[18px] border border-white/20 bg-white/5 p-4">
                    <h3 class="text-base font-black">1. Pindai QR</h3>
                    <p class="mt-2 text-base leading-snug text-white/90">Gunakan QR code resmi di kantor.</p>
                </div>
                <div class="min-h-[104px] rounded-[18px] border border-white/20 bg-white/5 p-4">
                    <h3 class="text-base font-black">2. Isi Form</h3>
                    <p class="mt-2 text-base leading-snug text-white/90">Lengkapi data kunjungan.</p>
                </div>
                <div class="min-h-[104px] rounded-[18px] border border-white/20 bg-white/5 p-4">
                    <h3 class="text-base font-black">3. Simpan Kode</h3>
                    <p class="mt-2 text-base leading-snug text-white/90">Kode dipakai untuk survey.</p>
                </div>
            </div>
        </section>

        <section class="rounded-[28px] bg-white p-6 text-[#111827] shadow-[0_20px_54px_rgba(15,23,42,.14)] ring-1 ring-slate-200 sm:p-8">
            <p class="text-base font-black uppercase tracking-wide text-[#4f46e5]">Akses Formulir</p>
            <h2 class="mt-2 text-3xl font-black leading-tight">Daftar hadir melalui QR code</h2>
            <p class="mt-3 text-lg leading-relaxed text-[#64748b]">
                Halaman utama tidak menampilkan formulir daftar hadir. Formulir hanya terbuka dari link unik yang dibuat admin dan ditempel sebagai QR code di kantor.
            </p>

            <div class="mt-6 rounded-[18px] border border-[#dbe3f3] bg-[#eef3ff] p-5">
                <div class="flex gap-5">
                    <div class="flex h-[76px] w-11 shrink-0 items-center justify-center rounded-full bg-[#4f46e5] text-white">
                        <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                            <path d="M4 4h6v6H4V4Zm10 0h6v6h-6V4ZM4 14h6v6H4v-6Zm11 0h2v2h-2v-2Zm3 0h2v2h-2v-2Zm-3 4h2v2h-2v-2Zm3 0h2v2h-2v-2Z" stroke="currentColor" stroke-width="2"/>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-xl font-black">Pindai QR Code Resmi</h3>
                        <p class="mt-2 text-lg leading-relaxed text-[#475569]">Jika link di-reset admin, QR code lama otomatis tidak aktif. Gunakan QR terbaru yang tersedia di kantor.</p>
                    </div>
                </div>
            </div>

            <div class="mt-6 grid gap-3">
                <a href="{{ route('tamu.survey') }}" class="block rounded-[16px] border border-[#dbe3f3] p-5 transition hover:border-[#4f46e5] hover:bg-slate-50">
                    <span class="block text-xl font-black">Isi Survey</span>
                    <span class="mt-1 block text-lg text-[#475569]">Masukkan kode kunjungan setelah daftar hadir berhasil.</span>
                </a>
                <a href="{{ route('tamu.admin.login') }}" class="block rounded-[16px] border border-[#dbe3f3] p-5 transition hover:border-[#4f46e5] hover:bg-slate-50">
                    <span class="block text-xl font-black">Login Admin</span>
                    <span class="mt-1 block text-lg text-[#475569]">Kelola data tamu, survey, export, dan link QR.</span>
                </a>
            </div>

            <div class="mt-6 rounded-[18px] border border-[#86efac] bg-[#ecfdf5] px-6 py-4 text-lg font-black text-[#047857]">
                Untuke mengisi daftar hadir, silakan pindai QR code di area kantor.
            </div>
        </section>
    </div>

    <div id="homePopupModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-[#111827]/70 px-4 py-6 backdrop-blur-sm">
        <div class="relative w-full max-w-[760px] overflow-hidden rounded-[26px] bg-white shadow-[0_24px_80px_rgba(15,23,42,.35)] ring-1 ring-white/40">
            <button type="button" id="closeHomePopup" aria-label="Tutup popup" class="absolute right-4 top-4 z-10 grid h-10 w-10 place-items-center rounded-full bg-[#111827]/90 text-2xl font-bold leading-none text-white shadow-lg transition hover:bg-[#0b1220]">&times;</button>
            <img src="{{ $popupModal }}" alt="Informasi Layanan Tamu DPRD" class="max-h-[82vh] w-full object-contain">
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var modal = document.getElementById('homePopupModal');
        var closeButton = document.getElementById('closeHomePopup');

        modal.classList.remove('hidden');
        modal.classList.add('flex');

        function closeModal() {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }

        closeButton.addEventListener('click', closeModal);
        modal.addEventListener('click', function (event) {
            if (event.target === modal) {
                closeModal();
            }
        });
    });
</script>
@endsection