@extends('tamu.layouts.app')

@section('content')
@php
    $documentIcon = 'M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm7 1.5V9h4.5';
    $suratPermohonanUrl = $guest->surat_permohonan ? asset('storage/' . $guest->surat_permohonan) : null;
    $suratTugasUrl = $guest->surat_tugas ? asset('storage/' . $guest->surat_tugas) : null;
@endphp

<div class="min-h-screen bg-white px-5 py-8 text-[#111827] lg:px-8">
    <div class="mx-auto max-w-[1360px]">
        <section class="rounded-[14px] border border-[#dbe3f3] bg-white px-6 py-6 shadow-sm">
            <div class="flex flex-col gap-6 md:flex-row md:items-start md:justify-between">
                <div>
                    <p class="text-sm font-black uppercase tracking-[.22em] text-[#475569]">Kode Kunjungan</p>
                    <h1 class="mt-2 break-all text-3xl font-black tracking-[.14em] md:text-4xl">{{ $guest->kode_booking }}</h1>
                </div>
                <div class="text-left md:text-right">
                    <p class="text-sm font-black uppercase tracking-[.22em] text-[#475569]">Tanggal Kunjungan</p>
                    <p class="mt-1 text-2xl font-black">{{ optional($guest->tanggal_kunjungan)->format('d M Y') }}</p>
                    <span class="mt-3 inline-flex rounded-full bg-[#eef2ff] px-5 py-3 text-lg font-black">{{ substr((string) $guest->jam_kunjungan, 0, 8) }}</span>
                </div>
            </div>
        </section>

        <div class="mt-12 grid gap-7 lg:grid-cols-2">
            <section class="rounded-[10px] bg-[#f8fafc] p-6">
                <h2 class="flex items-center gap-2 border-b border-[#e2e8f0] pb-3 text-2xl font-black">
                    <svg class="h-6 w-6 text-[#4f46e5]" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-8 9a8 8 0 0 1 16 0" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                    Informasi Pemohon
                </h2>
                <dl class="mt-6 space-y-5 text-xl">
                    <div class="flex gap-6"><dt class="w-36 shrink-0 text-[#6b7280]">Nama Lengkap</dt><dd class="font-medium">{{ $guest->nama_pemohon }}</dd></div>
                    <div class="flex gap-6"><dt class="w-36 shrink-0 text-[#6b7280]">Email</dt><dd class="font-medium">{{ $guest->email_pemohon }}</dd></div>
                    <div class="flex gap-6"><dt class="w-36 shrink-0 text-[#6b7280]">No. WhatsApp</dt><dd class="font-medium">{{ $guest->no_wa }}</dd></div>
                    <div class="flex gap-6"><dt class="w-36 shrink-0 text-[#6b7280]">Instansi</dt><dd class="font-medium">{{ $guest->instansi }}</dd></div>
                    <div class="flex gap-6"><dt class="w-36 shrink-0 text-[#6b7280]">Alamat</dt><dd class="font-medium">{{ $guest->province->nama_provinsi ?? '-' }}, {{ $guest->regency->nama_kabupaten ?? '-' }}</dd></div>
                </dl>
            </section>

            <section class="rounded-[10px] bg-[#f8fafc] p-6">
                <h2 class="flex items-center gap-2 border-b border-[#e2e8f0] pb-3 text-2xl font-black">
                    <svg class="h-6 w-6 text-[#4f46e5]" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M7 3v4M17 3v4M4 9h16M6 5h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                    Detail Kunjungan
                </h2>
                <dl class="mt-6 space-y-5 text-xl">
                    <div class="flex gap-6"><dt class="w-28 shrink-0 text-[#6b7280]">Tanggal</dt><dd class="font-medium">{{ optional($guest->tanggal_kunjungan)->format('d M Y') }}</dd></div>
                    <div class="flex gap-6"><dt class="w-28 shrink-0 text-[#6b7280]">Jam</dt><dd class="font-medium">{{ substr((string) $guest->jam_kunjungan, 0, 8) }}</dd></div>
                    <div class="flex gap-6"><dt class="w-28 shrink-0 text-[#6b7280]">Tujuan</dt><dd class="font-medium">{{ $guest->tujuan }}</dd></div>
                    <div class="flex gap-6"><dt class="w-28 shrink-0 text-[#6b7280]">Materi</dt><dd class="font-medium">{{ $guest->materi }}</dd></div>
                </dl>
            </section>
        </div>

        <section class="mt-7 rounded-[10px] bg-[#f8fafc] p-6">
            <h2 class="flex items-center gap-2 border-b border-[#e2e8f0] pb-3 text-2xl font-black">
                <svg class="h-6 w-6 text-[#4f46e5]" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm8 0a4 4 0 1 0 0-8M2 21a6 6 0 0 1 12 0m2-8a6 6 0 0 1 6 6v2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                Anggota Rombongan <span class="text-[#6b7280]">({{ $guest->members->count() }} orang)</span>
            </h2>
            @if($guest->members->isNotEmpty())
                <ul class="mt-5 list-disc space-y-2 pl-8 text-2xl leading-relaxed text-[#475569]">
                    @foreach($guest->members as $member)
                        <li>{{ $member->nama }} - {{ $member->jabatan }}</li>
                    @endforeach
                </ul>
            @else
                <p class="mt-5 text-lg text-[#6b7280]">Belum ada anggota rombongan.</p>
            @endif
        </section>

        <section class="mt-7 rounded-[10px] bg-[#f8fafc] p-6">
            <h2 class="flex items-center gap-2 border-b border-[#e2e8f0] pb-3 text-2xl font-black">
                <svg class="h-6 w-6 text-[#4f46e5]" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="{{ $documentIcon }}" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>
                Dokumen Pendukung
            </h2>
            <div class="mt-5 space-y-4">
                <a href="{{ $suratPermohonanUrl ?: '#' }}" target="_blank" class="flex items-center justify-between gap-4 rounded-[10px] border border-[#dbe3f3] bg-white p-5 {{ $suratPermohonanUrl ? 'hover:border-[#4f46e5]' : 'pointer-events-none opacity-60' }}">
                    <span class="flex items-center gap-4">
                        <svg class="h-8 w-8 text-[#4f46e5]" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="{{ $documentIcon }}" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>
                        <span><span class="block text-lg font-black">Surat Permohonan</span><span class="block break-all text-[#94a3b8]">{{ $guest->surat_permohonan ? basename($guest->surat_permohonan) : 'Tidak ada file' }}</span></span>
                    </span>
                    <span class="text-2xl text-[#94a3b8]">↗</span>
                </a>
                <a href="{{ $suratTugasUrl ?: '#' }}" target="_blank" class="flex items-center justify-between gap-4 rounded-[10px] border border-[#dbe3f3] bg-white p-5 {{ $suratTugasUrl ? 'hover:border-[#4f46e5]' : 'pointer-events-none opacity-60' }}">
                    <span class="flex items-center gap-4">
                        <svg class="h-8 w-8 text-[#4f46e5]" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="{{ $documentIcon }}" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>
                        <span><span class="block text-lg font-black">Surat Tugas</span><span class="block break-all text-[#94a3b8]">{{ $guest->surat_tugas ? basename($guest->surat_tugas) : 'Tidak ada file' }}</span></span>
                    </span>
                    <span class="text-2xl text-[#94a3b8]">↗</span>
                </a>
            </div>
        </section>

        <div class="mt-8 flex gap-5 border-t border-[#e2e8f0] pt-6">
            <a href="{{ route('tamu.dashboard.guest-edit', $guest) }}" class="rounded-[10px] bg-[#4f46e5] px-6 py-3 text-lg font-medium text-white">Edit Data</a>
            <a href="{{ route('tamu.dashboard', ['tab' => 'data']) }}" class="px-6 py-3 text-lg font-medium text-[#344054]">Kembali</a>
        </div>
    </div>
</div>
@endsection