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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Monitoring Tiket - SummitAdmin</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@300;400;500;600;700;800&family=Sora:wght@400;600;700&display=swap" rel="stylesheet">

    <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-orange:  #f9826c;
            --accent-green:   #3fb950;
            --accent-amber:   #e3b341;
            --text-primary:   #e6edf3;
            --text-secondary: #8b949e;
            --text-muted:     #6e7681;
        }

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

        /* ── PAGE TITLE ── */
        .page-title {
            font-family: 'Sora', sans-serif;
            font-size: 24px; font-weight: 700;
            color: var(--text-primary); margin: 0;
        }
        .page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

        /* ── STAT CARDS ── */
        .stat-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 24px;
            position: relative;
            overflow: hidden;
            transition: transform .2s, border-color .2s;
        }
        .stat-card:hover { transform: translateY(-3px); border-color: var(--border-light); }

        .stat-card::before {
            content: '';
            position: absolute; top: 0; left: 0;
            width: 3px; height: 100%;
            border-radius: 4px 0 0 4px;
        }
        .stat-blue::before   { background: var(--accent-blue); }
        .stat-teal::before   { background: var(--accent-teal); }
        .stat-orange::before { background: var(--accent-orange); }
        .stat-green::before  { background: var(--accent-green); }

        .stat-icon {
            width: 38px; height: 38px; border-radius: 10px;
            display: grid; place-items: center;
            font-size: 18px; margin-bottom: 14px;
        }
        .stat-blue   .stat-icon { background: rgba(88,166,255,.12);  color: var(--accent-blue); }
        .stat-teal   .stat-icon { background: rgba(57,208,200,.12);  color: var(--accent-teal); }
        .stat-orange .stat-icon { background: rgba(249,130,108,.12); color: var(--accent-orange); }
        .stat-green  .stat-icon { background: rgba(63,185,80,.12);   color: var(--accent-green); }

        .stat-label {
            font-size: 11px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 1px;
            color: var(--text-muted);
        }
        .stat-value {
            font-family: 'Sora', sans-serif;
            font-size: 32px; font-weight: 800;
            color: var(--text-primary);
            line-height: 1.1; margin: 6px 0 4px;
        }
        .stat-desc { font-size: 11.5px; color: var(--text-muted); }

        /* ── FILTER CHIPS ── */
        .filter-chip {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 14px; border-radius: 20px;
            font-size: 12px; font-weight: 600;
            border: 1px solid var(--border);
            background: var(--bg-elevated);
            color: var(--text-secondary);
            cursor: pointer; transition: all .18s;
        }
        .filter-chip:hover, .filter-chip.active {
            border-color: var(--accent-teal);
            background: rgba(57,208,200,.1);
            color: var(--accent-teal);
        }

        /* ── SEARCH BAR ── */
        .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: 150px;
        }

        /* ── DATE FILTER ── */
        .date-filter-box {
            display: flex; align-items: center; gap: 10px;
            background: var(--bg-surface);
            padding: 10px 18px; 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: var(--bg-elevated); border: 1px solid var(--border);
            border-radius: 6px; padding: 4px 8px; font-size: 12px;
            color: var(--text-primary); 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-cari:hover { opacity: 0.9; transform: scale(1.05); }

        .btn-reset {
            background: var(--bg-elevated); color: var(--text-secondary);
            border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px;
            font-size: 12px; transition: .2s;
        }
        .btn-reset:hover { border-color: var(--accent-orange); color: var(--accent-orange); }

        /* ── MODAL CUSTOM ── */
        .modal-content { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; color: var(--text-primary); }
        .modal-header { border-bottom: 1px solid var(--border); }
        .form-control { background: var(--bg-elevated) !important; border: 1px solid var(--border) !important; color: #fff !important; border-radius: 10px; }
        .form-control:focus { border-color: var(--accent-teal) !important; box-shadow: none; }

        /* ── 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;
        }

        .dark-table { width: 100%; border-collapse: collapse; min-width: 750px; }
        .dark-table thead th {
            background: var(--bg-elevated);
            padding: 12px 22px;
            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; }
        .dark-table tbody tr:hover { background: var(--bg-elevated); }
        .dark-table tbody td {
            padding: 15px 22px; font-size: 13.5px;
            color: var(--text-secondary); border: none;
            vertical-align: middle;
        }

        .ticket-id {
            font-family: monospace; font-size: 13px; font-weight: 700;
            color: var(--accent-blue);
            background: rgba(88,166,255,.08);
            border: 1px solid rgba(88,166,255,.2);
            border-radius: 6px; padding: 3px 9px;
            display: inline-block;
        }

        .climber-avatar {
            width: 34px; height: 34px; border-radius: 9px;
            background: linear-gradient(135deg, var(--accent-blue), #bc8cff);
            display: grid; place-items: center;
            font-size: 12px; font-weight: 800; color: #fff;
            flex-shrink: 0; text-transform: uppercase;
        }

        .cat-badge {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 4px 11px; border-radius: 20px;
            font-size: 11.5px; font-weight: 700;
            text-transform: uppercase; letter-spacing: .5px;
        }
        .cat-domestik { background: rgba(57,208,200,.1); border: 1px solid rgba(57,208,200,.25); color: var(--accent-teal); }
        .cat-mancanegara { background: rgba(249,130,108,.1); border: 1px solid rgba(249,130,108,.25); color: var(--accent-orange); }

        .price-chip { font-weight: 700; font-size: 13.5px; color: var(--accent-green); }

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

        .pagination-wrap { padding: 15px 22px; border-top: 1px solid var(--border); display: flex; justify-content: center; }
        .page-item .page-link { background-color: #1c2330 !important; border: 1px solid var(--border) !important; color: var(--text-secondary) !important; border-radius: 8px !important; margin: 0 3px; transition: 0.2s; }
        .page-item.active .page-link { background-color: var(--accent-teal) !important; border-color: var(--accent-teal) !important; color: var(--bg-base) !important; font-weight: 700; }
    </style>
</head>

<body>

    <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-4">
        <div>
            <h1 class="page-title">Monitoring Penjualan Tiket</h1>
            <p class="page-subtitle mb-0">Laporan transaksi harian dan filter rentang waktu.</p>
        </div>
        
        <div class="d-flex align-items-center gap-3">
            
            <button class="btn btn-outline-light border-secondary btn-sm rounded-3 px-3 py-2 d-flex align-items-center gap-2 fw-semibold" 
                    data-bs-toggle="modal" data-bs-target="#modalHarga">
                <i class="bi bi-gear-fill text-warning"></i> Atur Harga Tiket
            </button>

            
            <form action="<?php echo e(route(Route::currentRouteName())); ?>" method="GET" class="date-filter-box">
                <div class="date-input-group">
                    <label>Dari</label>
                    <input type="date" name="start_date" value="<?php echo e(request('start_date', date('Y-m-d'))); ?>">
                </div>
                <div class="date-input-group">
                    <label>Sampai</label>
                    <input type="date" name="end_date" value="<?php echo e(request('end_date', date('Y-m-d'))); ?>">
                </div>
                <div class="d-flex gap-2">
                    <button type="submit" class="btn-cari">Cari Data</button>
                    
                    <a href="<?php echo e(route(Route::currentRouteName())); ?>" class="btn-reset d-flex align-items-center justify-content-center" title="Reset Filter">
                        <i class="bi bi-arrow-clockwise" style="font-size: 16px;"></i>
                    </a>
                </div>
            </form>
        </div>
    </div>

    
    <div class="row g-3 mb-4">
        <div class="col-6 col-lg-3">
            <div class="stat-card stat-blue">
                <div class="stat-icon"><i class="bi bi-ticket-perforated-fill"></i></div>
                <div class="stat-label">Total Tiket</div>
                <div class="stat-value"><?php echo e($totalTiket); ?></div>
                <div class="stat-desc">Periode terpilih</div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="stat-card stat-teal">
                <div class="stat-icon"><i class="bi bi-people-fill"></i></div>
                <div class="stat-label">Domestik</div>
                <div class="stat-value"><?php echo e($totalDomestik); ?></div>
                <div class="stat-desc">WNI terjual</div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="stat-card stat-orange">
                <div class="stat-icon"><i class="bi bi-globe-americas"></i></div>
                <div class="stat-label">Mancanegara</div>
                <div class="stat-value"><?php echo e($totalMancanegara); ?></div>
                <div class="stat-desc">WNA terjual</div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="stat-card stat-green">
                <div class="stat-icon"><i class="bi bi-cash-coin"></i></div>
                <div class="stat-label">Total Pendapatan</div>
                <div class="stat-value" style="font-size:18px; padding-top:10px;">
                    Rp <?php echo e(number_format($income, 0, ',', '.')); ?>

                </div>
                <div class="stat-desc">Periode terpilih</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 class="d-flex align-items-center gap-3">
                <div>
                    <div style="font-size:14px; font-weight:700; color:var(--text-primary);">Data Penjualan</div>
                    <div style="font-size:11.5px; color:var(--text-muted); margin-top:2px;">
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(request('start_date')): ?>
                            Menampilkan data: <?php echo e(request('start_date')); ?> s/d <?php echo e(request('end_date')); ?>

                        <?php else: ?>
                            Menampilkan data: <strong>Hari Ini</strong>
                        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    </div>
                </div>
                
                <div class="ms-4 d-flex gap-2">
                    <button class="filter-chip active" data-filter="all">Semua</button>
                    <button class="filter-chip" data-filter="domestik">🇮🇩 Domestik</button>
                    <button class="filter-chip" data-filter="mancanegara">🌍 Mancanegara</button>
                </div>
            </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>

        <div style="overflow-x:auto;">
            <table class="dark-table" id="tiketTable">
                <thead>
                    <tr>
                        <th>ID Tiket</th>
                        <th>Nama Pendaki</th>
                        <th>Kategori</th>
                        <th>Harga Tiket</th>
                        <th>Waktu Transaksi</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $climbings; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $climbing): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                    <?php
                        $catName = $climbing->ticket->name ?? 'Domestik';
                        $lowerCat = strtolower($catName);
                    ?>
                    <tr data-category="<?php echo e($lowerCat); ?>">
                        <td><span class="ticket-id">#TKT-<?php echo e(str_pad($climbing->id, 5, '0', STR_PAD_LEFT)); ?></span></td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="climber-avatar"><?php echo e(strtoupper(substr($climbing->name, 0, 2))); ?></div>
                                <span style="font-weight:600; color:var(--text-primary);"><?php echo e($climbing->name); ?></span>
                            </div>
                        </td>
                        <td>
                            <span class="cat-badge <?php echo e($lowerCat == 'mancanegara' ? 'cat-mancanegara' : 'cat-domestik'); ?>">
                                <?php echo e($lowerCat == 'mancanegara' ? '🌍' : '🇮🇩'); ?> <?php echo e($catName); ?>

                            </span>
                        </td>
                        <td><span class="price-chip">Rp <?php echo e(number_format($climbing->ticket->price ?? 0, 0, ',', '.')); ?></span></td>
                        <td>
                            <div style="font-size:13px; color:var(--text-primary);"><?php echo e($climbing->created_at->format('d M Y')); ?></div>
                            <div style="font-size:11px; color:var(--text-muted); margin-top:2px;"><?php echo e($climbing->created_at->format('H:i')); ?> WITA</div>
                        </td>
                    </tr>
                    <?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; ?>
                    <tr>
                        <td colspan="5" class="text-center py-5">Data tidak ditemukan untuk periode ini.</td>
                    </tr>
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                </tbody>
            </table>
        </div>

        
        <div class="pagination-wrap">
            <?php echo e($climbings->links()); ?>

        </div>

        <div class="table-footer-bar d-flex flex-wrap align-items-center justify-content-between gap-2">
            <span>Menampilkan <strong id="visibleCount"><?php echo e($climbings->count()); ?></strong> transaksi dari total <?php echo e($climbings->total()); ?></span>
        </div>
    </div>

    
    <div class="modal fade" id="modalHarga" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="background: #1c2330; border: 1px solid #30363d;">
                <form action="<?php echo e(route('admin.tickets.update_prices')); ?>" method="POST">
                    <?php echo csrf_field(); ?>
                    <?php echo method_field('PUT'); ?>
                    <div class="modal-header border-secondary">
                        <h5 class="modal-title fw-bold text-white">
                            <i class="bi bi-cash-coin me-2 text-warning"></i> Pengaturan Harga Tiket
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-4">
                        
                        <div class="mb-4">
                            <label class="form-label d-block fw-bold mb-2" style="color: #39d0c8; font-size: 13px;">
                                🇮🇩 HARGA TIKET DOMESTIK (WNI)
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-dark border-secondary text-white">Rp</span>
                                <input type="number" name="domestik_price" class="form-control" 
                                       placeholder="Contoh: 50000" required>
                            </div>
                        </div>

                        
                        <div class="mb-3">
                            <label class="form-label d-block fw-bold mb-2" style="color: #f9826c; font-size: 13px;">
                                🌍 HARGA TIKET MANCANEGARA (WNA)
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-dark border-secondary text-white">Rp</span>
                                <input type="number" name="mancanegara_price" class="form-control" 
                                       placeholder="Contoh: 150000" required>
                            </div>
                        </div>

                        <div class="text-info small mt-4 p-2 rounded" style="background: rgba(88,166,255,0.1);">
                            <i class="bi bi-info-circle me-1"></i> Perubahan harga akan diterapkan pada pendaftaran pendaki baru.
                        </div>
                    </div>
                    <div class="modal-footer border-secondary">
                        <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-sm btn-primary px-4 fw-bold">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

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

    <script>
        const searchInput = document.getElementById('searchInput');
        const filterChips = document.querySelectorAll('.filter-chip');
        const tableRows = document.querySelectorAll('#tiketTable tbody tr');
        const visibleCountText = document.getElementById('visibleCount');

        function filterTable() {
            const searchText = searchInput.value.toLowerCase();
            const activeFilter = document.querySelector('.filter-chip.active').dataset.filter;
            let count = 0;

            tableRows.forEach(row => {
                if (row.dataset.category) {
                    const category = row.dataset.category;
                    const name = row.textContent.toLowerCase();
                    
                    const matchesSearch = name.includes(searchText);
                    const matchesFilter = activeFilter === 'all' || category === activeFilter;

                    if (matchesSearch && matchesFilter) {
                        row.style.display = '';
                        count++;
                    } else {
                        row.style.display = 'none';
                    }
                }
            });
            visibleCountText.textContent = count;
        }

        searchInput.addEventListener('input', filterTable);

        filterChips.forEach(chip => {
            chip.addEventListener('click', function() {
                filterChips.forEach(c => c.classList.remove('active'));
                this.classList.add('active');
                filterTable();
            });
        });
    </script>
</body>
</html><?php /**PATH C:\laragon\www\Pendaki_App-main\resources\views/admin/tiket.blade.php ENDPATH**/ ?>