@extends('layout.app')
@section('title', 'Waiting Room | Dashboard')
@section('custom-css')
    <style>
        .content-body {
            min-height: 50px !important;
        }

        .h-full {
            height: auto !important;
            /* Change from 0% to auto */
        }

        .card {
            margin-bottom: 20px;
            /* Add some margin for better spacing */
        }

        .chartjs {
            height: 200px;
            /* width: 100%;  */
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
        }

        @media only screen and (max-width: 767px) {
            .grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr) !important;
            }
        }

        @media (max-width: 767px) {
            #canvasGraph {
                width: 75% !important;
            }

            #topDoctorsRevenueChart {
                height: 254px !important;
                width: 254px !important;
                margin: 0 auto;
            }
        }

        .nav-tabs.style-1 {
            border: 0;
            border-radius: 0.5rem;
            background-color: var(--light);
            padding: 4px;
        }

        .nav-tabs.style-1 .nav-item .nav-link {
            border: 0;
            border-radius: 0.5rem;
            margin: 0;
            color: var(--text-gray);
            padding: 0.5rem 1.125rem;
            font-weight: 500;
        }

        .nav-tabs.style-1 .nav-item .nav-link.active {
            background: var(--primary);
            color: #fff;
        }

        .text-right {
            text-align: right;
        }
    </style>
@endsection
@section('content')

    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-xl-6">
                            <ol class="breadcrumb mt-1 mb-0">
                                <li class="breadcrumb-item active"><a href="javascript:void(0);"
                                        style="direction: ltr;">{{ __('translations.Dashboard') }}</a></li>
                                <li class="breadcrumb-item"><a href="javascript:void(0);"
                                        style="direction: ltr;">{{ __('translations.Analytics') }}</a>
                                </li>
                            </ol>
                            <form action="{{ route('dashboard') }}" method="GET" id="filterForm">
                                <input type="hidden" name="duration" id="durationInput" value="{{ request('duration') }}">
                            </form>
                        </div>
                        <div class="col-xl-6 text-right">
                            {{-- <button type="button" class="btn btn-sm btn-light ms-1" data-duration="1-day"
                                title="1 Day">1D</button> --}}
                            <button type="button" class="btn btn-sm btn-light ms-1" data-duration="week"
                                title="1 Week">1W</button>
                            <button type="button" class="btn btn-sm btn-light ms-1" data-duration="1-month"
                                title="1 Month">1M</button>
                            <button type="button" class="btn btn-sm btn-light ms-1" data-duration="3-month"
                                title="3 Months">3M</button>
                            <button type="button" class="btn btn-sm btn-light ms-1" data-duration="6-month"
                                title="6 Months">6M</button>
                            <button type="button" class="btn btn-sm btn-light ms-1" data-duration="year"
                                title="1 Year">1Y</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-xl-6">
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row separate-row">
                                <div class="col-sm-6">
                                    <div class="job-icon pb-4 d-flex justify-content-between">
                                        <div>
                                            <div class="d-flex align-items-center mb-1">
                                                <h2 class="mb-0 lh-1 count">{{ $todayBookingsCount }}</h2>
                                                {{-- <span class="ms-3 badge badge-success light">+0.5%</span> --}}
                                                <span class="ms-3 badge badge-success light">
                                                    @if ($percentageChange > 0)
                                                        +{{ number_format($percentageChange, 1) }}%
                                                    @else
                                                        {{ number_format($percentageChange, 1) }}%
                                                    @endif
                                                </span>
                                            </div>
                                            <span class="d-block mb-2">{{ __('translations.Today Appointments') }}</span>
                                        </div>
                                        <div id="NewCustomers"></div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="job-icon pb-4 pt-4 pt-sm-0 d-flex justify-content-between">
                                        <div>
                                            <div class="d-flex align-items-center mb-1">
                                                <h2 class="mb-0 lh-1 count">{{ $bookingsCount }}</h2>
                                            </div>
                                            <span class="d-block mb-2">{{ __('translations.Total Appointments') }}</span>
                                        </div>
                                        <div id="NewCustomers1"></div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="job-icon pt-4 pb-sm-0 pb-4 d-flex justify-content-between">
                                        <div>
                                            <div class="d-flex align-items-center mb-1">
                                                <h2 class="mb-0 lh-1 count">{{ $cancelBookingsCount }}</h2>
                                                {{-- <span class="ms-3 badge badge-danger light">-2.0%</span> --}}
                                            </div>
                                            <span
                                                class="d-block mb-2">{{ __('translations.Cancelled Appointments') }}</span>
                                        </div>
                                        <div id="NewCustomers2"></div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="job-icon pt-4  d-flex justify-content-between">
                                        <div>
                                            <div class="d-flex align-items-center mb-1">
                                                <h2 class="mb-0 lh-1 count">$<span
                                                        class="count">{{ $bookingsBalanceCount }}</span></h2>
                                            </div>
                                            <span class="d-block mb-2">{{ __('translations.Total Earning') }}</span>
                                        </div>
                                        <div id="NewCustomers3"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12">
                    <div class="card " id="user-activity">
                        <div class="card-header border-0 pb-0 flex-wrap">
                            <h4 class="card-title mb-0">{{ __('translations.Appointments Overview') }}</h4>
                        </div>
                        <div class="card-body pt-3 px-sm-3 px-0 pb-1">
                            <div class="pb-sm-4 mb-3 d-flex flex-wrap px-3">
                                <div class="d-flex align-items-center">
                                    <svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                        viewBox="0 0 13 13">
                                        <rect width="13" height="13" rx="6.5" fill="#35c556" />
                                    </svg>
                                    <span
                                        class="text-dark fs-13 font-w500">{{ __('translations.Total Appointments') }}</span>
                                </div>
                                <div class="application d-flex align-items-center">
                                    <svg class="me-1" xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                        viewBox="0 0 13 13">
                                        <rect width="13" height="13" rx="6.5" fill="#3f4cfe" />
                                    </svg>
                                    <span class="text-dark fs-13 font-w500">{{ __('translations.Completed') }}</span>
                                </div>
                                <div class="application d-flex align-items-center">
                                    <svg class="me-1" xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                        viewBox="0 0 13 13">
                                        <rect width="13" height="13" rx="6.5" fill="#f34040" />
                                    </svg>
                                    <span class="text-dark fs-13 font-w500">{{ __('translations.Cancelled') }}</span>
                                </div>
                            </div>
                            <div class="">
                                <div id="bookingOverview" class="ltr"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12">
                    <div class="card" id="user-activity1">
                        <div class="card-header border-0 pb-0">
                            <h4 class="card-title mb-0">{{ __('translations.Earnings') }}</h4>
                        </div>
                        <div class="card-body ps-sm-3 ps-0 pb-2">
                            <div class="d-sm-flex d-block mb-3 mx-3">
                                {{-- <div class="d-flex align-items-center me-5 mb-sm-0 mb-2">
                                    <svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                        viewBox="0 0 13 13">
                                        <rect width="13" height="13" fill="#f73a0b" />
                                    </svg>
                                    <label class="form-label mb-0 me-4">{{ __('translations.Delivered') }}</label>
                                    <h6 class="mb-0 me-1">239</h6>
                                    <span class="text-success fs-13 font-w500">+0.4%</span>
                                </div> --}}
                                <div class="d-flex align-items-center">
                                    <svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                        viewBox="0 0 13 13">
                                        <rect width="13" height="13" fill="#6e6e6e" />
                                    </svg>
                                    <label class="form-label mb-0 me-4">Total Earnings</label>
                                    <h6 class="mb-0 me-1">${{ $bookingsBalanceCount }}</h6>
                                </div>
                            </div>
                            <div>
                                <div id="clinicRevenue" class="ltr"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row ">
                                <div class="col-xl-12">
                                    <div class="update-profile d-flex">
                                        <img src="{{ asset(Auth::guard('business')->user()->image ?? 'https://waitingroom.pro/public/uploads/profile/1734517120.png') }}"
                                            alt="">
                                        <div class="ms-4">
                                            <h3 class="mt-3 mb-0">{{ Auth::guard('business')->user()->name }}</h3>

                                            <span class="d-block mt-2"><i class="fas fa-map-marker-alt me-1"></i>
                                                {{ Auth::guard('business')->user()->location }}</span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="row mt-4 align-items-center">
                                <h4 class="fs-20 mb-0 mt-1">{{ __('translations.Doctor Revenue') }} <span
                                        class="text-muted fs-13">{{ __('translations.Revenue Insights of Top 5 Doctors (by Earnings)') }}</span>
                                </h4>
                                <div class="col-xl-6 col-sm-6">
                                    @foreach ($topDoctors as $doctor)
                                        <div class="progress default-progress">
                                            <div class="progress-bar bg-{{ $loop->index == 0 ? 'green' : ($loop->index == 1 ? 'info' : 'blue') }} progress-animated"
                                                style="width: {{ number_format($doctor['percentage'], 1) }}%; height:8px;"
                                                role="progressbar">
                                                <span class="sr-only">{{ number_format($doctor['percentage'], 1) }}%
                                                    {{ __('translations.Complete') }}</span>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-end mt-2 pb-4 justify-content-between">
                                            <span class="font-w500">{{ $doctor['name'] }}</span>
                                            <h6 class="mb-0">${{ number_format($doctor['total_revenue'], 2) }}</h6>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="col-xl-6 col-sm-6">
                                    <div id="topDoctorsPieChart"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header border-0 pb-2">
                            <h4 class="card-title mb-0">{{ __('translations.History & Logs') }}</h4>
                            {{-- <div>
                                <select class="default-select dashboard-select">
                                    <option data-display="Newest">{{ __('translations.Newest') }}</option>
                                    <option value="1">{{ __('translations.latest') }}</option>

                                    <option value="2">{{ __('translations.oldest') }}</option>
                                </select>

                            </div> --}}
                        </div>
                        <div class="card-body loadmore-content pb-0 pt-3 list-grid-area dlab-scroll height370 recent-activity-wrapper"
                            id="RecentActivityContent">
                            {{-- <div class="d-flex recent-activity">

                                <div class="d-flex align-items-center list-item-bx">
                                    <div class="icon-img-bx">
                                        <span>1</span>
                                    </div>
                                    <div class="ms-3">
                                        <h6 class="mb-1">Test 28 has created booking # 1166 by time slot</h6>
                                        <p class="mb-0">8min ago</p>
                                    </div>
                                </div>
                            </div> --}}
                            @forelse ($recentActivities as $index => $activity)
                                <div class="d-flex recent-activity">
                                    <div class="d-flex align-items-center list-item-bx">
                                        <div class="icon-img-bx">
                                            <span>{{ $index + 1 }}</span>
                                        </div>
                                        <div class="ms-3">
                                            <h6 class="mb-1">{{ $activity->message }}</h6>
                                            <p class="mb-0">{{ $activity->created_at->diffForHumans() }}</p>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <h5 class="text-center text-muted py-5 mt-5">No recent activity found.</h5>
                            @endforelse
                        </div>

                        <div class="card-footer border-0 text-center">
                            <a href="{{ url('dashboard/history') }}" class="btn btn-outline-primary m-auto dlab-load-mor"
                                id="RecentActivity">{{ __('translations.View more') }}</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-xl-12 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{ __('translations.Bookings Overview') }}</h4>
                </div>
                <div class="card-body">
                    <div class="pb-sm-4 mb-3 d-flex flex-wrap px-3">

                        <div class="d-flex align-items-center">
                            <svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                viewBox="0 0 13 13">
                                <rect width="13" height="13" rx="6.5" fill="#35c556" />
                            </svg>
                            <span class="text-dark fs-13 font-w500">{{ __('translations.Total Bookings') }}</span>
                        </div>
                        <div class="application d-flex align-items-center">
                            <svg class="me-1" xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                viewBox="0 0 13 13">
                                <rect width="13" height="13" rx="6.5" fill="#3f4cfe" />
                            </svg>
                            <span class="text-dark fs-13 font-w500">{{ __('translations.Completed') }}</span>
                        </div>
                        <div class="application d-flex align-items-center">
                            <svg class="me-1" xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                viewBox="0 0 13 13">
                                <rect width="13" height="13" rx="6.5" fill="#f34040" />
                            </svg>
                            <span class="text-dark fs-13 font-w500">{{ __('translations.Cancelled') }}</span>
                        </div>
                    </div>
                    <div id="morris_area_chart" class="morris_chart_height"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom-script')
    <!-- Chart piety plugin files -->
    <script src="{{ asset('assets/vendor/peity/jquery.peity.min.js') }}"></script>
    <!-- Dashboard 1 -->
    <script src="{{ asset('assets/js/dashboard/clinic-dashboard.js') }}"></script>


    <script src="{{ asset('assets/vendor/raphael/raphael.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/morris/morris.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/morris/morris-init.js') }}"></script>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const filterForm = document.getElementById('filterForm');
            const durationInput = document.getElementById('durationInput');
            const tabs = document.querySelectorAll('.nav-link[data-series]');

            // Handle tab click event
            tabs.forEach(tab => {
                tab.addEventListener('click', (event) => {
                    const duration = tab.getAttribute('data-series');

                    // Update input value and submit form
                    durationInput.value = duration;
                    filterForm.submit();
                });

                // Set active class based on input value
                if (durationInput.value === tab.getAttribute('data-series')) {
                    tab.classList.add('active');
                } else {
                    tab.classList.remove('active');
                }
            });
        });


        $(document).ready(function() {
            var counters = $(".count");
            var countersQuantity = counters.length;
            var counter = [];

            for (i = 0; i < countersQuantity; i++) {
                counter[i] = parseInt(counters[i].innerHTML);
            }

            var count = function(start, value, id) {
                var localStart = start;
                setInterval(function() {
                    if (localStart < value) {
                        localStart++;
                        counters[id].innerHTML = localStart;
                    }
                }, 40);
            }

            for (j = 0; j < countersQuantity; j++) {
                count(0, counter[j], j);
            }
        });
    </script>

    <script>
        // var morrisAreaChart = function() {
        //     //area chart
        //     Morris.Area({
        //         element: 'morris_area_chart',
        //         data: [{
        //                 period: '2001',
        //                 total_bookings: 0,
        //                 completed_bookings: 0,
        //                 cancelled_bookings: 0
        //             }, {
        //                 period: '2002',
        //                 total_bookings: 90,
        //                 completed_bookings: 60,
        //                 cancelled_bookings: 25
        //             }, {
        //                 period: '2003',
        //                 total_bookings: 40,
        //                 completed_bookings: 80,
        //                 cancelled_bookings: 35
        //             }, {
        //                 period: '2004',
        //                 total_bookings: 30,
        //                 completed_bookings: 47,
        //                 cancelled_bookings: 17
        //             }, {
        //                 period: '2005',
        //                 total_bookings: 150,
        //                 completed_bookings: 40,
        //                 cancelled_bookings: 120
        //             }, {
        //                 period: '2006',
        //                 total_bookings: 25,
        //                 completed_bookings: 80,
        //                 cancelled_bookings: 40
        //             }, {
        //                 period: '2007',
        //                 total_bookings: 10,
        //                 completed_bookings: 10,
        //                 cancelled_bookings: 10
        //             }


        //         ],
        //         lineColors: ['#f93a0b', 'rgb(16, 202, 147)', 'rgb(255, 92, 0)'],
        //         xkey: 'period',
        //         ykeys: ['total_bookings', 'completed_bookings', 'cancelled_bookings'],
        //         labels: ['Total Bookings', 'Completed', 'Cancelled'],
        //         pointSize: 0,
        //         lineWidth: 0,
        //         resize: true,
        //         fillOpacity: 0.95,
        //         behaveLikeLine: true,
        //         gridLineColor: 'transparent',
        //         hideHover: 'auto'

        //     });
        // }

        var duration = '{{ request('duration') }}';


        var morrisAreaChart = function(morrisChartData) {
            Morris.Area({
                element: 'morris_area_chart',
                data: morrisChartData.data,
                lineColors: ['#f93a0b', 'rgb(16, 202, 147)', 'rgb(255, 92, 0)'],
                xkey: 'period',
                ykeys: ['total_bookings', 'completed_bookings', 'cancelled_bookings'],
                labels: ['Total Bookings', 'Completed', 'Cancelled'],
                pointSize: 0,
                lineWidth: 0,
                resize: true,
                fillOpacity: 0.95,
                behaveLikeLine: true,
                gridLineColor: 'transparent',
                hideHover: 'auto',
                xLabelFormat: function(d) {
                    if (duration === 'week' || duration === '1-month') {
                        var data = morrisChartData.data.find(item => item.period ===
                            `${d.getFullYear()}-${('0' + (d.getMonth() + 1)).slice(-2)}-${('0' + d.getDate()).slice(-2)}`
                        );
                        return data ? data.formatted_period : '';
                    } else {
                        var data = morrisChartData.data.find(item => item.period ===
                            `${d.getFullYear()}-${('0' + (d.getMonth() + 1)).slice(-2)}`);
                        return data ? data.formatted_period : '';
                    }
                }
                // xLabelFormat: function(d) {
                //     var data = morrisChartData.data.find(item => item.period ===
                //         `${d.getFullYear()}-${('0' + (d.getMonth() + 1)).slice(-2)}`);
                //     return data ? data.formatted_period : '';
                // }
            });
        };


        // Call the function with the chart data
        // morrisAreaChart({!! json_encode($morrisChartData) !!});

        var activityBarChart = function() {
            var options = {
                series: [{
                    name: 'Total Revenue',
                    data: [] // This will be updated dynamically
                }],
                chart: {
                    type: 'bar',
                    height: 280,
                    toolbar: {
                        show: false
                    },
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '35%',
                        endingShape: 'rounded'
                    },
                },
                dataLabels: {
                    enabled: false
                },
                colors: ['var(--primary)'],
                stroke: {
                    show: true,
                    width: 2,
                    colors: ['transparent']
                },
                xaxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov',
                        'Dec'
                    ],
                    labels: {
                        style: {
                            colors: 'var(--text)',
                            fontSize: '13px',
                            fontFamily: 'Poppins',
                            fontWeight: 400
                        },
                    },
                    axisTicks: {
                        show: false
                    },
                    axisBorder: {
                        show: false
                    },
                },
                yaxis: {
                    labels: {
                        style: {
                            colors: 'var(--text)',
                            fontSize: '13px',
                            fontFamily: 'Poppins',
                            fontWeight: 400
                        },
                        formatter: function(value) {
                            return value;
                        }
                    },
                },
                grid: {
                    show: true,
                    strokeDashArray: 6,
                    borderColor: 'var(--border)',
                },
                fill: {
                    opacity: 1
                },
            };

            var chart = new ApexCharts(document.querySelector("#clinicRevenue"), options);
            chart.render();

            // Fetch monthly revenue data from backend
            // fetch('/get-monthly-revenue')
            // .then(response => response.json())
            // .then(data => {

            var monthNames = {!! json_encode($monthNames) !!};

            chart.updateOptions({
                xaxis: {
                    categories: monthNames
                }
            });
            var monthlyRevenue = {!! json_encode($monthlyRevenue) !!};
            chart.updateSeries([{
                name: 'Total Revenue',
                data: monthlyRevenue
            }]);
            // })
            // .catch(error => console.error('Error fetching monthly revenue data:', error));
        }

        document.addEventListener('DOMContentLoaded', function() {
            var chartData = @json($topDoctors);

            var chartDataArray = Object.values(chartData);
            var doctorNames = chartDataArray.map(item => item.name);
            var earnings = chartDataArray.map(item => item.total_revenue);
            // console.log(doctorNames);

            var pieChartRevenue = function() {
                var options = {
                    series: earnings,
                    chart: {
                        type: 'donut',
                        height: 220
                    },
                    labels: doctorNames,
                    dataLabels: {
                        enabled: false
                    },
                    // dataLabels: {
                    //     enabled: true,
                    //     formatter: function(val, opts) {
                    //         return opts.w.globals.labels[opts.seriesIndex] + ": " + val.toFixed(2) +
                    //             "%";
                    //     }
                    // },
                    stroke: {
                        width: 0,
                    },
                    colors: ['#1D92DF', '#4754CB', '#D55BC1'],
                    legend: {
                        position: 'bottom',
                        show: false
                    },
                    responsive: [{
                        breakpoint: 1400,
                        options: {
                            chart: {
                                height: 200
                            },
                        }
                    }]
                };

                var chart = new ApexCharts(document.querySelector("#topDoctorsPieChart"), options);
                chart.render();
            }

            pieChartRevenue();
            activityChart();
            activityBarChart();
            // morrisAreaChart();
            morrisAreaChart({!! json_encode($morrisChartData) !!});

        });

        var activityChart = function() {
            var options = {
                series: [{
                    name: 'Total Bookings',
                    data: {!! json_encode($monthlyData['totalBookings']) !!}
                }, {
                    name: 'Completed',
                    data: {!! json_encode($monthlyData['completed']) !!}
                }, {
                    name: 'Cancelled',
                    data: {!! json_encode($monthlyData['cancelled']) !!}
                }],
                chart: {
                    height: 300,
                    type: 'area',
                    toolbar: {
                        show: false
                    },
                },
                colors: ["#35c556", "#3f4cfe", "#f34040"],
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth',
                    width: 5,
                },
                legend: {
                    show: false
                },
                grid: {
                    show: true,
                    strokeDashArray: 6,
                    borderColor: 'var(--border)',
                },
                yaxis: {
                    labels: {
                        style: {
                            colors: 'var(--text)',
                            fontSize: '13px',
                            fontFamily: 'Poppins',
                            fontWeight: 400
                        },
                        formatter: function(value) {
                            return value;
                        }
                    },
                },
                xaxis: {
                    categories: {!! json_encode($monthlyData['months']) !!}, // Use dynamic month names
                    labels: {
                        style: {
                            colors: 'var(--text)',
                            fontSize: '13px',
                            fontFamily: 'Poppins',
                            fontWeight: 400
                        },
                    },
                    axisTicks: {
                        show: false
                    },
                    axisBorder: {
                        show: false
                    },
                },
                fill: {
                    type: 'gradient',
                    gradient: {
                        colorStops: [
                            [{
                                offset: 0,
                                color: '#35c556',
                                opacity: .2
                            }, {
                                offset: 50,
                                color: '#35c556',
                                opacity: 0
                            }, {
                                offset: 100,
                                color: '#35c556',
                                opacity: 0
                            }],
                            [{
                                offset: 0,
                                color: '#3f4cfe',
                                opacity: .2
                            }, {
                                offset: 50,
                                color: '#3f4cfe',
                                opacity: 0
                            }, {
                                offset: 100,
                                color: '#3f4cfe',
                                opacity: 0
                            }],
                            [{
                                offset: 0,
                                color: '#f34040',
                                opacity: .2
                            }, {
                                offset: 50,
                                color: '#f34040',
                                opacity: 0
                            }, {
                                offset: 100,
                                color: '#f34040',
                                opacity: 0
                            }]
                        ]
                    },
                },
                tooltip: {
                    x: {
                        format: 'dd/MM/yy HH:mm'
                    },
                },
                responsive: [{
                    breakpoint: 575,
                    options: {
                        chart: {
                            height: 200,
                        },
                        stroke: {
                            width: 3,
                        },
                        yaxis: {
                            labels: {
                                style: {
                                    fontSize: '11px',
                                },
                            },
                        },
                        xaxis: {
                            labels: {
                                style: {
                                    fontSize: '11px',
                                },
                            },
                        },
                    },
                }]
            };

            var chart = new ApexCharts(document.querySelector("#bookingOverview"), options);
            chart.render();
        }

        $(document).ready(function() {
            var counters = $(".count");
            var countersQuantity = counters.length;

            var counter = [];

            for (i = 0; i < countersQuantity; i++) {
                counter[i] = parseInt(counters[i].innerHTML);
            }

            var count = function(start, value, id) {
                var localStart = start;
                setInterval(function() {
                    if (localStart < value) {
                        localStart++;
                        counters[id].innerHTML = localStart;
                    }
                }, 40);
            }

            for (j = 0; j < countersQuantity; j++) {
                count(0, counter[j], j);
            }
        });
    </script>

@endsection