@extends('layouts.master')

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

@section('css')
    <!--datatable css-->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
    <style>
        .status-badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        .status-active {
            background-color: #d1fae5;
            color: #065f46;
        }
        .status-inactive {
            background-color: #fee2e2;
            color: #991b1b;
        }
        .subscription-premium {
            background-color: #fef3c7;
            color: #92400e;
        }
        .subscription-standard {
            background-color: #dbeafe;
            color: #1e40af;
        }
        .subscription-basic {
            background-color: #f3f4f6;
            color: #374151;
        }
        .subscription-suspended {
            background-color: #f3f4f6;
            color: #374151;
        }
        .stat-card {
            background: #f8fafc;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            border-left: 4px solid #3b82f6;
            margin-bottom: 15px;
        }
        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #1e293b;
        }
        .stat-label {
            font-size: 14px;
            color: #64748b;
        }
        .queue-open {
            background-color: #d1fae5;
            color: #065f46;
        }
        .queue-closed {
            background-color: #fee2e2;
            color: #991b1b;
        }
        .today-badge {
            background-color: #3b82f6;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid px-4 py-3">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0">Live Monitoring Dashboard</h2>
        <div class="d-flex align-items-center gap-3">
            <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>
    </div>

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

    <!-- Branch Monitoring Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Branch-wise Live Statistics</h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th rowspan="2" class="align-middle">Branch</th>
                            <th rowspan="2" class="align-middle">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>
                            <!-- Dine-In -->
                            <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>
                            <!-- Take Away -->
                            <th class="text-center">Active</th>
                            <th class="text-center">Ready</th>
                            <th class="text-center border-end">Delivered</th>
                            <!-- Reservations -->
                            <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 class="fw-semibold">
                                {{ $branch['name'] }}
                                <small class="text-muted d-block">{{ $branch['code'] }}</small>
                            </td>
                            <td>{{ $branch['city'] }}</td>

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

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

                            <!-- Reservation Counts -->
                            <td class="text-center">
                                <span class="badge bg-info">{{ $branch['reservations']['reserved'] }}</span>
                            </td>
                            <td class="text-center">
                                <span class="badge bg-success">{{ $branch['reservations']['arrived'] }}</span>
                            </td>
                            <td class="text-center">
                                <span class="badge bg-danger">{{ $branch['reservations']['cancelled'] }}</span>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let isRefreshing = false;

    // Auto-refresh every 30 seconds
    setInterval(refreshData, 30000);

    // Manual refresh button
    $('#refresh-btn').on('click', function() {
        refreshData();
    });

    function refreshData() {
        if (isRefreshing) return;

        isRefreshing = true;
        $('#refresh-btn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Refreshing...');

        $.ajax({
            url: '{{ route("live-monitoring.index") }}',
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                updateDashboard(data);
                updateLastUpdatedTime(data.last_updated);

                // Show success notification
                showNotification('Data refreshed successfully', 'success');
            },
            error: function() {
                showNotification('Failed to refresh data', 'error');
            },
            complete: function() {
                isRefreshing = false;
                $('#refresh-btn').prop('disabled', false).html('<i class="fas fa-sync-alt"></i> Refresh');
            }
        });
    }

    function updateDashboard(data) {
        // Update overall stats
        $('#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);

        // Update branch rows
        data.branches.forEach(function(branch) {
            let row = $('tr[data-branch-id="' + branch.id + '"]');

            if (row.length) {
                // Update dine-in counts
                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.on_hold);
                row.find('td:eq(5) .badge').text(branch.dine_in.completed);

                // Update takeaway counts (if enabled)
                if (branch.takeaway_enabled) {
                    row.find('td:eq(6) .badge').text(branch.takeaway.active);
                    row.find('td:eq(7) .badge').text(branch.takeaway.ready);
                    row.find('td:eq(8) .badge').text(branch.takeaway.delivered);
                }

                // Update reservation counts
                let reservationOffset = branch.takeaway_enabled ? 9 : 6;
                row.find('td:eq(' + reservationOffset + ') .badge').text(branch.reservations.reserved);
                row.find('td:eq(' + (reservationOffset + 1) + ') .badge').text(branch.reservations.arrived);
                row.find('td:eq(' + (reservationOffset + 2) + ') .badge').text(branch.reservations.cancelled);
            }
        });
    }

    function updateLastUpdatedTime(time) {
        $('#last-updated').text('Last Updated: ' + time);
    }

    function showNotification(message, type) {
        // Using simple alert - replace with your preferred notification library
        console.log(type + ': ' + message);
    }
});
</script>
@endpush