@extends('izin_tamu.layout')

@section('title', 'Dashboard Admin')

@section('content')
<div class="h-screen flex flex-col bg-slate-900 text-gray-100 overflow-hidden">

    <!-- Header -->
    <div class="flex flex-col md:flex-row justify-between items-center p-4 md:p-6 bg-slate-800 shadow space-y-3 md:space-y-0">
        <div class="flex flex-col items-center text-center">
            <img src="{{ asset('images/logo.png') }}" alt="Logo" class="w-24 h-24 object-contain mb-2">
            <h2 class="text-xl md:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-pink-500">
                Dashboard - Admin
            </h2>
        </div>

        <div class="flex items-center gap-3 w-full md:w-auto justify-end">
            <a href="{{ route('izin_tamu.admin.export_filter', request()->all()) }}"
               class="flex-shrink-0 px-3 py-2 rounded-lg bg-green-600 text-white hover:bg-green-700 transition text-sm font-medium">
                Export Tamu
            </a>
            <a href="{{ route('izin_tamu.export_all_safety') }}"
               class="px-3 py-1 rounded-lg bg-amber-600 text-white hover:bg-amber-700 transition">
                Export Safety
            </a>
            <a href="{{ route('admin.logout') }}"
               class="flex-shrink-0 px-4 py-2 rounded-lg font-semibold bg-red-600 hover:bg-red-700 text-white transition text-sm"
               onclick="return confirm('Yakin mau logout?')">
                Logout
            </a>
        </div>
    </div>

    <!-- Body -->
    <div class="flex-1 overflow-y-auto p-4 md:p-6 bg-slate-900 scrollbar-thin scrollbar-thumb-slate-700 scrollbar-track-slate-800 transition-colors duration-300">

        @if (session('success'))
            <div class="mb-4 p-4 bg-green-800/50 text-green-300 rounded-xl border border-green-700 flex items-center space-x-3">
                <span class="font-medium">{{ session('success') }}</span>
            </div>
        @endif

        <div class="h-full">

            <!-- 1. Desktop Table View (Expandable) -->
            <div id="desktop-table-container" class="hidden md:block overflow-x-auto bg-slate-800 rounded-2xl shadow-inner border border-slate-700 h-full">
                <table class="min-w-full border-collapse divide-y divide-slate-700 text-xs">
                    <thead class="bg-slate-700 text-gray-300 uppercase tracking-wider sticky top-0 z-10 shadow-lg">
                        <tr>
                            <th class="px-4 py-3 text-left w-48">Perusahaan</th>
                            <th class="px-4 py-3 text-left w-48">Nama Tamu</th>
                            <th class="px-2 py-3 text-center w-16">Jml</th>
                            <th class="px-2 py-3 text-center w-24">Jenis</th>
                            <th class="px-2 py-3 text-center w-28">Tanggal</th>
                            <th class="px-2 py-3 text-center w-32">Waktu</th>
                            <th class="px-2 py-3 text-center w-28">Status</th>
                            <th class="px-2 py-3 text-center w-32">Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="guest-table-body" class="divide-y divide-slate-700/40 text-sm">
                        @forelse ($data as $item)
                            @php
                                $namaList = array_map('trim', explode(',', $item->nama_tamu));
                                $firstName = $namaList[0];
                                $extraCount = count($namaList) - 1;
                            @endphp

                            <!-- ROW UTAMA (Klik untuk expand) -->
                            <tr class="cursor-pointer hover:bg-slate-700/30 transition border-b border-slate-700/50"
                                onclick="toggleDetail('detail-{{ $item->id }}')">
                                <td class="px-4 py-3 font-medium text-indigo-300">{{ $item->perusahaan }}</td>
                                <td class="px-4 py-3">
                                    {{ $firstName }}
                                    @if ($extraCount > 0)
                                        <span class="text-xs text-cyan-400 ml-1">(+{{ $extraCount }} lainnya)</span>
                                    @endif
                                </td>
                                <td class="px-2 py-3 text-center">{{ $item->jumlah_tamu }}</td>
                                <td class="px-2 py-3 text-center">{{ $item->jenis_tamu }}</td>
                                <td class="px-2 py-3 text-center">{{ \Carbon\Carbon::parse($item->waktu_mulai)->format('d/m/Y') }}</td>
                                <td class="px-2 py-3 text-center">
                                    {{ \Carbon\Carbon::parse($item->waktu_mulai)->format('H:i') }} - {{ \Carbon\Carbon::parse($item->waktu_selesai)->format('H:i') }}
                                </td>
                                <td class="px-2 py-3 text-center">
                                    @if ($item->status_hadir === 'hadir')
                                        <span class="px-2 py-1 rounded-full text-[10px] font-bold bg-green-500/20 text-green-300 border border-green-700">Hadir</span>
                                    @else
                                        <span class="px-2 py-1 rounded-full text-[10px] font-bold bg-red-500/20 text-red-300 border border-red-700">Belum</span>
                                    @endif
                                </td>
                                <td class="px-2 py-3 text-center" onclick="event.stopPropagation()">
                                    <div class="flex justify-center gap-2">
                                        <a href="{{ route('izin_tamu.edit', $item->id) }}" class="px-2 py-1 text-xs bg-indigo-600 hover:bg-indigo-700 rounded text-white">Edit</a>
                                        <a href="{{ route('izin_tamu.safety', $item->id) }}" class="px-2 py-1 text-xs bg-cyan-600 hover:bg-cyan-700 rounded text-white">Safety</a>
                                        <form action="{{ route('izin_tamu.destroy', $item->id) }}" method="POST" class="inline delete-confirm">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="px-2 py-1 text-xs bg-red-600 hover:bg-red-700 rounded text-white">Hapus</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>

                            <!-- ROW DETAIL (Hidden by default) -->
                            <tr id="detail-{{ $item->id }}" class="hidden bg-slate-800/50">
                                <td colspan="8" class="px-6 py-4">
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-xs text-gray-300">
                                        
                                        <!-- Kolom 1: Detail Kunjungan -->
                                        <div class="space-y-2">
                                            <h4 class="font-bold text-indigo-400 border-b border-slate-600 pb-1 mb-2">Detail Kunjungan</h4>
                                            <p><span class="font-semibold text-gray-400 w-24 inline-block">Agenda:</span> {{ $item->agenda_kunjungan }}</p>
                                            <p><span class="font-semibold text-gray-400 w-24 inline-block">Lokasi:</span> {{ $item->lokasi_penerimaan }}</p>
                                            <p><span class="font-semibold text-gray-400 w-24 inline-block">Tujuan:</span> {{ $item->yang_ditemui }}</p>
                                            <p><span class="font-semibold text-gray-400 w-24 inline-block">User:</span> {{ $item->user_ditemui }}</p>
                                            <p><span class="font-semibold text-gray-400 w-24 inline-block">Kendaraan:</span> {{ $item->jenis_kendaraan }} {{ $item->no_pol }}</p>
                                        </div>

                                        <!-- Kolom 2: Waktu & Logistik -->
                                        <div class="space-y-2">
                                            <h4 class="font-bold text-indigo-400 border-b border-slate-600 pb-1 mb-2">Waktu & Fasilitas</h4>
                                            <p><span class="font-semibold text-gray-400 w-24 inline-block">Input:</span> {{ $item->jam_input ? \Carbon\Carbon::parse($item->jam_input)->format('H:i:s') : '-' }}</p>
                                            <p><span class="font-semibold text-gray-400 w-24 inline-block">Masuk:</span> {{ $item->jam_masuk ? \Carbon\Carbon::parse($item->jam_masuk)->format('H:i') : '-' }}</p>
                                            <p><span class="font-semibold text-gray-400 w-24 inline-block">Keluar:</span> {{ $item->jam_keluar ? \Carbon\Carbon::parse($item->jam_keluar)->format('H:i') : '-' }}</p>
                                            <div class="mt-2 pt-2 border-t border-slate-700">
                                                <p class="flex items-center">
                                                    <span class="font-semibold text-gray-400 w-24 inline-block">Konsumsi:</span> 
                                                    @if($item->sudah_konsumsi) 
                                                        <span class="text-green-400 font-bold">✅ {{ $item->konsumsi_porsi }} Porsi</span>
                                                    @else 
                                                        <span class="text-gray-500">❌</span>
                                                    @endif
                                                </p>
                                                <p class="flex items-center mt-1">
                                                    <span class="font-semibold text-gray-400 w-24 inline-block">APD:</span>
                                                    @if($item->sudah_apd) ✅ @else ❌ @endif
                                                </p>
                                            </div>
                                        </div>

                                        <!-- Kolom 3: Daftar Nama & TTD -->
                                        <div class="space-y-2">
                                            <h4 class="font-bold text-indigo-400 border-b border-slate-600 pb-1 mb-2">Identitas & Validasi</h4>
                                            <div class="mb-3">
                                                <span class="font-semibold text-gray-400 block mb-1">Daftar Nama Lengkap:</span>
                                                <div class="bg-slate-900 p-2 rounded text-gray-300 border border-slate-700 max-h-20 overflow-y-auto">
                                                    {{ $item->nama_tamu }}
                                                </div>
                                            </div>
                                            <div>
                                                <span class="font-semibold text-gray-400 block mb-1">Tanda Tangan:</span>
                                                @if($item->tanda_tangan_user)
                                                    <img src="{{ $item->tanda_tangan_user }}" class="h-16 border rounded bg-white cursor-pointer signature-thumb" data-signature-url="{{ $item->tanda_tangan_user }}">
                                                @else
                                                    <span class="text-gray-500 italic">Belum ada</span>
                                                @endif
                                            </div>
                                        </div>

                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr id="empty-data-row-desktop">
                                <td colspan="8" class="px-6 py-12 text-center text-gray-500">
                                    Belum ada data tamu.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- 2. MODIFIKASI: Mobile Card View (Updated Structure to match Desktop Detail) -->
            <div id="mobile-card-list" class="block md:hidden space-y-4 pb-20">
                @forelse ($data as $item)
                    @php
                        $namaListM = array_map('trim', explode(',', $item->nama_tamu));
                        $firstNameM = $namaListM[0];
                        $extraCountM = count($namaListM) - 1;
                    @endphp
                    <div data-id="{{ $item->id }}" class="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden shadow-md" onclick="toggleDetail('mobile-detail-{{ $item->id }}')">
                        
                        {{-- HEADER CARD (Selalu Terlihat) --}}
                        <div class="p-4 relative cursor-pointer">
                            <div class="flex justify-between items-start">
                                <div class="flex-1 min-w-0">
                                     <h3 class="font-bold text-indigo-400 text-lg leading-tight">{{ $item->perusahaan }}</h3>
                                     <div class="text-gray-300 text-sm mt-1 truncate">
                                        {{ $firstNameM }}
                                        @if ($extraCountM > 0) <span class="text-xs text-cyan-400 font-bold">(+{{ $extraCountM }} lainnya)</span> @endif
                                     </div>
                                </div>
                                <div class="text-right ml-2 flex-shrink-0">
                                     @if ($item->status_hadir === 'hadir')
                                        <span class="px-2 py-1 rounded-full text-[10px] font-bold bg-green-500/20 text-green-300 border border-green-700">Hadir</span>
                                     @else
                                        <span class="px-2 py-1 rounded-full text-[10px] font-bold bg-red-500/20 text-red-300 border border-red-700">Belum</span>
                                     @endif
                                </div>
                            </div>
                            <div class="mt-3 text-xs text-gray-500 flex items-center gap-3">
                                 <span class="flex items-center gap-1">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg>
                                    {{ \Carbon\Carbon::parse($item->waktu_mulai)->format('d/m/Y') }}
                                 </span>
                                 <span class="flex items-center gap-1">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                    {{ \Carbon\Carbon::parse($item->waktu_mulai)->format('H:i') }} - {{ \Carbon\Carbon::parse($item->waktu_selesai)->format('H:i') }}
                                 </span>
                            </div>
                            {{-- Chevron Icon --}}
                            <div class="absolute bottom-4 right-4 text-slate-600">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                            </div>
                        </div>
                    
                        {{-- DETAIL BODY (Hidden, Toggleable) --}}
                        <div id="mobile-detail-{{ $item->id }}" class="hidden bg-slate-900/50 border-t border-slate-700 p-4 text-xs space-y-5 transition-all">
                            
                            {{-- Section 1: Detail Kunjungan --}}
                            <div>
                                <h4 class="font-bold text-indigo-400 border-b border-slate-700 pb-1 mb-2">Detail Kunjungan</h4>
                                <div class="grid grid-cols-[80px_1fr] gap-y-2">
                                    <span class="text-gray-500">Agenda:</span> <span class="text-gray-300">{{ $item->agenda_kunjungan }}</span>
                                    <span class="text-gray-500">Lokasi:</span> <span class="text-gray-300">{{ $item->lokasi_penerimaan }}</span>
                                    <span class="text-gray-500">Tujuan:</span> <span class="text-gray-300">{{ $item->yang_ditemui }}</span>
                                    <span class="text-gray-500">User:</span> <span class="text-gray-300">{{ $item->user_ditemui }}</span>
                                    <span class="text-gray-500">Kendaraan:</span> <span class="text-gray-300">{{ $item->jenis_kendaraan }} {{ $item->no_pol }}</span>
                                </div>
                            </div>

                            {{-- Section 2: Waktu & Fasilitas --}}
                            <div>
                                <h4 class="font-bold text-indigo-400 border-b border-slate-700 pb-1 mb-2">Waktu & Fasilitas</h4>
                                <div class="grid grid-cols-[80px_1fr] gap-y-2">
                                     <span class="text-gray-500">Input:</span> <span class="text-gray-300">{{ $item->jam_input ? \Carbon\Carbon::parse($item->jam_input)->format('H:i:s') : '-' }}</span>
                                     <span class="text-gray-500">Masuk:</span> <span class="text-gray-300">{{ $item->jam_masuk ? \Carbon\Carbon::parse($item->jam_masuk)->format('H:i') : '-' }}</span>
                                     <span class="text-gray-500">Keluar:</span> <span class="text-gray-300">{{ $item->jam_keluar ? \Carbon\Carbon::parse($item->jam_keluar)->format('H:i') : '-' }}</span>
                                     <span class="text-gray-500">Konsumsi:</span>
                                     <div>
                                        @if($item->sudah_konsumsi) <span class="text-green-400 font-bold">✅ {{ $item->konsumsi_porsi }} Porsi</span> @else ❌ @endif
                                     </div>
                                     <span class="text-gray-500">APD:</span>
                                     <div>
                                        @if($item->sudah_apd) ✅ @else ❌ @endif
                                     </div>
                                </div>
                            </div>

                            {{-- Section 3: Identitas --}}
                            <div>
                                <h4 class="font-bold text-indigo-400 border-b border-slate-700 pb-1 mb-2">Identitas & Validasi</h4>
                                 <div class="mb-3">
                                    <span class="block text-gray-500 mb-1">Nama Lengkap:</span>
                                    <div class="bg-slate-800 p-2 rounded border border-slate-600 text-gray-300 max-h-24 overflow-y-auto">{{ $item->nama_tamu }}</div>
                                 </div>
                                 <div>
                                    <span class="block text-gray-500 mb-1">Tanda Tangan:</span>
                                    @if($item->tanda_tangan_user)
                                        <img src="{{ $item->tanda_tangan_user }}" class="h-16 bg-white rounded border border-gray-400 signature-thumb w-auto" data-signature-url="{{ $item->tanda_tangan_user }}">
                                    @else
                                        <span class="text-gray-500 italic">Belum ada</span>
                                    @endif
                                 </div>
                            </div>

                            {{-- Action Buttons --}}
                            <div class="flex justify-end gap-2 pt-3 border-t border-slate-700">
                                <a href="{{ route('izin_tamu.edit', $item->id) }}" class="px-3 py-1.5 text-xs rounded bg-indigo-600 text-white hover:bg-indigo-700 shadow">Edit</a>
                                <a href="{{ route('izin_tamu.safety', $item->id) }}" class="px-3 py-1.5 text-xs rounded bg-cyan-600 text-white hover:bg-cyan-700 shadow">Safety</a>
                                <form action="{{ route('izin_tamu.destroy', $item->id) }}" method="POST" class="delete-confirm inline">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="px-3 py-1.5 text-xs bg-red-600 text-white rounded hover:bg-red-700 shadow">Hapus</button>
                                </form>
                            </div>
                        </div>
                    </div>
                @empty
                    <div id="empty-data-card-mobile" class="p-6 text-center text-gray-500 bg-slate-800 rounded-xl">
                        Belum ada data tamu.
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Modal Signature -->
    <div id="signature-modal" class="fixed inset-0 bg-black bg-opacity-80 hidden items-center justify-center z-50 transition-opacity duration-300 opacity-0">
        <div class="relative bg-slate-800 rounded-lg p-4 max-w-3xl max-h-full flex flex-col shadow-2xl border border-slate-600">
            <button id="close-signature-modal" class="absolute top-2 right-4 text-white text-2xl font-bold hover:text-gray-300">&times;</button>
            <h3 class="text-lg font-semibold text-indigo-400 mb-4 text-center">Tanda Tangan Penerima Tamu </h3>
            <div class="flex-1 flex items-center justify-center overflow-hidden bg-white rounded p-2">
                <img id="signature-modal-img" src="" class="max-w-full max-h-[80vh] object-contain" />
            </div>
        </div>
    </div>

</div>

<script>
    // Script sederhana untuk toggle baris detail
    function toggleDetail(id) {
        const row = document.getElementById(id);
        if (row) {
            row.classList.toggle("hidden");
        }
    }
</script>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    const BASE_URL_TAMU = "{{ url('/izin_tamu') }}";
    const CSRF_TOKEN = "{{ csrf_token() }}";
    const notifAudio = new Audio("{{ asset('sounds/notif.mp3') }}");
    const suaraAudio = new Audio("{{ asset('sounds/suara.mp3') }}");

    function playNotifSound() {
        notifAudio.currentTime = 0;
        notifAudio.play().catch(err => console.log('Audio err:', err));
    }
    function playSuaraSound() {
        suaraAudio.currentTime = 0;
        suaraAudio.play().catch(err => console.log('Audio err:', err));
    }

    const POLLING_INTERVAL = 30000;

    document.addEventListener("DOMContentLoaded", () => {
        const bypassAudio = new Audio("{{ asset('sounds/notif.mp3') }}");
        bypassAudio.muted = true;
        bypassAudio.volume = 0;
        bypassAudio.play().then(() => {
            bypassAudio.pause(); bypassAudio.currentTime = 0; bypassAudio.muted = false;
        }).catch(err => {});

        checkNewGuests();
    });

    // --- AJAX RENDER: Generate HTML Row Utama ---
    function renderRowDesktopMain(item) {
        // Format Tanggal & Waktu
        const tanggal = new Date(item.waktu_mulai).toLocaleDateString('id-ID', { day:'2-digit', month:'2-digit', year:'numeric' });
        const jamMulai = new Date(item.waktu_mulai).toLocaleTimeString('id-ID', { hour:'2-digit', minute:'2-digit' });
        const jamSelesai = new Date(item.waktu_selesai).toLocaleTimeString('id-ID', { hour:'2-digit', minute:'2-digit' });

        // Format Status
        const statusHtml = item.status_hadir === 'hadir' 
            ? `<span class="px-2 py-1 rounded-full text-[10px] font-bold bg-green-500/20 text-green-300 border border-green-700">Hadir</span>`
            : `<span class="px-2 py-1 rounded-full text-[10px] font-bold bg-red-500/20 text-red-300 border border-red-700">Belum</span>`;

        // Format Nama (Truncated)
        let namaDisplay = item.nama_tamu;
        if (item.nama_tamu && item.nama_tamu.includes(',')) {
            const names = item.nama_tamu.split(',').map(n => n.trim());
            if (names.length > 1) {
                namaDisplay = `${names[0]} <span class="text-xs text-cyan-400 ml-1">(+${names.length - 1} lainnya)</span>`;
            }
        }

        return `
            <td class="px-4 py-3 font-medium text-indigo-300">${item.perusahaan}</td>
            <td class="px-4 py-3">${namaDisplay}</td>
            <td class="px-2 py-3 text-center">${item.jumlah_tamu}</td>
            <td class="px-2 py-3 text-center">${item.jenis_tamu}</td>
            <td class="px-2 py-3 text-center">${tanggal}</td>
            <td class="px-2 py-3 text-center">${jamMulai} - ${jamSelesai}</td>
            <td class="px-2 py-3 text-center">${statusHtml}</td>
            <td class="px-2 py-3 text-center" onclick="event.stopPropagation()">
                <div class="flex justify-center gap-2">
                    <a href="${BASE_URL_TAMU}/${item.id}/edit" class="px-2 py-1 text-xs bg-indigo-600 hover:bg-indigo-700 rounded text-white">Edit</a>
                    <a href="${BASE_URL_TAMU}/${item.id}/safety" class="px-2 py-1 text-xs bg-cyan-600 hover:bg-cyan-700 rounded text-white">Safety</a>
                    <form action="${BASE_URL_TAMU}/${item.id}" method="POST" class="inline delete-confirm">
                        <input type="hidden" name="_token" value="${CSRF_TOKEN}">
                        <input type="hidden" name="_method" value="DELETE">
                        <button type="submit" class="px-2 py-1 text-xs bg-red-600 hover:bg-red-700 rounded text-white">Hapus</button>
                    </form>
                </div>
            </td>
        `;
    }

    // --- AJAX RENDER: Generate HTML Row Detail (Hidden) ---
    function renderRowDesktopDetail(item) {
        const jamInput = item.jam_input ? new Date(item.jam_input).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' }) : '-';
        const jamMasuk = item.jam_masuk ? new Date(item.jam_masuk).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) : '-';
        const jamKeluar = item.jam_keluar ? new Date(item.jam_keluar).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) : '-';
        
        const konsumsiDisplay = item.sudah_konsumsi 
            ? `<span class="text-green-400 font-bold">✅ ${item.konsumsi_porsi} Porsi</span>` 
            : `<span class="text-gray-500">❌</span>`;
        
        const apdDisplay = item.sudah_apd ? '✅' : '❌';

        const ttdHtml = item.tanda_tangan_user 
            ? `<img src="${item.tanda_tangan_user}" class="h-16 border rounded bg-white cursor-pointer signature-thumb" data-signature-url="${item.tanda_tangan_user}">`
            : `<span class="text-gray-500 italic">Belum ada</span>`;

        return `
            <td colspan="8" class="px-6 py-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-xs text-gray-300">
                    <div class="space-y-2">
                        <h4 class="font-bold text-indigo-400 border-b border-slate-600 pb-1 mb-2">Detail Kunjungan</h4>
                        <p><span class="font-semibold text-gray-400 w-24 inline-block">Agenda:</span> ${item.agenda_kunjungan}</p>
                        <p><span class="font-semibold text-gray-400 w-24 inline-block">Lokasi:</span> ${item.lokasi_penerimaan}</p>
                        <p><span class="font-semibold text-gray-400 w-24 inline-block">Tujuan:</span> ${item.yang_ditemui}</p>
                        <p><span class="font-semibold text-gray-400 w-24 inline-block">User:</span> ${item.user_ditemui}</p>
                        <p><span class="font-semibold text-gray-400 w-24 inline-block">Kendaraan:</span> ${item.jenis_kendaraan} ${item.no_pol}</p>
                    </div>
                    <div class="space-y-2">
                        <h4 class="font-bold text-indigo-400 border-b border-slate-600 pb-1 mb-2">Waktu & Fasilitas</h4>
                        <p><span class="font-semibold text-gray-400 w-24 inline-block">Input:</span> ${jamInput}</p>
                        <p><span class="font-semibold text-gray-400 w-24 inline-block">Masuk:</span> ${jamMasuk}</p>
                        <p><span class="font-semibold text-gray-400 w-24 inline-block">Keluar:</span> ${jamKeluar}</p>
                        <div class="mt-2 pt-2 border-t border-slate-700">
                            <p class="flex items-center"><span class="font-semibold text-gray-400 w-24 inline-block">Konsumsi:</span> ${konsumsiDisplay}</p>
                            <p class="flex items-center mt-1"><span class="font-semibold text-gray-400 w-24 inline-block">APD:</span> ${apdDisplay}</p>
                        </div>
                    </div>
                    <div class="space-y-2">
                        <h4 class="font-bold text-indigo-400 border-b border-slate-600 pb-1 mb-2">Identitas & Validasi</h4>
                        <div class="mb-3">
                            <span class="font-semibold text-gray-400 block mb-1">Daftar Nama Lengkap:</span>
                            <div class="bg-slate-900 p-2 rounded text-gray-300 border border-slate-700 max-h-20 overflow-y-auto">
                                ${item.nama_tamu}
                            </div>
                        </div>
                        <div>
                            <span class="font-semibold text-gray-400 block mb-1">Tanda Tangan:</span>
                            ${ttdHtml}
                        </div>
                    </div>
                </div>
            </td>
        `;
    }

    // --- AJAX RENDER: Generate Card Mobile (MODIFIED to match New Structure) ---
    function renderCardMobile(item) {
        const tanggal = new Date(item.waktu_mulai).toLocaleDateString('id-ID', { day:'2-digit', month:'2-digit', year:'numeric' });
        const jamMulai = new Date(item.waktu_mulai).toLocaleTimeString('id-ID', { hour:'2-digit', minute:'2-digit' });
        const jamSelesai = new Date(item.waktu_selesai).toLocaleTimeString('id-ID', { hour:'2-digit', minute:'2-digit' });
        
        const statusHtml = item.status_hadir === 'hadir' 
            ? `<span class="px-2 py-1 rounded-full text-[10px] font-bold bg-green-500/20 text-green-300 border border-green-700">Hadir</span>`
            : `<span class="px-2 py-1 rounded-full text-[10px] font-bold bg-red-500/20 text-red-300 border border-red-700">Belum</span>`;

        // Nama (Truncated) Mobile
        let namaDisplay = item.nama_tamu;
        if (item.nama_tamu && item.nama_tamu.includes(',')) {
            const names = item.nama_tamu.split(',').map(n => n.trim());
            if (names.length > 1) {
                namaDisplay = `${names[0]} <span class="text-xs text-cyan-400 font-bold">(+${names.length - 1} lainnya)</span>`;
            }
        }

        // Helpers
        const jamInput = item.jam_input ? new Date(item.jam_input).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' }) : '-';
        const jamMasuk = item.jam_masuk ? new Date(item.jam_masuk).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) : '-';
        const jamKeluar = item.jam_keluar ? new Date(item.jam_keluar).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) : '-';
        
        const konsumsiDisplay = item.sudah_konsumsi 
            ? `<span class="text-green-400 font-bold">✅ ${item.konsumsi_porsi} Porsi</span>` 
            : `❌`;
        const apdDisplay = item.sudah_apd ? '✅' : '❌';

        const ttdHtml = item.tanda_tangan_user 
            ? `<img src="${item.tanda_tangan_user}" class="h-16 bg-white rounded border border-gray-400 signature-thumb w-auto" data-signature-url="${item.tanda_tangan_user}">`
            : `<span class="text-gray-500 italic">Belum ada</span>`;

        return `
            <div data-id="${item.id}" class="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden shadow-md" onclick="toggleDetail('mobile-detail-${item.id}')">
                
                <!-- HEADER (Visible) -->
                <div class="p-4 relative cursor-pointer">
                    <div class="flex justify-between items-start">
                        <div class="flex-1 min-w-0">
                            <h3 class="font-bold text-indigo-400 text-lg leading-tight">${item.perusahaan}</h3>
                            <div class="text-gray-300 text-sm mt-1 truncate">${namaDisplay}</div>
                        </div>
                        <div class="text-right ml-2 flex-shrink-0">
                            ${statusHtml}
                        </div>
                    </div>
                    <div class="mt-3 text-xs text-gray-500 flex items-center gap-3">
                         <span class="flex items-center gap-1">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg>
                            ${tanggal}
                         </span>
                         <span class="flex items-center gap-1">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            ${jamMulai} - ${jamSelesai}
                         </span>
                    </div>
                    <div class="absolute bottom-4 right-4 text-slate-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </div>
                </div>

                <!-- DETAIL (Hidden) -->
                <div id="mobile-detail-${item.id}" class="hidden bg-slate-900/50 border-t border-slate-700 p-4 text-xs space-y-5 transition-all">
                    
                    <!-- Detail Kunjungan -->
                    <div>
                        <h4 class="font-bold text-indigo-400 border-b border-slate-700 pb-1 mb-2">Detail Kunjungan</h4>
                        <div class="grid grid-cols-[80px_1fr] gap-y-2">
                            <span class="text-gray-500">Agenda:</span> <span class="text-gray-300">${item.agenda_kunjungan}</span>
                            <span class="text-gray-500">Lokasi:</span> <span class="text-gray-300">${item.lokasi_penerimaan}</span>
                            <span class="text-gray-500">Tujuan:</span> <span class="text-gray-300">${item.yang_ditemui}</span>
                            <span class="text-gray-500">User:</span> <span class="text-gray-300">${item.user_ditemui}</span>
                            <span class="text-gray-500">Kendaraan:</span> <span class="text-gray-300">${item.jenis_kendaraan} ${item.no_pol}</span>
                        </div>
                    </div>

                    <!-- Waktu & Fasilitas -->
                    <div>
                        <h4 class="font-bold text-indigo-400 border-b border-slate-700 pb-1 mb-2">Waktu & Fasilitas</h4>
                        <div class="grid grid-cols-[80px_1fr] gap-y-2">
                             <span class="text-gray-500">Input:</span> <span class="text-gray-300">${jamInput}</span>
                             <span class="text-gray-500">Masuk:</span> <span class="text-gray-300">${jamMasuk}</span>
                             <span class="text-gray-500">Keluar:</span> <span class="text-gray-300">${jamKeluar}</span>
                             <span class="text-gray-500">Konsumsi:</span>
                             <div>${konsumsiDisplay}</div>
                             <span class="text-gray-500">APD:</span>
                             <div>${apdDisplay}</div>
                        </div>
                    </div>

                    <!-- Identitas -->
                    <div>
                        <h4 class="font-bold text-indigo-400 border-b border-slate-700 pb-1 mb-2">Identitas & Validasi</h4>
                         <div class="mb-3">
                            <span class="block text-gray-500 mb-1">Nama Lengkap:</span>
                            <div class="bg-slate-800 p-2 rounded border border-slate-600 text-gray-300 max-h-24 overflow-y-auto">${item.nama_tamu}</div>
                         </div>
                         <div>
                            <span class="block text-gray-500 mb-1">Tanda Tangan:</span>
                            ${ttdHtml}
                         </div>
                    </div>

                    <!-- Actions -->
                    <div class="flex justify-end gap-2 pt-3 border-t border-slate-700">
                        <a href="${BASE_URL_TAMU}/${item.id}/edit" class="px-3 py-1.5 text-xs rounded bg-indigo-600 text-white hover:bg-indigo-700 shadow">Edit</a>
                        <a href="${BASE_URL_TAMU}/${item.id}/safety" class="px-3 py-1.5 text-xs rounded bg-cyan-600 text-white hover:bg-cyan-700 shadow">Safety</a>
                        <form action="${BASE_URL_TAMU}/${item.id}" method="POST" class="delete-confirm inline">
                            <input type="hidden" name="_token" value="${CSRF_TOKEN}">
                            <input type="hidden" name="_method" value="DELETE">
                            <button type="submit" class="px-3 py-1.5 text-xs bg-red-600 text-white rounded hover:bg-red-700 shadow">Hapus</button>
                        </form>
                    </div>
                </div>
            </div>
        `;
    }

    // --- Main Polling Logic ---
    async function checkNewGuests() {
        try {
            const res = await fetch("{{ url('/admin/notif?seconds=30') }}");
            const data = await res.json();

            const tbody = document.getElementById('guest-table-body');
            const cardList = document.getElementById('mobile-card-list');

            tbody.innerHTML = "";
            cardList.innerHTML = "";

            if (data.allData && data.allData.length > 0) {
                data.allData.forEach(item => {
                    // 1. Append Row Utama
                    const rowMain = document.createElement('tr');
                    rowMain.className = "cursor-pointer hover:bg-slate-700/30 transition border-b border-slate-700/50";
                    rowMain.setAttribute('onclick', `toggleDetail('detail-${item.id}')`);
                    rowMain.innerHTML = renderRowDesktopMain(item);
                    tbody.appendChild(rowMain);

                    // 2. Append Row Detail (Hidden)
                    const rowDetail = document.createElement('tr');
                    rowDetail.id = `detail-${item.id}`;
                    rowDetail.className = "hidden bg-slate-800/50";
                    rowDetail.innerHTML = renderRowDesktopDetail(item);
                    tbody.appendChild(rowDetail);

                    // 3. Append Mobile Card (UPDATED)
                    const newCardHtml = renderCardMobile(item);
                    cardList.insertAdjacentHTML('beforeend', newCardHtml);
                });
            } else {
                tbody.innerHTML = `<tr id="empty-data-row-desktop"><td colspan="8" class="px-6 py-12 text-center text-gray-500">Belum ada data tamu.</td></tr>`;
                cardList.innerHTML = `<div class="p-6 text-center text-gray-500 bg-slate-800 rounded-xl">Belum ada data tamu.</div>`;
            }

            if (data.events && data.events.length > 0) {
                data.events.reverse().forEach(tamu => {
                    let msg = '', title = '', icon = 'info';
                    if(tamu.type === 'konfirmasi') { title='Hadir!'; msg=`${tamu.nama_tamu} konfirmasi kehadiran.`; playNotifSound(); }
                    else if(tamu.type === 'update') { title='Update!'; msg=`Data ${tamu.nama_tamu} diperbarui.`; icon='warning'; playSuaraSound(); }
                    else if(tamu.type === 'baru') { title='Baru!'; msg=`Tamu ${tamu.nama_tamu} masuk.`; icon='success'; playSuaraSound(); }
                    
                    Swal.fire({ title, text: msg, icon, toast: true, position: 'top-end', showConfirmButton: false, timer: 5000 });
                });
            }
            
            setupSignatureModalListeners();

        } catch (err) { console.error("Polling err:", err); }
    }
    setInterval(checkNewGuests, POLLING_INTERVAL);

    // --- Signature Modal Logic ---
    const signatureModal = document.getElementById('signature-modal');
    const signatureModalImg = document.getElementById('signature-modal-img');
    const closeSignatureModal = document.getElementById('close-signature-modal');

    function showSignatureModal(url) {
        signatureModalImg.src = url;
        signatureModal.classList.remove('hidden', 'opacity-0');
        signatureModal.classList.add('flex');
        setTimeout(() => signatureModal.classList.remove('opacity-0'), 10);
    }
    function hideSignatureModal() {
        signatureModal.classList.add('opacity-0');
        signatureModal.addEventListener('transitionend', function handler() {
            signatureModal.classList.add('hidden');
            signatureModal.classList.remove('flex');
            signatureModal.removeEventListener('transitionend', handler);
        });
    }
    function setupSignatureModalListeners() {
        document.querySelectorAll('.signature-thumb').forEach(thumb => {
            thumb.removeEventListener('click', handleSignatureClick);
            thumb.addEventListener('click', handleSignatureClick);
        });
    }
    function handleSignatureClick(e) {
        const url = e.target.getAttribute('data-signature-url');
        if (url) showSignatureModal(url);
    }

    document.addEventListener("DOMContentLoaded", () => {
        closeSignatureModal.addEventListener('click', hideSignatureModal);
        signatureModal.addEventListener('click', (e) => { if(e.target.id === 'signature-modal') hideSignatureModal(); });
        setupSignatureModalListeners();

        document.body.addEventListener("submit", function (e) {
            if (e.target.classList.contains("delete-confirm")) {
                e.preventDefault();
                Swal.fire({
                    title: 'Hapus?', text: "Data hilang permanen!", icon: 'warning',
                    showCancelButton: true, confirmButtonColor: '#d33', cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Ya', cancelButtonText: 'Batal'
                }).then((res) => { if (res.isConfirmed) e.target.submit(); });
            }
        });
    });
</script>
@endpush