@extends('layouts.frontend')

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

<style>
    body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #fcfdfd; }

    /* Container Utama dengan Border Kuat */
    .status-card {
        border: 4px solid #064e3b;
        background: white;
        border-radius: 32px;
        overflow: hidden;
    }

    /* Penanda Status di Pojok */
    .status-ribbon {
        padding: 12px 24px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 12px;
    }
    .status-disetujui { background: #10b981; color: white; }
    .status-menunggu { background: #facc15; color: #064e3b; }
    .status-ditolak { background: #ef4444; color: white; }

    .data-label {
        font-size: 10px;
        font-weight: 800;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        display: block;
        margin-bottom: 6px;
    }

    .data-content {
        font-size: 16px;
        font-weight: 700;
        color: #1e293b;
        line-height: 1.4;
    }

    /* Garis dekoratif ala dokumen resmi */
    .divider-dots {
        border-top: 2px dashed #e2e8f0;
        margin: 24px 0;
    }
</style>

<div class="py-24 px-6">
    <div class="max-w-4xl mx-auto">
        <div class="status-card">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center bg-slate-50 p-8 border-b-4 border-[#064e3b]">
                <div>
                    <h1 class="text-3xl font-900 text-[#064e3b] tracking-tighter uppercase leading-none">
                        Hasil Pelacakan <br><span class="text-slate-400 text-lg">Tiket #{{ $kunjungan->kode_tiket }}</span>
                    </h1>
                </div>
                <div class="mt-4 md:mt-0 status-ribbon @if($kunjungan->status == 'disetujui') status-disetujui @elseif($kunjungan->status == 'ditolak') status-ditolak @else status-menunggu @endif">
                    ● {{ strtoupper($kunjungan->status) }}
                </div>
            </div>

            <div class="p-8 md:p-12">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                    
                    <div class="space-y-8">
                        <div>
                            <span class="data-label">Nama Kampus / Instansi</span>
                            <p class="data-content text-xl">{{ $kunjungan->nama_kampus }}</p>
                        </div>
                        
                        <div>
                            <span class="data-label">Program Studi</span>
                            <p class="data-content">{{ $kunjungan->prodi ?? '-' }}</p>
                        </div>

                        <div>
                            <span class="data-label">Penanggung Jawab</span>
                            <p class="data-content italic underline decoration-yellow-400 decoration-4 underline-offset-4">
                                {{ $kunjungan->penanggung_jawab }}
                            </p>
                        </div>
                    </div>

                    <div class="space-y-8">
                        <div>
                            <span class="data-label">Rencana Tanggal</span>
                            <div class="flex items-center gap-3">
                                <div class="bg-[#064e3b] text-white p-2 rounded-lg">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                </div>
                                <p class="data-content text-xl">
                                    {{ \Carbon\Carbon::parse($kunjungan->tanggal_kunjungan)->translatedFormat('d F Y') }}
                                </p>
                            </div>
                        </div>

                        <div>
                            <span class="data-label">Kontak WhatsApp</span>
                            <p class="data-content text-green-700">{{ $kunjungan->no_hp }}</p>
                        </div>
                    </div>
                </div>

                <div class="divider-dots"></div>

                <div class="mb-10">
                    <span class="data-label">Tujuan Kunjungan</span>
                    <p class="text-slate-600 leading-relaxed font-medium bg-slate-50 p-6 rounded-2xl border border-slate-100">
                        "{{ $kunjungan->tujuan }}"
                    </p>
                </div>

                <div>
                    <span class="data-label">Catatan Resmi Admin</span>
                    <div class="relative mt-4">
                        <div class="absolute -left-2 top-0 bottom-0 w-1.5 bg-yellow-400 rounded-full"></div>
                        <p class="pl-6 font-bold text-slate-800 italic text-lg leading-snug">
                            @if($kunjungan->catatan)
                                {{ $kunjungan->catatan }}
                            @else
                                <span class="text-slate-300 font-normal">Belum ada catatan dari admin.</span>
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-12 flex flex-col md:flex-row gap-4">
            <a href="{{ route('kunjungan.index') }}" class="flex-1 text-center py-4 bg-[#064e3b] text-white border-2 border-[#064e3b] font-black uppercase text-[11px] tracking-widest hover:bg-[#053d2e] hover:shadow-xl transition-all rounded-xl ">Kembali </a>
        </div>
    </div>
</div>
@endsection