@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" method="GET" action="{{ route('dashboard.index') }}">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Date Range</label>
                                    <select class="form-select" name="date_range" id="dateRange">
                                        <option value="today">Today</option>
                                        <option value="yesterday">Yesterday</option>
                                        <option value="last_7_days">Last 7 Days</option>
                                        <option value="last_30_days">Last 30 Days</option>
                                        <option value="this_month">This Month</option>
                                        <option value="last_month">Last Month</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Location</label>
                                    <select class="form-select" name="location" id="location">
                                        <option value="">All Locations</option>
                                        @foreach ($locations as $loc)
                                            <option value="{{ $loc->id }}">{{ $loc->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Region</label>
                                    <select class="form-select" name="region" id="region">
                                        <option value="">All Regions</option>
                                        @foreach ($regions as $reg)
                                            <option value="{{ $reg->id }}">{{ $reg->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">Apply Filters</button>
                                <a href="{{ route('dashboard.index') }}" class="btn btn-secondary">Reset</a>
                            </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">{{ number_format($totalRestaurants) }}</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">{{ number_format($activeBranches) }}</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">{{ number_format($totalGuests) }}</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">{{ number_format($queueEntries) }}</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">{{ number_format($totalReservations) }}</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 }} <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 }}%</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">{{ number_format($manualEntries) }}</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 }}%</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 }}%</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">{{ number_format($freePackRestaurant) }}</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">{{ number_format($premiumPackRestaurant) }}</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">{{ number_format($freePackFoodCourt) }}</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">{{ number_format($premiumPackFoodCourt) }}</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">{{ number_format($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 -->
    <!-- Users List Table - ENHANCED VERSION -->
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h4 class="card-title mb-0">Users List</h4>
                        <div>
                            <button class="btn btn-sm btn-primary">
                                <i class="bx bx-filter"></i> Filter
                            </button>
                            <button class="btn btn-sm btn-success">
                                <i class="bx bx-download"></i> Export
                            </button>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table align-middle table-nowrap mb-0" id="usersTable">
                            <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>Branch</th>
                                    <th>Tenant</th>
                                    <th>Online Status</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($users as $index => $user)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-xs me-2">
                                                    <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                        {{ strtoupper(substr($user->name, 0, 1)) }}
                                                    </span>
                                                </div>
                                                <span>{{ $user->name }}</span>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge badge-soft-info">{{ $user->role }}</span>
                                        </td>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ $user->phone }}</td>
                                        <td>
                                            <small class="text-muted">{{ Str::limit($user->branch_name, 20) }}</small>
                                        </td>
                                        <td>
                                            <small class="text-muted">{{ Str::limit($user->tenant_name, 20) }}</small>
                                        </td>
                                        <td>
                                            @if ($user->is_online)
                                                <span class="badge badge-pill badge-soft-success font-size-11">
                                                    <i class="bx bxs-circle me-1"></i> Online
                                                </span>
                                            @else
                                                <span class="badge badge-pill badge-soft-secondary font-size-11">
                                                    <i class="bx bxs-circle me-1"></i> Offline
                                                </span>
                                            @endif
                                        </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>
                                        <td>
                                            <div class="dropdown">
                                                <a href="#" class="dropdown-toggle card-drop"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="mdi mdi-dots-horizontal font-size-18"></i>
                                                </a>
                                                <ul class="dropdown-menu dropdown-menu-end">
                                                    <li><a class="dropdown-item" href="#"><i
                                                                class="bx bx-show me-1"></i> View</a></li>
                                                    <li><a class="dropdown-item" href="#"><i
                                                                class="bx bx-edit me-1"></i> Edit</a></li>
                                                    <li><a class="dropdown-item text-danger" href="#"><i
                                                                class="bx bx-trash me-1"></i> Delete</a></li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="10" class="text-center">
                                            <div class="py-4">
                                                <i class="bx bx-user-x display-4 text-muted"></i>
                                                <p class="mt-2 text-muted">No users found</p>
                                            </div>
                                        </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: @json($guestsUnder5Data)
            }],
            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: @json($peakWaitTimeData)
            }],
            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: @json($busiestTimeSlotsData)
            }],
            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: @json($largeGroupData)
            }],
            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: @json($subscriptionRevenueData)
            }],
            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: @json($avgBookingsData)
            }],
            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