@extends('admin.layout.index')
@section('title', 'Muftaax | Admin Dashboard')
@section('custom-style')
    <style>
        .swiper-button-next {
            background: #00a1fe;
            margin-top: calc(10px - (var(--swiper-navigation-size)/ 2)) !important;
            right: var(--swiper-navigation-sides-offset, 5px) !important;
        }

        .swiper-button-prev {
            background: #00a1fe;
            margin-top: calc(10px - (var(--swiper-navigation-size)/ 2)) !important;
            left: var(--swiper-navigation-sides-offset, 5px) !important;
        }

        .swiper-button-prev.swiper-button-disabled {
            opacity: 1 !important;
        }

        .swiper-button-next.swiper-button-disabled {
            opacity: 1 !important;
        }
    </style>
@endsection
@section('content')

    <!-- Start::app-content -->
    <div class="main-content app-content">
        <div class="container-fluid">

            <!-- Start::page-header -->
            <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h1 class="page-title fw-medium fs-18 mb-2">Analytics</h1>
                    <div class="">
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboards</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Analytics</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <div class="btn-list">
                    {{-- <button class="btn btn-primary-light btn-wave waves-effect waves-light">
                        <i class="bx bx-download align-middle me-2"></i>Generate Reports
                    </button> --}}
                </div>

            </div>
            <!-- End::page-header -->

            <!-- Start::row-1 -->
            <div class="row">

                <div class="col-xxl-12 col-xl-12">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card custom-card">
                                <div class="card-body">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="swiper swiper-basic">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide">
                                                    <div
                                                        class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                        <div class="d-flex flex-fill align-items-center">
                                                            <div class="me-2">
                                                                <span class="avatar avatar-rounded bg-light p-2">
                                                                    <i class="bi bi-file-bar-graph text-muted fs-18"></i>
                                                                </span>
                                                            </div>
                                                            <div class="lh-1">
                                                                <span class="d-block mb-2 text-default">Order Volume</span>
                                                                <span
                                                                    class="d-block text-muted fs-12">{{ number_format($totalOrders) }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div
                                                        class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                        <div class="d-flex flex-fill align-items-center">
                                                            <div class="me-2">
                                                                <span class="avatar avatar-rounded bg-light p-2">
                                                                    <i class="bi bi-file-earmark text-warning fs-18"></i>
                                                                </span>
                                                            </div>
                                                            <div class="lh-1">
                                                                <span class="d-block mb-2 text-default">Delivered
                                                                    Orders</span>
                                                                <span
                                                                    class="d-block text-muted fs-12">{{ number_format($totalCompletedOrders) }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div
                                                        class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                        <div class="d-flex flex-fill align-items-center">
                                                            <div class="me-2">
                                                                <span class="avatar avatar-rounded bg-light p-2">
                                                                    <i
                                                                        class="bi bi-file-earmark-medical text-success fs-18"></i>
                                                                </span>
                                                            </div>
                                                            <div class="lh-1">
                                                                <span class="d-block mb-2 text-default">Total
                                                                    Customers</span>
                                                                <span
                                                                    class="d-block text-muted fs-12">{{ number_format($totalUsers) }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div
                                                        class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                        <div class="d-flex flex-fill align-items-center">
                                                            <div class="me-2">
                                                                <span class="avatar avatar-rounded bg-light p-2">
                                                                    <i class="bi bi-file-excel text-danger fs-18"></i>
                                                                </span>
                                                            </div>
                                                            <div class="lh-1">
                                                                <span class="d-block mb-2 text-default">
                                                                    Active Drivers</span>
                                                                <span
                                                                    class="d-block text-muted fs-12">{{ number_format($totalDrivers) }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div
                                                        class="d-flex flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                        <div class="d-flex flex-fill align-items-center">
                                                            <div class="me-2">
                                                                <span class="avatar avatar-rounded bg-light p-2">
                                                                    <i class="bi bi-card-heading text-primary fs-18"></i>
                                                                </span>
                                                            </div>
                                                            <div class="lh-1">
                                                                <span class="d-block mb-2 text-default">Rides
                                                                    Completed</span>
                                                                <span
                                                                    class="d-block text-muted fs-12">{{ number_format($totalCompletedRides) }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide">
                                                    <div
                                                        class="d-flex flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                        <div class="d-flex flex-fill align-items-center">
                                                            <div class="me-2">
                                                                <span class="avatar avatar-rounded bg-light p-2">
                                                                    <i
                                                                        class="bi bi-file-earmark-image text-secondary fs-18"></i>
                                                                </span>
                                                            </div>
                                                            <div class="lh-1">
                                                                <span class="d-block mb-2 text-default">Total Revenue</span>
                                                                <span
                                                                    class="d-block text-muted fs-12">${{ number_format($totalRevenueUsers) }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {{-- <div class="swiper-slide">
                                                    <div
                                                        class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                        <div class="d-flex flex-fill align-items-center">
                                                            <div class="me-2">
                                                                <span class="avatar avatar-rounded bg-light p-2">
                                                                    <i class="bi bi-files-alt text-warning fs-18"></i>
                                                                </span>
                                                            </div>
                                                            <div class="lh-1">
                                                                <span class="d-block mb-2 text-default">Pending
                                                                    Payments</span>
                                                                <span class="d-block text-muted fs-12">1,668</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div> --}}
                                            </div>
                                        </div>
                                        <div class="swiper-button swiper-button-next"></div>
                                        <div class="swiper-button swiper-button-prev"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl-6">
                            <div class="card custom-card overflow-hidden">
                                <div class="card-header justify-content-between">
                                    <div class="card-title">
                                        Performance Metrics
                                    </div>
                                    {{-- <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
                                        <input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
                                        <label class="btn btn-outline-light" for="btnradio1">Week</label>

                                        <input type="radio" class="btn-check" name="btnradio" id="btnradio2">
                                        <label class="btn btn-outline-light" for="btnradio2">Month</label>

                                        <input type="radio" class="btn-check" name="btnradio" id="btnradio3">
                                        <label class="btn btn-outline-light" for="btnradio3">Year</label>
                                    </div> --}}
                                </div>
                                <div class="card-body p-0">
                                    <div class="row border-bottom border-block-end-dashed">
                                        <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                            <div
                                                class="p-4 border-sm-end border-inline-end-dashed text-sm-start text-center">
                                                <p class="fs-20 mb-0">{{ number_format($yearlyOrders) }}</p>
                                                <p class="mb-0 text-muted">Total Orders</p>
                                            </div>
                                        </div>
                                        <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                            <div
                                                class="p-4 border-sm-end border-inline-end-dashed text-sm-start text-center">
                                                <p class="fs-20 mb-0">{{ number_format($yearlyRides) }}</p>
                                                <p class="mb-0 text-muted">Total RIdes</p>
                                            </div>
                                        </div>
                                        <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                            <div class="p-4 text-sm-start text-center">
                                                <p class="fs-20 mb-0">{{ number_format($weeklyTotal) }}</p>
                                                <p class="mb-0 text-muted">This Week</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="earning-reports"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-6">
                            <div class="card custom-card h-95">
                                <div class="card-header">
                                    <div class="card-title">Performance Analytics</div>
                                </div>
                                <div class="card-body">
                                    <div id="zoom-chart12"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!--End::row-1 -->

            <div class="row">
                <div class="col-xl-12">
                    <div class="card custom-card overflow-hidden">
                        <div class="card-header justify-content-between">
                            <div class="card-title">App Usage Report</div>
                            {{-- <div class="dropdown">
                                <a href="javascript:void(0);" class="p-2 fs-12" data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                    View All<i class="ri-arrow-down-s-line align-middle ms-1"></i>
                                </a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a class="dropdown-item" href="javascript:void(0);">Today</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0);">This Week</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0);">Last Week</a></li>
                                </ul>
                            </div> --}}
                        </div>
                        <div class="card-body p-0">
                            <div class="row border-bottom border-block-end-dashed">
                                <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                    <div class="p-4 border-sm-end border-inline-end-dashed text-sm-start text-center">
                                        <p class="fs-20 mb-0">{{ number_format($totalUsers) }}</p>
                                        <p class="mb-0 text-muted">Total Users</p>
                                    </div>
                                </div>
                                <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                    <div class="p-4 border-sm-end border-inline-end-dashed text-sm-start text-center">
                                        <p class="fs-20 mb-0">{{ number_format($totalDrivers) }}</p>
                                        <p class="mb-0 text-muted">Active Drivers</p>
                                    </div>
                                </div>
                                <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                    <div class="p-4 text-sm-start text-center">
                                        <p class="fs-20 mb-0">{{ number_format($totalRides) }}</p>
                                        <p class="mb-0 text-muted">Total Rides</p>
                                    </div>
                                </div>
                                <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                    <div class="p-4 text-sm-start text-center">
                                        <p class="fs-20 mb-0">{{ number_format($totalRevenueUsers) }}</p>
                                        <p class="mb-0 text-muted">Total Payments</p>
                                    </div>
                                </div>
                            </div>
                            <div class="p-3" id="projectAnalysis"></div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
    <!-- End::app-content -->

@endsection
@section('custom-script')
    <script src="{{ asset('assets/libs/apexcharts/apexcharts.min.js') }}"></script>
    <!-- Internal Apex Line Charts JS -->
    <script src="{{ asset('assets/js/apexcharts-line.js') }}"></script>
    <!---Used In Annotations Chart-->
    <script src="{{ asset('assets/js/apexcharts-stock-prices.js') }}"></script>

    <script>
        var options = {
            series: [{
                    name: "Orders",
                    data: @json($monthlyOrders),
                },
                {
                    name: "Rides",
                    data: @json($monthlyRides),
                }
            ],
            chart: {
                type: "area",
                height: 318,
                toolbar: {
                    show: false
                }
            },
            colors: [
                "var(--primary-color)",
                "rgb(69, 214, 91)",
            ],
            fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    opacityFrom: 0.4,
                    opacityTo: 0.1,
                    stops: [0, 90, 100],
                    colorStops: [
                        [{
                                offset: 0,
                                color: "var(--primary01)",
                                opacity: 50
                            },
                            {
                                offset: 75,
                                color: "var(--primary01)",
                                opacity: 0.1
                            },
                            {
                                offset: 100,
                                color: 'transparent',
                                opacity: 0.1
                            }
                        ],
                        [{
                                offset: 0,
                                color: 'rgba(69, 214, 91, 0.1)',
                                opacity: 1
                            },
                            {
                                offset: 75,
                                color: 'rgba(69, 214, 91, 0.1)',
                                opacity: 0.1
                            },
                            {
                                offset: 100,
                                color: 'transparent',
                                opacity: 1
                            }
                        ],
                    ]
                }
            },
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: true,
                position: "top",
                offsetX: 0,
                offsetY: 8,
                markers: {
                    width: 5,
                    height: 5,
                    strokeWidth: 0,
                    strokeColor: '#fff',
                    fillColors: undefined,
                    radius: 12,
                    customHTML: undefined,
                    onClick: undefined,
                    offsetX: 0,
                    offsetY: 0
                },
            },
            stroke: {
                curve: 'smooth',
                width: [1, 1],
                lineCap: 'round',
            },
            grid: {
                borderColor: "#edeef1",
                strokeDashArray: 2,
            },
            yaxis: {
                axisBorder: {
                    show: true,
                    color: "rgba(119, 119, 142, 0.05)",
                    offsetX: 0,
                    offsetY: 0,
                },
                axisTicks: {
                    show: true,
                    borderType: "solid",
                    color: "rgba(119, 119, 142, 0.05)",
                    width: 6,
                    offsetX: 0,
                    offsetY: 0,
                },
                labels: {
                    formatter: function(y) {
                        return y.toFixed(0) + "";
                    },
                },
            },
            xaxis: {
                type: "month",
                categories: @json($months),
                axisBorder: {
                    show: false,
                    color: "rgba(119, 119, 142, 0.05)",
                    offsetX: 0,
                    offsetY: 0,
                },
                axisTicks: {
                    show: false,
                    borderType: "solid",
                    color: "rgba(119, 119, 142, 0.05)",
                    width: 6,
                    offsetX: 0,
                    offsetY: 0,
                },
                labels: {
                    rotate: -90,
                },
            },
        };
        var chart4 = new ApexCharts(document.querySelector("#earning-reports"), options);
        chart4.render();
    </script>

    <script>
        var dailyRevenue = @json($dailyRevenue);
        var dates = dailyRevenue.map(function(item) {
            return [new Date(item.date).getTime(), item.revenue];
        });

        var options = {
            series: [{
                name: 'Total Revenue',
                data: dates
            }],
            chart: {
                type: 'area',
                stacked: false,
                height: 320,
                zoom: {
                    type: 'x',
                    enabled: true,
                    autoScaleYaxis: true
                },
                toolbar: {
                    autoSelected: 'zoom'
                }
            },
            dataLabels: {
                enabled: false
            },
            markers: {
                size: 0,
            },
            title: {
                text: 'Daily Revenue Performance',
                align: 'left',
                style: {
                    fontSize: '13px',
                    fontWeight: 'bold',
                    color: '#8c9097'
                },
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    inverseColors: false,
                    opacityFrom: 0.5,
                    opacityTo: 0,
                    stops: [0, 90, 100]
                },
            },
            grid: {
                borderColor: '#f2f5f7',
            },
            colors: ["#b94eed"],
            yaxis: {
                labels: {
                    formatter: function(val) {
                        return val.toFixed(2);
                    },
                    show: true,
                    style: {
                        colors: "#8c9097",
                        fontSize: '11px',
                        fontWeight: 600,
                        cssClass: 'apexcharts-yaxis-label',
                    },
                },
                title: {
                    text: 'Revenue',
                    fontSize: '13px',
                    fontWeight: 'bold',
                    style: {
                        color: "#8c9097"
                    }
                },
            },
            xaxis: {
                type: 'datetime',
                labels: {
                    show: true,
                    style: {
                        colors: "#8c9097",
                        fontSize: '11px',
                        fontWeight: 600,
                        cssClass: 'apexcharts-xaxis-label',
                    },
                },
            },
            tooltip: {
                shared: false,
                y: {
                    formatter: function(val) {
                        return val.toFixed(2);
                    }
                }
            }
        };
        var chart = new ApexCharts(document.querySelector("#zoom-chart12"), options);
        chart.render();
    </script>

    <script>
        /* Earning Reports Chart */
        // var options = {
        //     series: [{
        //             name: "Orders",
        //             data: [15, 30, 22, 49, 32, 45, 30, 45, 65, 45, 25, 45],
        //         },
        //         {
        //             name: "Rides",
        //             data: [8, 40, 15, 32, 45, 30, 20, 25, 18, 23, 20, 40],
        //         }
        //     ],
        //     chart: {
        //         type: "area",
        //         height: 318,
        //         toolbar: {
        //             show: false
        //         }
        //     },
        //     colors: [
        //         "var(--primary-color)",
        //         "rgb(69, 214, 91)",
        //     ],
        //     fill: {
        //         type: 'gradient',
        //         gradient: {
        //             shadeIntensity: 1,
        //             opacityFrom: 0.4,
        //             opacityTo: 0.1,
        //             stops: [0, 90, 100],
        //             colorStops: [
        //                 [{
        //                         offset: 0,
        //                         color: "var(--primary01)",
        //                         opacity: 50
        //                     },
        //                     {
        //                         offset: 75,
        //                         color: "var(--primary01)",
        //                         opacity: 0.1
        //                     },
        //                     {
        //                         offset: 100,
        //                         color: 'transparent',
        //                         opacity: 0.1
        //                     }
        //                 ],
        //                 [{
        //                         offset: 0,
        //                         color: 'rgba(69, 214, 91, 0.1)',
        //                         opacity: 1
        //                     },
        //                     {
        //                         offset: 75,
        //                         color: 'rgba(69, 214, 91, 0.1)',
        //                         opacity: 0.1
        //                     },
        //                     {
        //                         offset: 100,
        //                         color: 'transparent',
        //                         opacity: 1
        //                     }
        //                 ],
        //             ]
        //         }
        //     },
        //     dataLabels: {
        //         enabled: false,
        //     },
        //     legend: {
        //         show: true,
        //         position: "top",
        //         offsetX: 0,
        //         offsetY: 8,
        //         markers: {
        //             width: 5,
        //             height: 5,
        //             strokeWidth: 0,
        //             strokeColor: '#fff',
        //             fillColors: undefined,
        //             radius: 12,
        //             customHTML: undefined,
        //             onClick: undefined,
        //             offsetX: 0,
        //             offsetY: 0
        //         },
        //     },
        //     stroke: {
        //         curve: 'smooth',
        //         width: [1, 1],
        //         lineCap: 'round',
        //     },
        //     grid: {
        //         borderColor: "#edeef1",
        //         strokeDashArray: 2,
        //     },
        //     yaxis: {
        //         axisBorder: {
        //             show: true,
        //             color: "rgba(119, 119, 142, 0.05)",
        //             offsetX: 0,
        //             offsetY: 0,
        //         },
        //         axisTicks: {
        //             show: true,
        //             borderType: "solid",
        //             color: "rgba(119, 119, 142, 0.05)",
        //             width: 6,
        //             offsetX: 0,
        //             offsetY: 0,
        //         },
        //         labels: {
        //             formatter: function(y) {
        //                 return y.toFixed(0) + "";
        //             },
        //         },
        //     },
        //     xaxis: {
        //         type: "month",
        //         categories: [
        //             "Jan",
        //             "Feb",
        //             "Mar",
        //             "Apr",
        //             "May",
        //             "Jun",
        //             "Jul",
        //             "Aug",
        //             "sep",
        //             "oct",
        //             "nov",
        //             "dec",
        //         ],
        //         axisBorder: {
        //             show: false,
        //             color: "rgba(119, 119, 142, 0.05)",
        //             offsetX: 0,
        //             offsetY: 0,
        //         },
        //         axisTicks: {
        //             show: false,
        //             borderType: "solid",
        //             color: "rgba(119, 119, 142, 0.05)",
        //             width: 6,
        //             offsetX: 0,
        //             offsetY: 0,
        //         },
        //         labels: {
        //             rotate: -90,
        //         },
        //     },
        // };
        // var chart4 = new ApexCharts(document.querySelector("#earning-reports"), options);
        // chart4.render();
        /* Earning Reports Chart */
        /* Vacancy stats chart */
        // var options = {
        //     series: [{
        //         name: 'Total Users',
        //         type: 'column',
        //         data: [23, 17, 22, 27, 13, 22, 37, 21, 44, 22, 45, 35]
        //     }, {
        //         name: 'Active Drivers',
        //         type: 'column',
        //         data: [17, 12, 18, 23, 10, 17, 25, 18, 35, 18, 37, 28]
        //     }, {
        //         name: 'Total Rides',
        //         type: 'line',
        //         data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43, 27]
        //     }, {
        //         name: 'Total Payments',
        //         type: 'line',
        //         data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43, 27]
        //     }, ],
        //     chart: {
        //         toolbar: {
        //             show: false
        //         },
        //         height: 325,
        //         type: 'line',
        //         stacked: false,
        //         fontFamily: 'Poppins, sans-serif',
        //     },
        //     grid: {
        //         borderColor: '#f5f4f4',
        //         strokeDashArray: 3
        //     },
        //     dataLabels: {
        //         enabled: false
        //     },
        //     title: {
        //         text: undefined,
        //     },
        //     xaxis: {
        //         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        //     },
        //     yaxis: [{
        //             show: true,
        //             axisTicks: {
        //                 show: true,
        //             },
        //             axisBorder: {
        //                 show: false,
        //                 color: '#4eb6d0'
        //             },
        //             labels: {
        //                 style: {
        //                     colors: '#4eb6d0',
        //                 }
        //             },
        //             title: {
        //                 text: undefined,
        //             },
        //             tooltip: {
        //                 enabled: true
        //             }
        //         },
        //         {
        //             seriesName: 'Projects',
        //             opposite: true,
        //             axisTicks: {
        //                 show: true,
        //             },
        //             axisBorder: {
        //                 show: false,
        //             },
        //             labels: {
        //                 style: {
        //                     colors: '#00E396',
        //                 }
        //             },
        //             title: {
        //                 text: undefined,
        //             },
        //         },
        //         {
        //             seriesName: 'Revenue',
        //             opposite: true,
        //             axisTicks: {
        //                 show: true,
        //             },
        //             axisBorder: {
        //                 show: false,
        //             },
        //             labels: {
        //                 show: false,
        //             },
        //             title: {
        //                 text: undefined,
        //             }
        //         },
        //     ],
        //     tooltip: {
        //         enabled: true,
        //     },
        //     legend: {
        //         show: true,
        //         position: "top",
        //         offsetX: 0,
        //         offsetY: 8,
        //         markers: {
        //             width: 5,
        //             height: 5,
        //             strokeWidth: 0,
        //             strokeColor: '#fff',
        //             fillColors: undefined,
        //             radius: 12,
        //             customHTML: undefined,
        //             onClick: undefined,
        //             offsetX: 0,
        //             offsetY: 0
        //         },
        //     },
        //     stroke: {
        //         show: true,
        //         width: [5, 5, 1],
        //         curve: 'smooth',
        //     },
        //     plotOptions: {
        //         bar: {
        //             columnWidth: "20%",
        //             borderRadius: 3
        //         }
        //     },
        //     colors: ["var(--primary-color)", "rgb(69, 214, 91)", "rgb(231, 76, 60)"]
        // };
        // var chart1 = new ApexCharts(document.querySelector("#projectAnalysis"), options);
        // chart1.render();
    </script>
    <script>
        var monthlyOrders = @json($monthlyGOrders);
        var monthlyRides = @json($monthlyGRides);
        var monthlyUsers = @json($monthlyGUsers);
        var monthlyDrivers = @json($monthlyGDrivers);
        var monthlyPayments = @json($monthlyGPayments);
        var months = @json($gMonths);

        var options = {
            series: [{
                name: 'Total Users',
                type: 'column',
                data: monthlyUsers
            }, {
                name: 'Active Drivers',
                type: 'column',
                data: monthlyDrivers
            }, {
                name: 'Total Rides',
                type: 'line',
                data: monthlyRides
            }, {
                name: 'Total Payments',
                type: 'line',
                data: monthlyPayments
            }],
            chart: {
                toolbar: {
                    show: false
                },
                height: 325,
                type: 'line',
                stacked: false,
                fontFamily: 'Poppins, sans-serif',
            },
            grid: {
                borderColor: '#f5f4f4',
                strokeDashArray: 3
            },
            dataLabels: {
                enabled: false
            },
            title: {
                text: undefined,
            },
            xaxis: {
                categories: months,
                labels: {
                    style: {
                        colors: "#8c9097",
                        fontSize: '11px',
                        fontWeight: 600,
                        cssClass: 'apexcharts-xaxis-label',
                    },
                },
            },
            yaxis: [{
                show: true,
                axisTicks: {
                    show: true,
                },
                axisBorder: {
                    show: false,
                    color: '#4eb6d0'
                },
                labels: {
                    style: {
                        colors: '#4eb6d0',
                    },
                    formatter: function(val) {
                        return val.toFixed(2);
                    }
                },
                title: {
                    text: undefined,
                },
                tooltip: {
                    enabled: true
                }
            }, {
                seriesName: 'Projects',
                opposite: true,
                axisTicks: {
                    show: true,
                },
                axisBorder: {
                    show: false,
                },
                labels: {
                    style: {
                        colors: '#00E396',
                    },
                    formatter: function(val) {
                        return val.toFixed(2);
                    }
                },
                title: {
                    text: undefined,
                },
            }, {
                seriesName: 'Revenue',
                opposite: true,
                axisTicks: {
                    show: true,
                },
                axisBorder: {
                    show: false,
                },
                labels: {
                    show: false,
                },
                title: {
                    text: undefined,
                }
            }],
            tooltip: {
                enabled: true,
                y: {
                    formatter: function(val) {
                        return val.toFixed(2);
                    }
                }
            },
            legend: {
                show: true,
                position: "top",
                offsetX: 0,
                offsetY: 8,
                markers: {
                    width: 5,
                    height: 5,
                    strokeWidth: 0,
                    strokeColor: '#fff',
                    fillColors: undefined,
                    radius: 12,
                    customHTML: undefined,
                    onClick: undefined,
                    offsetX: 0,
                    offsetY: 0
                },
            },
            stroke: {
                show: true,
                width: [5, 5, 1],
                curve: 'smooth',
            },
            plotOptions: {
                bar: {
                    columnWidth: "20%",
                    borderRadius: 3
                }
            },
            colors: ["var(--primary-color)", "rgb(69, 214, 91)", "rgb(231, 76, 60)"]
        };
        var chart1 = new ApexCharts(document.querySelector("#projectAnalysis"), options);
        chart1.render();
    </script>
    <script>
        // Initialize Swiper
        var swiper = new Swiper('.swiper-basic', {
            slidesPerView: 4, // Number of columns in a row
            spaceBetween: 10, // Space between slides (adjust as needed)
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            breakpoints: {
                320: { // For small screens
                    slidesPerView: 1,
                    spaceBetween: 10,
                },
                576: { // For small to medium screens
                    slidesPerView: 2,
                    spaceBetween: 10,
                },
                768: { // For tablets
                    slidesPerView: 3,
                    spaceBetween: 10,
                },
                1024: { // For desktops
                    slidesPerView: 4,
                    spaceBetween: 10,
                }
            }
        });
    </script>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
@endsection