@extends('layouts.master')

@section('title')
    @lang('translation.live_monitoring')
@endsection

@section('css')
@endsection

@section('content')
    <div class="container-fluid px-4 py-3">

        <!-- Header -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="mb-0">Live Monitoring Dashboard</h2>
            <span class="badge bg-success" id="last-updated">
                Last Updated: {{ $last_updated }}
            </span>

            <button class="btn btn-sm btn-primary" id="refresh-btn" >
                <i class="fas fa-sync-alt"></i> Refresh
            </button>
        </div>

        <!-- Overall Stats -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card bg-primary text-white p-3">
                    <h6>Total Branches</h6>
                    <h3 id="total-branches">{{ $overall_stats['total_branches'] }}</h3>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-warning text-white p-3">
                    <h6>Active Orders</h6>
                    <h3 id="total-active">{{ $overall_stats['total_active_orders'] }}</h3>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-info text-white p-3">
                    <h6>Active Takeaways</h6>
                    <h3 id="total-takeaway">{{ $overall_stats['total_takeaway_active'] }}</h3>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-success text-white p-3">
                    <h6>Reservations Today</h6>
                    <h3 id="total-reservations">{{ $overall_stats['total_reservations_today'] }}</h3>
                </div>
            </div>
        </div>

        <!-- Branch Table -->
        <div class="card">
            <div class="card-header">
                <h5>Branch-wise Live Statistics</h5>
            </div>

            <div class="card-body p-0">
                <table class="table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th rowspan="2">Branch</th>
                            <th rowspan="2">City</th>

                            <th colspan="4" class="text-center border-end">Dine-In</th>
                            <th colspan="3" class="text-center border-end">Take Away</th>
                            <th colspan="3" class="text-center">Reservations</th>
                        </tr>

                        <tr>
                            <th class="text-center">Waiting</th>
                            <th class="text-center">Assigned</th>
                            <th class="text-center">On Hold</th>
                            <th class="text-center border-end">Completed</th>

                            <th class="text-center">Active</th>
                            <th class="text-center">Ready</th>
                            <th class="text-center border-end">Delivered</th>

                            <th class="text-center">Reserved</th>
                            <th class="text-center">Arrived</th>
                            <th class="text-center">Cancelled</th>
                        </tr>
                    </thead>

                    <tbody id="monitoring-table-body">
                        @foreach ($branches as $branch)
                            <tr data-branch-id="{{ $branch['id'] }}">

                                <td>
                                    {{ $branch['name'] }}
                                    <small class="text-muted d-block">{{ $branch['code'] }}</small>
                                </td>

                                <td>{{ $branch['city'] }}</td>

                                <!-- Dine In -->
                                <td class="text-center"><span
                                        class="badge bg-warning">{{ $branch['dine_in']['waiting'] ?? 0 }}</span></td>
                                <td class="text-center"><span
                                        class="badge bg-info">{{ $branch['dine_in']['assigned'] ?? 0 }}</span></td>
                                <td class="text-center"><span
                                        class="badge bg-secondary">{{ $branch['dine_in']['hold'] ?? 0 }}</span></td>
                                <td class="text-center border-end"><span
                                        class="badge bg-success">{{ $branch['dine_in']['complete'] ?? 0 }}</span></td>

                                <!-- Take Away -->
                                {{-- @if ($branch['takeaway_enabled'] == true) --}}
                                <td class="text-center"><span
                                        class="badge bg-warning">{{ $branch['takeaway']['waiting'] ?? 0 }}</span></td>
                                <td class="text-center"><span
                                        class="badge bg-primary">{{ $branch['takeaway']['ready'] ?? 0 }}</span></td>
                                <td class="text-center border-end"><span
                                        class="badge bg-success">{{ $branch['takeaway']['delivered'] ?? 0 }}</span></td>
                                {{-- @else
                            <td colspan="3" class="text-center border-end text-muted">Not Enabled</td>
                        @endif --}}

                                <!-- Reservations -->
                                <td class="text-center"><span
                                        class="badge bg-info">{{ $branch['reservations']['reserved'] ?? 0 }}</span></td>
                                <td class="text-center"><span
                                        class="badge bg-success">{{ $branch['reservations']['arrived'] ?? 0 }}</span></td>
                                <td class="text-center"><span
                                        class="badge bg-danger">{{ $branch['reservations']['cancelled'] ?? 0 }}</span></td>

                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>


{{-- @push('scripts') --}}
   
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
     

       
        $(document).ready(function() {

            setInterval(refreshData, 30000);

            $("#refresh-btn").click(refreshData);

 function refreshData() {
            console.log("Refresh clicked");

            $.ajax({
                url: "{{ route('live-monitoring.index') }}",
                method: "GET",
                dataType: "json",

                success: function(data) {
                    console.log("SUCCESS:", data);
                    updateDashboard(data);
                    $("#last-updated").text("Last Updated: " + data.last_updated);
                },

                error: function(xhr) {
                    console.log("AJAX ERROR:", xhr.status, xhr.responseText);
                    alert("AJAX ERROR: " + xhr.status);
                }
            });
        }

            function updateDashboard(data) {

                $("#total-branches").text(data.overall_stats.total_branches);
                $("#total-active").text(data.overall_stats.total_active_orders);
                $("#total-takeaway").text(data.overall_stats.total_takeaway_active);
                $("#total-reservations").text(data.overall_stats.total_reservations_today);

                data.branches.forEach(branch => {

                    let row = $('tr[data-branch-id="' + branch.id + '"]');

                    // Dine In
                    row.find('td:eq(2) .badge').text(branch.dine_in.waiting);
                    row.find('td:eq(3) .badge').text(branch.dine_in.assigned);
                    row.find('td:eq(4) .badge').text(branch.dine_in.hold);
                    row.find('td:eq(5) .badge').text(branch.dine_in.complete);

                    // Take Away
                    row.find('td:eq(6) .badge').text(branch.takeaway.waiting);
                    row.find('td:eq(7) .badge').text(branch.takeaway.ready);
                    row.find('td:eq(8) .badge').text(branch.takeaway.delivered);

                    // Reservations
                    row.find('td:eq(9) .badge').text(branch.reservations.reserved);
                    row.find('td:eq(10) .badge').text(branch.reservations.arrived);
                    row.find('td:eq(11) .badge').text(branch.reservations.cancelled);
                });
            }

        });
    </script>
{{-- @endpush --}}
@endsection