@extends('layouts.app')

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

@section('header-action')
    <div class="d-flex gap-2 align-items-center">
        <span class="text-muted small">Last refreshed {{ $lastRefreshed }}</span>
        <button id="refreshBtn" class="btn btn-link text-primary p-0">
            <i class="fas fa-sync-alt"></i> Refresh
        </button>
        <select class="form-select" style="width: auto;" id="branchFilter">
            <option value="">All Branches</option>
            @foreach($outlets as $outlet)
                <option value="{{ $outlet['id'] }}">{{ $outlet['outlet_name'] }}</option>
            @endforeach
        </select>
    </div>
@endsection

@section('content')
    <div class="row g-3" id="outletsContainer">
        @forelse($outlets as $outlet)
            <div class="col-12" data-outlet-id="{{ $outlet['id'] }}">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-4">
                        <!-- Branch Header -->
                        <div class="mb-4">
                            <h5 class="mb-1 fw-bold">{{ $outlet['outlet_name'] }}</h5>
                            <p class="text-muted small mb-0">{{ $outlet['address'] }}</p>
                        </div>

                        <!-- Order Stats Row -->
                        <div class="row g-3">
                            <!-- Dine In (if needed, otherwise remove) -->
                            {{-- <div class="col-md-4">
                                <div class="d-flex justify-content-between align-items-center p-3 bg-light rounded">
                                    <div>
                                        <h6 class="mb-0 text-muted">Dine In</h6>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <h4 class="mb-0 fw-bold">{{ $outlet['dine_in_total'] }}</h4>
                                        <i class="fas fa-chevron-right text-muted"></i>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between mt-2 px-2 small text-muted">
                                    <span>Waiting <strong class="text-dark">{{ $outlet['dine_in_waiting'] }}</strong></span>
                                    <span>Assigned <strong class="text-dark">{{ $outlet['dine_in_assigned'] }}</strong></span>
                                    <span>On Hold <strong class="text-dark">{{ $outlet['dine_in_on_hold'] }}</strong></span>
                                    <span>Complete <strong class="text-dark">{{ $outlet['dine_in_complete'] }}</strong></span>
                                </div>
                            </div> --}}

                            <!-- Take Away -->
                            <div class="col-md-12">
                                <div class="d-flex justify-content-between align-items-center p-3 bg-primary bg-opacity-10 rounded border border-primary">
                                    <div>
                                        <h6 class="mb-0 text-primary fw-semibold">Take Away</h6>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <h4 class="mb-0 fw-bold text-primary">{{ $outlet['take_away_total'] }}</h4>
                                        <i class="fas fa-chevron-right text-primary"></i>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between mt-2 px-2 small text-muted">
                                    <span>Active <strong class="text-dark">{{ $outlet['take_away_active'] }}</strong></span>
                                    <span>Ready <strong class="text-dark">{{ $outlet['take_away_ready'] }}</strong></span>
                                    <span>Delivered <strong class="text-dark">{{ $outlet['take_away_delivered'] }}</strong></span>
                                </div>
                            </div>

                            <!-- Reservations (if needed) -->
                            {{-- <div class="col-md-4">
                                <div class="d-flex justify-content-between align-items-center p-3 bg-light rounded">
                                    <div>
                                        <h6 class="mb-0 text-muted">Reservations</h6>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <h4 class="mb-0 fw-bold">{{ $outlet['reservations_total'] }}</h4>
                                        <i class="fas fa-chevron-right text-muted"></i>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between mt-2 px-2 small text-muted">
                                    <span>Reserved <strong class="text-dark">{{ $outlet['reservations_reserved'] }}</strong></span>
                                    <span>Arrived <strong class="text-dark">{{ $outlet['reservations_arrived'] }}</strong></span>
                                    <span>Cancelled <strong class="text-dark">{{ $outlet['reservations_cancelled'] }}</strong></span>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-store fa-4x text-muted mb-3"></i>
                        <h5 class="text-muted">No Branches Found</h5>
                        <p class="text-muted">No branches are currently available for monitoring.</p>
                    </div>
                </div>
            </div>
        @endforelse
    </div>
@endsection

@push('styles')
<style>
    .card {
        transition: all 0.3s ease;
    }

    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    }

    .bg-primary.bg-opacity-10 {
        background-color: rgba(13, 110, 253, 0.1) !important;
    }

    .highlight-update {
        animation: highlight 2s ease;
    }

    @keyframes highlight {
        0% { background-color: #e3f2fd; }
        100% { background-color: transparent; }
    }

    .pulse {
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
</style>
@endpush

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

        // Initialize auto-refresh
        startAutoRefresh();

        // Manual refresh button
        refreshBtn.addEventListener('click', function() {
            this.classList.add('pulse');
            refreshData();
            setTimeout(() => this.classList.remove('pulse'), 2000);
        });

        // Branch filter
        branchFilter.addEventListener('change', function() {
            const selectedBranch = this.value;
            filterBranches(selectedBranch);
        });

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

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

        function refreshData() {
            const selectedBranch = branchFilter.value;
            const url = selectedBranch
                ? `{{ route("food-court.live-monitoring.refresh") }}?outlet_id=${selectedBranch}`
                : `{{ route("food-court.live-monitoring.refresh") }}`;

            fetch(url, {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (selectedBranch) {
                    updateOutletCard(data);
                } else {
                    data.forEach(outlet => updateOutletCard(outlet));
                }
                updateRefreshTime();
            })
            .catch(error => {
                console.error('Error refreshing data:', error);
            });
        }

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

            // Add highlight effect
            card.querySelector('.card').classList.add('highlight-update');
            setTimeout(() => {
                card.querySelector('.card').classList.remove('highlight-update');
            }, 2000);

            // Update Take Away stats
            const takeAwayTotal = card.querySelector('.col-md-4:nth-child(2) h4');
            const takeAwayActive = card.querySelectorAll('.col-md-4:nth-child(2) .small strong')[0];
            const takeAwayReady = card.querySelectorAll('.col-md-4:nth-child(2) .small strong')[1];
            const takeAwayDelivered = card.querySelectorAll('.col-md-4:nth-child(2) .small strong')[2];

            if (takeAwayTotal) takeAwayTotal.textContent = outletData.take_away_total;
            if (takeAwayActive) takeAwayActive.textContent = outletData.take_away_active;
            if (takeAwayReady) takeAwayReady.textContent = outletData.take_away_ready;
            if (takeAwayDelivered) takeAwayDelivered.textContent = outletData.take_away_delivered;

            // Update Dine In stats if present
            const dineInTotal = card.querySelector('.col-md-4:nth-child(1) h4');
            if (dineInTotal && outletData.dine_in_total !== undefined) {
                dineInTotal.textContent = outletData.dine_in_total;
            }

            // Update Reservations if present
            const reservationsTotal = card.querySelector('.col-md-4:nth-child(3) h4');
            if (reservationsTotal && outletData.reservations_total !== undefined) {
                reservationsTotal.textContent = outletData.reservations_total;
            }
        }

        function filterBranches(branchId) {
            const allCards = document.querySelectorAll('[data-outlet-id]');

            if (!branchId) {
                allCards.forEach(card => card.style.display = 'block');
                return;
            }

            allCards.forEach(card => {
                if (card.dataset.outletId === branchId) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        }

        function updateRefreshTime() {
            const now = new Date();
            const timeStr = now.toLocaleTimeString();
            const refreshText = document.querySelector('.text-muted.small');
            if (refreshText) {
                refreshText.textContent = `Last refreshed ${timeStr}`;
            }
        }
    });
</script>
@endpush