@extends('izin_tamu.layout')

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

@section('content')
<div class="relative bg-slate-800 p-4 rounded-2xl shadow-2xl space-y-6">
    <!-- Header -->
<div class="flex flex-col md:flex-row justify-between items-center space-y-2 md:space-y-0 bg-slate-800 p-4 md:p-6 shadow">
    
    <!-- Judul Dashboard dengan Logo di Atas -->
    <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-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500">
            Dashboard - Security
        </h2>
    </div>

    <!-- Tombol Logout di pojok kanan atas dalam kotak -->
    <a href="{{ route('security.logout') }}"
       class="absolute top-4 right-4 px-5 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white text-lg font-semibold transition"
       onclick="return confirm('Yakin mau logout?')">
        Logout
    </a>
</div>


    <!-- Success Message -->
    @if (session('success'))
        <div class="p-3 bg-green-800/50 text-green-300 rounded-xl border border-green-700 text-sm">
            {{ session('success') }}
        </div>
    @endif

    <!-- Data Table -->
    <div class="overflow-x-auto bg-slate-900 rounded-xl shadow-inner border border-slate-700 max-h-[80vh]">
        <table class="min-w-full border-collapse divide-y divide-slate-700 text-xs">
            {{-- MODIFIKASI HEADER: bg-slate-700 (Tidak transparan) & shadow-lg --}}
            <thead class="bg-slate-700 text-gray-300 uppercase tracking-wider sticky top-0 z-10 shadow-lg">
                <tr>
                    {{-- HANYA 8 KOLOM UTAMA SESUAI PERMINTAAN --}}
                    <th class="px-2 py-2 text-left w-32">Perusahaan</th>
                    <th class="px-2 py-2 text-left w-32 whitespace-nowrap">Nama Tamu</th>
                    <th class="px-2 py-2 text-center w-12">Jml</th>
                    <th class="px-2 py-2 text-left w-24">Jenis</th>
                    <th class="px-2 py-2 text-center w-24">Tanggal</th>
                    <th class="px-2 py-2 text-center w-32">Waktu</th>
                    <th class="px-2 py-2 text-center w-24">Status</th>
                    <th class="px-2 py-2 text-center w-32">Aksi</th>
                </tr>
            </thead>
            <tbody id="security-body" class="divide-y divide-slate-700/40">
                {{-- Data Awal Di-render oleh Blade --}}
                @forelse ($data as $item)
                
                {{-- ROW UTAMA (Klik untuk expand) --}}
                <tr data-id="{{ $item->id }}" 
                    class="hover:bg-slate-700/20 transition cursor-pointer border-b border-slate-700/50"
                    onclick="toggleDetail('detail-{{ $item->id }}')">
                    
                    <td class="px-2 py-2 font-medium text-indigo-300">{{ $item->perusahaan }}</td>
                    
                    {{-- Nama Tamu Dipendekkan di Row Utama --}}
                    <td class="px-2 py-2">
                        @php
                            $namaList = array_map('trim', explode(',', $item->nama_tamu));
                            $firstName = $namaList[0];
                            $extraCount = count($namaList) - 1;
                        @endphp
                        {{ $firstName }}
                        @if ($extraCount > 0)
                            <span class="text-[10px] text-cyan-400 font-bold ml-1">(+{{ $extraCount }} lainnya)</span>
                        @endif
                    </td>

                    <td class="px-2 py-2 text-center">{{ $item->jumlah_tamu }}</td>
                    <td class="px-2 py-2">
                        <div class="whitespace-nowrap overflow-hidden text-ellipsis max-w-[80px]">
                            {{ $item->jenis_tamu }}
                        </div>
                    </td>
                    <td class="px-2 py-2 text-center">{{ \Carbon\Carbon::parse($item->waktu_mulai)->format('d/m/Y') }}</td>
                    
                    {{-- Waktu Rencana --}}
                    <td class="px-2 py-2 text-center whitespace-nowrap">
                        {{ \Carbon\Carbon::parse($item->waktu_mulai)->format('H:i') }} - 
                        {{ \Carbon\Carbon::parse($item->waktu_selesai)->format('H:i') }}
                    </td>

                    <td class="px-2 py-2 text-center">
                        @if ($item->status_hadir === 'hadir')
                            <span class="px-2 py-1 rounded-full text-[10px] font-semibold bg-green-100 text-green-700 border whitespace-nowrap">Hadir</span>
                        @else
                            <span class="px-2 py-1 rounded-full text-[10px] font-semibold bg-red-100 text-red-700 border whitespace-nowrap">Belum Hadir</span>
                        @endif
                    </td>
                    
                    {{-- Aksi (Stop Propagation) --}}
                    <td class="px-2 py-2 text-center" onclick="event.stopPropagation()">
                        <div class="flex flex-row gap-1 justify-center items-center">
                            @if ($item->status_hadir === 'hadir')
                                <button disabled
                                    class="inline-block px-2 py-1 text-[10px] rounded-lg bg-gray-500 text-white opacity-70 cursor-not-allowed whitespace-nowrap">
                                    Barcode
                                </button>
                            @else
                                <a href="{{ route('security.izin_tamu.barcode', $item->id) }}" 
                                class="inline-block px-2 py-1 text-[10px] rounded-lg bg-green-600 text-white hover:bg-green-700 transition whitespace-nowrap">
                                Barcode
                                </a>
                            @endif

                            <button type="button" onclick='openModal({{ json_encode($item) }})' class="inline-block px-2 py-1 text-[10px] rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition whitespace-nowrap">Isi Data</button>
                        </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 border-b border-slate-700/50">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-xs text-gray-300">
                            
                            {{-- Kolom 1: Detail Kunjungan & Daftar Nama --}}
                            <div class="space-y-3">
                                <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">Tujuan:</span> {{ $item->yang_ditemui }} ({{ $item->user_ditemui }})</p>
                                    <p><span class="font-semibold text-gray-400 w-24 inline-block">Lokasi:</span> {{ $item->lokasi_penerimaan }}</p>
                                </div>

                                {{-- Daftar Nama Lengkap (DIPINDAHKAN KE SINI - Kiri Bawah) --}}
                                <div>
                                    <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-24 overflow-y-auto leading-relaxed">
                                        {{ $item->nama_tamu }}
                                    </div>
                                </div>
                            </div>

                            {{-- Kolom 2: Realisasi Waktu (Jam Masuk/Keluar) --}}
                            <div class="space-y-2">
                                <h4 class="font-bold text-indigo-400 border-b border-slate-600 pb-1 mb-2">Realisasi Waktu</h4>
                                <p><span class="font-semibold text-gray-400 w-24 inline-block">Jam 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">Jam Keluar:</span> 
                                    {{ $item->jam_keluar ? \Carbon\Carbon::parse($item->jam_keluar)->format('H:i') : '-' }}
                                </p>
                            </div>

                            {{-- Kolom 3: Kendaraan & Petugas --}}
                            <div class="space-y-2">
                                <h4 class="font-bold text-indigo-400 border-b border-slate-600 pb-1 mb-2">Kendaraan & Identitas</h4>
                                <div class="mb-2">
                                    <span class="font-semibold text-gray-400 block mb-1">Kendaraan:</span>
                                    <span class="block bg-slate-900 px-2 py-1 rounded border border-slate-700">
                                        {{ $item->jenis_kendaraan ?? '-' }} - {{ $item->no_pol ?? '-' }}
                                    </span>
                                </div>
                                <div class="mb-2">
                                    <span class="font-semibold text-gray-400 block mb-1">Petugas Jaga:</span>
                                    <span class="block text-indigo-300">{{ $item->petugas_jaga ?? '-' }}</span>
                                </div>
                            </div>

                        </div>
                    </td>
                </tr>

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

    <!-- Modal Global -->
    <div id="modal-global" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
        <div class="bg-white rounded-xl shadow-lg w-full max-w-md p-6">
            <h3 class="text-lg font-bold mb-4 text-gray-800">Update Data Security</h3>
            <form id="modal-form" method="POST" class="space-y-3">
                @csrf
                <div>
                    <label class="block text-sm text-gray-600">Jam Keluar</label>
                    <input type="time" name="jam_keluar" class="w-full px-3 py-2 border rounded text-black text-sm">
                </div>
                <div>
                    <label class="block text-sm text-gray-600">Jenis Kendaraan</label>
                    <input type="text" name="jenis_kendaraan" class="w-full px-3 py-2 border rounded text-black text-sm">
                </div>
                <div>
                    <label class="block text-sm text-gray-600">No Polisi</label>
                    <input type="text" name="no_pol" class="w-full px-3 py-2 border rounded text-black text-sm">
                </div>
                <div>
                    <label class="block text-sm text-gray-600">Petugas Jaga</label>
                    <input type="text" name="petugas_jaga" class="w-full px-3 py-2 border rounded text-black text-sm">
                </div>
                <div class="flex justify-end space-x-2 mt-4">
                    <button type="button" onclick="closeModal()"
                            class="px-4 py-2 bg-gray-400 text-white rounded hover:bg-gray-500">
                        Batal
                    </button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                        Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const modal = document.getElementById('modal-global');
const modalForm = document.getElementById('modal-form');
const POLLING_INTERVAL = 30000; // 30 detik
const SECURITY_REFRESH_URL = "{{ route('security.refresh') }}"; 

function openModal(item) {
    modal.classList.remove('hidden');
    modalForm.action = `/izin-tamu/${item.id}/update-security`;
    
    // Mengisi data modal
    const jamKeluarDB = item.jam_keluar ? item.jam_keluar.slice(11, 16) : '';
    modalForm.jam_keluar.value = jamKeluarDB; 
    modalForm.jenis_kendaraan.value = item.jenis_kendaraan ?? '';
    modalForm.no_pol.value = item.no_pol ?? '';
    modalForm.petugas_jaga.value = item.petugas_jaga ?? '';
}

function closeModal() {
    modal.classList.add('hidden');
}

// FUNGSI TOGGLE DETAIL ROW
function toggleDetail(id) {
    const row = document.getElementById(id);
    if (row) {
        row.classList.toggle("hidden");
    }
}

// --- FUNGSI RENDER ROW UTAMA (8 Kolom) ---
function toWIBTime(utcString) {
    if (!utcString) return "-";
    const date = new Date(utcString);
    date.setHours(date.getHours() + 7); // Tambah 7 jam untuk WIB
    return date.toISOString().slice(11, 16); // Format HH:mm
}

function renderRowSecurity(item) {
    // Format tanggal (DD/MM/YYYY)
    const tgl = item.waktu_mulai
        ? item.waktu_mulai.slice(0, 10).split('-').reverse().join('/')
        : "-";

    // Waktu Rencana (konversi ke WIB)
    const waktuMulaiTamu = toWIBTime(item.waktu_mulai);
    const waktuSelesaiTamu = toWIBTime(item.waktu_selesai);
    const waktuKunjungan = `${waktuMulaiTamu} - ${waktuSelesaiTamu}`;

    // --- Logika Nama Tamu JS (Dipertahankan) ---
    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-[10px] text-cyan-400 font-bold ml-1">(+${names.length - 1} lainnya)</span>`;
        }
    }
    // --- END ---

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

    // Tombol barcode
    const barcodeButton =
        item.status_hadir === 'hadir'
            ? `<button disabled
                  class="inline-block px-2 py-1 text-[10px] rounded-lg bg-gray-500 text-white opacity-70 cursor-not-allowed whitespace-nowrap">
                  Barcode
               </button>`
            : `<a href="/security/izin_tamu/${item.id}/barcode"
                  class="inline-block px-2 py-1 text-[10px] rounded-lg bg-green-600 text-white hover:bg-green-700 transition whitespace-nowrap">
                  Barcode
               </a>`;

    // HANYA RENDER 8 KOLOM UTAMA
    return `
        <td class="px-2 py-2 font-medium text-indigo-300">${item.perusahaan}</td>
        <td class="px-2 py-2">${namaDisplay}</td>
        <td class="px-2 py-2 text-center">${item.jumlah_tamu}</td>
        <td class="px-2 py-2">
            <div class="whitespace-nowrap overflow-hidden text-ellipsis max-w-[80px]">
                ${item.jenis_tamu}
            </div>
        </td>
        <td class="px-2 py-2 text-center">${tgl}</td>
        <td class="px-2 py-2 text-center whitespace-nowrap">${waktuKunjungan}</td>
        <td class="px-2 py-2 text-center">${statusHtml}</td>
        <td class="px-2 py-2 text-center" onclick="event.stopPropagation()">
            <div class="flex flex-row gap-1 justify-center items-center">
                ${barcodeButton}
                <button type="button"
                        onclick='openModal(${JSON.stringify(item)})'
                        class="inline-block px-2 py-1 text-[10px] rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition whitespace-nowrap">
                    Isi Data
                </button>
            </div>
        </td>
    `;
}

// --- FUNGSI RENDER DETAIL ROW (Hidden) ---
function renderDetailRowSecurity(item) {
    const jamMasuk = item.jam_masuk ? toWIBTime(item.jam_masuk) : '-';
    const jamKeluar = item.jam_keluar ? toWIBTime(item.jam_keluar) : '-';
    const kendaraan = item.jenis_kendaraan ? item.jenis_kendaraan : '-';
    const noPol = item.no_pol ? item.no_pol : '-';
    
    return `
        <td colspan="8" class="px-6 py-4 border-b border-slate-700/50">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-xs text-gray-300">
                <div class="space-y-3">
                    <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">Tujuan:</span> ${item.yang_ditemui} (${item.user_ditemui})</p>
                        <p><span class="font-semibold text-gray-400 w-24 inline-block">Lokasi:</span> ${item.lokasi_penerimaan}</p>
                    </div>
                    
                    {{-- Daftar Nama Lengkap (DIPINDAHKAN KE SINI - Kiri Bawah) --}}
                    <div>
                        <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-24 overflow-y-auto leading-relaxed">
                            ${item.nama_tamu}
                        </div>
                    </div>
                </div>

                <div class="space-y-2">
                    <h4 class="font-bold text-indigo-400 border-b border-slate-600 pb-1 mb-2">Realisasi Waktu</h4>
                    <p><span class="font-semibold text-gray-400 w-24 inline-block">Jam Masuk:</span> ${jamMasuk}</p>
                    <p><span class="font-semibold text-gray-400 w-24 inline-block">Jam Keluar:</span> ${jamKeluar}</p>
                </div>
                
                <div class="space-y-2">
                    <h4 class="font-bold text-indigo-400 border-b border-slate-600 pb-1 mb-2">Kendaraan & Identitas</h4>
                    <div class="mb-2">
                        <span class="font-semibold text-gray-400 block mb-1">Kendaraan:</span>
                        <span class="block bg-slate-900 px-2 py-1 rounded border border-slate-700">
                            ${kendaraan} - ${noPol}
                        </span>
                    </div>
                    <div class="mb-2">
                        <span class="font-semibold text-gray-400 block mb-1">Petugas Jaga:</span>
                        <span class="block text-indigo-300">${item.petugas_jaga ?? '-'}</span>
                    </div>
                </div>
            </div>
        </td>
    `;
}

// --- FUNGSI POLLING DAN REKONSILIASI DATA ---
async function loadDataSecurity() {
    console.log("Polling data security...");
    try {
        const response = await fetch(SECURITY_REFRESH_URL + "?_=" + Date.now()); 
        if (!response.ok) {
            console.error(`Network Error: ${response.status} ${response.statusText}`);
            throw new Error('Network response was not ok');
        }
        
        const allData = await response.json(); 
        console.log("Data diterima:", allData.length, "items");

        const tbody = document.getElementById("security-body");
        tbody.innerHTML = '';
        
        if (allData.length === 0) {
             tbody.innerHTML = `<tr>
                 <td colspan="8" class="px-6 py-12 text-center text-gray-500">Belum ada data tamu.</td>
             </tr>`;
             return;
        }

        allData.forEach(item => {
            // 1. Buat Baris Utama
            const mainRow = document.createElement('tr');
            mainRow.classList.add('hover:bg-slate-700/20', 'transition', 'cursor-pointer', 'border-b', 'border-slate-700/50');
            mainRow.dataset.id = item.id;
            mainRow.setAttribute('onclick', `toggleDetail('detail-${item.id}')`);
            mainRow.innerHTML = renderRowSecurity(item);
            tbody.appendChild(mainRow);

            // 2. Buat Baris Detail (Hidden)
            const detailRow = document.createElement('tr');
            detailRow.id = `detail-${item.id}`;
            detailRow.classList.add('hidden', 'bg-slate-800/50');
            detailRow.innerHTML = renderDetailRowSecurity(item);
            tbody.appendChild(detailRow);
        });

    } catch(e) {
        console.error("Gagal load data security:", e);
    }
}

// Submit form modal menggunakan AJAX untuk menghindari refresh halaman
modalForm.addEventListener('submit', async function(e){
    e.preventDefault();
    const formData = new FormData(modalForm);
    const action = modalForm.action;

    try {
        const response = await fetch(action, {
            method: 'POST',
            body: formData,
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        });

        if (response.ok) {
            closeModal();
            loadDataSecurity(); 
        } else {
            const errorText = await response.text();
            console.error("Gagal update data:", errorText);
            alert("Gagal update data! Silakan cek konsol untuk detail kesalahan.");
        }
    } catch (err) {
        console.error("Terjadi kesalahan:", err);
        alert("Terjadi kesalahan koneksi atau server!");
    }
});

// Jalankan saat DOM siap dan atur interval polling
document.addEventListener("DOMContentLoaded", loadDataSecurity);
setInterval(loadDataSecurity, POLLING_INTERVAL);
</script>
@endpush