@extends('layouts.app')

@section('title', 'Live Monitoring - Tiqkets')
@section('page-title', 'Live Monitoring')
@section('page-title1')
    <span class="text-muted small" id="lastUpdated">Last refreshed a few mins ago</span>
    <button type="button" class="btn btn-link  p-0" id="refreshBtn">
        Refresh
    </button>
@endsection
@section('header-action')
    <div class="d-flex gap-2 align-items-center">
        {{-- <span class="text-muted small" id="lastUpdated">Last refreshed a few mins ago</span>
        <button type="button" class="btn btn-link text-primary p-0" id="refreshBtn">
            Refresh
        </button> --}}
        <div class="dropdown">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="branchFilter"
                data-bs-toggle="dropdown">
                All Branches
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="#" data-branch="all">All Branches</a></li>
                @foreach ($monitoringData as $data)
                    <li><a class="dropdown-item" href="#"
                            data-branch="{{ $data['branch_id'] }}">{{ $data['branch_name'] }}</a></li>
                @endforeach
            </ul>
        </div>
    </div>
@endsection

@section('content')
    <div class="monitoring-container">
        @foreach ($monitoringData as $data)
            <div class="branch-card" data-branch-id="{{ $data['branch_id'] }}">
                <!-- Branch Header -->
                <div class="row">
                    <div class="col-2 branch-header ">
                        <div>
                            <h5 class="branch-name mb-1">{{ $data['branch_name'] }}</h5>
                            <p class="branch-location text-muted mb-0">
                                {{ $data['branch_location'] ?? 'N/A' }}
                            </p>
                        </div>
                    </div>

                    <!-- Stats Grid -->
                    <div class="col-10 stats-grid">
                        <!-- Dine In Section -->
                        <div class="stat-section">
                            <div class="stat-header">
                                <span class="stat-title">Dine In</span>
                                <span class="stat-total dine-in-total">{{ $data['dine_in_total'] }}</span>
                                {{-- <i class="fas fa-chevron-right"></i> --}}
                            </div>
                            <div class="stat-items">
                                <div class="stat-item">
                                    <span class="stat-label">Waiting</span>
                                    <span class="stat-value dine-in-waiting">{{ $data['dine_in_waiting'] }}</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label">Assigned</span>
                                    <span class="stat-value dine-in-assigned">{{ $data['dine_in_assigned'] }}</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label">OnHold</span>
                                    <span class="stat-value dine-in-on-hold">{{ $data['dine_in_on_hold'] }}</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label">Complete</span>
                                    <span class="stat-value dine-in-complete">{{ $data['dine_in_complete'] }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- Take Away Section -->
                        <div class="stat-section">
                            <div class="stat-header">
                                <span class="stat-title">Take Away</span>
                                <span class="stat-total takeaway-total">{{ $data['takeaway_total'] }}</span>
                                {{-- <i class="fas fa-chevron-right"></i> --}}
                            </div>
                            <div class="stat-items">
                                <div class="stat-item">
                                    <span class="stat-label">Active</span>
                                    <span class="stat-value takeaway-active">{{ $data['takeaway_active'] }}</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label">Ready</span>
                                    <span class="stat-value takeaway-ready">{{ $data['takeaway_ready'] }}</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label">Delivered</span>
                                    <span class="stat-value takeaway-delivered">{{ $data['takeaway_delivered'] }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- Reservations Section -->
                        <div class="stat-section">
                            <div class="stat-header">
                                <span class="stat-title">Reservations</span>
                                <span class="stat-total reservation-total">{{ $data['reservation_total'] }}</span>
                                {{-- <i class="fas fa-chevron-right"></i> --}}
                            </div>
                            <div class="stat-items">
                                <div class="stat-item">
                                    <span class="stat-label">Reserved</span>
                                    <span
                                        class="stat-value reservation-reserved">{{ $data['reservation_reserved'] }}</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label">Arrived</span>
                                    <span class="stat-value reservation-arrived">{{ $data['reservation_arrived'] }}</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-label">Cancelled</span>
                                    <span
                                        class="stat-value reservation-cancelled">{{ $data['reservation_cancelled'] }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach

        @if (count($monitoringData) == 0)
            <div class="text-center py-5">
                <i class="fas fa-building fa-4x text-muted mb-3"></i>
                <h5 class="text-muted">No Branches Found</h5>
                <p class="text-muted">Create your first branch to start monitoring.</p>
                <a href="{{ route('restaurant-admin.billing.subscription') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-1"></i> Add Branch
                </a>
            </div>
        @endif
    </div>
@endsection

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

        .branch-card {
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 20px;
            transition: box-shadow 0.2s;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .branch-card:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .branch-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 20px;
            padding-bottom: 15px;
            /* border-bottom: 1px solid #f3f4f6; */
        }

        .branch-name {
            font-size: 16px;
            font-weight: 600;
            color: #111827;
            margin: 0;
        }

        .branch-location {
            font-size: 13px;
            color: #6b7280;
            margin: 0;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .stat-section {
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            padding: 0;
            /* REMOVE padding here */
            background: #fafafa;
            overflow: hidden;
            /* Very important */
        }

        .stat-header {
            padding: 12px;
            /* Add padding here */
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #e5e7eb;
        }

        .stat-items {
            padding: 12px;
            /* Add padding here instead of parent */
        }

        .stat-title {
            font-size: 16px;
            font-weight: 900;
            color: #374151;
        }

        .stat-total {
            font-size: 18px;
            font-weight: 600;
            color: #111827;
            margin-left: auto;
            margin-right: 8px;
        }

        .stat-header i {
            font-size: 12px;
            color: #9ca3af;
        }

        .stat-items {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            background: #ffffff;
        }

        .stat-section:nth-child(2) .stat-items,
        .stat-section:nth-child(3) .stat-items {
            grid-template-columns: repeat(3, 1fr);
        }

        .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .stat-label {
            font-size: 16px;
            color: #000;
            margin-bottom: 4px;
            font-weight: 500;
        }

        .stat-value {
            font-size: 16px;
            font-weight: 600;
            color: #111827;
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .stat-items {
                grid-template-columns: repeat(2, 1fr);
            }

            .stat-section:nth-child(2) .stat-items,
            .stat-section:nth-child(3) .stat-items {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Animation for refresh */
        .refreshing {
            opacity: 0.6;
            pointer-events: none;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .branch-card {
            animation: fadeIn 0.3s ease-in-out;
        }
        .btn-link{
            background: white !important;
            color:#8c1893 !important;
        }
    </style>
@endpush

@push('scripts')
    <script>
        let autoRefreshInterval;
        const REFRESH_INTERVAL = 30000; // 30 seconds

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

            // Branch filter functionality
            document.querySelectorAll('[data-branch]').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    const branchId = this.getAttribute('data-branch');
                    filterBranches(branchId);
                    document.getElementById('branchFilter').textContent = this.textContent;
                });
            });

            // Auto-refresh every 30 seconds
            startAutoRefresh();
        });

        function startAutoRefresh() {
            autoRefreshInterval = setInterval(function() {
                refreshData();
            }, REFRESH_INTERVAL);
        }

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

        function filterBranches(branchId) {
            const cards = document.querySelectorAll('.branch-card');
            cards.forEach(card => {
                if (branchId === 'all' || card.getAttribute('data-branch-id') === branchId) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        }

        function refreshData() {
            const container = document.querySelector('.monitoring-container');
            container.classList.add('refreshing');

            fetch('{{ route('restaurant-admin.live-monitoring.refresh') }}')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        updateCards(data.data);
                        updateLastUpdatedTime();
                    }
                })
                .catch(error => {
                    console.error('Error refreshing data:', error);
                })
                .finally(() => {
                    container.classList.remove('refreshing');
                });
        }

        function updateCards(monitoringData) {
            monitoringData.forEach(data => {
                const card = document.querySelector(`.branch-card[data-branch-id="${data.branch_id}"]`);
                if (card) {
                    // Update Dine In stats
                    card.querySelector('.dine-in-waiting').textContent = data.dine_in_waiting;
                    card.querySelector('.dine-in-assigned').textContent = data.dine_in_assigned;
                    card.querySelector('.dine-in-on-hold').textContent = data.dine_in_on_hold;
                    card.querySelector('.dine-in-complete').textContent = data.dine_in_complete;
                    card.querySelector('.dine-in-total').textContent = data.dine_in_total;

                    // Update Take Away stats
                    card.querySelector('.takeaway-active').textContent = data.takeaway_active;
                    card.querySelector('.takeaway-ready').textContent = data.takeaway_ready;
                    card.querySelector('.takeaway-delivered').textContent = data.takeaway_delivered;
                    card.querySelector('.takeaway-total').textContent = data.takeaway_total;

                    // Update Reservation stats
                    card.querySelector('.reservation-reserved').textContent = data.reservation_reserved;
                    card.querySelector('.reservation-arrived').textContent = data.reservation_arrived;
                    card.querySelector('.reservation-cancelled').textContent = data.reservation_cancelled;
                    card.querySelector('.reservation-total').textContent = data.reservation_total;
                }
            });
        }

        function updateLastUpdatedTime() {
            const now = new Date();
            const timeStr = now.toLocaleTimeString('en-US', {
                hour: 'numeric',
                minute: '2-digit',
                hour12: true
            });
            document.getElementById('lastUpdated').textContent = `Last refreshed at ${timeStr}`;
        }

        // Cleanup on page unload
        window.addEventListener('beforeunload', function() {
            stopAutoRefresh();
        });
    </script>
@endpush