<?php $__env->startSection('content'); ?>


<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">

<style>
    /* ── VARIABLES ── */
    :root {
        --bg-base:         #0d1117;
        --bg-surface:      #161b22;
        --bg-elevated:     #1c2330;
        --bg-card:         #21262d;
        --border:          #30363d;
        --accent-teal:     #39d0c8;
        --accent-blue:     #58a6ff;
        --accent-red:      #f85149;
        --accent-purple:   #bc8cff;
        --accent-amber:    #e3b341;
        --text-primary:    #e6edf3;
        --text-secondary:  #8b949e;
        --text-muted:      #6e7681;
    }

    /* ── MINI STAT CARDS ── */
    .mini-stat {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 16px 20px;
        transition: border-color .2s, transform .2s;
    }
    .mini-stat:hover { border-color: #3d444d; transform: translateY(-2px); }
    .mini-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); }
    .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; margin-top: 24px; }
    .table-card-header { background: var(--bg-surface); border-bottom: 1px solid var(--border); padding: 18px 24px; }

    /* Search Box */
    .search-wrap { display: flex; align-items: center; gap: 8px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 7px 13px; transition: border-color .2s; }
    .search-wrap:focus-within { border-color: var(--accent-teal); }
    .search-wrap input { background: none; border: none; outline: none; font-family: inherit; font-size: 13px; color: var(--text-primary); width: 200px; }

    /* Dark Table Styles */
    .dark-table { width: 100%; border-collapse: collapse; min-width: 1100px; }
    .dark-table thead th { background: var(--bg-elevated); padding: 12px 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); border: none; white-space: nowrap; }
    .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: 15px 20px; font-size: 13px; color: var(--text-secondary); border: none; vertical-align: middle; }

    .status-danger-blink { 
        display: inline-flex; 
        align-items: center; 
        gap: 5px; 
        background: rgba(248,81,73,.2); 
        border: 1px solid #ff3e33; 
        color: #ff3e33; 
        font-size: 11px; 
        font-weight: 800; 
        padding: 4px 12px; 
        border-radius: 20px; 
        animation: danger-pulse 0.8s infinite alternate;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    @keyframes danger-pulse {
        0% { transform: scale(1); background: rgba(248,81,73,.2); box-shadow: 0 0 0px rgba(248,81,73, 0); }
        100% { transform: scale(1.05); background: rgba(248,81,73,.4); box-shadow: 0 0 15px rgba(248,81,73, 0.5); }
    }

    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

    .time-main { font-size: 13px; color: var(--text-primary); font-weight: 500; }
    .time-sub  { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: block; }

    .table-footer-bar { padding: 14px 22px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); background: var(--bg-surface); }
</style>


<div class="pt-2 mb-4 d-flex align-items-center justify-content-between flex-wrap gap-3">
    <div>
        <h1 style="font-family:'Sora',sans-serif; font-size:24px; font-weight:700; color:var(--text-primary); margin:0;">
            <?php echo e(($fromDate && $toDate) ? 'Hasil Pencarian Data' : 'Data Pendaki Hari Ini'); ?>

        </h1>
        <p style="color:#8b949e; font-size:13px; margin-top:4px;">
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($fromDate && $toDate): ?>
                📅 Periode: <strong><?php echo e(\Carbon\Carbon::parse($fromDate)->translatedFormat('d M Y')); ?></strong> - <strong><?php echo e(\Carbon\Carbon::parse($toDate)->translatedFormat('d M Y')); ?></strong>
            <?php else: ?>
                📅 Menampilkan data pendaftaran tanggal: <strong><?php echo e(\Carbon\Carbon::today()->translatedFormat('d F Y')); ?></strong>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        </p>
    </div>

    <form action="<?php echo e(route('admin.climbing')); ?>" method="GET" class="d-flex align-items-end gap-2 p-2 rounded shadow-sm" style="background: var(--bg-surface); border: 1px solid var(--border);">
        <div style="min-width: 130px;">
            <label class="d-block mb-1" style="font-size: 9px; font-weight: 800; color: #8b949e; text-transform: uppercase;">Dari</label>
            <input type="date" name="from_date" value="<?php echo e($fromDate); ?>" class="form-control form-control-sm border-0 text-white shadow-none" style="background: #0d1117; font-size: 12px; color-scheme: dark;">
        </div>
        <div style="min-width: 130px;">
            <label class="d-block mb-1" style="font-size: 9px; font-weight: 800; color: #8b949e; text-transform: uppercase;">Sampai</label>
            <input type="date" name="to_date" value="<?php echo e($toDate); ?>" class="form-control form-control-sm border-0 text-white shadow-none" style="background: #0d1117; font-size: 12px; color-scheme: dark;">
        </div>
        <div class="d-flex gap-1">
            <button type="submit" class="btn btn-sm px-3" style="background: var(--accent-teal); color: #0d1117; font-weight: 700;">Cari</button>
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($fromDate || $toDate): ?>
                <a href="<?php echo e(route('admin.climbing')); ?>" class="btn btn-sm btn-outline-secondary px-2" title="Reset">
                    <i class="bi bi-arrow-clockwise"></i>
                </a>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        </div>
    </form>
</div>


<div class="row g-3 mb-2" wire:poll.30s>
    <div class="col-6 col-md-3">
        <div class="mini-stat">
            <div class="mini-stat-label">Total Data</div>
            <div class="mini-stat-value"><?php echo e($totalTiket); ?></div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="mini-stat">
            <div class="mini-stat-label">Masih di Atas</div>
            <div class="mini-stat-value" style="color:#f9826c;"><?php echo e($climbings->whereNull('check_out_date')->count()); ?></div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="mini-stat">
            <div class="mini-stat-label">Sudah Turun</div>
            <div class="mini-stat-value" style="color:#3fb950;"><?php echo e($climbings->whereNotNull('check_out_date')->count()); ?></div>
        </div>
    </div>
</div>

<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(session('success')): ?>
    <div class="alert alert-success border-0 shadow-sm mt-3" style="background: rgba(63, 185, 80, 0.1); color: var(--accent-green); border-radius: 12px;">
        <i class="bi bi-check-circle-fill me-2"></i> <?php echo e(session('success')); ?>

    </div>
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

<div class="table-card">
    <div class="table-card-header d-flex flex-wrap align-items-center justify-content-between gap-3">
        <div class="search-wrap">
            <i class="bi bi-search" style="color:#6e7681; font-size:13px;"></i>
            <input type="text" id="searchInput" placeholder="Cari nama atau tiket...">
        </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-2279050821-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 class="table-footer-bar d-flex justify-content-between">
        <span>Menampilkan <strong><?php echo e($climbings->count()); ?></strong> dari <strong><?php echo e($totalTiket); ?></strong> pendaki</span>
    </div>
</div>

<script>
    // FUNGSI UTAMA REALTIME
    function initRealtime() {
        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 baru diterima!');
                    // Memicu refresh komponen tabel Livewire secara instan
                    if (typeof Livewire !== 'undefined') {
                        Livewire.dispatch('refresh-data'); 
                    }
                });
        }
    }

    // Jalankan saat halaman pertama kali dibuka
    document.addEventListener('DOMContentLoaded', () => {
        initRealtime();
        
        // Setup 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';
                });
            });
        }
    });

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

<?php $__env->stopSection(); ?>
<?php echo $__env->make('admin.dashboardAdmin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\Pendaki_App-main\resources\views/admin/climbings.blade.php ENDPATH**/ ?>