@extends('adminlte::page')

@section('title', 'Monitor Tamu')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h1 class="text-dark font-weight-bold" style="font-family: 'Nunito', sans-serif; font-size: 1.8rem;">
                <span class="text-primary mr-2"><i class="fas fa-shield-alt"></i></span> Monitor Pos Satpam
            </h1>
            <p class="text-muted small mb-0">Pantauan kedatangan dan kepulangan tamu secara real-time.</p>
        </div>
        <div class="d-flex align-items-center">
            
            {{-- Tombol Cetak PDF --}}
            <button class="btn btn-primary btn-sm rounded-pill shadow-sm mr-3 px-3" data-toggle="modal" data-target="#modalCetak">
                <i class="fas fa-print mr-1"></i> Laporan PDF
            </button>

            <span class="badge badge-light-primary px-3 py-2 rounded-pill shadow-sm mr-2" id="loadingBadge">
                <i class="fas fa-sync fa-spin mr-1"></i> Live
            </span>
            
            <div class="bg-white px-3 py-2 rounded-pill shadow-sm">
                <i class="far fa-calendar-alt text-primary mr-2"></i>
                <span class="font-weight-bold text-dark">{{ \Carbon\Carbon::now()->isoFormat('dddd, D MMMM Y') }}</span>
            </div>
        </div>
    </div>
@stop

@section('content')
<div class="row">
    <div class="col-12">
        
        {{-- Card Apex Style --}}
        <div class="card card-apex border-0">
            <div class="card-header bg-transparent border-0 pt-4 px-4 pb-2">
                <h3 class="card-title font-weight-bold text-dark">Daftar Tamu Hari Ini</h3>
            </div>
            
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 text-nowrap">
                        <thead class="bg-light">
                            <tr class="text-uppercase text-secondary text-xs font-weight-bold tracking-wide">
                                <th class="pl-4 py-3 border-0">Waktu Masuk</th>
                                <th class="py-3 border-0">Foto</th>
                                <th class="py-3 border-0">Identitas Tamu</th>
                                <th class="py-3 border-0">Tujuan</th>
                                <th class="text-center py-3 border-0">Status</th>
                                <th class="text-center py-3 border-0">Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="tamuTableBody">
                            {{-- Data diisi via AJAX --}}
                        </tbody>
                    </table>
                </div>
                
                {{-- Empty State (Muncul jika tidak ada data) --}}
                <div id="emptyState" class="text-center py-5" style="display: none;">
                    <div class="empty-icon-bg mx-auto mb-3">
                        <i class="fas fa-user-clock fa-3x text-muted opacity-50"></i>
                    </div>
                    <h5 class="text-muted font-weight-bold">Belum ada tamu hari ini</h5>
                </div>
            </div>
        </div>

    </div>
</div>

{{-- Modal Preview Foto --}}
<div class="modal fade" id="imageModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-transparent border-0 shadow-none">
            <div class="modal-body text-center position-relative">
                <button type="button" class="close text-white position-absolute" style="top: -30px; right: 0; opacity: 1;" data-dismiss="modal">&times;</button>
                <img src="" id="previewImg" class="img-fluid rounded-lg shadow-lg" style="max-height: 80vh; border: 4px solid white;">
            </div>
        </div>
    </div>
</div>

{{-- Modal Filter Cetak PDF --}}
<div class="modal fade" id="modalCetak" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 16px;">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title font-weight-bold">Cetak Laporan</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <form action="{{ route('satpam.laporan.pdf') }}" method="GET" target="_blank">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="text-muted small font-weight-bold">Dari Tanggal</label>
                        <input type="date" name="start_date" class="form-control rounded-pill" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="form-group">
                        <label class="text-muted small font-weight-bold">Sampai Tanggal</label>
                        <input type="date" name="end_date" class="form-control rounded-pill" value="{{ date('Y-m-d') }}" required>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light rounded-pill" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">
                        <i class="fas fa-file-pdf mr-1"></i> Download
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@stop

@section('js')
<script>
    // 1. Fungsi Tampilkan Modal Foto
    function showImage(src) {
        $('#previewImg').attr('src', src);
        $('#imageModal').modal('show');
    }

    // 2. Fungsi Proses Checkout
    function prosesCheckout(id, nama) {
        if(!confirm('Konfirmasi: Tamu atas nama "' + nama + '" sudah keluar/pulang?')) return;

        $.ajax({
            url: '/satpam/guest/' + id + '/checkout',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                refreshData(); // Refresh data langsung setelah sukses
            },
            error: function(xhr) {
                alert('Gagal memproses checkout. ' + (xhr.responseJSON ? xhr.responseJSON.message : ''));
            }
        });
    }

    // 3. Fungsi Utama Refresh Data
    function refreshData() {
        $.ajax({
            url: "{{ route('satpam.api.check') }}",
            success: function(data) {
                let rows = '';
                
                if(data.length === 0) {
                    $('#tamuTableBody').html('');
                    $('#emptyState').show();
                } else {
                    $('#emptyState').hide();
                    
                    data.forEach(tamu => {
                        let badge = '';
                        let actionBtn = '';
                        
                        // --- LOGIC BADGE & TOMBOL ---
                        if(tamu.status_approval === 'pending') {
                            badge = `<span class="badge badge-light-warning text-warning px-3 py-2 rounded-pill font-weight-bold border border-warning-soft">
                                        <i class="fas fa-spinner fa-spin mr-1"></i> MENUNGGU
                                     </span>`;
                        } 
                        else if(tamu.status_approval === 'approved') {
                            badge = `<span class="badge badge-light-success text-success px-3 py-2 rounded-pill font-weight-bold border border-success-soft">
                                        <i class="fas fa-door-open mr-1"></i> MASUK
                                     </span>`;
                            
                            // Tombol Checkout HANYA muncul jika status approved
                            actionBtn = `<button onclick="prosesCheckout(${tamu.id}, '${tamu.nama_tamu}')" 
                                            class="btn btn-sm btn-light-danger text-danger font-weight-bold shadow-sm border-0 transition-hover">
                                            <i class="fas fa-sign-out-alt mr-1"></i> Check Out
                                         </button>`;
                        } 
                        else if(tamu.status_approval === 'rejected') {
                            badge = `<span class="badge badge-light-danger text-danger px-3 py-2 rounded-pill font-weight-bold border border-danger-soft">
                                        <i class="fas fa-times-circle mr-1"></i> DITOLAK
                                     </span>`;
                        } 
                        else if(tamu.status_approval === 'checkout') {
                            badge = `<span class="badge badge-light-secondary text-secondary px-3 py-2 rounded-pill font-weight-bold border border-secondary-soft">
                                        <i class="fas fa-history mr-1"></i> PULANG
                                     </span>`;
                             
                             if(tamu.waktu_keluar) {
                                let jamKeluar = new Date(tamu.waktu_keluar).toLocaleTimeString('id-ID', {hour: '2-digit', minute:'2-digit'});
                                actionBtn = `<small class="text-muted font-weight-bold">Keluar: ${jamKeluar}</small>`;
                             }
                        }

                        // Format Jam Masuk & Foto URL
                        let jamMasuk = new Date(tamu.waktu_masuk).toLocaleTimeString('id-ID', {hour: '2-digit', minute:'2-digit'});
                        let fotoUrl = tamu.foto_wajah ? `/storage/${tamu.foto_wajah}` : 'https://placehold.co/100x100?text=No+Img';

                        rows += `
                            <tr>
                                <td class="pl-4 align-middle">
                                    <div class="d-flex align-items-center">
                                        <div class="bg-light-primary text-primary rounded p-2 mr-2 font-weight-bold">
                                            <i class="far fa-clock"></i>
                                        </div>
                                        <span class="text-dark font-weight-bold text-lg">${jamMasuk}</span>
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <img src="${fotoUrl}" 
                                         class="rounded-circle shadow-sm cursor-pointer hover-zoom" 
                                         width="50" height="50" style="object-fit:cover;"
                                         onclick="showImage('${fotoUrl}')">
                                </td>
                                <td class="align-middle">
                                    <div class="d-flex flex-column">
                                        <span class="font-weight-bold text-dark text-lg">${tamu.nama_tamu}</span>
                                        <small class="text-muted"><i class="fas fa-building mr-1"></i> ${tamu.asal_instansi || 'Pribadi'}</small>
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <div class="d-flex flex-column">
                                        <span class="text-primary font-weight-bold mb-1">
                                            <i class="fas fa-user-tie mr-1"></i> ${tamu.tujuan ? tamu.tujuan.name : '-'}
                                        </span>
                                        <div class="text-muted small text-truncate" style="max-width: 200px;">
                                            "${tamu.keperluan}"
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle text-center">
                                    ${badge}
                                </td>
                                <td class="align-middle text-center">
                                    ${actionBtn}
                                </td>
                            </tr>
                        `;
                    });
                    $('#tamuTableBody').html(rows);
                }
            }
        });
    }

    // Jalankan Refresh Data
    refreshData(); // Pertama kali
    setInterval(refreshData, 3000); // Ulang tiap 3 detik
</script>
@stop

@section('css')
<style>
    /* APEX THEME VARIABLES */
    :root {
        --primary-soft: #eef2f7;
        --success-soft: #d1fae5;
        --success-text: #065f46;
        --danger-soft: #fee2e2;
        --danger-text: #991b1b;
        --warning-soft: #fef3c7;
        --warning-text: #92400e;
        --info-soft: #e0f2fe;
        --secondary-soft: #f1f5f9;
        --card-radius: 16px;
    }

    .card-apex {
        background: #fff;
        border-radius: var(--card-radius);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s;
    }

    .table thead th {
        font-family: 'Nunito', sans-serif;
        color: #6c757d;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        background-color: #f8f9fa;
    }

    /* SOFT BADGES & BUTTONS */
    .bg-light-primary { background-color: #e3f2fd; color: #0d6efd; }
    
    .badge-light-warning { background-color: var(--warning-soft); color: var(--warning-text); }
    .badge-light-success { background-color: var(--success-soft); color: var(--success-text); }
    .badge-light-danger { background-color: var(--danger-soft); color: var(--danger-text); }
    .badge-light-secondary { background-color: var(--secondary-soft); color: #64748b; }

    .border-warning-soft { border-color: #fde68a !important; }
    .border-success-soft { border-color: #a7f3d0 !important; }
    .border-danger-soft { border-color: #fecaca !important; }
    .border-secondary-soft { border-color: #e2e8f0 !important; }

    .btn-light-danger { background-color: var(--danger-soft); color: var(--danger-text); }
    .btn-light-danger:hover { background-color: #fca5a5; color: #7f1d1d; transform: translateY(-2px); }

    .transition-hover { transition: all 0.2s ease; }
    .hover-zoom { transition: transform 0.2s; }
    .hover-zoom:hover { transform: scale(1.2); }
    
    .empty-icon-bg {
        width: 80px; height: 80px;
        background: var(--primary-soft);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
    }
</style>
@stop