<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistem Monitoring Pendakian | Loket</title>

    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700&display=swap" rel="stylesheet">

    
    <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>

    <style>
        :root {
            --bg-base:         #0d1117;
            --bg-surface:      #161b22;
            --bg-elevated:     #1c2330;
            --bg-card:         #21262d;
            --border:          #30363d;
            --border-light:    #3d444d;
            --accent-teal:     #39d0c8;
            --accent-blue:     #58a6ff;
            --accent-green:    #3fb950;
            --accent-red:      #f85149;
            --accent-amber:    #e3b341;
            --accent-orange:   #f9826c;
            --text-primary:    #e6edf3;
            --text-secondary:  #8b949e;
            --text-muted:      #6e7681;
        }

        * { box-sizing: border-box; }
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--bg-base);
            color: var(--text-primary);
            min-height: 100vh;
            padding: 28px 20px;
        }

        /* ── TOPBAR ── */
        .topbar {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 16px 24px;
            margin-bottom: 28px;
        }
        .site-title {
            font-family: 'Sora', sans-serif;
            font-size: 20px; font-weight: 700;
            color: var(--text-primary); margin: 0;
        }
        .officer-badge {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 4px 12px;
            font-size: 12px; color: var(--text-muted);
        }

        /* ── DATE FILTER BOX ── */
        .date-filter-box {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--bg-elevated);
            padding: 8px 15px;
            border-radius: 12px;
            border: 1px solid var(--border);
        }
        .date-input-group { display: flex; align-items: center; gap: 8px; }
        .date-input-group label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
        .date-input-group input {
            background: #2d333b;
            border: 1px solid var(--border-light);
            border-radius: 6px; padding: 5px 10px; font-size: 12px;
            color: #ffffff;
            outline: none;
        }
        .btn-cari {
            background: var(--accent-teal); color: var(--bg-base);
            border: none; border-radius: 6px; padding: 5px 15px;
            font-size: 12px; font-weight: 700; transition: .2s;
        }
        .btn-reset {
            background: var(--bg-surface); color: var(--text-secondary);
            border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px;
            font-size: 12px; transition: .2s; text-decoration: none;
        }

        /* ── MINI STATS ── */
        .mini-stat {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px 20px;
        }
        .mini-stat-value { font-family: 'Sora', sans-serif; font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.1; margin-top: 4px; }

        /* ── TABLE CARD ── */
        .table-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            overflow: hidden;
        }
        .table-card-header {
            background: var(--bg-surface);
            border-bottom: 1px solid var(--border);
            padding: 18px 24px;
        }
        .search-wrap {
            display: flex; align-items: center; gap: 8px;
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 8px; padding: 7px 13px;
        }
        .search-wrap input { background: none; border: none; outline: none; font-size: 13px; color: var(--text-primary); width: 170px; }

        /* ── TABLE STYLES ── */
        .dark-table { width: 100%; border-collapse: collapse; min-width: 800px; }
        .dark-table thead th {
            background: var(--bg-elevated); padding: 12px 18px;
            font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); border: none;
        }
        .dark-table tbody tr { border-bottom: 1px solid var(--border); transition: background .15s; cursor: pointer; }
        .dark-table tbody tr:hover { background: var(--bg-elevated); }
        .dark-table tbody td { padding: 14px 18px; font-size: 13px; color: var(--text-secondary); border: none; vertical-align: middle; }

        /* ── STATUS BOX (CL / DN / ⚠️) ── */
        .status-box {
            width: 36px; height: 36px; border-radius: 9px;
            display: grid; place-items: center; 
            font-size: 11px; font-weight: 800; color: #fff;
            letter-spacing: 0.5px;
        }
        .status-cl { background: linear-gradient(135deg, var(--accent-teal), var(--accent-blue)); }
        .status-dn { background: linear-gradient(135deg, #1f6631, var(--accent-green)); }
        .status-overdue { background: linear-gradient(135deg, var(--accent-red), #b62323); }

        /* ── TOMBOL MODERN ── */
        .btn-finish-modern {
            background: linear-gradient(135deg, #238636, #2ea043);
            color: white; border: none; border-radius: 8px;
            padding: 7px 16px; font-size: 12px; font-weight: 700;
            transition: all 0.2s; box-shadow: 0 4px 12px rgba(35, 134, 54, 0.2);
        }
        .btn-finish-modern:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(35, 134, 54, 0.4); filter: brightness(1.1); }

        .btn-logout-modern {
            background: linear-gradient(135deg, #f85149, #b62323);
            color: white; border: none; border-radius: 10px;
            padding: 9px 18px; font-size: 13px; font-weight: 700;
            display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s;
        }

        .status-done-chip {
            display: inline-flex; align-items: center; gap: 6px;
            background: rgba(63, 185, 80, 0.15); border: 1px solid rgba(63, 185, 80, 0.4);
            color: var(--accent-green); padding: 4px 12px; border-radius: 20px;
            font-size: 11px; font-weight: 700;
        }
        .status-overdue-blink { color: var(--accent-red); font-weight: 800; animation: blinker 1.2s linear infinite; }
        @keyframes blinker { 50% { opacity: 0; } }

        /* ── PERBAIKAN NOTIFIKASI FLEKSIBEL ── */
        .notif-btn-wrap { position: relative; }
        
        .notif-dropdown { 
            display: none; 
            position: absolute; 
            top: 50px; 
            right: 0; 
            width: 320px; 
            z-index: 9999; 
            background: var(--bg-surface); 
            border: 1px solid var(--border); 
            border-radius: 14px; 
            box-shadow: 0 16px 48px rgba(0,0,0,.85); 
        }

        .shake { animation: shake .5s infinite; }
        @keyframes shake { 0%,100%{transform:rotate(0);} 25%{transform:rotate(10deg);} 75%{transform:rotate(-10deg);} }
        
        .time-main { font-size: 13px; color: var(--text-primary); font-weight: 600; }
        .time-sub { font-size: 11px; color: var(--text-muted); display: block; }

        /* ── RESPONSIVE ADJUSTMENTS ── */
        @media (max-width: 991px) {
            .topbar { flex-direction: column; align-items: flex-start !important; }
            .date-filter-box { width: 100%; flex-wrap: wrap; }
            .date-input-group { width: 100%; }
        }
        
        @media (max-width: 576px) {
            body { padding: 15px 10px; }
            .mini-stat-value { font-size: 20px; }
            .site-title { font-size: 18px; }
            .table-card-header { flex-direction: column; gap: 15px; align-items: flex-start !important; }
            .search-wrap { width: 100%; }
            .search-wrap input { width: 100%; }
            
            .notif-dropdown {
                position: fixed; 
                left: 10px; 
                right: 10px;
                top: 80px; 
                width: calc(100% - 20px); 
                max-width: none;
            }
        }
    </style>
    <?php echo \Livewire\Mechanisms\FrontendAssets\FrontendAssets::styles(); ?>

</head>

<body>

<?php
    $overdueCount = isset($overdueGlobal) ? $overdueGlobal->count() : 0;
    $totalPendaki = $climbings->count();
    $masihDiAtas = $climbings->whereNull('check_out_date')->count();
    $sudahTurun = $climbings->whereNotNull('check_out_date')->count();
    
    // SESUAIKAN: Tangkap variabel filter agar bisa dikirim ke Livewire
    $fromDate = request('from_date', date('Y-m-d'));
    $toDate = request('to_date', date('Y-m-d'));
?>

<div class="container-fluid" style="max-width:1400px;">

    
    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($overdueCount > 0): ?>
    <div class="alert-overdue d-flex align-items-center gap-3 mb-4" style="background: rgba(248,81,73,0.1); border: 1px solid var(--accent-red); color: var(--accent-red); padding: 12px 20px; border-radius: 12px;">
        <i class="bi bi-exclamation-triangle-fill fs-5"></i>
        <span class="small"><strong>Peringatan Keamanan:</strong> Ada <strong><?php echo e($overdueCount); ?> pendaki</strong> yang terlambat turun melebihi 25 jam!</span>
    </div>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

    
    <div class="topbar d-flex flex-wrap align-items-center justify-content-between gap-3">
        <div>
            <h1 class="site-title mb-1">Portal Ticket Counter</h1>
            <div class="officer-badge">
                Petugas: <strong><?php echo e(auth('ticket_counter')->user()->name); ?></strong>
            </div>
        </div>

        <div class="d-flex align-items-center gap-3 flex-wrap">
            
            <form action="<?php echo e(route('ticket.dashboard')); ?>" method="GET" class="date-filter-box flex-grow-1">
                <div class="date-input-group">
                    <label>Dari</label>
                    <input type="date" name="from_date" value="<?php echo e($fromDate); ?>">
                </div>
                <div class="date-input-group">
                    <label>Sampai</label>
                    <input type="date" name="to_date" value="<?php echo e($toDate); ?>">
                </div>
                <div class="d-flex gap-2">
                    <button type="submit" class="btn-cari">Cari</button>
                    <a href="<?php echo e(route('ticket.dashboard')); ?>" class="btn-reset d-flex align-items-center justify-content-center">
                        <i class="bi bi-arrow-clockwise"></i>
                    </a>
                </div>
            </form>

            <div class="d-flex align-items-center gap-2">
                <div class="notif-btn-wrap" id="notifWrap">
                    <div class="btn btn-outline-secondary <?php echo e($overdueCount > 0 ? 'shake' : ''); ?>" style="border-radius:10px; border-color:var(--border);">
                        <i class="bi bi-bell-fill"></i>
                    </div>
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($overdueCount > 0): ?> <span class="badge rounded-circle bg-danger" style="position: absolute; top: -5px; right: -5px; font-size: 10px;"><?php echo e($overdueCount); ?></span> <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    
                    <div class="notif-dropdown" id="notifDropdown">
                        <div class="notif-dropdown-header d-flex align-items-center gap-2 p-3 border-bottom border-secondary small fw-bold">
                            <i class="bi bi-exclamation-triangle-fill"></i> Peringatan Terlambat
                        </div>
                        <div class="p-2" style="max-height: 400px; overflow-y: auto;">
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(isset($overdueGlobal)): ?>
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $overdueGlobal; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $oc): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                                    <div class="p-2 border-bottom border-secondary">
                                        <span class="text-white small fw-bold"><?php echo e($oc->name); ?></span>
                                        <span class="text-danger d-block" style="font-size:11px;">
                                            Naik: <?php echo e($oc->created_at->timezone('Asia/Makassar')->format('d M, H:i')); ?> WITA
                                        </span>
                                        <span class="badge bg-danger mt-1" style="font-size: 9px;">
                                            Terlambat: <?php echo e(floor($oc->created_at->diffInHours(now()))); ?> Jam
                                        </span>
                                    </div>
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
                                    <div class="p-3 text-center text-muted small">Semua pendaki aman.</div>
                                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                        </div>
                    </div>
                </div>

                <form method="POST" action="<?php echo e(route('ticket.logout')); ?>">
                    <?php echo csrf_field(); ?>
                    <button type="submit" class="btn-logout-modern">
                        <i class="bi bi-box-arrow-right"></i> Logout
                    </button>
                </form>
            </div>
        </div>
    </div>

    
    <div class="row g-3 mb-4 text-center" wire:poll.30s>
        <div class="col-4"><div class="mini-stat"><div class="mini-stat-label small">Total</div><div class="mini-stat-value"><?php echo e($totalPendaki); ?></div></div></div>
        <div class="col-4"><div class="mini-stat"><div class="mini-stat-label small text-warning">Naik</div><div class="mini-stat-value text-warning"><?php echo e($masihDiAtas); ?></div></div></div>
        <div class="col-4"><div class="mini-stat"><div class="mini-stat-label small text-success">Turun</div><div class="mini-stat-value text-success"><?php echo e($sudahTurun); ?></div></div></div>
    </div>

    
    <div class="table-card">
        <div class="table-card-header d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div style="font-size:14px; font-weight:700;">Data Aktivitas Pendaki</div>
            <div class="search-wrap">
                <i class="bi bi-search" style="color:var(--text-muted); font-size:13px;"></i>
                <input type="text" id="searchInput" placeholder="Cari nama...">
            </div>
        </div>

        
        <?php
$__split = function ($name, $params = []) {
    return [$name, $params];
};
[$__name, $__params] = $__split('climbing-table', ['fromDate' => $fromDate, 'toDate' => $toDate]);

$__keyOuter = $__key ?? null;

$__key = null;
$__componentSlots = [];

$__key ??= \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::generateKey('lw-3774300987-0', $__key);

$__html = app('livewire')->mount($__name, $__params, $__key, $__componentSlots);

echo $__html;

unset($__html);
unset($__key);
$__key = $__keyOuter;
unset($__keyOuter);
unset($__name);
unset($__params);
unset($__componentSlots);
unset($__split);
?>
    </div>
</div>


<?php
$__split = function ($name, $params = []) {
    return [$name, $params];
};
[$__name, $__params] = $__split('climbing-detail');

$__keyOuter = $__key ?? null;

$__key = null;
$__componentSlots = [];

$__key ??= \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::generateKey('lw-3774300987-1', $__key);

$__html = app('livewire')->mount($__name, $__params, $__key, $__componentSlots);

echo $__html;

unset($__html);
unset($__key);
$__key = $__keyOuter;
unset($__keyOuter);
unset($__name);
unset($__params);
unset($__componentSlots);
unset($__split);
?>
<?php
$__split = function ($name, $params = []) {
    return [$name, $params];
};
[$__name, $__params] = $__split('guide-detail');

$__keyOuter = $__key ?? null;

$__key = null;
$__componentSlots = [];

$__key ??= \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::generateKey('lw-3774300987-2', $__key);

$__html = app('livewire')->mount($__name, $__params, $__key, $__componentSlots);

echo $__html;

unset($__html);
unset($__key);
$__key = $__keyOuter;
unset($__keyOuter);
unset($__name);
unset($__params);
unset($__componentSlots);
unset($__split);
?>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
    // FUNGSI UTAMA REALTIME LOKET
    function initTicketRealtime() {
        if (window.Echo) {
            // Berhenti mendengarkan dulu untuk mencegah duplikasi listener
            window.Echo.leave('pendakian');
            
            window.Echo.channel('pendakian')
                .listen('.pendaki.baru', (e) => {
                    console.log('Sinyal pendaftaran diterima oleh Loket!');
                    // Memicu refresh komponen tabel & statistik tanpa reload halaman penuh
                    if (typeof Livewire !== 'undefined') {
                        Livewire.dispatch('refresh-data'); 
                    }
                });
        }
    }

    // Jalankan saat halaman pertama kali dibuka
    document.addEventListener('DOMContentLoaded', () => {
        initTicketRealtime();

        // Client-side Search
        const searchInput = document.getElementById('searchInput');
        if (searchInput) {
            searchInput.addEventListener('input', function () {
                const q = this.value.toLowerCase();
                document.querySelectorAll('#mainTable tbody tr').forEach(row => {
                    row.style.display = row.textContent.toLowerCase().includes(q) ? '' : 'none';
                });
            });
        }

        // Notification Dropdown Logic
        const notifWrap = document.getElementById('notifWrap');
        const notifDropdown = document.getElementById('notifDropdown');
        if(notifWrap && notifDropdown) {
            notifWrap.addEventListener('click', (e) => {
                e.stopPropagation();
                notifDropdown.style.display = notifDropdown.style.display === 'block' ? 'none' : 'block';
            });
            document.addEventListener('click', () => { if(notifDropdown) notifDropdown.style.display = 'none'; });
        }
    });

    // Jalankan juga saat navigasi Livewire (jika menggunakan wire:navigate)
    document.addEventListener('livewire:navigated', () => {
        initTicketRealtime();
    });

    // Listeners for Modals
    document.addEventListener('livewire:init', () => {
        Livewire.on('openClimbingDetailModal', () => {
            let el = document.getElementById('climbingDetailModal');
            if(el) { (new bootstrap.Modal(el)).show(); }
        });
        Livewire.on('openGuideDetailModal', () => {
            let el = document.getElementById('guideDetailModal');
            if(el) { (new bootstrap.Modal(el)).show(); }
        });
    });
</script>

<?php echo \Livewire\Mechanisms\FrontendAssets\FrontendAssets::scripts(); ?>

</body>
</html><?php /**PATH C:\laragon\www\Pendaki_App-main\resources\views/ticketCounter/dashboard.blade.php ENDPATH**/ ?>