@extends('layouts.frontend')

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">

<style>
    body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; }
    
    .form-label {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.1em;
        color: #64748b;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
        display: block;
    }

    .input-zhi {
        width: 100%;
        padding: 1rem 1.25rem;
        background-color: #ffffff;
        border: 2px solid #f1f5f9;
        border-radius: 1rem;
        outline: none;
        transition: all 0.3s ease;
        font-weight: 600;
        color: #1e293b;
    }

    .input-zhi:focus {
        border-color: #facc15;
        box-shadow: 0 10px 15px -3px rgba(250, 204, 21, 0.1);
    }

    /* Struk Digital Style */
    .receipt-border {
        background-image: radial-gradient(circle at 10px 10px, transparent 10px, white 10px);
        background-size: 20px 20px;
        background-position: -10px -10px;
    }
</style>

<div class="py-24 min-h-screen">
    <div class="max-w-4xl mx-auto px-6">
        
        <div class="flex flex-col md:flex-row md:items-center justify-between mb-12 gap-6">
            <div class="flex items-center">
                <a href="{{ route('kunjungan.index') }}" class="group p-3 bg-white rounded-2xl shadow-sm hover:bg-slate-50 transition mr-5 border border-slate-100">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-600 group-hover:-translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                </a>
                <div>
                    <h1 class="text-3xl font-black text-slate-900 tracking-tighter">Formulir Pengajuan</h1>
                </div>
            </div>
        </div>

        @if(session('success_tiket'))
        <div class="fixed inset-0 z-50 flex items-center justify-center p-6 bg-slate-900/80 backdrop-blur-md">
            <div class="bg-white shadow-2xl max-w-sm w-full relative animate-in fade-in zoom-in duration-300" style="border-radius: 1.5rem 1.5rem 0 0;">
                
                <div class="absolute -top-3 left-0 right-0 flex justify-around overflow-hidden">
                    @for($i=0; $i<15; $i++)
                        <div class="w-6 h-6 bg-slate-900/0 border-b-white border-[12px] border-transparent rotate-45 mt-1"></div>
                    @endfor
                </div>

                <div class="p-8 text-center border-b border-dashed border-slate-200">
                    <div class="w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
                        </svg>
                    </div>
                    <h2 class="font-black text-2xl text-slate-900 uppercase">Berhasil!</h2>
                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Pengajuan Telah Diterima</p>
                </div>

                <div class="p-8 space-y-4">
                    <div class="flex justify-between items-center">
                        <span class="text-[10px] font-bold text-slate-400 uppercase">Kode Tiket</span>
                        <span class="text-xs font-black text-slate-900 bg-yellow-100 px-3 py-1 rounded-md">{{ session('success_tiket') }}</span>
                    </div>
                    <div class="py-6 border-y border-dashed border-slate-200 text-center">
                        <p class="text-[9px] font-black text-slate-300 uppercase mb-2 tracking-[0.2em]">Scan / Salin Kode Ini</p>
                        <h1 class="text-4xl font-mono font-black text-green-800 tracking-tighter">{{ session('success_tiket') }}</h1>
                    </div>
                    <p class="text-[10px] text-slate-400 leading-relaxed text-center italic">
                        Gunakan kode di atas untuk memantau status persetujuan kunjungan Anda pada halaman lacak.
                    </p>
                </div>

                <div class="px-8 pb-10">
                    <button onclick="window.location.href='{{ route('kunjungan.index') }}'" class="w-full py-4 bg-slate-900 text-white text-xs font-black rounded-2xl hover:bg-green-700 transition-all shadow-xl shadow-slate-200 uppercase tracking-widest">
                        Tutup & Selesai
                    </button>
                </div>

                <div class="absolute -bottom-3 left-0 right-0 flex justify-around overflow-hidden h-6">
                    @for($i=0; $i<15; $i++)
                        <div class="w-6 h-6 bg-white rotate-45 shadow-sm border border-slate-50"></div>
                    @endfor
                </div>
            </div>
        </div>
        @endif

        <div class="bg-white rounded-[2.5rem] shadow-xl shadow-slate-200/50 border border-slate-100 overflow-hidden">
            <div class="p-8 md:p-12">
                <form action="{{ route('kunjungan.store') }}" method="POST">
                    @csrf
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8">
                        
                        <div class="space-y-6">
                            <div>
                                <label class="form-label">Nama Kampus / Instansi</label>
                                <input type="text" name="nama_kampus" placeholder="Contoh: Universitas Lambung Mangkurat" class="input-zhi" required>
                            </div>

                            <div>
                                <label class="form-label">Nama Penanggung Jawab</label>
                                <input type="text" name="penanggung_jawab" placeholder="Nama lengkap & gelar jika ada" class="input-zhi" required>
                            </div>

                            <div>
                                <label class="form-label">Tujuan Kunjungan</label>
                                <textarea name="tujuan" rows="5" placeholder="Jelaskan maksud kunjungan Anda..." class="input-zhi" required></textarea>
                            </div>
                        </div>

                        <div class="space-y-6">
                            <div>
                                <label class="form-label">Prodi / Jurusan</label>
                                <input type="text" name="prodi" placeholder="Contoh: Teknologi Pangan" class="input-zhi">
                            </div>

                            <div>
                                <label class="form-label">No. WhatsApp Aktif</label>
                                <input type="number" name="no_hp" placeholder="0812XXXXXXXX" class="input-zhi" required>
                            </div>

                            <div>
                                <label class="form-label">Rencana Tanggal</label>
                                <input type="date" name="tanggal_kunjungan" class="input-zhi" required>
                                
                            </div>
                        </div>
                    </div>

                    <div class="mt-12 pt-10 border-t border-slate-50">
                        <button type="submit" class="w-full bg-green-800 text-white font-black py-5 rounded-2xl text-xs uppercase tracking-[0.2em] shadow-2xl shadow-green-900/30 hover:bg-yellow-400 hover:text-green-900 transition-all active:scale-95">
                            Kirim Pengajuan Kunjungan
                        </button>
                    </div>

                </form>
            </div>
        </div>
        
        <p class="mt-8 text-center text-xs font-bold text-slate-400 uppercase tracking-widest">
            Tempe Zhi &copy; {{ date('2026') }} - Modern & Hygienic Production
        </p>
    </div>
</div>
@endsection