@extends('vendor/layouts/master')
@section('title')
    {{ config()->get('app.name') }} | {{ trns('Admin') }}
@endsection
@section('page_name')
    {{ trns('Admin') }}
@endsection
@section('content')

    <style>
        .chart-item {
            display: none;
        }

        .chart-item.active {
            display: block;
        }
    </style>

    <div class="card mb-5">
        <div class="card-body">
            @if ($lodge || $restaurant || $organization || $company)
                <div class="row">



                    @if ($lodge)
                        <div class="row w-100" style="width: 800px">
                            <h3 class="text-primary bold font-weight-bold"> {{ trns('lodge') }}</h3>
                            <div class="col-3">
                                <div class="card bg-primary-gradient img-card box-success-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font">{{ $lodge }}</h2>
                                                <p class="text-white mb-0"> {{ trns('lodge') }}</p>
                                            </div>
                                            <div class="mr-auto">
                                                <i class="fe fe-user-check text-white fs-30 ml-2 mt-2"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="card bg-success-gradient img-card box-success-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">

                                                <h2 class="mb-0 number-font">{{ $rooms }}</h2>
                                                <p class="text-white mb-0"> {{trns('rooms') }}</p>

                                            </div>
                                            <div class="mr-auto">
                                                <i class="fe fe-user-check text-white fs-30 ml-2 mt-2"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="card bg-warning-gradient img-card box-success-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">

                                                <h2 class="mb-0 number-font">{{ $completedRoomReservation }}</h2>
                                                <p class="text-white mb-0"> {{ trns('completed_reservation') }}</p>


                                            </div>
                                            <div class="mr-auto">
                                                <i class="fe fe-user-check text-white fs-30 ml-2 mt-2"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{--                    </div> --}}


                            <div class="col-3">
                                <div class="card bg-warning-gradient img-card box-success-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">

                                                <h2 class="mb-0 number-font">{{ $inCompletedRoomReservation }}</h2>
                                                <p class="text-white mb-0"> {{ trns('incompleted_reservation') }}</p>


                                            </div>
                                            <div class="mr-auto">
                                                <i class="fe fe-user-check text-white fs-30 ml-2 mt-2"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($company)
                        <hr class="w-75 mx-auto">
                        {{--                $company count --}}
                        <h3 class="text-primary bold font-weight-bold"> {{ trns('company') }}</h3>
                        <div class="row w-100" style="width: 800px">
                            <div class="col-3">
                                <div class="card bg-primary-gradient img-card box-success-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font">{{ $company }}</h2>
                                                <p class="text-white mb-0"> {{ trns('company') }}</p>
                                            </div>
                                            <div class="mr-auto">
                                                <i class="fe fe-user-check text-white fs-30 ml-2 mt-2"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="card bg-success-gradient img-card box-success-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">

                                                <h2 class="mb-0 number-font">{{ $busCount }}</h2>
                                                <p class="text-white mb-0"> {{ trns('bus') }}</p>

                                              

                                            </div>
                                            <div class="mr-auto">
                                                <i class="fe fe-user-check text-white fs-30 ml-2 mt-2"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="card bg-warning-gradient img-card box-success-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font">{{ $completedBusReservation }}</h2>
                                                <p class="text-white mb-0"> {{ trns('completed_reservation') }}</p>
                                            </div>
                                            <div class="mr-auto">
                                                <i class="fe fe-user-check text-white fs-30 ml-2 mt-2"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="card bg-warning-gradient img-card box-success-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font">{{ $inCompletedBusReservation }}</h2>
                                                <p class="text-white mb-0"> {{ trns('incompleted_reservation') }}</p>
                                            </div>
                                            <div class="mr-auto">
                                                <i class="fe fe-user-check text-white fs-30 ml-2 mt-2"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($restaurant)
                        <hr class="w-75 mx-auto">
                        {{--                $restaurant count --}}
                        <h3 class="text-primary bold font-weight-bold"> {{ trns('restaurant') }}</h3>
                        <div class="row w-100" style="width: 800px">
                            <div class="col-3">
                                <div class="card bg-primary-gradient img-card box-success-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font">{{ $restaurant }}</h2>
                                                <p class="text-white mb-0"> {{ trns('restaurant') }}</p>
                                            </div>
                                            <div class="mr-auto">
                                                <i class="fe fe-user-check text-white fs-30 ml-2 mt-2"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-3">
                                <div class="card bg-success-gradient img-card box-success-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font">{{ $restaurantMenuCount }}</h2>
                                                <p class="text-white mb-0"> {{ trns('restaurant_menu') }}</p>
                                            </div>
                                            <div class="mr-auto">
                                                <i class="fe fe-user-check text-white fs-30 ml-2 mt-2"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="card bg-warning-gradient img-card box-success-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font">{{ $completedRestaurantReservation }}</h2>
                                                <p class="text-white mb-0"> {{ trns('completed_reservation') }}</p>
                                            </div>
                                            <div class="mr-auto">
                                                <i class="fe fe-user-check text-white fs-30 ml-2 mt-2"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="card bg-warning-gradient img-card box-success-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font">{{ $inCompletedRestaurantReservation }}</h2>
                                                <p class="text-white mb-0"> {{ trns('incompleted_reservation') }}</p>
                                            </div>
                                            <div class="mr-auto">
                                                <i class="fe fe-user-check text-white fs-30 ml-2 mt-2"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    @endif


                    @if ($organization)
                        <hr class="w-75 mx-auto">
                        {{--                $organization count --}}
                        <div class="row w-100" style="width: 800px">
                            <h3 class="text-primary bold font-weight-bold"> {{ trns('organization') }}</h3>

                            <div class="col-3">
                                <div class="card bg-primary-gradient img-card box-success-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font">{{ $organization }}</h2>
                                                <p class="text-white mb-0"> {{ trns('organization') }}</p>
                                            </div>
                                            <div class="mr-auto">
                                                <i class="fe fe-user-check text-white fs-30 ml-2 mt-2"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="card bg-success-gradient img-card box-success-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font">{{ $wayServiceCount }}</h2>
                                                <p class="text-white mb-0"> {{ trns('way_service') }}</p>
                                            </div>
                                            <div class="mr-auto">
                                                <i class="fe fe-user-check text-white fs-30 ml-2 mt-2"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="card bg-warning-gradient img-card box-success-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font">{{ $completedOrganizationReservation }}</h2>
                                                <p class="text-white mb-0"> {{ trns('completed_reservation') }}</p>
                                            </div>
                                            <div class="mr-auto">
                                                <i class="fe fe-user-check text-white fs-30 ml-2 mt-2"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="card bg-warning-gradient img-card box-success-shadow">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="text-white">
                                                <h2 class="mb-0 number-font">{{ $inCompletedOrganizationReservation }}
                                                </h2>
                                                <p class="text-white mb-0"> {{ trns('incompleted_reservation') }}</p>
                                            </div>
                                            <div class="mr-auto">
                                                <i class="fe fe-user-check text-white fs-30 ml-2 mt-2"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <hr class="w-75 mx-auto">
                    @endif
                @else
                    <div style="display: flex; justify-content: flex-end; margin-bottom: 20px;">
                        <button class="btn btn-danger" id="clear_Cache_btn" data-bs-toggle="modal"
                            data-bs-target="#clear_Cache">
                            <i class="fas fa-trash ml-2"></i>{{ trns('clear_Cache') }}
                        </button>
                    </div>

                    <h1 class="text-center text-primary"> {{ trns("you dont have any statistics yet.") }}</h1>


                </div>
            @endif
            {{-- cahrts --}}



            <!-- Charts Section -->
            @if ($lodge || $restaurant || $organization || $company)
                <div class="container mb-4">
                    <select id="chartSelector" class="form-control">
                        <option value="">{{ trns('select_chart') }}</option>
                        @if ($lodge)
                            <option value="lodge">{{ trns('residence') }}</option>
                        @endif
                        @if ($company)
                            <option value="company">{{ trns('transport') }}</option>
                        @endif
                        @if ($restaurant)
                            <option value="restaurant">{{ trns('restaurant') }}</option>
                        @endif
                        @if ($organization)
                            <option value="organization">{{ trns('entertainment') }}</option>
                        @endif
                    </select>
                </div>
            @endif

            <div class="charts-container">
                <!-- Lodge Chart -->
                @if ($lodge)
                    <div class="chart-item active" data-chart="lodge">
                        <div class="container">
                            <h2>{{ trns('residence charts') }}</h2>
                            <div class="chart-container" style="position: relative; height:400px; width:100%">
                                <canvas id="LodgeChartUsers"></canvas>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Company Chart -->
                @if ($company)
                    <div class="chart-item" data-chart="company">
                        <div class="container">
                            <h2>{{ trns('transport') }}</h2>
                            <div class="chart-container" style="position: relative; height:400px; width:100%">
                                <canvas id="CompanyChart"></canvas>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Restaurant Chart -->
                @if ($restaurant)
                    <div class="chart-item" data-chart="restaurant">
                        <div class="container">
                            <h2>{{ trns('Restaurant') }}</h2>
                            <div class="chart-container" style="position: relative; height:400px; width:100%">
                                <canvas id="RestaurantChart"></canvas>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Organization Chart -->
                @if ($organization)
                    <div class="chart-item" data-chart="organization">
                        <div class="container">
                            <h2>{{ trns('entertainment') }}</h2>
                            <div class="chart-container" style="position: relative; height:400px; width:100%">
                                <canvas id="OrganizationChart"></canvas>
                            </div>
                        </div>
                    </div>
                @endif


            </div>

            <!-- Charts Section -->
            <div class="container mb-4 d-none">
                <select id="chartSelector" style="display: none" class="form-control d-none">
                    <option value="">{{ trns('select_chart') }}</option>
                    @if ($lodge > 0)
                        <option value="lodge">{{ trns('residence') }}</option>
                    @endif
                    @if (!$company > 0)
                        <option value="company">{{ trns('entertainment') }}</option>
                    @endif
                    @if (!$restaurant > 0)
                        <option value="restaurant">{{ trns('restaurant') }}</option>
                    @endif
                    @if (!$organization > 0)
                        <option value="organization">{{ trns('organization') }}</option>
                    @endif
                </select>
            </div>

            <div class="charts-container">
                <!-- Lodge Chart -->
                <div class="chart-item" data-chart="lodge">
                    <div class="container">
                        <h2>{{ trns('Lodge charts') }}</h2>
                        <div class="chart-container" style="position: relative; height:400px; width:100%">
                            <canvas id="LodgeChartUsers"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Company Chart -->
                <div class="chart-item" data-chart="company">
                    <div class="container">
                        <h2>{{ trns('Company') }}</h2>
                        <div class="chart-container" style="position: relative; height:400px; width:100%">
                            <canvas id="CompanyChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Restaurant Chart -->
                <div class="chart-item" data-chart="restaurant">
                    <div class="container">
                        <h2>{{ trns('Restaurant') }}</h2>
                        <div class="chart-container" style="position: relative; height:400px; width:100%">
                            <canvas id="RestaurantChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Organization Chart -->
                <div class="chart-item" data-chart="organization">
                    <div class="container">
                        <h2>{{ trns('Organization') }}</h2>
                        <div class="chart-container" style="position: relative; height:400px; width:100%">
                            <canvas id="OrganizationChart"></canvas>
                        </div>
                    </div>
                </div>

            </div>

            <div class="modal fade" id="clear_Cache" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog " role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">{{ trns('clear_Cache') }}</h5>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>{{ trns('are_you_sure_you_want_to_clear_cache') }}</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-bs-dismiss="modal">
                                {{ trns('close') }}
                            </button>
                            <button type="button" class="btn btn-danger" id="confirm_clear_cache">
                                {{ trns('clear_Cache') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        @endsection





        @section('js')
            <script>
                $(document).on('click', '#confirm_clear_cache', function() {
                    $.ajax({
                        url: "{{ route('admin.clear_cache') }}",
                        type: 'POST',
                        data: {
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(response) {
                            toastr.success("{{ trns('cache_cleared_successfully') }}");
                            $('#clear_Cache').modal('hide');
                        },
                        error: function() {
                            toastr.error("{{ trns('something_went_wrong') }}");
                        }
                    });
                });
            </script>

            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const chartSelector = document.getElementById('chartSelector');
                    const chartItems = document.querySelectorAll('.chart-item');


                    chartItems.forEach(item => item.style.display = 'none');

                    chartSelector.addEventListener('change', function() {
                        const selectedValue = this.value;

                        chartItems.forEach(item => item.style.display = 'none');

                        if (selectedValue) {
                            const selectedChart = document.querySelector(
                                `.chart-item[data-chart="${selectedValue}"]`);
                            if (selectedChart) {
                                selectedChart.style.display = 'block';
                            }
                        }
                    });

                    initializeLodgeChart();
                    initializeCompanyChart();
                    initializeRestaurantChart();
                    initializeOrganizationChart();
                    initializeTransportationChart();
                });







                function initializeLodgeChart() {
                    const ctx = document.getElementById('LodgeChartUsers').getContext('2d');
                    new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: [
                                '{{ trns('lodge') }}',
                                '{{ trns('rooms') }}',
                                '{{ trns('completedRoomReservation') }}',
                                '{{ trns('inCompletedRoomReservation') }}'
                            ],
                            datasets: [{
                                label: '{{ trns('Lodge Statistics') }}',
                                data: [
                                    {{ $lodge }},
                                    {{ $rooms }},
                                    {{ $completedRoomReservation }},
                                    {{ $inCompletedRoomReservation }}
                                ],
                                backgroundColor: [
                                    'rgba(54, 162, 235, 0.5)',
                                    'rgba(75, 192, 192, 0.5)',
                                    'rgba(255, 99, 132, 0.5)',
                                    'rgba(255, 206, 86, 0.5)'
                                ],
                                borderColor: [
                                    'rgba(54, 162, 235, 1)',
                                    'rgba(75, 192, 192, 1)',
                                    'rgba(255, 99, 132, 1)',
                                    'rgba(255, 206, 86, 1)'
                                ],
                                borderWidth: 1
                            }]
                        },
                        options: getChartOptions('{{ trns('Count') }}')
                    });
                }

                // Company Chart
                function initializeCompanyChart() {
                    const ctx = document.getElementById('CompanyChart').getContext('2d');
                    new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: [
                                '{{ trns('company') }}',
                                '{{ trns('busCount') }}',
                                '{{ trns('completedBusReservation') }}',
                                '{{ trns('inCompletedBusReservation') }}'
                            ],
                            datasets: [{
                                label: '{{ trns('Company Statistics') }}',
                                data: [
                                    {{ $company }},
                                    {{ $busCount }},
                                    {{ $completedBusReservation }},
                                    {{ $inCompletedBusReservation }}
                                ],
                                backgroundColor: [
                                    'rgba(153, 102, 255, 0.5)',
                                    'rgba(255, 159, 64, 0.5)',
                                    'rgba(255, 99, 132, 0.5)',
                                    'rgba(54, 162, 235, 0.5)'
                                ],
                                borderWidth: 1
                            }]
                        },
                        options: getChartOptions('{{ trns('Count') }}')
                    });
                }

                // Restaurant Chart
                function initializeRestaurantChart() {
                    const ctx = document.getElementById('RestaurantChart').getContext('2d');
                    new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: [
                                '{{ trns('restaurant') }}',
                                '{{ trns('restaurantMenu') }}',
                                '{{ trns('completedRestaurantReservation') }}',
                                '{{ trns('inCompletedRestaurantReservation') }}'
                            ],
                            datasets: [{
                                label: '{{ trns('Restaurant Statistics') }}',
                                data: [
                                    {{ $restaurant }},
                                    {{ $restaurantMenuCount }},
                                    {{ $completedRestaurantReservation }},
                                    {{ $inCompletedRestaurantReservation }}
                                ],
                                backgroundColor: [
                                    'rgba(255, 99, 132, 0.5)',
                                    'rgba(54, 162, 235, 0.5)',
                                    'rgba(255, 206, 86, 0.5)',
                                    'rgba(75, 192, 192, 0.5)'
                                ],
                                borderWidth: 1
                            }]
                        },
                        options: getChartOptions('{{ trns('Count') }}')
                    });
                }

                // Organization Chart
                function initializeOrganizationChart() {
                    const ctx = document.getElementById('OrganizationChart').getContext('2d');
                    new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: [
                                '{{ trns('organization') }}',
                                '{{ trns('wayService') }}',
                                '{{ trns('completedOrganizationReservation') }}',
                                '{{ trns('inCompletedOrganizationReservation') }}'
                            ],
                            datasets: [{
                                label: '{{ trns('Organization Statistics') }}',
                                data: [
                                    {{ $organization }},
                                    {{ $wayServiceCount }},
                                    {{ $completedOrganizationReservation }},
                                    {{ $inCompletedOrganizationReservation }}
                                ],
                                backgroundColor: [
                                    'rgba(75, 192, 192, 0.5)',
                                    'rgba(255, 99, 132, 0.5)',
                                    'rgba(54, 162, 235, 0.5)',
                                    'rgba(255, 206, 86, 0.5)'
                                ],
                                borderWidth: 1
                            }]
                        },
                        options: getChartOptions('{{ trns('Count') }}')
                    });
                }

                // Transportation Chart
                function initializeTransportationChart() {
                    const ctx = document.getElementById('TransportationChart').getContext('2d');
                    new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: [
                                '{{ trns('Transportation') }}',
                                '{{ trns('Completed') }}',
                                '{{ trns('Incomplete') }}'
                            ],
                            datasets: [{
                                label: '{{ trns('Transportation Statistics') }}',
                                data: [100, 70, 30],
                                backgroundColor: [
                                    'rgba(54, 162, 235, 0.5)',
                                    'rgba(75, 192, 192, 0.5)',
                                    'rgba(255, 99, 132, 0.5)'
                                ],
                                borderWidth: 1
                            }]
                        },
                        options: getChartOptions('{{ trns('Count') }}')
                    });
                }

                // Common chart options
                function getChartOptions(yAxisTitle) {
                    return {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: yAxisTitle
                                }
                            },
                            x: {
                                title: {
                                    display: true,
                                    text: '{{ trns('Categories') }}'
                                }
                            }
                        },
                        plugins: {
                            legend: {
                                position: 'top',
                            },
                            tooltip: {
                                mode: 'index',
                                intersect: false,
                            }
                        }
                    };
                }
            </script>


            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    // Initialize chart selector functionality
                    const chartSelector = document.getElementById('chartSelector');
                    const chartItems = document.querySelectorAll('.chart-item');

                    // Set first chart as active by default
                    chartItems.forEach(item => {
                        if (!item.classList.contains('active')) {
                            item.style.display = 'none';
                        }
                    });

                    // Handle select change
                    chartSelector.addEventListener('change', function() {
                        const selectedValue = this.value;

                        // Hide all charts
                        chartItems.forEach(item => {
                            item.style.display = 'none';
                            item.classList.remove('active');
                        });

                        // Show selected chart
                        if (selectedValue) {
                            const selectedChart = document.querySelector(
                                `.chart-item[data-chart="${selectedValue}"]`);
                            if (selectedChart) {
                                selectedChart.style.display = 'block';
                                selectedChart.classList.add('active');
                            }
                        }
                    });

                    // Initialize all charts
                    initializeLodgeChart();
                    initializeCompanyChart();
                    initializeRestaurantChart();
                    initializeOrganizationChart();
                    initializeTransportationChart();
                });

                // Chart initialization functions remain the same as your existing code
                // ... (keep all your chart initialization functions exactly as they are)
            </script>
        @endsection