@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="badge bg-success" id="liveIndicator">
            <i class="fas fa-circle me-1"></i> LIVE
        </span>
        <button type="button" class="btn btn-outline-primary" id="refreshBtn">
            <i class="fas fa-sync-alt me-1"></i> Refresh
        </button>
        <span class="text-muted small" id="lastUpdated">Last updated: just now</span>
    </div>
@endsection

@section('content')
    <!-- Summary Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0" id="totalBranches">{{ count($monitoringData) }}</h4>
                            <small>Total Branches</small>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-building fa-2x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0" id="totalActive">{{ collect($monitoringData)->where('queue_open', true)->count() }}</h4>
                            <small>Queue Open</small>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-door-open fa-2x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0" id="totalTakeaway">{{ collect($monitoringData)->sum('takeaway_new') + collect($monitoringData)->sum('takeaway_ready') }}</h4>
                            <small>Active Takeaway Orders</small>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-shopping-bag fa-2x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0" id="totalBookings">{{ collect($monitoringData)->sum('booking_waiting') + collect($monitoringData)->sum('booking_assigned') }}</h4>
                            <small>Active Bookings</small>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-users fa-2x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Live Monitoring Table -->
    <div class="card shadow-sm">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="monitoringTable">
                    <thead class="table-light">
                        <tr>
                            <th>Branch Name</th>
                            <th>Location</th>
                            <th class="text-center">Queue Status</th>
                            <th class="text-center">Take Away Orders</th>
                            <th class="text-center">Table Bookings</th>
                            <th class="text-center">WhatsApp</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($monitoringData as $data)
                            <tr data-branch-id="{{ $data['branch_id'] }}">
                                <td>
                                    <div class="fw-semibold">{{ $data['branch_name'] }}</div>
                                </td>
                                <td>
                                    <small class="text-muted">{{ $data['branch_location'] ?? 'N/A' }}</small>
                                </td>
                                <td class="text-center">
                                    @if($data['queue_open'])
                                        <span class="badge bg-success rounded-pill">
                                            <i class="fas fa-check-circle me-1"></i> Open
                                        </span>
                                    @else
                                        <span class="badge bg-secondary rounded-pill">
                                            <i class="fas fa-times-circle me-1"></i> Closed
                                        </span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <div class="d-flex justify-content-center gap-1">
                                        <span class="badge bg-warning text-dark takeaway-new">
                                            {{ $data['takeaway_new'] }} New
                                        </span>
                                        <span class="badge bg-primary takeaway-ready">
                                            {{ $data['takeaway_ready'] }} Ready
                                        </span>
                                        <span class="badge bg-success takeaway-delivered">
                                            {{ $data['takeaway_delivered'] }} Delivered
                                        </span>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <div class="d-flex flex-wrap justify-content-center gap-1">
                                        <span class="badge bg-warning text-dark booking-waiting">
                                            {{ $data['booking_waiting'] }} Waiting
                                        </span>
                                        <span class="badge bg-info booking-assigned">
                                            {{ $data['booking_assigned'] }} Assigned
                                        </span>
                                        <span class="badge bg-secondary booking-hold">
                                            {{ $data['booking_hold'] }} Hold
                                        </span>
                                        <span class="badge bg-success booking-completed">
                                            {{ $data['booking_completed'] }} Done
                                        </span>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-success rounded-pill whatsapp-messages">
                                        <i class="fab fa-whatsapp me-1"></i> {{ $data['whatsapp_messages'] }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-{{ $data['status'] == 'active' ? 'success' : 'danger' }} rounded-pill">
                                        {{ ucfirst($data['status']) }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <a href="#" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-eye"></i> View
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @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('branches.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus me-1"></i> Add Branch
                    </a>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('styles')
<style>
    #liveIndicator {
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }

    .badge {
        font-size: 11px;
        padding: 4px 8px;
    }

    .table tbody tr:hover {
        background-color: #f8f9fa;
        cursor: pointer;
    }
</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();
        });

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

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

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

    function refreshData() {
        const refreshBtn = document.getElementById('refreshBtn');
        const refreshIcon = refreshBtn.querySelector('i');

        // Add spinning animation
        refreshIcon.classList.add('fa-spin');
        refreshBtn.disabled = true;

        fetch('{{ route("restaurant-admin.live-monitoring.refresh") }}')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    updateTable(data.data);
                    updateSummaryCards(data.data);
                    updateLastUpdatedTime(data.timestamp);
                }
            })
            .catch(error => {
                console.error('Error refreshing data:', error);
                showToast('Error refreshing data', 'error');
            })
            .finally(() => {
                // Remove spinning animation
                refreshIcon.classList.remove('fa-spin');
                refreshBtn.disabled = false;
            });
    }

    function updateTable(monitoringData) {
        monitoringData.forEach(data => {
            const row = document.querySelector(`tr[data-branch-id="${data.branch_id}"]`);
            if (row) {
                // Update takeaway badges
                row.querySelector('.takeaway-new').textContent = `${data.takeaway_new} New`;
                row.querySelector('.takeaway-ready').textContent = `${data.takeaway_ready} Ready`;
                row.querySelector('.takeaway-delivered').textContent = `${data.takeaway_delivered} Delivered`;

                // Update booking badges
                row.querySelector('.booking-waiting').textContent = `${data.booking_waiting} Waiting`;
                row.querySelector('.booking-assigned').textContent = `${data.booking_assigned} Assigned`;
                row.querySelector('.booking-hold').textContent = `${data.booking_hold} Hold`;
                row.querySelector('.booking-completed').textContent = `${data.booking_completed} Done`;

                // Update WhatsApp messages
                row.querySelector('.whatsapp-messages').innerHTML = `<i class="fab fa-whatsapp me-1"></i> ${data.whatsapp_messages}`;
            }
        });
    }

    function updateSummaryCards(monitoringData) {
        // Total branches
        document.getElementById('totalBranches').textContent = monitoringData.length;

        // Queue open count
        const queueOpen = monitoringData.filter(d => d.queue_open).length;
        document.getElementById('totalActive').textContent = queueOpen;

        // Total active takeaway orders
        const totalTakeaway = monitoringData.reduce((sum, d) => sum + d.takeaway_new + d.takeaway_ready, 0);
        document.getElementById('totalTakeaway').textContent = totalTakeaway;

        // Total active bookings
        const totalBookings = monitoringData.reduce((sum, d) => sum + d.booking_waiting + d.booking_assigned, 0);
        document.getElementById('totalBookings').textContent = totalBookings;
    }

    function updateLastUpdatedTime(timestamp) {
        document.getElementById('lastUpdated').textContent = `Last updated: ${timestamp}`;
    }

    function showToast(message, type = 'success') {
        // Simple toast notification (you can enhance this)
        alert(message);
    }

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