@extends('layouts.app')

@section('title', 'Live Monitoring - Tiqkets')
@section('page-title', 'Live Monitoring')

@section('page-title1')
    <div class="refresh-info">
        <span class="refresh-text">Last refreshed <span id="refreshTime">{{ $lastRefreshed }}</span></span>
        <button type="button" class="btn-refresh" id="refreshBtn">
            <u>Refresh</u>
        </button>
    </div>
@endsection
@section('header-action')
    <select class="form-select" id="outletFilter" style="width: 200px;">
        <option value="">All Outlets</option>
        @foreach ($outlets as $outlet)
            <option value="{{ $outlet->id }}" {{ $outletFilter == $outlet->id ? 'selected' : '' }}>
                {{ $outlet->name ?? $outlet->outlet_name }}
            </option>
        @endforeach
    </select>
@endsection

@section('content')
    <div class="monitoring-container">
        <!-- Header with Refresh -->
        <div class="monitoring-header">

        </div>

        <!-- Monitoring Table -->
        <div class="monitoring-table-card">
            @if ($monitoringData->count() > 0)
                <div class="table-wrapper">
                    <table class="monitoring-table">
                        <thead>
                            <tr>
                                <th>Shop No.</th>
                                <th>Outlet</th>
                                <th class="text-center">Active</th>
                                <th class="text-center">Ready</th>
                                <th class="text-center">Delivered</th>
                            </tr>
                        </thead>
                        <tbody id="monitoringTableBody">
                            @foreach ($monitoringData as $data)
                                <tr data-outlet-id="{{ $data['id'] }}">
                                    <td>{{ $data['shop_no'] }}</td>
                                    <td>{{ $data['outlet_name'] }}</td>
                                    <td class="text-center">
                                        <span class="count-badge">{{ $data['active'] }}</span>
                                    </td>
                                    <td class="text-center">
                                        <span class="count-badge">{{ $data['ready'] }}</span>
                                    </td>
                                    <td class="text-center">
                                        <span class="count-badge">{{ $data['delivered'] }}</span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="empty-state">
                    <i class="fas fa-store fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No Outlets Found</h5>
                    <p class="text-muted">No outlets are currently available for monitoring.</p>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .monitoring-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Header */
        .monitoring-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .refresh-info {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .refresh-text {
            font-size: 14px;
            color: #6b7280;
        }

        .btn-refresh {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: transparent;
            border: none;
            color: #8c1867;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-refresh:hover {
            color: #8c1867;
        }

        .btn-refresh i {
            font-size: 14px;
        }

        .btn-refresh.refreshing i {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /* Table Card */
        .monitoring-table-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            overflow: hidden;
        }

        .table-wrapper {
            overflow-x: auto;
        }

        .monitoring-table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
        }

        .monitoring-table thead {
            background: #f9fafb;
            border-bottom: 1px solid #e5e7eb;
        }

        .monitoring-table thead th {
            padding: 16px 20px;
            text-align: left;
            font-size: 13px;
            font-weight: 600;
            color: #374151;
            border: none;
        }

        .monitoring-table tbody tr {
            border-bottom: 1px solid #f3f4f6;
            transition: background-color 0.2s;
        }

        .monitoring-table tbody tr:hover {
            background-color: #f9fafb;
        }

        .monitoring-table tbody tr:last-child {
            border-bottom: none;
        }

        .monitoring-table tbody tr.highlight {
            animation: highlight 1.5s ease;
        }

        @keyframes highlight {
            0% {
                background-color: #dbeafe;
            }

            100% {
                background-color: transparent;
            }
        }

        .monitoring-table tbody td {
            padding: 16px 20px;
            font-size: 14px;
            color: #111827;
            vertical-align: middle;
        }

        .monitoring-table .text-center {
            text-align: center;
        }

        .count-badge {
            display: inline-block;
            min-width: 32px;
            padding: 4px 8px;
            font-size: 14px;
            font-weight: 500;
            color: #111827;
        }

        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 60px 20px;
            text-align: center;
        }

        .empty-state i {
            opacity: 0.3;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .monitoring-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .monitoring-table {
                font-size: 13px;
            }

            .monitoring-table thead th,
            .monitoring-table tbody td {
                padding: 12px 10px;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let autoRefreshInterval;
            const refreshBtn = document.getElementById('refreshBtn');
            const outletFilter = document.getElementById('outletFilter');

            // Initialize auto-refresh (every 30 seconds)
            startAutoRefresh();

            // Manual refresh button
            refreshBtn.addEventListener('click', function() {
                refreshData();
            });

            // Outlet filter
            outletFilter.addEventListener('change', function() {
                updateUrlAndReload();
            });

            function startAutoRefresh() {
                stopAutoRefresh();
                autoRefreshInterval = setInterval(refreshData, 30000); // 30 seconds
            }

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

            function refreshData() {
             
                const btnIcon = refreshBtn.querySelector('i');

                if (btnIcon) {
                    btnIcon.classList.add('fa-spin');
                }

                const selectedOutlet = outletFilter.value;
                const url = selectedOutlet ?
                    `{{ route('food-court.live-monitoring.refresh') }}?outlet_id=${selectedOutlet}` :
                    `{{ route('food-court.live-monitoring.refresh') }}`;

                fetch(url)
                    .then(res => res.json())
                    .then(result => {
                        if (result.success) {
                            result.data.forEach(updateOutletRow);
                            updateRefreshTime(result.timestamp);
                        }
                    })
                    .catch(console.error)
                    .finally(() => {
                        if (btnIcon) {
                            btnIcon.classList.remove('fa-spin');
                        }
                    });
            }


            function updateOutletRow(outletData) {
                const row = document.querySelector(`tr[data-outlet-id="${outletData.id}"]`);
                if (!row) return;

                // Add highlight effect
                row.classList.add('highlight');
                setTimeout(() => row.classList.remove('highlight'), 1500);

                // Update values
                const cells = row.querySelectorAll('.count-badge');
                if (cells[0]) cells[0].textContent = outletData.active;
                if (cells[1]) cells[1].textContent = outletData.ready;
                if (cells[2]) cells[2].textContent = outletData.delivered;
            }

            function updateRefreshTime(timestamp) {
                const refreshTime = document.getElementById('refreshTime');
                if (refreshTime) {
                    refreshTime.textContent = timestamp;
                }
            }

            function updateUrlAndReload() {
                const url = new URL(window.location.href);
                const outlet = outletFilter.value;

                if (outlet) {
                    url.searchParams.set('outlet', outlet);
                } else {
                    url.searchParams.delete('outlet');
                }

                window.location.href = url.toString();
            }

            // Stop auto-refresh when page is hidden
            document.addEventListener('visibilitychange', function() {
                if (document.hidden) {
                    stopAutoRefresh();
                } else {
                    startAutoRefresh();
                    refreshData();
                }
            });
        });
    </script>
@endpush