@extends('admin.layout')

@section('title', 'Monitor Pesanan Live')

@section('content')
<style>
    .pulse-red {
        animation: pulse-red 2s infinite;
    }
    @keyframes pulse-red {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(186, 26, 26, 0.7); }
        70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(186, 26, 26, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(186, 26, 26, 0); }
    }
    .pulse-amber {
        animation: pulse-amber 2s infinite;
    }
    @keyframes pulse-amber {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(232, 168, 56, 0.7); }
        70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(232, 168, 56, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(232, 168, 56, 0); }
    }
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #cbc4d2;
        border-radius: 10px;
    }
</style>

<div class="flex flex-col gap-6 flex-1 h-full min-h-[calc(100vh-140px)]">
    <!-- Top App Bar -->
    <header class="flex flex-wrap gap-4 justify-between items-center">
        <div class="flex items-center gap-4 flex-wrap">
            <h2 class="font-headline-md text-2xl text-primary font-bold">Monitor Pesanan Live</h2>
            <div class="flex items-center gap-2 px-3 py-1 bg-error-container text-error rounded-full text-xs font-bold pulse-red shadow-sm">
                <span class="w-2 h-2 rounded-full bg-error"></span>
                LIVE
            </div>
            <span class="text-xs text-on-surface-variant font-medium">Terakhir diperbarui: <span id="timestamp" class="font-bold">{{ now()->format('H:i:s') }} WIB</span></span>
        </div>
        <div class="flex items-center gap-4 flex-wrap">
            <div class="flex items-center bg-surface-container-lowest px-3 py-1.5 rounded-lg border border-outline-variant shadow-sm">
                <span class="text-xs font-semibold mr-3 text-on-surface-variant">Auto-refresh (10s)</span>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input id="toggle-auto-refresh" checked="" class="sr-only peer" type="checkbox"/>
                    <div class="w-9 h-5 bg-outline-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary"></div>
                </label>
            </div>
            <button id="btn-manual-refresh" type="button" class="flex items-center gap-2 bg-primary text-on-primary px-4 py-2 rounded-lg text-sm font-bold hover:opacity-90 active:scale-95 transition-all shadow-sm">
                <span id="icon-refresh" class="material-symbols-outlined text-[20px]">refresh</span>
                Refresh
            </button>
        </div>
    </header>

    <!-- STATUS SUMMARY CARDS -->
    <section class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-4">
        <!-- Searching -->
        <div class="bg-surface-container-lowest p-4 rounded-xl shadow-sm border-l-4 border-[#E8A838] flex flex-col justify-between hover:shadow-md transition-shadow">
            <div class="flex justify-between items-start">
                <span class="text-xs font-bold text-on-surface-variant tracking-wider">MENCARI</span>
                <div class="w-3 h-3 rounded-full bg-[#E8A838] pulse-amber"></div>
            </div>
            <div class="mt-3">
                <span id="count-mencari" class="text-3xl font-bold text-on-surface leading-none">{{ $mencariCount }}</span>
                <p class="text-xs text-on-surface-variant mt-1 font-medium">Pesanan Aktif</p>
            </div>
        </div>
        <!-- Confirmed -->
        <div class="bg-surface-container-lowest p-4 rounded-xl shadow-sm border-l-4 border-primary flex flex-col justify-between hover:shadow-md transition-shadow">
            <span class="text-xs font-bold text-on-surface-variant tracking-wider">TERKONFIRMASI</span>
            <div class="mt-3">
                <span id="count-terkonfirmasi" class="text-3xl font-bold text-on-surface leading-none">{{ $terkonfirmasiCount }}</span>
                <p class="text-xs text-on-surface-variant mt-1 font-medium">Menunggu Mitra</p>
            </div>
        </div>
        <!-- On The Way -->
        <div class="bg-surface-container-lowest p-4 rounded-xl shadow-sm border-l-4 border-[#1B6CA8] flex flex-col justify-between hover:shadow-md transition-shadow">
            <span class="text-xs font-bold text-on-surface-variant tracking-wider">MENUJU LOKASI</span>
            <div class="mt-3">
                <span id="count-otw" class="text-3xl font-bold text-on-surface leading-none">{{ $otwCount }}</span>
                <p class="text-xs text-on-surface-variant mt-1 font-medium">Mitra di Jalan</p>
            </div>
        </div>
        <!-- In Progress -->
        <div class="bg-surface-container-lowest p-4 rounded-xl shadow-sm border-l-4 border-[#2D8A39] flex flex-col justify-between hover:shadow-md transition-shadow">
            <span class="text-xs font-bold text-on-surface-variant tracking-wider">SEDANG BERLANGSUNG</span>
            <div class="mt-3">
                <span id="count-berlangsung" class="text-3xl font-bold text-on-surface leading-none">{{ $berlangsungCount }}</span>
                <p class="text-xs text-on-surface-variant mt-1 font-medium">Sesi Berjalan</p>
            </div>
        </div>
        <!-- Escalated -->
        <div class="bg-error-container p-4 rounded-xl shadow-sm border-l-4 border-error flex flex-col justify-between hover:shadow-md transition-shadow">
            <div class="flex justify-between items-start">
                <span class="text-xs font-bold text-error tracking-wider">ESKALASI</span>
                <span class="material-symbols-outlined text-error font-bold text-lg" style="font-variation-settings: 'FILL' 1;">warning</span>
            </div>
            <div class="mt-3">
                <span id="count-eskalasi" class="text-3xl font-bold text-error leading-none">{{ $eskalasiCount }}</span>
                <p class="text-xs text-error mt-1 font-medium">Butuh Tindakan</p>
            </div>
        </div>
    </section>

    <!-- FILTER BAR -->
    <form method="GET" action="{{ route('admin.pesanan-live') }}" class="bg-surface-container-lowest p-3 px-4 rounded-xl shadow-sm flex flex-wrap items-center justify-between gap-4 border border-outline-variant/50">
        <div class="flex flex-wrap items-center gap-4 w-full lg:w-auto">
            <div class="flex items-center gap-2">
                <span class="material-symbols-outlined text-on-surface-variant text-[20px]">filter_list</span>
                <span class="text-sm font-bold text-on-surface-variant">Filter:</span>
            </div>
            <select name="status" onchange="this.form.submit()" class="bg-surface-container border-none rounded-lg text-sm py-2 px-4 focus:ring-2 focus:ring-primary outline-none text-on-surface font-medium cursor-pointer flex-1 md:flex-none">
                <option value="Semua Status" {{ request('status') == 'Semua Status' ? 'selected' : '' }}>Semua Status</option>
                <option value="Mencari" {{ request('status') == 'Mencari' ? 'selected' : '' }}>Mencari</option>
                <option value="Konfirmasi" {{ request('status') == 'Konfirmasi' ? 'selected' : '' }}>Konfirmasi</option>
                <option value="Eskalasi" {{ request('status') == 'Eskalasi' ? 'selected' : '' }}>Eskalasi</option>
            </select>
            <!-- Optional Location filter -->
            <select name="location" onchange="this.form.submit()" class="bg-surface-container border-none rounded-lg text-sm py-2 px-4 focus:ring-2 focus:ring-primary outline-none text-on-surface font-medium cursor-pointer flex-1 md:flex-none hidden">
                <option value="">Semua Lokasi</option>
                <option value="Jakarta Selatan">Jakarta Selatan</option>
                <option value="Jakarta Barat">Jakarta Barat</option>
                <option value="Tangerang Selatan">Tangerang Selatan</option>
            </select>
            <div class="flex items-center gap-2 bg-surface-container px-4 py-2 rounded-lg text-on-surface font-medium hover:bg-surface-container-high transition-colors flex-1 md:flex-none justify-center">
                <span class="material-symbols-outlined text-[18px]">calendar_today</span>
                <span class="text-sm">Today, 00:00 - 23:59</span>
            </div>
        </div>
        <div class="flex items-center gap-3 w-full lg:w-auto">
            <div class="relative w-full">
                <span class="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-on-surface-variant text-[18px]">search</span>
                <input name="search" value="{{ request('search') }}" class="bg-surface-container border-none rounded-lg text-sm py-2 pl-9 pr-4 focus:ring-2 focus:ring-primary w-full md:w-72 outline-none placeholder:text-outline-variant transition-all focus:bg-surface-container-lowest focus:shadow-sm" placeholder="Cari Code atau Nama..." type="text"/>
            </div>
            <button type="submit" class="hidden">Cari</button>
        </div>
    </form>

    <!-- MAIN CONTENT AREA (TABLE ONLY - NO MAP) -->
    <section class="flex-1 flex flex-col overflow-hidden bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant">
        <div class="p-4 border-b border-outline-variant flex justify-between items-center bg-surface-container-lowest">
            <h3 class="text-lg font-bold text-on-surface">Daftar Antrian</h3>
            <span id="count-total" class="text-xs bg-surface-container px-3 py-1 rounded-full text-on-surface-variant font-bold">{{ $orders->total() }} Total</span>
        </div>
        <div id="table-wrapper" class="flex-1 overflow-x-auto overflow-y-auto custom-scrollbar">
            @include('admin.partials.pesanan-live-table', ['orders' => $orders])
        </div>
        <div id="pagination-wrapper" class="p-4 border-t border-outline-variant bg-surface-container-lowest">
            {{ $orders->links() }}
        </div>
    </section>
</div>
@endsection

@section('scripts')
<script>
    const POLLING_INTERVAL_MS = 10000; // 10 detik
    let autoRefreshInterval = null;

    async function fetchLiveData() {
        const refreshIcon = document.getElementById('icon-refresh');
        if (refreshIcon) refreshIcon.classList.add('animate-spin');

        try {
            const urlParams = new URLSearchParams(window.location.search);
            urlParams.set('ajax', '1');

            const response = await fetch(`{{ route('admin.pesanan-live') }}?${urlParams.toString()}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                }
            });

            if (!response.ok) throw new Error('Network response was not ok');

            const data = await response.json();

            if (data.success) {
                // Update counter cards
                if (data.counts) {
                    const elMencari = document.getElementById('count-mencari');
                    const elTerkonfirmasi = document.getElementById('count-terkonfirmasi');
                    const elOtw = document.getElementById('count-otw');
                    const elBerlangsung = document.getElementById('count-berlangsung');
                    const elEskalasi = document.getElementById('count-eskalasi');
                    const elTotal = document.getElementById('count-total');

                    if (elMencari) elMencari.textContent = data.counts.mencari;
                    if (elTerkonfirmasi) elTerkonfirmasi.textContent = data.counts.terkonfirmasi;
                    if (elOtw) elOtw.textContent = data.counts.otw;
                    if (elBerlangsung) elBerlangsung.textContent = data.counts.berlangsung;
                    if (elEskalasi) elEskalasi.textContent = data.counts.eskalasi;
                    if (elTotal) elTotal.textContent = `${data.counts.total} Total`;
                }

                // Update Table Content
                const tableWrapper = document.getElementById('table-wrapper');
                if (tableWrapper && data.table_html) {
                    tableWrapper.innerHTML = data.table_html;
                }

                // Update Pagination
                const paginationWrapper = document.getElementById('pagination-wrapper');
                if (paginationWrapper && data.pagination_html !== undefined) {
                    paginationWrapper.innerHTML = data.pagination_html;
                }

                // Update Timestamp
                const timestampEl = document.getElementById('timestamp');
                if (timestampEl && data.timestamp) {
                    timestampEl.textContent = data.timestamp;
                }
            }
        } catch (error) {
            console.error('Error auto-refreshing live orders:', error);
        } finally {
            if (refreshIcon) {
                setTimeout(() => {
                    refreshIcon.classList.remove('animate-spin');
                }, 400);
            }
        }
    }

    function startAutoRefresh() {
        stopAutoRefresh();
        autoRefreshInterval = setInterval(fetchLiveData, POLLING_INTERVAL_MS);
    }

    function stopAutoRefresh() {
        if (autoRefreshInterval) {
            clearInterval(autoRefreshInterval);
            autoRefreshInterval = null;
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        // Toggle auto refresh
        const toggleInput = document.getElementById('toggle-auto-refresh');
        if (toggleInput) {
            toggleInput.addEventListener('change', function () {
                if (this.checked) {
                    startAutoRefresh();
                } else {
                    stopAutoRefresh();
                }
            });
        }

        // Manual refresh button
        const btnManual = document.getElementById('btn-manual-refresh');
        if (btnManual) {
            btnManual.addEventListener('click', () => {
                fetchLiveData();
            });
        }

        // Start auto-refresh by default
        startAutoRefresh();
    });
</script>
@endsection