@extends('layouts.master')

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

@section('content')

@component('components.breadcrumb')
@slot('li_1') Dashboards @endslot
@slot('title') Dashboard @endslot
@endcomponent

<!-- Filters Section -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Filters</h4>
                <form id="dashboardFilters">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Date Range</label>
                                <input type="text" class="form-control" id="daterange" placeholder="Select date range">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Location</label>
                                <select class="form-select" id="location">
                                    <option value="">All Locations</option>
                                    <option value="location1">Location 1</option>
                                    <option value="location2">Location 2</option>
                                    <option value="location3">Location 3</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Region</label>
                                <select class="form-select" id="region">
                                    <option value="">All Regions</option>
                                    <option value="north">North</option>
                                    <option value="south">South</option>
                                    <option value="east">East</option>
                                    <option value="west">West</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary">Apply Filters</button>
                            <button type="reset" class="btn btn-secondary">Reset</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Key Metrics Cards - Row 1 -->
<div class="row">
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium mb-2">Total Restaurants Onboarded</p>
                        <h4 class="mb-0">{{ $totalRestaurants ?? '0' }}</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="mini-stat-icon avatar-sm rounded-circle bg-primary">
                            <span class="avatar-title">
                                <i class="bx bx-store font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium mb-2">Total Active Branches</p>
                        <h4 class="mb-0">{{ $activeBranches ?? '0' }}</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="avatar-sm rounded-circle bg-primary mini-stat-icon">
                            <span class="avatar-title rounded-circle bg-primary">
                                <i class="bx bx-building font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium mb-2">Total Guests Served</p>
                        <h4 class="mb-0">{{ $totalGuests ?? '0' }}</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="avatar-sm rounded-circle bg-primary mini-stat-icon">
                            <span class="avatar-title rounded-circle bg-primary">
                                <i class="bx bx-user font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium mb-2">Total Queue Entries</p>
                        <h4 class="mb-0">{{ $queueEntries ?? '0' }}</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="avatar-sm rounded-circle bg-primary mini-stat-icon">
                            <span class="avatar-title rounded-circle bg-primary">
                                <i class="bx bx-list-ul font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Key Metrics Cards - Row 2 -->
<div class="row">
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium mb-2">Total Reservations</p>
                        <h4 class="mb-0">{{ $totalReservations ?? '0' }}</h4>
                        <p class="text-muted mb-0 mt-1"><small>WhatsApp + Web</small></p>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="mini-stat-icon avatar-sm rounded-circle bg-success">
                            <span class="avatar-title">
                                <i class="bx bx-calendar-check font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium mb-2">Average Wait Time</p>
                        <h4 class="mb-0">{{ $avgWaitTime ?? '0' }} <small>mins</small></h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="avatar-sm rounded-circle bg-warning mini-stat-icon">
                            <span class="avatar-title rounded-circle bg-warning">
                                <i class="bx bx-time font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium mb-2">WhatsApp Adoption</p>
                        <h4 class="mb-0">{{ $whatsappAdoption ?? '0' }}%</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="avatar-sm rounded-circle bg-info mini-stat-icon">
                            <span class="avatar-title rounded-circle bg-info">
                                <i class="bx bxl-whatsapp font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium mb-2">Manual Entries</p>
                        <h4 class="mb-0">{{ $manualEntries ?? '0' }}</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="avatar-sm rounded-circle bg-secondary mini-stat-icon">
                            <span class="avatar-title rounded-circle bg-secondary">
                                <i class="bx bx-edit font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Key Metrics Cards - Row 3 -->
<div class="row">
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium mb-2">No-Show %</p>
                        <h4 class="mb-0">{{ $noShowPercent ?? '0' }}%</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="mini-stat-icon avatar-sm rounded-circle bg-danger">
                            <span class="avatar-title">
                                <i class="bx bx-x-circle font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium mb-2">Cancellation %</p>
                        <h4 class="mb-0">{{ $cancellationPercent ?? '0' }}%</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="avatar-sm rounded-circle bg-danger mini-stat-icon">
                            <span class="avatar-title rounded-circle bg-danger">
                                <i class="bx bx-block font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium mb-2">Free Pack - Restaurant</p>
                        <h4 class="mb-0">{{ $freePackRestaurant ?? '0' }}</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="avatar-sm rounded-circle bg-light mini-stat-icon">
                            <span class="avatar-title rounded-circle bg-light">
                                <i class="bx bx-package text-primary font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium mb-2">Premium Pack - Restaurant</p>
                        <h4 class="mb-0">{{ $premiumPackRestaurant ?? '0' }}</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="avatar-sm rounded-circle bg-warning mini-stat-icon">
                            <span class="avatar-title rounded-circle bg-warning">
                                <i class="bx bx-crown font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Key Metrics Cards - Row 4 -->
<div class="row">
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium mb-2">Free Pack - Food Court</p>
                        <h4 class="mb-0">{{ $freePackFoodCourt ?? '0' }}</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="mini-stat-icon avatar-sm rounded-circle bg-light">
                            <span class="avatar-title">
                                <i class="bx bx-food-menu text-primary font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium mb-2">Premium Pack - Food Court</p>
                        <h4 class="mb-0">{{ $premiumPackFoodCourt ?? '0' }}</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="avatar-sm rounded-circle bg-warning mini-stat-icon">
                            <span class="avatar-title rounded-circle bg-warning">
                                <i class="bx bx-restaurant font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Section - Row 1 -->
<div class="row">
    <div class="col-xl-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">% of Guests Seated Under 5 Minutes</h4>
                <div id="guests-under-5-chart" data-colors='["--bs-success"]' class="apex-charts" dir="ltr"></div>
            </div>
        </div>
    </div>
    <div class="col-xl-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Peak Wait Time (95th Percentile)</h4>
                <div id="peak-wait-time-chart" data-colors='["--bs-warning"]' class="apex-charts" dir="ltr"></div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Section - Row 2 -->
<div class="row">
    <div class="col-xl-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Busiest Time Slots (Platform-wide)</h4>
                <div id="busiest-time-slots-chart" data-colors='["--bs-primary"]' class="apex-charts" dir="ltr"></div>
            </div>
        </div>
    </div>
    <div class="col-xl-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Large Group Handling % (6+ guests)</h4>
                <div id="large-group-chart" data-colors='["--bs-info"]' class="apex-charts" dir="ltr"></div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Section - Row 3 -->
<div class="row">
    <div class="col-xl-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Subscription Revenue (Platform)</h4>
                <div id="subscription-revenue-chart" data-colors='["--bs-success"]' class="apex-charts" dir="ltr"></div>
            </div>
        </div>
    </div>
    <div class="col-xl-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Average Bookings per Day (Platform)</h4>
                <div id="avg-bookings-chart" data-colors='["--bs-primary"]' class="apex-charts" dir="ltr"></div>
            </div>
        </div>
    </div>
</div>

<!-- Top Performing Restaurants Table -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Top Performing Restaurants by Volume</h4>
                <div class="table-responsive">
                    <table class="table align-middle table-nowrap mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>S.No</th>
                                <th>Region</th>
                                <th>Location</th>
                                <th>Restaurant ID</th>
                                <th>Restaurant Name</th>
                                <th>Booking Count</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($topRestaurants ?? [] as $index => $restaurant)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $restaurant->region }}</td>
                                <td>{{ $restaurant->location }}</td>
                                <td><a href="javascript: void(0);" class="text-body fw-bold">{{ $restaurant->restaurant_id }}</a></td>
                                <td>{{ $restaurant->restaurant_name }}</td>
                                <td><span class="badge badge-pill badge-soft-success font-size-12">{{ $restaurant->booking_count }}</span></td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center">No data available</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Users List Table -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Users List</h4>
                <div class="table-responsive">
                    <table class="table align-middle table-nowrap mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>S.No</th>
                                <th>User Name</th>
                                <th>User Role</th>
                                <th>Email</th>
                                <th>Phone Number</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($users ?? [] as $index => $user)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $user->name }}</td>
                                <td>{{ $user->role }}</td>
                                <td>{{ $user->email }}</td>
                                <td>{{ $user->phone }}</td>
                                <td>
                                    @if($user->status == 'active')
                                        <span class="badge badge-pill badge-soft-success font-size-11">Active</span>
                                    @else
                                        <span class="badge badge-pill badge-soft-danger font-size-11">Inactive</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center">No users found</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<!-- apexcharts -->
<script src="{{ URL::asset('build/libs/apexcharts/apexcharts.min.js') }}"></script>

<!-- Dashboard Charts Init -->
<script>
    // Guests Seated Under 5 Minutes (Bar Chart)
    var guestsUnder5Options = {
        series: [{
            name: 'Percentage',
            data: [65, 72, 68, 75, 70, 73, 78]
        }],
        chart: {
            type: 'bar',
            height: 350,
            toolbar: {
                show: false
            }
        },
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '45%',
                endingShape: 'rounded'
            },
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            show: true,
            width: 2,
            colors: ['transparent']
        },
        colors: ['#34c38f'],
        xaxis: {
            categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yaxis: {
            title: {
                text: 'Percentage (%)'
            },
            max: 100
        },
        fill: {
            opacity: 1
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + "%"
                }
            }
        }
    };
    var guestsUnder5Chart = new ApexCharts(document.querySelector("#guests-under-5-chart"), guestsUnder5Options);
    guestsUnder5Chart.render();

    // Peak Wait Time (Line Chart)
    var peakWaitTimeOptions = {
        series: [{
            name: 'Wait Time (mins)',
            data: [45, 52, 48, 55, 50, 58, 62]
        }],
        chart: {
            type: 'line',
            height: 350,
            toolbar: {
                show: false
            }
        },
        stroke: {
            curve: 'smooth',
            width: 3
        },
        colors: ['#f1b44c'],
        xaxis: {
            categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yaxis: {
            title: {
                text: 'Minutes'
            }
        },
        markers: {
            size: 4,
            strokeWidth: 0,
            hover: {
                size: 6
            }
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + " mins"
                }
            }
        }
    };
    var peakWaitTimeChart = new ApexCharts(document.querySelector("#peak-wait-time-chart"), peakWaitTimeOptions);
    peakWaitTimeChart.render();

    // Busiest Time Slots (Bar Chart)
    var busiestTimeSlotsOptions = {
        series: [{
            name: 'Queue Entries',
            data: [30, 45, 60, 85, 120, 150, 180, 160, 140, 110, 80, 50]
        }],
        chart: {
            type: 'bar',
            height: 350,
            toolbar: {
                show: false
            }
        },
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '55%',
                endingShape: 'rounded'
            },
        },
        dataLabels: {
            enabled: false
        },
        colors: ['#556ee6'],
        xaxis: {
            categories: ['8AM', '9AM', '10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM'],
        },
        yaxis: {
            title: {
                text: 'Number of Entries'
            }
        },
        fill: {
            opacity: 1
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + " entries"
                }
            }
        }
    };
    var busiestTimeSlotsChart = new ApexCharts(document.querySelector("#busiest-time-slots-chart"), busiestTimeSlotsOptions);
    busiestTimeSlotsChart.render();

    // Large Group Handling (Line Chart)
    var largeGroupOptions = {
        series: [{
            name: 'Percentage',
            data: [15, 18, 20, 22, 19, 23, 25]
        }],
        chart: {
            type: 'line',
            height: 350,
            toolbar: {
                show: false
            }
        },
        stroke: {
            curve: 'smooth',
            width: 3
        },
        colors: ['#50a5f1'],
        xaxis: {
            categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yaxis: {
            title: {
                text: 'Percentage (%)'
            },
            max: 100
        },
        markers: {
            size: 4,
            strokeWidth: 0,
            hover: {
                size: 6
            }
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + "%"
                }
            }
        }
    };
    var largeGroupChart = new ApexCharts(document.querySelector("#large-group-chart"), largeGroupOptions);
    largeGroupChart.render();

    // Subscription Revenue (Bar Chart)
    var subscriptionRevenueOptions = {
        series: [{
            name: 'Revenue',
            data: [15000, 18000, 22000, 25000, 28000, 32000, 35000]
        }],
        chart: {
            type: 'bar',
            height: 350,
            toolbar: {
                show: false
            }
        },
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '45%',
                endingShape: 'rounded'
            },
        },
        dataLabels: {
            enabled: false
        },
        colors: ['#34c38f'],
        xaxis: {
            categories: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7'],
        },
        yaxis: {
            title: {
                text: 'Revenue ($)'
            }
        },
        fill: {
            opacity: 1
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return "$" + val.toLocaleString()
                }
            }
        }
    };
    var subscriptionRevenueChart = new ApexCharts(document.querySelector("#subscription-revenue-chart"), subscriptionRevenueOptions);
    subscriptionRevenueChart.render();

    // Average Bookings per Day (Line Chart)
    var avgBookingsOptions = {
        series: [{
            name: 'Avg Bookings',
            data: [120, 135, 142, 155, 148, 165, 170]
        }],
        chart: {
            type: 'line',
            height: 350,
            toolbar: {
                show: false
            }
        },
        stroke: {
            curve: 'smooth',
            width: 3
        },
        colors: ['#556ee6'],
        xaxis: {
            categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yaxis: {
            title: {
                text: 'Number of Bookings'
            }
        },
        markers: {
            size: 4,
            strokeWidth: 0,
            hover: {
                size: 6
            }
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + " bookings"
                }
            }
        }
    };
    var avgBookingsChart = new ApexCharts(document.querySelector("#avg-bookings-chart"), avgBookingsOptions);
    avgBookingsChart.render();
</script>
@endsection