@extends('tamu.layouts.app')

@section('content')
<div class="flex min-h-screen items-center justify-center bg-gradient-to-br from-[#4d39dc] via-[#5146ee] to-[#12a9dc] px-4 py-8">
    <div class="w-full max-w-2xl overflow-hidden rounded-[30px] bg-white shadow-[0_24px_80px_rgba(15,23,42,.25)] ring-1 ring-white/40">
        <div class="bg-[#111827] px-6 py-6 text-center text-white sm:px-8">
            <p class="text-sm font-black uppercase tracking-wide text-[#a5b4fc]">Pendaftaran Berhasil</p>
            <h1 class="mt-2 text-3xl font-black leading-tight md:text-4xl">Daftar Hadir Tamu DPRD Terkirim</h1>
            <p class="mt-3 text-sm leading-relaxed text-slate-300">Simpan kode kunjungan ini untuk mengisi survey dan verifikasi data kunjungan.</p>
        </div>

        <div class="p-6 text-center sm:p-8">
            <p class="text-sm font-black uppercase tracking-wide text-[#4f46e5]">Kode Kunjungan</p>
            <div id="kodeKunjungan" class="mt-3 break-all rounded-[20px] border border-[#dbe3f3] bg-[#eef2ff] px-5 py-5 text-2xl font-black text-[#4f46e5] sm:text-3xl">{{ $kode_booking }}</div>

            <div class="mt-5 flex flex-col gap-3 sm:flex-row sm:justify-center">
                <button type="button" id="copyKodeButton" class="inline-flex h-12 items-center justify-center rounded-full border border-[#cbd5e1] bg-white px-6 text-base font-black text-[#344054] transition hover:border-[#4f46e5] hover:text-[#4f46e5]">
                    Salin Kode Kunjungan
                </button>
                <a href="{{ route('tamu.survey.form', $kode_booking) }}" class="inline-flex h-12 items-center justify-center rounded-full bg-[#4f46e5] px-6 text-base font-black text-white shadow-[0_14px_24px_rgba(79,70,229,.22)] transition hover:bg-[#4338ca]">
                    Isi Survey
                </a>
            </div>

            <a href="{{ route('tamu.home') }}" class="mt-4 inline-flex h-12 items-center justify-center rounded-full bg-[#111827] px-7 text-base font-black text-white transition hover:bg-[#0b1220]">
                Kembali ke Beranda
            </a>

            <p id="copyKodeMessage" class="mt-4 hidden text-sm font-bold text-[#047857]">Kode kunjungan berhasil disalin.</p>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var copyButton = document.getElementById('copyKodeButton');
        var codeElement = document.getElementById('kodeKunjungan');
        var message = document.getElementById('copyKodeMessage');

        copyButton.addEventListener('click', function () {
            var code = codeElement.textContent.trim();

            navigator.clipboard.writeText(code).then(function () {
                message.classList.remove('hidden');
                setTimeout(function () {
                    message.classList.add('hidden');
                }, 2200);
            });
        });
    });
</script>
@endsection