@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper container-xxl p-0">
            @if(session()->get('title') == "success")
                <div class="alert alert-success" role="alert">
                    <h4 class="alert-heading">Success</h4>
                    <div class="alert-body">
                        {{ session()->get('message') }}
                    </div>
                </div>
            @elseif (session()->get('title') == "error")
                <div class="alert alert-danger" role="alert">
                    <h4 class="alert-heading">Error</h4>
                    <div class="alert-body">
                        {{ session()->get('message') }}
                    </div>
                </div>
            @elseif($errors->any())
                <div class="alert alert-danger" role="alert">
                    <h4 class="alert-heading">Error</h4>
                    @foreach ($errors->all() as $error)
                        <div class="alert-danger">{{ $error }}</div>
                    @endforeach
                </div>
            @else
            @endif
            @csrf
            <!-- Dashboard Ecommerce Starts -->
            <section id="dashboard-ecommerce">
                <div class="row match-height">
                    <!-- Medal Card -->
                    <div class="col-xl-4 col-md-6 col-12">
                        <div class="card card-congratulation-medal">
                            <div class="card-body">
                                <h4>{{__('messages.totalSalesCurrentDay')}}</h4>
                                <h3 class="mb-75 mt-2 pt-50">
                                    <a href="javascript:void(0);">{{$countOrders}}</a>
                                </h3>
                                <button type="button" class="btn btn-primary ml-20"
                                        onclick="location.href='{{route('order.list')}}'">{{__('messages.viewOrders')}}</button>
                            </div>
                        </div>
                    </div>
                    <!--/ Medal Card -->

                    <!-- Sales Today Card -->
                    <div class="col-xl-8 col-md-6 col-12">
                        <div class="card card-statistics">
                            <div class="card-header">
                                <h4 class="card-title">{{__('messages.ordersByTypes')}}</h4>
                                <div class="d-flex align-items-center">
                                    {{--                                <p class="card-text font-small-2 mr-25 mb-0">Updated 1 month ago</p>--}}
                                </div>
                            </div>
                            <div class="card-body statistics-body">
                                <div class="row">
                                    <div class="col-xl-3 col-sm-6 col-12 mb-2 mb-xl-0">
                                        <div class="media">
                                            <div class="avatar bg-light-primary mr-2">
                                                <div class="avatar-content">
                                                    <i data-feather='users'></i>
                                                </div>
                                            </div>
                                            <div class="media-body my-auto">
                                                <h4 class="font-weight-bolder mb-0">{{$countDineInOrders}}</h4>
                                                <p class="card-text font-small-3 mb-0">{{__('messages.dineIn')}}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-sm-6 col-12 mb-2 mb-xl-0">
                                        <div class="media">
                                            <div class="avatar bg-light-info mr-2">
                                                <div class="avatar-content">
                                                    <i data-feather="user" class="avatar-icon"></i>
                                                </div>
                                            </div>
                                            <div class="media-body my-auto">
                                                <h4 class="font-weight-bolder mb-0">{{ $countPickUpOrders }}</h4>
                                                <p class="card-text font-small-3 mb-0">{{__('messages.pickUp')}}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-sm-6 col-12 mb-2 mb-sm-0">
                                        <div class="media">
                                            <div class="avatar bg-light-danger mr-2">
                                                <div class="avatar-content">
                                                    <i data-feather='truck'></i>
                                                </div>
                                            </div>
                                            <div class="media-body my-auto">
                                                <h4 class="font-weight-bolder mb-0">{{ $countDeliveryOrders }}</h4>
                                                <p class="card-text font-small-3 mb-0">{{__('messages.deliveryOrders')}}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-sm-6 col-12">
                                        <div class="media">
                                            <div class="avatar bg-light-success mr-2">
                                                <div class="avatar-content">
                                                    <i data-feather='send'></i>
                                                </div>
                                            </div>
                                            <div class="media-body my-auto">
                                                <h4 class="font-weight-bolder mb-0">{{ $countDriveThruOrders }}</h4>
                                                <p class="card-text font-small-3 mb-0">{{__('messages.driveThru')}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/ Sales Card Today End -->
                </div>
                <div class="row match-height" id="group_button">
                    <div class="content-header-right text-md-right col-md-9 col-12 d-md-block d-none form-group">
                        <div class="form-group breadcrumb-right">
                            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                <label class="btn btn-outline-primary waves-effect">
                                    <input type="radio" name="day" class="day" id="day" checked=""> Day
                                </label>
{{--                                <label class="btn btn-outline-primary waves-effect">--}}
{{--                                    <input type="radio" name="week" class="week" id="week"> Week--}}
{{--                                </label>--}}
{{--                                <label class="btn btn-outline-primary waves-effect active">--}}
{{--                                    <input type="radio" name="month" class="month" id="month"> Month--}}
{{--                                </label>--}}
                            </div>
                        </div>
                    </div>
                    <div class="content-header-right text-md-right col-md-3 col-12 d-md-block d-none form-group">
                        <div class="form-group breadcrumb-right">
                            <input class="form-control my-start-date" id="start_date" type="text"  name="start_date" placeholder="{{__('messages.StartDate')}}"    tabindex="3" value="{{ old('start_date') ?? $start_date }}" required/>
                        </div>
                    </div>
                </div>
                <div class="row match-height">
                    <div class="col-12 col-12">
                        <div class="row match-height">
                            <!-- Line Chart - Orders -->
                            <div class="col-3 col-md-3 col-6">
                                <div class="card card-tiny-line-stats">
                                    <div class="card-body pb-50">
                                        <h6>Orders</h6>
                                        <h2 class="font-weight-bolder mb-1 total_orders"></h2>
                                        <div id="order-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <!--/ Line Chart - Orders -->
                            <!-- Line Chart - Net Sales -->
                            <div class="col-3 col-md-3 col-6">
                                <div class="card card-tiny-line-stats">
                                    <div class="card-body pb-50">
                                        <h6>Net Sales
                                            ({{ \Illuminate\Support\Facades\Auth::user()->business->currency->name }}
                                            )</h6>
                                        <h2 class="font-weight-bolder mb-1 total_net_sale"></h2>
                                        <div id="net-sale-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <!--/ Line Chart - Net Sales -->
                            <!-- Line Chart - Net Sales -->
                            <div class="col-3 col-md-3 col-6">
                                <div class="card card-tiny-line-stats">
                                    <div class="card-body pb-50">
                                        <h6>Net Payments
                                            ({{ \Illuminate\Support\Facades\Auth::user()->business->currency->name }}
                                            )</h6>
                                        <h2 class="font-weight-bolder mb-1 total_net_payment"></h2>
                                        <div id="net-payment-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <!--/ Line Chart - Net Sales -->
                            <!-- Line Chart - Net Sales -->
                            <div class="col-3 col-md-3 col-6">
                                <div class="card card-tiny-line-stats">
                                    <div class="card-body pb-50">
                                        <h6>Return Amount
                                            ({{ \Illuminate\Support\Facades\Auth::user()->business->currency->name }}
                                            )</h6>
                                        <h2 class="font-weight-bolder mb-1 total_return_payment"></h2>
                                        <div id="return-payment-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <!--/ Line Chart - Net Sales -->
                        </div>
                        <div class="row match-height">
                            <!-- Line Chart - Orders -->
                            <div class="col-3 col-md-3 col-6">
                                <div class="card card-tiny-line-stats">
                                    <div class="card-body pb-50">
                                        <h6>Discount Amount ({{ \Illuminate\Support\Facades\Auth::user()->business->currency->name }})</h6>
                                        <h2 class="font-weight-bolder mb-1 total_discount_amount"></h2>
                                        <div id="discount-amount-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <!--/ Line Chart - Orders -->
                            <!-- Line Chart - Net Sales -->
                            <div class="col-3 col-md-3 col-6">
                                <div class="card card-tiny-line-stats">
                                    <div class="card-body pb-50">
                                        <h6>Delivery Orders</h6>
                                        <h2 class="font-weight-bolder mb-1 total_delivery_order"></h2>
                                        <div id="delivery-order-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <!--/ Line Chart - Net Sales -->
                            <!-- Line Chart - Net Sales -->
                            <div class="col-3 col-md-3 col-6">
                                <div class="card card-tiny-line-stats">
                                    <div class="card-body pb-50">
                                        <h6>Dine-in Orders</h6>
                                        <h2 class="font-weight-bolder mb-1 total_dine_in_order"></h2>
                                        <div id="dine-in-order-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <!--/ Line Chart - Net Sales -->
                            <!-- Line Chart - Net Sales -->
                            <div class="col-3 col-md-3 col-6">
                                <div class="card card-tiny-line-stats">
                                    <div class="card-body pb-50">
                                        <h6>Pickup Orders</h6>
                                        <h2 class="font-weight-bolder mb-1 total_pickup_order"></h2>
                                        <div id="pickup-order-chart"></div>
                                    </div>
                                </div>
                            </div>
                            <!--/ Line Chart - Net Sales -->
                        </div>

                    </div>
                    <!-- Line Chart Starts -->
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex flex-sm-row flex-column justify-content-md-between align-items-start justify-content-start">
                                <div>
                                    <h4 class="card-title mb-25">Hourly Sales</h4>
                                    <span class="card-subtitle text-muted"></span>
                                </div>
                                <div class="d-flex align-items-center flex-wrap mt-sm-0 mt-1">
                                    <h5 class="font-weight-bolder mb-0 mr-1 total_hourly_sale"></h5>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="hourly-sale-chart"></div>
                            </div>
                        </div>
                    </div>
                    <!-- Line Chart Ends -->
                </div>
            </section>
            <!-- Dashboard Ecommerce ends -->

        </div>
    </div>
    <!-- END: Content-->
@endsection

@push('page-vendor-scripts')
    <script src="{{ asset('app-assets/vendors/js/charts/apexcharts.min.js') }}"></script>
@endpush

@push('page-scripts')
    {{--<script src="{{ asset('app-assets/js/scripts/pages/dashboard-ecommerce.js') }}"></script>--}}
    {{--<script src="{{ asset('app-assets/js/scripts/components/components-dropdowns.js') }}"></script>--}}
    <script src="{{ asset('app-assets/js/scripts/charts/chart-apex.js') }}"></script>
@endpush

@push('my_scripts')
    <script>
        var dateObject;
        // $(function () {
            $('.my-start-date').pickadate({
                onStart: function() {
                    console.log('Hello there :)')
                },
                onRender: function() {
                    console.log('Whoa.. rendered anew')
                },
                onOpen: function() {
                    console.log('Opened up')
                },
                onClose: function() {
                    console.log('Closed now')
                },
                onStop: function() {
                    console.log('See ya.')
                },
                onSet: function(context) {

                    dateObject = $('.my-start-date').val();
                    ajaxFunction(dateObject);
                    console.log(dateObject);
                    console.log('Just set stuff:', new Date(context.select))
                },
                formatSubmit: 'yyyy/01/01',
                closeOnSelect: true,
                closeOnClear: true,
            });
        // });
        var $barColor = '#f3f3f3';
        var $trackBgColor = '#EBEBEB';
        var $textMutedColor = '#b9b9c3';
        var $budgetStrokeColor2 = '#dcdae3';
        var $goalStrokeColor2 = '#51e5a8';
        var $strokeColor = '#ebe9f1';
        var $textHeadingColor = '#5e5873';
        var $earningsStrokeColor2 = '#28c76f66';
        var $earningsStrokeColor3 = '#28c76f33';

        var isRtl = $('html').attr('data-textdirection') === 'rtl'
        // Order count
        var $statisticsProfitChart = document.querySelector('#order-chart');
        var statisticsProfitChartOptions;
        var statisticsProfitChart;
        // Net sale
        var $statisticsNetSaleChart = document.querySelector('#net-sale-chart');
        var statisticsNetSaleChartOptions;
        var statisticsNetSaleChart;

        // Net Payment
        var $statisticsNetPaymentChart = document.querySelector('#net-payment-chart');
        var statisticsNetPaymentChartOptions;
        var statisticsNetPaymentChart;

        // Return Payment
        var $statisticsReturnPaymentChart = document.querySelector('#return-payment-chart');
        var statisticsReturnPaymentChartOptions;
        var statisticsReturnPaymentChart;

        // Discount Amount
        var $statisticsDiscountAmountChart = document.querySelector('#discount-amount-chart');
        var statisticsDiscountAmountChartOptions;
        var statisticsDiscountAmountChart;

        // Delivery Orders
        var $statisticsDeliveryOrdersChart = document.querySelector('#delivery-order-chart');
        var statisticsDeliveryOrdersChartOptions;
        var statisticsDeliveryOrdersChart;

        // Dine-in Orders
        var $statisticsDineInOrdersChart = document.querySelector('#dine-in-order-chart');
        var statisticsDineInOrdersChartOptions;
        var statisticsDineInOrdersChart;

        // Pickup Orders
        var $statisticsPickupOrdersChart = document.querySelector('#pickup-order-chart');
        var statisticsPickupOrdersChartOptions;
        var statisticsPickupOrdersChart;


        // Hourly Order
        var lineChartEl = document.querySelector('#hourly-sale-chart'),

        dateObject = $('.my-start-date').val();
        ajaxFunction(dateObject);
        console.log(dateObject);
        function ajaxFunction(dateObject){
            /*  Order Chart Count starts    */
            $.ajax({
                url: "{{ route('dashboard.get_orders_chart_data') }}",
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                },
                data: {dateObject:dateObject},
                type: 'POST',
                dataType: 'json',
                async: true,
                cache: false,
                // beforeSend: function() { openLoadingDialog('#container'); },
                success: function (data) {
                    console.log('currentDayOrder',data);
                    let dates = [];
                    let orders = [];
                    let total = [];
                    data.data.forEach((el) => {
                        let pf = new Date(el.business_date);
                        const options1 = {day: 'numeric'};
                        const options2 = {month: 'short'};
                        dates.push(pf.toLocaleDateString('default', options1) + " " + pf.toLocaleDateString('default', options2));
                        orders.push(parseInt(el.orders));
                        total.push(el.total);
                    });
                    console.log(orders);
                    const total_orders = data.current_date_total_orders;
                    $('.total_orders').text(total_orders);
                    statisticsProfitChartOptions = {
                        chart: {
                            events: {
                                load: function () {
                                    var label = this.renderer.label('Chart loaded', 100, 120)
                                        .attr({
                                            fill: statisticsProfitChartOptions,
                                            padding: 10,
                                            r: 5,
                                            zIndex: 8
                                        })
                                        .css({
                                            color: '#FFFFFF'
                                        })
                                        .add();

                                    setTimeout(function () {
                                        label.fadeOut();
                                    }, 1000);
                                }
                            },
                            height: '275',
                            width: "100%",
                            type: 'area',
                            stacked: false,
                            toolbar: {
                                show: false
                            },
                            zoom: {
                                enabled: false
                            },
                        },
                        dataLabels: {
                            enabled: false
                        },
                        grid: {
                            borderColor: $trackBgColor,
                            strokeDashArray: 8,
                            xaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            yaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            padding: {
                                top: -15,
                                bottom: -5
                            }
                        },
                        stroke: {
                            curve: 'smooth',
                            width: 4
                        },
                        dropShadow: {
                            enabled: true,
                            top: 0,
                            left: 0,
                            blur: 3,
                            opacity: 1
                        },
                        colors: [window.colors.solid.primary],
                        series: [
                            {
                                name: '',
                                data: orders,
                            }
                        ],
                        markers: {
                            size: 5,
                            colors: window.colors.solid.primary,
                            strokeColors: window.colors.solid.primary,
                            strokeWidth: 3,
                            strokeOpacity: 1,
                            strokeDashArray: 0,
                            fillOpacity: 1,
                            discrete: [
                                {
                                    seriesIndex: 0,
                                    dataPointIndex: 6,
                                    fillColor: '#ffffff',
                                    strokeColor: window.colors.solid.primary,
                                    size: 6
                                }
                            ],
                            shape: 'circle',
                            radius: 2,
                            hover: {
                                size: 3
                            }
                        },
                        xaxis: {
                            categories: dates,
                            labels: {
                                show: true,
                                rotate: -75,
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Helvetica, Arial, sans-serif',
                                    fontWeight: 400,
                                    cssClass: 'apexcharts-xaxis-label',
                                }
                            },
                            axisBorder: {
                                show: true,
                                color: '#78909C',
                                height: 1,
                                width: '100%',
                                offsetX: 0,
                                offsetY: 0
                            },
                            axisTicks: {
                                show: true,
                                borderType: 'solid',
                                color: '#78909C',
                                height: 6,
                                offsetX: 0,
                                offsetY: 0
                            },
                        },
                        yaxis: {
                            show: true,
                            tickAmount: 10,
                            labels: {
                                show: false,
                            },
                            axisBorder: {
                                show: false,
                            },
                            axisTicks: {
                                show: false,
                            },
                        },
                        tooltip: {
                            style: {
                                colors: [],
                                fontSize: '20px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                                fontWeight: 250,
                                borderType: 'solid',
                                cssClass: 'apexcharts-xaxis-label',
                            },
                            x: {
                                show: true
                            },
                            y: {
                                formatter: undefined,
                                title: {
                                    formatter: (seriesName) => seriesName,
                                },
                            },
                            z: {
                                formatter: undefined,
                                title: 'Size: '
                            },

                        }
                    };
                    statisticsProfitChart = new ApexCharts($statisticsProfitChart, statisticsProfitChartOptions);
                    statisticsProfitChart.render();
                },
                error: function (data) {
                    console.log(data);
                }
            });
            /*  End Order Chart Count       */

            /*  Net Sales Chart  */
            $.ajax({
                url: "{{ route('dashboard.get_net_sales_chart_data') }}",
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                },
                data: {dateObject:dateObject},
                type: 'POST',
                dataType: 'json',
                async: true,
                cache: false,
                success: function (data) {
                    // console.log('net_sales_chart',data);
                    let subTotal = [];
                    let dates = [];
                    data.data.forEach((el) => {
                        subTotal.push(el.sub_total_sum)
                        let pf = new Date(el.business_date);
                        const options1 = {day: 'numeric'};
                        const options2 = {month: 'short'};
                        dates.push(pf.toLocaleDateString('default', options1) + " " + pf.toLocaleDateString('default', options2));
                    });
                    console.log(dates);
                    const total_sales = parseFloat(data.currentDayNetSales).toFixed(2);
                    $('.total_net_sale').text(total_sales);


                    statisticsNetSaleChartOptions = {
                        chart: {
                            height: '275',
                            width: "100%",
                            type: 'area',
                            stacked: false,
                            toolbar: {
                                show: false
                            },
                            zoom: {
                                enabled: false
                            },
                        },
                        dataLabels: {
                            enabled: false
                        },
                        grid: {
                            borderColor: $trackBgColor,
                            strokeDashArray: 8,
                            position: 'back',
                            xaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            yaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            padding: {
                                top: -10,
                                bottom: -15
                            }
                        },
                        stroke: {
                            curve: 'smooth',
                            width: 4
                        },
                        dropShadow: {
                            enabled: true,
                            top: 0,
                            left: 0,
                            blur: 3,
                            opacity: 1
                        },
                        colors: [window.colors.solid.primary],
                        series: [
                            {
                                name: '',
                                data: subTotal,
                            }
                        ],
                        legend: {show: false},
                        markers: {
                            size: 5,
                            colors: window.colors.solid.primary,
                            strokeColors: window.colors.solid.primary,
                            strokeWidth: 3,
                            strokeOpacity: 1,
                            strokeDashArray: 0,
                            fillOpacity: 1,
                            discrete: [
                                {
                                    seriesIndex: 0,
                                    dataPointIndex: 6,
                                    fillColor: '#ffffff',
                                    strokeColor: window.colors.solid.primary,
                                    size: 6
                                }
                            ],
                            shape: 'circle',
                            radius: 2,
                            hover: {
                                size: 3
                            }
                        },
                        xaxis: {
                            categories: dates,
                            labels: {
                                show: true,
                                rotate: -75,
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Helvetica, Arial, sans-serif',
                                    fontWeight: 400,
                                    cssClass: 'apexcharts-xaxis-label',
                                }
                            },
                            axisBorder: {
                                show: true,
                                color: '#78909C',
                                height: 1,
                                width: '100%',
                                offsetX: 0,
                                offsetY: 0
                            },
                            axisTicks: {
                                show: true,
                                borderType: 'solid',
                                color: '#78909C',
                                height: 6,
                                offsetX: 0,
                                offsetY: 0
                            },
                        },
                        yaxis: {
                            show: true,
                            tickAmount: 10,
                            labels: {
                                show: false,
                            },
                            axisBorder: {
                                show: false,
                            },
                            axisTicks: {
                                show: false,
                            },
                        },
                        tooltip: {
                            style: {
                                colors: [],
                                fontSize: '20px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                                fontWeight: 250,
                                cssClass: 'apexcharts-xaxis-label',
                            },
                            x: {
                                show: true
                            },
                            y: {
                                formatter: undefined,
                                title: {
                                    formatter: (seriesName) => seriesName,
                                },
                            },
                            z: {
                                formatter: undefined,
                                title: 'Size: '
                            },

                        }
                    };
                    statisticsNetSaleChart = new ApexCharts($statisticsNetSaleChart, statisticsNetSaleChartOptions);
                    statisticsNetSaleChart.render();
                },
                error: function (data) {
                    console.log(data);
                }
            });
            /*  End Net Sales Chart */

            /*  Net Payments Chart  */
            $.ajax({
                url: "{{ route('dashboard.get_net_payment_chart') }}",
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                },
                data: {dateObject:dateObject},
                type: 'POST',
                dataType: 'json',
                async: true,
                cache: false,
                success: function (data) {
                    let total = [];
                    let dates = [];
                    data.data.forEach((el) => {
                        let lastTotal = 0
                        total.push(el.total);
                        lastTotal = el.total;
                        let pf = new Date(el.business_date);
                        const options1 = {day: 'numeric'};
                        const options2 = {month: 'short'};
                        dates.push(pf.toLocaleDateString('default', options1) + " " + pf.toLocaleDateString('default', options2));
                        $('.total_net_payment').text(lastTotal);
                    });


                    statisticsNetPaymentChartOptions = {
                        chart: {
                            height: '275',
                            width: "100%",
                            type: 'area',
                            stacked: false,
                            toolbar: {
                                show: false
                            },
                            zoom: {
                                enabled: false
                            },
                        },
                        dataLabels: {
                            enabled: false
                        },
                        grid: {
                            borderColor: $trackBgColor,
                            strokeDashArray: 8,
                            position: 'back',
                            xaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            yaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            padding: {
                                top: -10,
                                bottom: -15
                            }
                        },
                        stroke: {
                            curve: 'smooth',
                            width: 4
                        },
                        dropShadow: {
                            enabled: true,
                            top: 0,
                            left: 0,
                            blur: 3,
                            opacity: 1
                        },
                        colors: [window.colors.solid.primary],
                        series: [
                            {
                                name: '',
                                data: total,
                            }
                        ],
                        legend: {show: false},
                        markers: {
                            size: 5,
                            colors: window.colors.solid.primary,
                            strokeColors: window.colors.solid.primary,
                            strokeWidth: 3,
                            strokeOpacity: 1,
                            strokeDashArray: 0,
                            fillOpacity: 1,
                            discrete: [
                                {
                                    seriesIndex: 0,
                                    dataPointIndex: 6,
                                    fillColor: '#ffffff',
                                    strokeColor: window.colors.solid.primary,
                                    size: 6
                                }
                            ],
                            shape: 'circle',
                            radius: 2,
                            hover: {
                                size: 3
                            }
                        },
                        xaxis: {
                            categories: dates,
                            labels: {
                                show: true,
                                rotate: -75,
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Helvetica, Arial, sans-serif',
                                    fontWeight: 400,
                                    cssClass: 'apexcharts-xaxis-label',
                                }
                            },
                            axisBorder: {
                                show: true,
                                color: '#78909C',
                                height: 1,
                                width: '100%',
                                offsetX: 0,
                                offsetY: 0
                            },
                            axisTicks: {
                                show: true,
                                borderType: 'solid',
                                color: '#78909C',
                                height: 6,
                                offsetX: 0,
                                offsetY: 0
                            },
                        },
                        yaxis: {
                            show: true,
                            tickAmount: 10,
                            labels: {
                                show: false,
                            },
                            axisBorder: {
                                show: false,
                            },
                            axisTicks: {
                                show: false,
                            },
                        },
                        tooltip: {
                            style: {
                                colors: [],
                                fontSize: '20px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                                fontWeight: 250,
                                cssClass: 'apexcharts-xaxis-label',
                            },
                            x: {
                                show: true
                            },
                            y: {
                                formatter: undefined,
                                title: {
                                    formatter: (seriesName) => seriesName,
                                },
                            },
                            z: {
                                formatter: undefined,
                                title: 'Size: '
                            },

                        }
                    };
                    statisticsNetPaymentChart = new ApexCharts($statisticsNetPaymentChart, statisticsNetPaymentChartOptions);
                    statisticsNetPaymentChart.render();
                },
                error: function (data) {
                    console.log(data);
                }
            });
            /*  End Net Payments Chart */

            /*  Return Payment Chart  */
            $.ajax({
                url: "{{ route('dashboard.get_return_payment_chart') }}",
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                },
                data: {dateObject:dateObject},
                type: 'POST',
                dataType: 'json',
                async: true,
                cache: false,
                success: function (data) {
                    let total = [];
                    let dates = [];
                    data.data.forEach((el) => {
                        let lastTotal = 0
                        total.push(el.total);
                        lastTotal = el.total;
                        let pf = new Date(el.business_date);
                        const options1 = {day: 'numeric'};
                        const options2 = {month: 'short'};
                        dates.push(pf.toLocaleDateString('default', options1) + " " + pf.toLocaleDateString('default', options2));
                        $('.total_return_payment').text(lastTotal);
                    });


                    statisticsReturnPaymentChartOptions = {
                        chart: {
                            height: '275',
                            width: "100%",
                            type: 'area',
                            stacked: false,
                            toolbar: {
                                show: false
                            },
                            zoom: {
                                enabled: false
                            },
                        },
                        dataLabels: {
                            enabled: false
                        },
                        grid: {
                            borderColor: $trackBgColor,
                            strokeDashArray: 8,
                            position: 'back',
                            xaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            yaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            padding: {
                                top: -10,
                                bottom: -15
                            }
                        },
                        stroke: {
                            curve: 'smooth',
                            width: 4
                        },
                        dropShadow: {
                            enabled: true,
                            top: 0,
                            left: 0,
                            blur: 3,
                            opacity: 1
                        },
                        colors: [window.colors.solid.primary],
                        series: [
                            {
                                name: '',
                                data: total,
                            }
                        ],
                        legend: {show: false},
                        markers: {
                            size: 5,
                            colors: window.colors.solid.primary,
                            strokeColors: window.colors.solid.primary,
                            strokeWidth: 3,
                            strokeOpacity: 1,
                            strokeDashArray: 0,
                            fillOpacity: 1,
                            discrete: [
                                {
                                    seriesIndex: 0,
                                    dataPointIndex: 6,
                                    fillColor: '#ffffff',
                                    strokeColor: window.colors.solid.primary,
                                    size: 6
                                }
                            ],
                            shape: 'circle',
                            radius: 2,
                            hover: {
                                size: 3
                            }
                        },
                        xaxis: {
                            categories: dates,
                            labels: {
                                show: true,
                                rotate: -75,
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Helvetica, Arial, sans-serif',
                                    fontWeight: 400,
                                    cssClass: 'apexcharts-xaxis-label',
                                }
                            },
                            axisBorder: {
                                show: true,
                                color: '#78909C',
                                height: 1,
                                width: '100%',
                                offsetX: 0,
                                offsetY: 0
                            },
                            axisTicks: {
                                show: true,
                                borderType: 'solid',
                                color: '#78909C',
                                height: 6,
                                offsetX: 0,
                                offsetY: 0
                            },
                        },
                        yaxis: {
                            show: true,
                            tickAmount: 10,
                            labels: {
                                show: false,
                            },
                            axisBorder: {
                                show: false,
                            },
                            axisTicks: {
                                show: false,
                            },
                        },
                        tooltip: {
                            style: {
                                colors: [],
                                fontSize: '20px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                                fontWeight: 250,
                                cssClass: 'apexcharts-xaxis-label',
                            },
                            x: {
                                show: true
                            },
                            y: {
                                formatter: undefined,
                                title: {
                                    formatter: (seriesName) => seriesName,
                                },
                            },
                            z: {
                                formatter: undefined,
                                title: 'Size: '
                            },

                        }
                    };
                    statisticsReturnPaymentChart = new ApexCharts($statisticsReturnPaymentChart, statisticsReturnPaymentChartOptions);
                    statisticsReturnPaymentChart.render();
                },
                error: function (data) {
                    console.log(data);
                }
            });
            /*  End Return Payment Chart  */


            /*  Discount Amount Chart  */
            $.ajax({
                url: "{{ route('dashboard.get_discount_amount_chart') }}",
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                },
                data: {dateObject:dateObject},
                type: 'POST',
                dataType: 'json',
                async: true,
                cache: false,
                success: function (data) {
                    let total = [];
                    let dates = [];
                    data.data.forEach((el) => {
                        let lastTotal = 0
                        total.push(el.total);
                        lastTotal = el.total;
                        let pf = new Date(el.business_date);
                        const options1 = {day: 'numeric'};
                        const options2 = {month: 'short'};
                        dates.push(pf.toLocaleDateString('default', options1) + " " + pf.toLocaleDateString('default', options2));
                        $('.total_discount_amount').text(lastTotal);
                    });


                    statisticsDiscountAmountChartOptions = {
                        chart: {
                            height: '275',
                            width: "100%",
                            type: 'area',
                            stacked: false,
                            toolbar: {
                                show: false
                            },
                            zoom: {
                                enabled: false
                            },
                        },
                        dataLabels: {
                            enabled: false
                        },
                        grid: {
                            borderColor: $trackBgColor,
                            strokeDashArray: 8,
                            position: 'back',
                            xaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            yaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            padding: {
                                top: -10,
                                bottom: -15
                            }
                        },
                        stroke: {
                            curve: 'smooth',
                            width: 4
                        },
                        dropShadow: {
                            enabled: true,
                            top: 0,
                            left: 0,
                            blur: 3,
                            opacity: 1
                        },
                        colors: [window.colors.solid.primary],
                        series: [
                            {
                                name: '',
                                data: total,
                            }
                        ],
                        legend: {show: false},
                        markers: {
                            size: 5,
                            colors: window.colors.solid.primary,
                            strokeColors: window.colors.solid.primary,
                            strokeWidth: 3,
                            strokeOpacity: 1,
                            strokeDashArray: 0,
                            fillOpacity: 1,
                            discrete: [
                                {
                                    seriesIndex: 0,
                                    dataPointIndex: 6,
                                    fillColor: '#ffffff',
                                    strokeColor: window.colors.solid.primary,
                                    size: 6
                                }
                            ],
                            shape: 'circle',
                            radius: 2,
                            hover: {
                                size: 3
                            }
                        },
                        xaxis: {
                            categories: dates,
                            labels: {
                                show: true,
                                rotate: -75,
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Helvetica, Arial, sans-serif',
                                    fontWeight: 400,
                                    cssClass: 'apexcharts-xaxis-label',
                                }
                            },
                            axisBorder: {
                                show: true,
                                color: '#78909C',
                                height: 1,
                                width: '100%',
                                offsetX: 0,
                                offsetY: 0
                            },
                            axisTicks: {
                                show: true,
                                borderType: 'solid',
                                color: '#78909C',
                                height: 6,
                                offsetX: 0,
                                offsetY: 0
                            },
                        },
                        yaxis: {
                            show: true,
                            tickAmount: 10,
                            labels: {
                                show: false,
                            },
                            axisBorder: {
                                show: false,
                            },
                            axisTicks: {
                                show: false,
                            },
                        },
                        tooltip: {
                            style: {
                                colors: [],
                                fontSize: '20px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                                fontWeight: 250,
                                cssClass: 'apexcharts-xaxis-label',
                            },
                            x: {
                                show: true
                            },
                            y: {
                                formatter: undefined,
                                title: {
                                    formatter: (seriesName) => seriesName,
                                },
                            },
                            z: {
                                formatter: undefined,
                                title: 'Size: '
                            },

                        }
                    };
                    statisticsDiscountAmountChart = new ApexCharts($statisticsDiscountAmountChart, statisticsDiscountAmountChartOptions);
                    statisticsDiscountAmountChart.render();
                },
                error: function (data) {
                    console.log(data);
                }
            });
            /*  End Discount Amount Chart  */

            /*  Delivery Orders Chart  */
            $.ajax({
                url: "{{ route('dashboard.get_delivery_order_Chart') }}",
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                },
                data: {dateObject:dateObject},
                type: 'POST',
                dataType: 'json',
                async: true,
                cache: false,
                success: function (data) {
                    let total = [];
                    let dates = [];
                    data.data.forEach((el) => {
                        let lastTotal = 0
                        total.push(el.total);
                        lastTotal = el.total;
                        let pf = new Date(el.business_date);
                        const options1 = {day: 'numeric'};
                        const options2 = {month: 'short'};
                        dates.push(pf.toLocaleDateString('default', options1) + " " + pf.toLocaleDateString('default', options2));
                        $('.total_delivery_order').text(lastTotal);
                    });


                    statisticsDeliveryOrdersChartOptions = {
                        chart: {
                            height: '275',
                            width: "100%",
                            type: 'area',
                            stacked: false,
                            toolbar: {
                                show: false
                            },
                            zoom: {
                                enabled: false
                            },
                        },
                        dataLabels: {
                            enabled: false
                        },
                        grid: {
                            borderColor: $trackBgColor,
                            strokeDashArray: 8,
                            position: 'back',
                            xaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            yaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            padding: {
                                top: -10,
                                bottom: -15
                            }
                        },
                        stroke: {
                            curve: 'smooth',
                            width: 4
                        },
                        dropShadow: {
                            enabled: true,
                            top: 0,
                            left: 0,
                            blur: 3,
                            opacity: 1
                        },
                        colors: [window.colors.solid.primary],
                        series: [
                            {
                                name: '',
                                data: total,
                            }
                        ],
                        legend: {show: false},
                        markers: {
                            size: 5,
                            colors: window.colors.solid.primary,
                            strokeColors: window.colors.solid.primary,
                            strokeWidth: 3,
                            strokeOpacity: 1,
                            strokeDashArray: 0,
                            fillOpacity: 1,
                            discrete: [
                                {
                                    seriesIndex: 0,
                                    dataPointIndex: 6,
                                    fillColor: '#ffffff',
                                    strokeColor: window.colors.solid.primary,
                                    size: 6
                                }
                            ],
                            shape: 'circle',
                            radius: 2,
                            hover: {
                                size: 3
                            }
                        },
                        xaxis: {
                            categories: dates,
                            labels: {
                                show: true,
                                rotate: -75,
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Helvetica, Arial, sans-serif',
                                    fontWeight: 400,
                                    cssClass: 'apexcharts-xaxis-label',
                                }
                            },
                            axisBorder: {
                                show: true,
                                color: '#78909C',
                                height: 1,
                                width: '100%',
                                offsetX: 0,
                                offsetY: 0
                            },
                            axisTicks: {
                                show: true,
                                borderType: 'solid',
                                color: '#78909C',
                                height: 6,
                                offsetX: 0,
                                offsetY: 0
                            },
                        },
                        yaxis: {
                            show: true,
                            tickAmount: 10,
                            labels: {
                                show: false,
                            },
                            axisBorder: {
                                show: false,
                            },
                            axisTicks: {
                                show: false,
                            },
                        },
                        tooltip: {
                            style: {
                                colors: [],
                                fontSize: '20px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                                fontWeight: 250,
                                cssClass: 'apexcharts-xaxis-label',
                            },
                            x: {
                                show: true
                            },
                            y: {
                                formatter: undefined,
                                title: {
                                    formatter: (seriesName) => seriesName,
                                },
                            },
                            z: {
                                formatter: undefined,
                                title: 'Size: '
                            },

                        }
                    };
                    statisticsDeliveryOrdersChart = new ApexCharts($statisticsDeliveryOrdersChart, statisticsDeliveryOrdersChartOptions);
                    statisticsDeliveryOrdersChart.render();
                },
                error: function (data) {
                    console.log(data);
                }
            });
            /*  End Delivery Orders Chart  */

            /*  Dine-in Orders Chart  */
            $.ajax({
                url: "{{ route('dashboard.get_dine_in_order_Chart') }}",
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                },
                data: {dateObject:dateObject},
                type: 'POST',
                dataType: 'json',
                async: true,
                cache: false,
                success: function (data) {
                    let total = [];
                    let dates = [];
                    data.data.forEach((el) => {
                        let lastTotal = 0
                        total.push(el.total);
                        lastTotal = el.total;
                        let pf = new Date(el.business_date);
                        const options1 = {day: 'numeric'};
                        const options2 = {month: 'short'};
                        dates.push(pf.toLocaleDateString('default', options1) + " " + pf.toLocaleDateString('default', options2));
                        $('.total_dine_in_order').text(lastTotal);
                    });


                    statisticsDineInOrdersChartOptions = {
                        chart: {
                            height: '275',
                            width: "100%",
                            type: 'area',
                            stacked: false,
                            toolbar: {
                                show: false
                            },
                            zoom: {
                                enabled: false
                            },
                        },
                        dataLabels: {
                            enabled: false
                        },
                        grid: {
                            borderColor: $trackBgColor,
                            strokeDashArray: 8,
                            position: 'back',
                            xaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            yaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            padding: {
                                top: -10,
                                bottom: -15
                            }
                        },
                        stroke: {
                            curve: 'smooth',
                            width: 4
                        },
                        dropShadow: {
                            enabled: true,
                            top: 0,
                            left: 0,
                            blur: 3,
                            opacity: 1
                        },
                        colors: [window.colors.solid.primary],
                        series: [
                            {
                                name: '',
                                data: total,
                            }
                        ],
                        legend: {show: false},
                        markers: {
                            size: 5,
                            colors: window.colors.solid.primary,
                            strokeColors: window.colors.solid.primary,
                            strokeWidth: 3,
                            strokeOpacity: 1,
                            strokeDashArray: 0,
                            fillOpacity: 1,
                            discrete: [
                                {
                                    seriesIndex: 0,
                                    dataPointIndex: 6,
                                    fillColor: '#ffffff',
                                    strokeColor: window.colors.solid.primary,
                                    size: 6
                                }
                            ],
                            shape: 'circle',
                            radius: 2,
                            hover: {
                                size: 3
                            }
                        },
                        xaxis: {
                            categories: dates,
                            labels: {
                                show: true,
                                rotate: -75,
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Helvetica, Arial, sans-serif',
                                    fontWeight: 400,
                                    cssClass: 'apexcharts-xaxis-label',
                                }
                            },
                            axisBorder: {
                                show: true,
                                color: '#78909C',
                                height: 1,
                                width: '100%',
                                offsetX: 0,
                                offsetY: 0
                            },
                            axisTicks: {
                                show: true,
                                borderType: 'solid',
                                color: '#78909C',
                                height: 6,
                                offsetX: 0,
                                offsetY: 0
                            },
                        },
                        yaxis: {
                            show: true,
                            tickAmount: 10,
                            labels: {
                                show: false,
                            },
                            axisBorder: {
                                show: false,
                            },
                            axisTicks: {
                                show: false,
                            },
                        },
                        tooltip: {
                            style: {
                                colors: [],
                                fontSize: '20px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                                fontWeight: 250,
                                cssClass: 'apexcharts-xaxis-label',
                            },
                            x: {
                                show: true
                            },
                            y: {
                                formatter: undefined,
                                title: {
                                    formatter: (seriesName) => seriesName,
                                },
                            },
                            z: {
                                formatter: undefined,
                                title: 'Size: '
                            },

                        }
                    };
                    statisticsDineInOrdersChart = new ApexCharts($statisticsDineInOrdersChart, statisticsDineInOrdersChartOptions);
                    statisticsDineInOrdersChart.render();
                },
                error: function (data) {
                    console.log(data);
                }
            });
            /*  End Delivery Orders Chart  */


            /*  Pickup Orders Chart  */
            $.ajax({
                url: "{{ route('dashboard.get_pickup_order_Chart') }}",
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                },
                data: {dateObject:dateObject},
                type: 'POST',
                dataType: 'json',
                async: true,
                cache: false,
                success: function (data) {
                    let total = [];
                    let dates = [];
                    data.data.forEach((el) => {
                        let lastTotal = 0
                        total.push(el.total);
                        lastTotal = el.total;
                        let pf = new Date(el.business_date);
                        const options1 = {day: 'numeric'};
                        const options2 = {month: 'short'};
                        dates.push(pf.toLocaleDateString('default', options1) + " " + pf.toLocaleDateString('default', options2));
                        $('.total_pickup_order').text(lastTotal);
                    });


                    statisticsPickupOrdersChartOptions = {
                        chart: {
                            height: '275',
                            width: "100%",
                            type: 'area',
                            stacked: false,
                            toolbar: {
                                show: false
                            },
                            zoom: {
                                enabled: false
                            },
                        },
                        dataLabels: {
                            enabled: false
                        },
                        grid: {
                            borderColor: $trackBgColor,
                            strokeDashArray: 8,
                            position: 'back',
                            xaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            yaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            padding: {
                                top: -10,
                                bottom: -15
                            }
                        },
                        stroke: {
                            curve: 'smooth',
                            width: 4
                        },
                        dropShadow: {
                            enabled: true,
                            top: 0,
                            left: 0,
                            blur: 3,
                            opacity: 1
                        },
                        colors: [window.colors.solid.primary],
                        series: [
                            {
                                name: '',
                                data: total,
                            }
                        ],
                        legend: {show: false},
                        markers: {
                            size: 5,
                            colors: window.colors.solid.primary,
                            strokeColors: window.colors.solid.primary,
                            strokeWidth: 3,
                            strokeOpacity: 1,
                            strokeDashArray: 0,
                            fillOpacity: 1,
                            discrete: [
                                {
                                    seriesIndex: 0,
                                    dataPointIndex: 6,
                                    fillColor: '#ffffff',
                                    strokeColor: window.colors.solid.primary,
                                    size: 6
                                }
                            ],
                            shape: 'circle',
                            radius: 2,
                            hover: {
                                size: 3
                            }
                        },
                        xaxis: {
                            categories: dates,
                            labels: {
                                show: true,
                                rotate: -75,
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Helvetica, Arial, sans-serif',
                                    fontWeight: 400,
                                    cssClass: 'apexcharts-xaxis-label',
                                }
                            },
                            axisBorder: {
                                show: true,
                                color: '#78909C',
                                height: 1,
                                width: '100%',
                                offsetX: 0,
                                offsetY: 0
                            },
                            axisTicks: {
                                show: true,
                                borderType: 'solid',
                                color: '#78909C',
                                height: 6,
                                offsetX: 0,
                                offsetY: 0
                            },
                        },
                        yaxis: {
                            show: true,
                            tickAmount: 10,
                            labels: {
                                show: false,
                            },
                            axisBorder: {
                                show: false,
                            },
                            axisTicks: {
                                show: false,
                            },
                        },
                        tooltip: {
                            style: {
                                colors: [],
                                fontSize: '20px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                                fontWeight: 250,
                                cssClass: 'apexcharts-xaxis-label',
                            },
                            x: {
                                show: true
                            },
                            y: {
                                formatter: undefined,
                                title: {
                                    formatter: (seriesName) => seriesName,
                                },
                            },
                            z: {
                                formatter: undefined,
                                title: 'Size: '
                            },

                        }
                    };
                    statisticsPickupOrdersChart = new ApexCharts($statisticsPickupOrdersChart, statisticsPickupOrdersChartOptions);
                    statisticsPickupOrdersChart.render();
                },
                error: function (data) {
                    console.log(data);
                }
            });
            /*  End Pickup  Orders Chart  */

            /*  Hourly Sale Chart  */
            $.ajax({
                url: "{{ route('dashboard.get_hourly_sales_chart') }}",
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                },
                data: {dateObject:dateObject},
                type: 'POST',
                dataType: 'json',
                async: true,
                cache: false,
                success: function (data) {
                    let total = [];
                    let time = [];
                    data.data.forEach((el) => {
                        let lastTotal = 0
                        total.push(el.total);
                        lastTotal = el.total;
                        time.push(el.time);
                        $('.total_hourly_sale').text(lastTotal);
                    });
                    console.log(total);
                    lineChartConfig = {
                        chart: {
                            height: 400,
                            type: 'line',
                            zoom: {
                                enabled: false
                            },
                            parentHeightOffset: 0,
                            toolbar: {
                                show: false
                            }
                        },
                        series: [
                            {
                                data: total
                            }
                        ],
                        markers: {
                            strokeWidth: 7,
                            strokeOpacity: 1,
                            strokeColors: [window.colors.solid.primary],
                            colors: [window.colors.solid.primary],

                            size: 5,
                            strokeDashArray: 0,
                            fillOpacity: 1,
                            shape: 'circle',
                            radius: 2,
                            hover: {
                                size: 3
                            }
                        },
                        dataLabels: {
                            enabled: false
                        },
                        stroke: {
                            curve: 'straight'
                        },
                        colors: [window.colors.solid.primary],
                        grid: {
                            xaxis: {
                                lines: {
                                    show: true
                                }
                            },
                            padding: {
                                top: -20
                            }
                        },
                        tooltip: {
                            custom: function (data) {
                                return (
                                    '<div class="px-1 py-50">' +
                                    '<span>' +
                                    data.series[data.seriesIndex][data.dataPointIndex] +
                                    '</span>' +
                                    '</div>'
                                );
                            }
                        },
                        xaxis: {
                            categories: time,
                            labels: {
                                show: true,
                                rotate: -75,
                            },
                        },
                        yaxis: {
                            opposite: isRtl
                        }
                    };
                    if (typeof lineChartEl !== undefined && lineChartEl !== null) {
                        var lineChart = new ApexCharts(lineChartEl, lineChartConfig);
                        lineChart.render();
                    }
                },
                error: function (data) {
                    console.log(data);
                }
            });
            /*  End Pickup  Orders Chart  */
        }






    </script>
@endpush