@extends('admin.layouts.app')
@section('title')
    {{ __('dashboard') }}
@endsection
@section('breadcrumbs')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1 class="m-0">{{ __('dashboard') }}</h1>
        </div>
    </div>
@endsection
@section('content')
    @if ($appSetup->where('status', 0)->count())
        <x-setup-guide />
    @endif

    {{-- no permission --}}
    @if (
        !userCan('dashboard.weekly_details') &&
            !userCan('dashboard.monthly_details') &&
            !userCan('dashboard.timeline_details') &&
            !userCan('dashboard.citywise_weekly_details') &&
            !userCan('dashboard.yearly_chart_details'))
        <lottie-player src="https://lottie.host/ea366914-606c-4e11-bd68-70fc63ef4e6d/Oy6FasrbBC.json" class="m-auto" autoplay
            loop mode="normal" style="width: 400px;"></lottie-player>
    @endif



    {{-- Weekly Details(Leads) --}}
    @if (userCan('dashboard.weekly_details'))
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Weekly Details</h3>
                    <div class="d-flex justify-content-center align-items-center">

                        <div class="form-group row ml-2">
                            <label for="weekSelect" class="col-sm-auto col-form-label small-margin">Week:</label>
                            <div class="col-sm-auto">
                                <select id="weekSelect" class="form-select small-select"
                                    aria-label="Default select example">
                                    <option value="1" {{ ceil(date('d') / 7) == 1 ? 'selected' : '' }}>1st Week
                                    </option>
                                    <option value="2" {{ ceil(date('d') / 7) == 2 ? 'selected' : '' }}>2nd Week
                                    </option>
                                    <option value="3" {{ ceil(date('d') / 7) == 3 ? 'selected' : '' }}>3rd Week
                                    </option>
                                    <option value="4" {{ ceil(date('d') / 7) >= 4 ? 'selected' : '' }}>4th Week
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row ml-2">
                            <label for="monthSelect" class="col-sm-auto col-form-label small-margin">Month:</label>
                            <div class="col-sm-auto">
                                <select id="monthSelect" class="form-select small-select"
                                    aria-label="Default select example">
                                    @for ($i = 1; $i <= 12; $i++)
                                        <option value="{{ $i }}" {{ $i == date('m') ? 'selected' : '' }}>
                                            {{ date('F', strtotime('1-' . $i . '-2023')) }}</option>
                                    @endfor

                                </select>
                            </div>
                        </div>
                        <div class="form-group row ml-2">
                            <label for="yearSelect" class="col-sm-auto col-form-label small-margin">Year:</label>
                            <div class="col-sm-auto">
                                <select id="yearSelect" class="form-select small-select"
                                    aria-label="Default select example">
                                    <option {{ date('Y') == date('Y') ? 'selected' : '' }}>{{ date('Y') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mx-4" id="dayWise">
                <div class="loader1 mx-auto my-1" style="display: none;"></div>
            </div>
        </div>
    @endif

    {{-- Monthly Details(Leads) --}}
    @if (userCan('dashboard.monthly_details'))
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Monthly Details</h3>
                    <div class="d-flex justify-content-center align-items-center">
                        <div class="form-group row ml-2">
                            <label for="selectMonth_monthlyGrid"
                                class="col-sm-auto col-form-label small-margin">Month:</label>
                            <div class="col-sm-auto">
                                <select id="selectMonth_monthlyGrid" class="form-select small-select"
                                    aria-label="Default select example">
                                    @for ($i = 1; $i <= 12; $i++)
                                        <option value="{{ $i }}" {{ $i == date('m') ? 'selected' : '' }}>
                                            {{ date('F', strtotime('1-' . $i . '-2023')) }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                        <div class="form-group row ml-2">
                            <label for="selectYear_monthlyGrid"
                                class="col-sm-auto col-form-label small-margin">Year:</label>
                            <div class="col-sm-auto">
                                <select id="selectYear_monthlyGrid" class="form-select small-select"
                                    aria-label="Default select example">
                                    <option {{ date('Y') == date('Y') ? 'selected' : '' }}>{{ date('Y') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row gx-5 mt-3 mx-3" id="getMonthlyData">
                <div class="loader2 mx-auto my-1" style="display: none;"></div>
            </div>

        </div>
    @endif

    {{-- Timeline stages --}}
    @if (userCan('dashboard.timeline_details'))
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Stages Wise Weekly Details</h3>
                    <div class="d-flex justify-content-center align-items-center">

                        <div class="form-group row ml-2">
                            <label for="weekSelect" class="col-sm-auto col-form-label small-margin">Week:</label>
                            <div class="col-sm-auto">
                                <select id="time_lineweekSelect" class="form-select small-select"
                                    aria-label="Default select example">
                                    <option value="1" {{ ceil(date('d') / 7) == 1 ? 'selected' : '' }}>1st Week
                                    </option>
                                    <option value="2" {{ ceil(date('d') / 7) == 2 ? 'selected' : '' }}>2nd Week
                                    </option>
                                    <option value="3" {{ ceil(date('d') / 7) == 3 ? 'selected' : '' }}>3rd Week
                                    </option>
                                    <option value="4" {{ ceil(date('d') / 7) >= 4 ? 'selected' : '' }}>4th Week
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row ml-2">
                            <label for="monthSelect" class="col-sm-auto col-form-label small-margin">Month:</label>
                            <div class="col-sm-auto">
                                <select id="time_linemonthSelect" class="form-select small-select"
                                    aria-label="Default select example">
                                    @for ($i = 1; $i <= 12; $i++)
                                        <option value="{{ $i }}" {{ $i == date('m') ? 'selected' : '' }}>
                                            {{ date('F', strtotime('1-' . $i . '-2023')) }}</option>
                                    @endfor

                                </select>
                            </div>
                        </div>
                        <div class="form-group row ml-2">
                            <label for="yearSelect" class="col-sm-auto col-form-label small-margin">Year:</label>
                            <div class="col-sm-auto">
                                <select id="time_lineyearSelect" class="form-select small-select"
                                    aria-label="Default select example">
                                    <option {{ date('Y') == date('Y') ? 'selected' : '' }}>{{ date('Y') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mx-4" id="timeLineWise">
                <div class="loader3 mx-auto my-1" style="display: none;"></div>
            </div>
        </div>
    @endif

    {{-- Prefered Country wise Data (monthly) --}}
    @if (userCan('dashboard.preferred_country'))
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Preferred Country Wise Data</h3>
                    <div class="d-flex justify-content-center align-items-center">

                        <div class="form-group row ml-2">
                            <label for="monthSelect_pc" class="col-sm-auto col-form-label small-margin">Month:</label>
                            <div class="col-sm-auto">
                                <select id="monthSelect_pc" class="form-select small-select"
                                    aria-label="Default select example">
                                    @for ($i = 1; $i <= 12; $i++)
                                        <option value="{{ $i }}" {{ $i == date('m') ? 'selected' : '' }}>
                                            {{ date('F', strtotime('1-' . $i . '-2023')) }}</option>
                                    @endfor

                                </select>
                            </div>
                        </div>
                        <div class="form-group row ml-2">
                            <label for="yearSelect_pc" class="col-sm-auto col-form-label small-margin">Year:</label>
                            <div class="col-sm-auto">
                                <select id="yearSelect_pc" class="form-select small-select"
                                    aria-label="Default select example">
                                    <option {{ date('Y') == date('Y') ? 'selected' : '' }}>{{ date('Y') }}</option>
                                </select>
                            </div>
                            <div class="col-sm-auto d-flex align-items-center">
                                <button type="button" class="btn btn-secondary" id="showDivPreferedCountry">
                                    View
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- <div class="mx-4 row my-3" id="preferredCountry" style="display: none;"> --}}
            <div class="mx-3 row my-3" id="preferredCountry" style="display: none;">
                <div class="loader6 mx-auto my-1" style="display: none;"></div>
            </div>
        </div>
    @endif

    {{-- City Wise Weekly Details --}}
    @if (userCan('dashboard.citywise_weekly_details'))
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h3 class="card-title">City Wise Weekly Details</h3>
                    <div class="d-flex justify-content-center align-items-center">

                        <div class="form-group row ml-2">
                            <label for="weekSelect" class="col-sm-auto col-form-label small-margin">Week:</label>
                            <div class="col-sm-auto">
                                <select id="cityweekSelect" class="form-select small-select"
                                    aria-label="Default select example">
                                    <option value="1" {{ ceil(date('d') / 7) == 1 ? 'selected' : '' }}>1st Week
                                    </option>
                                    <option value="2" {{ ceil(date('d') / 7) == 2 ? 'selected' : '' }}>2nd Week
                                    </option>
                                    <option value="3" {{ ceil(date('d') / 7) == 3 ? 'selected' : '' }}>3rd Week
                                    </option>
                                    <option value="4" {{ ceil(date('d') / 7) >= 4 ? 'selected' : '' }}>4th Week
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row ml-2">
                            <label for="monthSelect" class="col-sm-auto col-form-label small-margin">Month:</label>
                            <div class="col-sm-auto">
                                <select id="citymonthSelect" class="form-select small-select"
                                    aria-label="Default select example">
                                    @for ($i = 1; $i <= 12; $i++)
                                        <option value="{{ $i }}" {{ $i == date('m') ? 'selected' : '' }}>
                                            {{ date('F', strtotime('1-' . $i . '-2023')) }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                        <div class="form-group row ml-2">
                            <label for="yearSelect" class="col-sm-auto col-form-label small-margin">Year:</label>
                            <div class="col-sm-auto">
                                <select id="cityyearSelect" class="form-select small-select"
                                    aria-label="Default select example">
                                    <option {{ date('Y') == date('Y') ? 'selected' : '' }}>{{ date('Y') }}</option>
                                </select>
                            </div>
                            <div class="col-sm-auto d-flex align-items-center">
                                <button type="button" class="btn btn-secondary" id="showDivCityWise">
                                    View
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="mx-4" id="cityWise" style="display: none;">
                <div class="loader4 mx-auto my-1" style="display: none;"></div>
            </div>
        </div>
    @endif


    {{-- Bar Chart(Yearly) --}}
    @if (userCan('dashboard.yearly_chart_details'))
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Yearly Details</h3>
                    <div class="d-flex justify-content-center align-items-center">
                        <div class="form-group row ml-2">
                            <label for="selectYear_chart" class="col-sm-auto col-form-label small-margin">Year:</label>
                            <div class="col-sm-auto">
                                <select id="selectYear_chart" class="form-select small-select"
                                    aria-label="Default select example">
                                    <option {{ date('Y') == date('Y') ? 'selected' : '' }}>{{ date('Y') }}</option>
                                </select>
                            </div>
                            <div class="col-sm-auto d-flex align-items-center">
                                <button type="button" class="btn btn-secondary" id="showDivYearlyChart">
                                    View
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 500px; display: none;" id="yearlyChartDiv">
                <div class="loader5 mx-auto my-4" style="display: none;"></div>
                <canvas id="barChart"></canvas>

            </div>
        </div>
    @endif


    {{-- model start leads & view all --}}

    {{-- City Wise Weekly Details --}}
    <div class="modal fade custom-modal" id="leadsModel_2" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-labelledby="leadsModel_2" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Cities</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-striped table-hover table-bordered">
                        <thead>
                            <tr>
                                <th scope="col">Sn.</th>
                                <th scope="col">City</th>
                                <th scope="col">Count</th>
                            </tr>
                        </thead>
                        <tbody id="leadsCityWise">

                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        id="closeModel">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade custom-modal" id="leadsModel_3" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-labelledby="leadsModel_3" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Stages</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-striped table-hover table-bordered">
                        <thead>
                            <tr>
                                <th scope="col">Sn.</th>
                                <th scope="col">Stages</th>
                                <th scope="col">Count</th>
                            </tr>
                        </thead>
                        <tbody id="viewtimeLineWise">

                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        id="closeModel">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade custom-modal" id="viewStages" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-labelledby="viewStages" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Stages</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-striped table-hover table-bordered">
                        <thead>
                            <tr>
                                <th scope="col">Sr.</th>
                                <th scope="col">Stages</th>
                                <th scope="col">Count</th>
                            </tr>
                        </thead>
                        <tbody id="viewStagesTable">

                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        id="closeModel">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade custom-modal" id="documentsReceived" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-labelledby="documentsReceived" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="documentsReceived_title"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-striped table-hover table-bordered hideTheadTbody">
                        <thead>
                            <tr>
                                <th scope="col">SN.</th>
                                <th scope="col">Name</th>
                            </tr>
                        </thead>
                        <tbody id="documentsReceived_table">
                            <div class="form-group">
                                <label for="tableSearch_Stages">Search</label>
                                <input type="text" class="form-control" id="tableSearch_Stages"
                                    aria-describedby="emailHelp" placeholder="Search Name">
                            </div>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        id="closeModel">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    {{-- <script src="{{ asset('backend') }}/plugins/chart.js/Chart.min.js"></script> --}}
    <script src="{{ asset('backend') }}/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
    <link rel="stylesheet" href="{{ asset('backend') }}/css/slick-theme.css">
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    {{-- <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> --}}
    {{-- <script src=“https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js”></script> --}}
    <script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script>



    <script>
        $(document).ready(function() {

            $(".loader1, .loader2, .loader3, .loader4, .loader5").show();

            var hasWeeklyDetailsPermission = @json(userCan('dashboard.weekly_details'));
            var hasMonthlyDetailsPermission = @json(userCan('dashboard.monthly_details'));
            var hasTimelineDetailsPermission = @json(userCan('dashboard.timeline_details'));

            if (hasWeeklyDetailsPermission) {
                getWeeklyData();
            }
            if (hasMonthlyDetailsPermission) {
                getMonthlyData();
            }
            if (hasTimelineDetailsPermission) {
                getTimeLineData();
            }


            $('#monthSelect_pc,#yearSelect_pc').change(function() {
                $(".loader6").show();
                getPreferredCountryData();
            })


            $("#showDivPreferedCountry").on("click", function() {
                $(".loader6").show();
                getPreferredCountryData();
                $("#preferredCountry").toggle();
                if ($("#preferredCountry").is(":visible")) {
                    $(this).html("Hide <i class='fas fa-chevron-up'></i>");
                } else {
                    $(this).html("View <i class='fas fa-chevron-down'></i>");
                }
            });


            // getYearlyDataChart();
            $('#weekSelect,#monthSelect').change(function() {
                $(".loader1").show();
                getWeeklyData();
            })

            $("#showDivCityWise").on("click", function() {
                $("#cityWise").toggle();
                getCityData();
                if ($("#cityWise").is(":visible")) {
                    $(this).html("Hide <i class='fas fa-chevron-up'></i>");
                } else {
                    $(this).html("View <i class='fas fa-chevron-down'></i>");
                }
            });

            $('#cityweekSelect, #citymonthSelect, #cityyearSelect').change(function() {
                $(".loader4").show();
                getCityData();
            })
            $('#selectMonth_monthlyGrid, #selectYear_monthlyGrid').change(function() {
                $(".loader2").show();
                getMonthlyData();
            })
            $('#selectYear_chart').change(function() {
                $(".loader5").show();
                getYearlyDataChart();
            })
            $('#time_lineweekSelect, #time_linemonthSelect, #time_lineyearSelect').change(function() {
                $(".loader3").show();
                getTimeLineData();
            })
        });

        $("#showDivYearlyChart").on("click", function() {
            $("#yearlyChartDiv").toggle();
            getYearlyDataChart()
            if ($("#yearlyChartDiv").is(":visible")) {
                $(this).html("Hide <i class='fas fa-chevron-up'></i>");
            } else {
                $(this).html("View <i class='fas fa-chevron-down'></i>");
            }
        });
    </script>

    <script>
        // PreferredC ountry Details
        var preferedCountryData = {};

        function getPreferredCountryData() {
            yearSelect = $("#yearSelect_pc").val();
            monthSelect = $("#monthSelect_pc").val();

            $.ajax({
                url: "{{ route('getPreferredCountryData') }}",
                type: 'GET',
                dataType: 'json',
                data: {
                    yearSelect: yearSelect,
                    monthSelect: monthSelect,
                },
                success: function(data) {
                    preferedCountryData = data;

                    // console.log("res", data);


                    let html = '';
                    let index = 1;
                    let acc = "test";
                    for (const date in data) {
                        const formattedDate = date.replace(/\s/g, '');
                        index++;
                        html += `
                        <div class="col-3 mb-3">
                            <div class="accordion" id="accordionExample${formattedDate}">
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingOne">
                                        <button class="accordion-button collapsed lead-button px-2 py-3" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapseOne_${acc + index}" aria-expanded="true"
                                            aria-controls="collapseOne_${formattedDate + index}">
                                            <h5 class="d-flex justify-content-center mb-0 fs-6">
                                                <i class="flag-icon mx-2 ${data[date]['icon']}"></i>
                                                ${date}
                                                <b class="ml-1">(${data[date]['count']})</b>
                                            </h5>
                                        </button>
                                    </h2>
                                    <div id="collapseOne_${acc + index}" class="accordion-collapse collapse"
                                        aria-labelledby="headingOne" data-bs-parent="#accordionExample${formattedDate}">
                                        <div class="accordion-body">
                                            <div class="accordion" id="accordionExample${index}">
    `;

                        let i2 = 0;
                        for (const key in data[date]['intake']) {
                            if (data[date]['intake'].hasOwnProperty(key)){
                                const totalLeads = data[date]['intake'][key]['intake'];
                                const element = data[date]['intake'][key]['stage'];

                                html += `
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingOne_${key}">
                                            <button class="accordion-button collapsed p-2 bg-light lead-button" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#collapseOne_${key + index}"
                                                aria-expanded="true" aria-controls="collapseOne_${key}">
                                                ${key} <b class="ml-1">(${data[date]['intake'][key]['count']})</b>
                                            </button>
                                        </h2>
                                        <div id="collapseOne_${key + index}" class="accordion-collapse collapse"
                                            aria-labelledby="headingOne_${key}" data-bs-parent="#accordionExample${index}">
                                            <div class="accordion-body px-3 lead-box-scroll">
                                     `;

                                if (element && Object.keys(element).length == 0) {
                                    html += `No Leads`;
                                } else {
                                    for (const key2 in element) {
                                        if (element.hasOwnProperty(key2)) {
                                            const element2 = element[key2].count;
                                            const encodedData = btoa(JSON.stringify(element[key2].users));
                                            html += `
                                            <span class="d-block mb-1">
                                                <a class="link pointer" onclick="sendModelPrefredCountry('${encodedData}','${key2}');">
                                                    ${key2}
                                                </a> 
                                                <span class="float-end">${element2}</span>
                                            </span>`;
                                        }
                                    }
                                }

                                html += `
                                        </div>
                                    </div>
                                </div>`;
                            }
                            i2++;
                        }

                        html += `
                                </div>
                                <hr />
                            </div>
                        </div>
                    </div>
                    </div>
                    </div>
                    </div>
                    </div>`;
                    }

                    $(".loader6").hide();
                    $("#preferredCountry").html(html);

                    // initializeSlickSlider('preferredCountry', html);
                    if (Object.keys(data).length <= 0) {
                        lottieFiles('preferredCountry');
                    }

                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                    $(".loader6").show();
                }
            });

        }
        // Weekly Details
        function getWeeklyData() {
            yearSelect = $("#yearSelect").val();
            monthSelect = $("#monthSelect").val();
            weekSelect = $("#weekSelect").val();

            $.ajax({
                url: "{{ route('weekly-data') }}",
                type: 'GET',
                dataType: 'json',
                data: {
                    yearSelect: yearSelect,
                    monthSelect: monthSelect,
                    weekSelect: weekSelect
                },
                success: function(data) {
                    // console.log("res11", data)
                    let html = '';
                    var index = 1;
                    for (const date in data) {
                        const formattedDate = date.replace(/\s/g, '');
                        index++;
                        html +=
                            `<div class="p-2" style="">
                            <div class="card">
                                <div class="card-header bg-primary p-2">
                                    <h5 class="d-flex justify-content-center mb-0"><i class="far fa-calendar-alt icon-size mx-2"></i>${date}</h5>
                                </div>
                                <div class="card-body p-0 incomeing-scroll ps" style="position:relative;">
                                    <div class="mt-1 mb-3">
                                    <h6 class="px-3 pt-2">Total Leads <span class="float-end fw-bold">${data[date]['totalLeads']}</span></h6>
                                <hr />`;
                        html += `<div class="accordion px-3" id="accordionExample${index}">`
                        var i2 = 0;
                        for (const key in data[date].leads) {
                            if (data[date].leads.hasOwnProperty.call(data[date].leads, key)) {
                                const totalLeads = data[date].leads[key].total_lead;
                                const element = data[date].leads[key].child;

                                html +=
                                    `<div class="accordion-item">
                                                <h2 class="accordion-header" id="headingOne">
                                                    <button class="accordion-button collapsed p-2 bg-light lead-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne_${key+index}" aria-expanded="true" aria-controls="collapseOne_${key}">`
                                if (key == 'Ads') {
                                    html += ` <i class="fas fa-ad mx-2"></i> `;
                                } else if (key == 'Organic') {
                                    html += `<i class="fas fa-leaf mx-2" style="font-size: 15px;"></i>`;
                                } else {
                                    html += `<i class="fas fa-exclamation-circle mx-2"></i>`;
                                }

                                html += `${key} (${totalLeads ? totalLeads : 0})
                                                    </button>
                                                </h2>
                                                <div id="collapseOne_${key+index}" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample${index}">
                                                    <div class="accordion-body px-3 lead-box-scroll">`;
                                if (element && Object.keys(element).length == 0) {
                                    html += `No Leads`;
                                } else {

                                    for (const key2 in element) {
                                        if (element.hasOwnProperty.call(element, key2)) {
                                            const element2 = element[key2];
                                            // console.log("element",element);
                                            html +=
                                                ` <span class="d-block mb-1">${key2} <span class="float-end">${element2}</span></span>`;
                                        }
                                    }
                                }

                                html += `</div>
                                            </div>
                                        </div>`;
                            }
                            i2++;
                        }


                        html += `</div>
                            <hr />`;

                        // let loopCount = 0;
                        // for (const key in data[date].stages) {
                        //     if (data[date].stages.hasOwnProperty.call(data[date].stages, key)) {
                        //         const element = data[date].stages[key];
                        //         html +=
                        //             `<span class="px-4 d-block mb-1">${key} <span class="float-end">${element}</span></span>`;
                        //     }
                        //     loopCount++;
                        //     if (loopCount >= 4) {
                        //         break;
                        //     }
                        // }

                        const sortedArray = Object.entries(data[date]).sort((a, b) => b[1] - a[1]);
                        const sortedDict = Object.fromEntries(sortedArray);
                        const encodedData = btoa(JSON.stringify(sortedDict));

                        html +=
                            `<a href="" class="px-4 d-block text-right mt-3" data-bs-toggle="modal" data-bs-target="#viewStages" onclick="sendModelDataLeads('${encodedData}');">View Stages</a>
                        </div>
                        </div>
                        </div>
                        </div>`;
                    }

                    $(".loader1").hide();

                    initializeSlickSlider('dayWise', html);
                    if (Object.keys(data).length <= 0) {
                        lottieFiles('dayWise');
                    }

                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });

            $(window).on("load", function() {
                setTimeout(() => {
                    let totalSlides = $('#dayWise').slick('getSlick').slideCount;
                    $('#dayWise').slick('slickGoTo', totalSlides - 1);
                }, 2000);
            });
        }

        // Monthly Details
        var monthlyData = {};

        function getMonthlyData() {
            selectMonth = $("#selectMonth_monthlyGrid").val();
            yearSelect = $("#selectYear_monthlyGrid").val();

            $.ajax({
                url: "{{ route('getMonthlyData') }}",
                type: 'GET',
                dataType: 'json',
                data: {
                    selectMonth: selectMonth,
                    yearSelect: yearSelect,
                },
                success: function(response) {

                    monthlyData = response;
                    const user_documentReceived = ""
                    const user_applicationSubmitted = ""
                    const user_uniOfferReceived = ""
                    const user_uniOfferAccepted = ""
                    $(".loader2").hide();
                    $('#getMonthlyData').html(`
                    <div class="col-3">
                        <div class="card card-raised bg-dark text-white">
                            <div class="card-body px-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <div class="me-2">
                                        <div class="fs-5 text-white">Total Leads</div>
                                        <div class="card-text">${response.totalLeads}</div>
                                    </div>
                                    <div class="align-items-center">
                                    <i class="fas fa-user-friends" style="font-size: 30px;"></i>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-3">
                        <div class="card card-raised bg-secondary text-white">
                            <div class="card-body px-3" onclick="sendModeldocumentsReceived('${user_documentReceived}','Document Received');">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <div class="me-2">
                                        <div class="fs-5 text-white">Document Received</div>
                                        <div class="card-text">${response.documentReceived}</div>
                                    </div>
                                    <div class="align-items-center">
                                    <i class="fas fa-file-word" style="font-size: 30px;"></i>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-3">
                        <div class="card card-raised bg-primary text-white">
                            <div class="card-body px-3" onclick="sendModeldocumentsReceived('${user_applicationSubmitted}','Application Submitted');">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <div class="me-2">
                                        <div class="fs-5 text-white">Application Submitted</div>
                                        <div class="card-text">${response.applicationSubmitted}</div>
                                    </div>
                                    <div class="align-items-center">
                                    <i class="fas fa-file-invoice" style="font-size: 30px;"></i>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="card card-raised bg-info text-white">
                            <div class="card-body px-3" onclick="sendModeldocumentsReceived('${user_uniOfferReceived}','University Offer Recevied');">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <div class="me-2">
                                        <div class="fs-5 text-white">University Offer Recevied</div>
                                        <div class="card-text">${response.uniOfferReceived}</div>
                                    </div>
                                    <div class="align-items-center">
                                    <i class="fas fa-scroll" style="font-size: 30px;"></i>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="card card-raised bg-success text-white">
                            <div class="card-body px-3" onclick="sendModeldocumentsReceived('${user_uniOfferAccepted}','University Offer Accepted');">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <div class="me-2">
                                        <div class="fs-5 text-white">University Offer Accepted</div>
                                        <div class="card-text">${response.uniOfferAccepted}</div>
                                    </div>
                                    <div class="align-items-center">
                                    <i class="fas fa-user-check" style="font-size: 30px;"></i>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `);
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                    $(".loader2").show();
                }
            });
        }

        // Stages Wise Weekly Details
        function getTimeLineData() {
            weekSelect = $("#time_lineweekSelect").val();
            monthSelect = $("#time_linemonthSelect").val();
            yearSelect = $("#time_lineyearSelect").val();

            $.ajax({
                url: "{{ route('getTimeLineData') }}",
                type: 'GET',
                dataType: 'json',
                data: {
                    yearSelect: yearSelect,
                    monthSelect: monthSelect,
                    weekSelect: weekSelect,
                },
                success: function(data) {
                    let html = '';
                    for (const date in data) {
                        html +=
                            `<div class="p-2" style="">
                        <div class="card cityCard">
                            <div class="card-header bg-primary p-2">
                                <h5 class="d-flex justify-content-center mb-0"><i class="far fa-calendar-alt icon-size mx-2"></i>${date}</h5>
                            </div>
                            <div class="card-body p-0 incomeing-scroll ps" style="position:relative;">
                                <div class="mt-1 mb-3">`;

                        let count = 0;
                        let propertiesArray = [];
                        const sortedArray = Object.entries(data[date]).sort((a, b) => b[1] - a[1]);
                        const sortedDict = Object.fromEntries(sortedArray);

                        let loopCount = 0;
                        for (const property in data[date]) {
                            count++;
                            if (property == '') {
                                propertiesArray['Not Defined'] = data[date][property];
                                html +=
                                    `<span class="px-4 d-block mb-1">Not Defined <span class="float-end">${data[date][property]}</span></span>`;
                            } else {
                                propertiesArray[property] = data[date][property];
                                html +=
                                    `<span class="px-4 d-block mb-1">${property} <span class="float-end">${data[date][property]}</span></span>`;
                            }
                            loopCount++;
                            if (loopCount >= 6) {
                                break;
                            }
                        }
                        const encodedData = btoa(JSON.stringify(data[date]));
                        if (loopCount >= 4) {
                            html += `<a href="" class="px-4 d-block text-right mt-3" data-bs-toggle="modal" data-bs-target="#leadsModel_3" onclick="sendModelDataTimeLine('${encodedData}');">All Stages</a>
                        </div>
                        </div>
                        </div>
                        </div>`;
                        } else {
                            html += `
                        </div>
                        </div>
                        </div>
                        </div>`;
                        }
                    }

                    $(".loader3").hide();
                    initializeSlickSlider('timeLineWise', html);

                    if (Object.keys(data).length <= 0) {
                        lottieFiles('timeLineWise');
                    }

                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                    $(".loader3").show();
                }
            });
            $(window).on("load", function() {
                setTimeout(() => {
                    let totalSlides = $('#timeLineWise').slick('getSlick').slideCount;
                    $('#timeLineWise').slick('slickGoTo', totalSlides - 1);
                }, 4000);
            });

        }

        // City Wise Weekly Details        
        function getCityData() {
            weekSelect = $("#cityweekSelect").val();
            monthSelect = $("#citymonthSelect").val();
            yearSelect = $("#cityyearSelect").val();

            $.ajax({
                url: "{{ route('getCityData') }}",
                type: 'GET',
                dataType: 'json',
                data: {
                    yearSelect: yearSelect,
                    monthSelect: monthSelect,
                    weekSelect: weekSelect,
                },
                success: function(data) {
                    let html = '';
                    for (const date in data) {
                        html +=
                            `<div class="p-2" style="">
                            <div class="card cityCard1">
                                <div class="card-header bg-primary p-2">
                                    <h5 class="d-flex justify-content-center mb-0"><i class="far fa-calendar-alt icon-size mx-2"></i>${date}</h5>
                                </div>
                                <div class="card-body p-0 incomeing-scroll ps" style="position:relative;">
                                    <div class="mt-1 mb-3">`;

                        let count = 0;
                        let propertiesArray = [];
                        const sortedArray = Object.entries(data[date]).sort((a, b) => b[1] - a[1]);
                        const sortedDict = Object.fromEntries(sortedArray);

                        let loopCount = 0;
                        for (const property in sortedDict) {
                            count++;
                            if (property == '') {
                                propertiesArray['Not Defined'] = data[date][property];
                                html +=
                                    `<span class="px-4 d-block mb-1">Not Defined <span class="float-end">${data[date][property]}</span></span>`;
                            } else {
                                propertiesArray[property] = data[date][property];
                                html +=
                                    `<span class="px-4 d-block mb-1">${property} <span class="float-end">${data[date][property]}</span></span>`;
                            }
                            loopCount++;
                            if (loopCount >= 4) {
                                break;
                            }
                        }
                        const encodedData = btoa(JSON.stringify(sortedDict));
                        if (loopCount >= 4) {
                            html += `<a href="" class="px-4 d-block text-right mt-3" data-bs-toggle="modal" data-bs-target="#leadsModel_2" onclick="sendModelData('${encodedData}');">All City</a>
                            </div>
                            </div>
                            </div>
                            </div>`;
                        } else {
                            html += `
                            </div>
                            </div>
                            </div>
                            </div>`;
                        }
                    }

                    $(".loader4").hide();
                    initializeSlickSlider('cityWise', html);
                    if (Object.keys(data).length <= 0) {
                        lottieFiles('cityWise');
                    }

                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                    $(".loader4").show();
                }
            });




        }

        // Yearly Details & Bar Chart        
        function getYearlyDataChart() {
            yearSelect = $("#selectYear_chart").val();

            $.ajax({
                url: "{{ route('getYearlyDataChart') }}",
                type: 'GET',
                dataType: 'json',
                data: {
                    yearSelect: yearSelect,
                },
                success: function(response) {
                    const months = Object.keys(response);
                    const total = months.map((month) => response[month].totalcount);
                    const admitted = months.map((month) => response[month].countAdmitted);
                    const documentSubmitted = months.map((month) => response[month].countDocumentSubmitted);
                    const documentReceived = months.map((month) => response[month].countDocumentReceived);
                    const uniOfferRecevied = months.map((month) => response[month].countUniOfferRecevied);

                    $(".loader5").hide();
                    // Destroy chart
                    const oldChart = Chart.getChart("barChart");
                    if (oldChart) {
                        oldChart.destroy();
                    }

                    const ctx = document.getElementById('barChart').getContext('2d');
                    const barChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: months,
                            datasets: [{
                                    label: 'Total Leads',
                                    data: total,
                                    backgroundColor: '#212529',
                                },
                                {
                                    label: 'Document Received',
                                    data: documentReceived,
                                    backgroundColor: '#6c757d',
                                },
                                {
                                    label: 'Application Submitted',
                                    data: documentSubmitted,
                                    backgroundColor: '#0d6efd',
                                },
                                {
                                    label: 'University Offer Recevied',
                                    data: uniOfferRecevied,
                                    backgroundColor: '#0dcaf0',
                                },
                                {
                                    label: 'University Offer Accepted',
                                    data: admitted,
                                    backgroundColor: '#198754',
                                },
                            ],
                        },
                        options: {
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    ticks: {
                                        // stepSize: 50,
                                    },
                                },
                            },
                        },
                    });

                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                    $(".loader5").show();
                }
            });
        }

        function capitalizeFirstLetter(str) {
            return str.charAt(0).toUpperCase() + str.slice(1);
        }

        // City Wise Weekly Details(Model)
        function sendModelData(modelData) {
            const decodedData = JSON.parse(atob(modelData));
            let tableBody = '';
            let totalLeadsRow = '';
            let count = 0;
            for (let key in decodedData) {

                let lead = decodedData[key];
                if (key == null || key.trim() === '') {
                    key = "Not Defined";
                }
                city = capitalizeFirstLetter(key);
                count++;

                tableBody += `
                <tr>
                    <th scope="row">${count}</th>
                    <td>${city}</td>
                    <td>${lead}</td>
                </tr>`;
            }

            $("#leadsCityWise").html(tableBody);
            $("#leadsModel_2").modal("show");
        }

        // Stages Wise Weekly Details(Model)
        function sendModelDataTimeLine(modelData) {
            const decodedData = JSON.parse(atob(modelData));
            let tableBody = '';
            let totalLeadsRow = '';
            let count = 0;
            for (let key in decodedData) {

                let lead = decodedData[key];
                if (key == null || key.trim() === '') {
                    key = "Not Defined";
                }
                city = capitalizeFirstLetter(key);
                count++;

                tableBody += `
                <tr>
                    <th scope="row">${count}</th>
                    <td>${city}</td>
                    <td>${lead}</td>
                </tr>`;
            }

            $("#viewtimeLineWise").html(tableBody);
            $("#leadsModel_3").modal("show");
        }

        function sendModelDataLeads(modelData) {
            const decodedData = JSON.parse(atob(modelData));
            let tableBody = '';
            let count = 0;
            for (let key in decodedData.stages) {

                let lead = decodedData.stages[key];
                if (key == null || key.trim() === '') {
                    key = "Not Defined";
                }
                city = capitalizeFirstLetter(key);
                count++;

                tableBody += `
                <tr>
                    <th scope="row">${count}</th>
                    <td>${city}</td>
                    <td>${lead}</td>
                </tr>`;
            }

            $("#viewStagesTable").html(tableBody);
            $("#viewStages").modal("show");
        }

        function sendModeldocumentsReceived(modelData, t) {

            if (t == "Document Received") {
                decodedData = monthlyData.documentReceived.documentReceived_UserDetails;
            } else if (t == "Application Submitted") {
                decodedData = monthlyData.applicationSubmitted.applicationSubmitted_UserDetails;
            } else if (t == "University Offer Recevied") {
                decodedData = monthlyData.universityOffer.uniOfferReceived_UserDetails;
            } else if (t == "University Offer Accepted") {
                decodedData = monthlyData.universityOfferAccepted.uniOfferAccepted__UserDetails;
            }


            // const decodedData = JSON.parse(atob(modelData));
            let title = 'Customers ' + t;
            let tableBody = '';
            let count = 0;
            for (let key in decodedData) {
                let data = decodedData[key];
                let id = data.candidate_id || "Not Defined";
                let name = data.name || "Not Defined";

                count++;
                $('.hideTheadTbody thead').show();
                $("#tableSearch_Stages").parent().show();
                tableBody += `
                <tr>
                    <th scope="row">${count}</th>
                    <td><a href="/admin/candidate/${id}/edit" target="_blank">${name}</a></td>
                </tr>`;
            }

            // decodedData is blank 
            let objLength = Object.keys(decodedData).length;
            if (objLength <= 0) {

                $('.hideTheadTbody thead').hide();
                $("#tableSearch_Stages").parent().hide();
                tableBody += `<tr>
                    <td colspan=2>No data found</td>
                </tr>`;
            }

            $("#documentsReceived_table").html(tableBody);
            $("#documentsReceived_title").text(title);
            $('#tableSearch_Stages').val("");
            $("#documentsReceived").modal("show");


            let searchInput = $("#tableSearch_Stages");
            let tableRows = $("#documentsReceived_table tr");

            searchInput.on("keyup", function() {
                let filterValue = searchInput.val().toLowerCase();
                tableRows.each(function() {
                    let name = $(this).find("td:nth-child(2)").text().toLowerCase();
                    if (name.includes(filterValue)) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            });
        }

        function initializeSlickSlider(id, html) {
            if ($('#' + id).hasClass('slick-initialized')) {
                $('#' + id).slick('destroy');
            }

            $('#' + id).html(html);

            $('#' + id).slick({
                infinite: false,
                slidesToShow: 4,
                slidesToScroll: 4,
                arrows: true,
                responsive: [{
                        breakpoint: 1380,
                        settings: {
                            slidesToShow: 4,
                            slidesToScroll: 4,
                        }
                    },
                    {
                        breakpoint: 1025,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3,
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                ]
            });
        }

        function lottieFiles(id) {
            const container = $('#' + id);
            // container.empty();
            const lottiePlayer = $('<lottie-player></lottie-player>', {
                'autoplay': true,
                'loop': true,
                'mode': 'normal',
                'src': 'https://lottie.host/e1d613e0-6ff9-447e-b63a-7985878ae6f8/LZEfoda4Mj.json',
                'style': 'width: 320px;',
                'class': 'mx-auto',
            });
            container.append(lottiePlayer);
        }

        function showLoader(id) {
            const container = $('#' + id);
            const lottiePlayer = $('<lottie-player></lottie-player>', {
                'autoplay': true,
                'loop': true,
                'mode': 'normal',
                'src': 'https://lottie.host/ef313c1a-1e2b-4f10-bd52-169dd247c792/iMWYwPf5HD.json',
                'style': 'width: 320px;',
                'class': 'mx-auto',
            });
            container.append(lottiePlayer);
        }

        function hideLoader(id) {
            const loader = $('#' + id);
            loader.hide();
        }

        function sendModelPrefredCountry(users, t) {
            const decodedData = JSON.parse(atob(users));
            // decodedData = {};
            // if (t == "Prefered_country") {
            //     decodedData = preferedCountryData[country_name].intake;
            // }


            let title = 'User List';
            title = t;
            let tableBody = '';
            let count = 0;
            for (let key in decodedData) {
                let id = decodedData[key].id;
                let name = capitalizeFirstLetter(decodedData[key].name);

                count++;
                $('.hideTheadTbody thead').show();
                $("#tableSearch_Stages").parent().show();
                tableBody += `
                <tr>
                    <th scope="row">${count}</th>
                    <td><a href="/admin/candidate/${id}/edit" target="_blank">${name}</a></td>
                </tr>`;
            }

            // decodedData is blank 
            let objLength = Object.keys(decodedData).length;
            if (objLength <= 0) {

                $('.hideTheadTbody thead').hide();
                $("#tableSearch_Stages").parent().hide();
                tableBody += `<tr>
                    <td colspan=2>No data found</td>
                </tr>`;
            }

            $("#documentsReceived_table").html(tableBody);
            $("#documentsReceived_title").text(title);
            $('#tableSearch_Stages').val("");
            $("#documentsReceived").modal("show");


            let searchInput = $("#tableSearch_Stages");
            let tableRows = $("#documentsReceived_table tr");

            searchInput.on("keyup", function() {
                let filterValue = searchInput.val().toLowerCase();
                tableRows.each(function() {
                    let name = $(this).find("td:nth-child(2)").text().toLowerCase();
                    if (name.includes(filterValue)) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            });

        }
    </script>
@endsection

@section('style')
    <style>
        .slick-prev:before,
        .slick-next:before {
            opacity: 1 !important;
            background: black;
        }

        .slick-track {
            margin: unset !important;
        }

        .small-select {
            width: 130px;
        }

        .small-margin {
            margin-right: -6px;
        }

        .icon-size {
            font-size: 19px;
        }

        .lead-button:focus {
            box-shadow: none;
        }

        .lead-button::after {
            background-size: 15px;
            height: 15px;
            width: 15px;
        }

        .lead-box-scroll {
            max-height: 120px;
            overflow: auto;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: #0a65cc;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
        }

        ::-webkit-scrollbar {
            width: 3px;
            height: 3px;
        }

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
        }

        .slick-prev,
        .slick-next {
            z-index: 1;
            background: rgba(44, 42, 42, 0.95) !important;
            height: 25px !important;
            width: 25px !important;
            opacity: 0.6;
            border-radius: 100% !important;
        }

        .slick-prev::before,
        .slick-next::before {
            content: '' !important;
            background: url(/backend/image/CaretLeft-white.svg) no-repeat;
            width: 25px;
            height: 25px;
            background-size: 24px;
            display: block;
        }

        .slick-next {
            -webkit-transform: rotate(180deg) !important;
            transform: rotate(180deg) !important;
        }

        .slick-next {
            right: -20px !important;
        }

        .slick-prev {
            left: -20px !important;
        }

        /* loader */
        .loader1,
        .loader2,
        .loader3,
        .loader4,
        .loader6,
        .loader5 {
            border: 6px solid #f3f3f3;
            border-radius: 50%;
            border-top: 6px solid #3498db;
            width: 50px;
            height: 50px;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
        }

        /* Safari */
        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* .slick-slide .cityCard {
                                                                                                                                                                                                                                        height: 260px !important;
                                                                                                                                                                                                                                    } */
        .cityCard1 {
            height: 200px;
        }

        .pcCard {
            height: 260px;
        }

        .preferedCountryCard {
            height: 260px;
        }

        .custom-modal {
            align-items: center;
            justify-content: center;
        }

        .custom-modal .modal-dialog {
            max-height: 600px;
        }

        #showDivYearlyChart i,
        #showDivCityWise i {
            margin-left: 10px !important;
        }

        /* .info-button-container {
                                                    position: relative;
                                                    top: -30px;
                                                    right: -10px;
                                                }

                                                .info-icon {
                                                    font-size: 24px;
                                                    position: relative;
                                                } */

        /* .info-icon:hover {
                                                        content: "Additional information goes here";
                                                        position: absolute;
                                                        top: -30px;
                                                        left: 32px;
                                                        padding: 4px 8px;
                                                        background-color: #333;
                                                        color: #fff;
                                                        border-radius: 4px;
                                                        white-space: nowrap;
                                                        z-index: 1;
                                                    } */
        .extra-info {
            display: none;
            line-height: 30px;
            font-size: 12px;
            position: absolute;
            top: 0;
            left: 50px;
        }

        .info:hover .extra-info {
            display: block;
        }

        .info {
            font-size: 20px;
            padding-left: 5px;
            width: 20px;
            border-radius: 15px;
        }

        .info:hover {
            background-color: white;
            padding: 0 0 0 5px;
            width: 315px;
            text-align: left !important;
        }

        /* .accordion-button:not(.collapsed) {
                background-color: white;
                color: #black;
            } */
    </style>
@endsection