@extends('admin.layouts.app')
@section('title')
    Lead Management
@endsection

@section('content')
    {{-- map --}}
    @if (userCan('leadmgt.map'))
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Map Data</h3>
                    <div class="d-flex justify-content-center align-items-center">

                        <div class="form-group row ml-2">
                            <label for="selectMonth_mapData" class="col-sm-auto col-form-label small-margin">Month:</label>
                            <div class="col-sm-auto">
                                <select id="selectMonth_mapData" 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_mapData" class="col-sm-auto col-form-label small-margin">Year:</label>
                            <div class="col-sm-auto">
                                <select id="selectYear_mapData" 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="mapData">
                <div id="map" class="mapDataLoader1 w-100 m-4" style="height: 400px;"></div>
            </div>
        </div>
    @endif

    {{-- City Data --}}
    @if (userCan('leadmgt.city'))
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h3 class="card-title">City Data</h3>
                    <div class="d-flex justify-content-center align-items-center">
                        <div class="form-group row ml-2">
                            <label for="selectWeek_cityData" class="col-sm-auto col-form-label small-margin">Week:</label>
                            <div class="col-sm-auto">
                                <select id="selectWeek_cityData" 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="selectMonth_cityData" class="col-sm-auto col-form-label small-margin">Month:</label>
                            <div class="col-sm-auto">
                                <select id="selectMonth_cityData" 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_cityData" class="col-sm-auto col-form-label small-margin">Year:</label>
                            <div class="col-sm-auto">
                                <select id="selectYear_cityData" 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="cityData">
                <div class="cityDataLoader mx-auto my-1" style="display: none;"></div>
            </div>
        </div>
    @endif

    {{-- State Data --}}
    @if (userCan('leadmgt.state'))
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h3 class="card-title">State Data</h3>
                    <div class="d-flex justify-content-center align-items-center">
                        <div class="form-group row ml-2">
                            <label for="selectWeek_stateData" class="col-sm-auto col-form-label small-margin">Week:</label>
                            <div class="col-sm-auto">
                                <select id="selectWeek_stateData" 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="selectMonth_stateData"
                                class="col-sm-auto col-form-label small-margin">Month:</label>
                            <div class="col-sm-auto">
                                <select id="selectMonth_stateData" 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_stateData" class="col-sm-auto col-form-label small-margin">Year:</label>
                            <div class="col-sm-auto">
                                <select id="selectYear_stateData" 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="stateData">
                <div class="stateDataLoader mx-auto my-1" style="display: none;"></div>
            </div>
        </div>
    @endif

    {{-- Country Data --}}
    @if (userCan('leadmgt.country'))
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Country Data</h3>
                    <div class="d-flex justify-content-center align-items-center">
                        <div class="form-group row ml-2">
                            <label for="selectWeek_countryData"
                                class="col-sm-auto col-form-label small-margin">Week:</label>
                            <div class="col-sm-auto">
                                <select id="selectWeek_countryData" 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="selectMonth_countryData"
                                class="col-sm-auto col-form-label small-margin">Month:</label>
                            <div class="col-sm-auto">
                                <select id="selectMonth_countryData" 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_countryData"
                                class="col-sm-auto col-form-label small-margin">Year:</label>
                            <div class="col-sm-auto">
                                <select id="selectYear_countryData" 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="countryData">
                <div class="countryDataLoader mx-auto my-1" style="display: none;"></div>
            </div>
        </div>
    @endif

    {{-- Agent Data By Admin --}}
    @if (userCan('leadmgt.agent'))
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Agent Data</h3>
                    <div class="d-flex justify-content-center align-items-center">

                        <div class="form-group row ml-2">
                            <label for="selectAgent_agentDataByAdmin"
                                class="col-sm-auto col-form-label small-margin">Agents</label>
                            <div class="col-sm-auto">
                                <select id="selectAgent_agentDataByAdmin" class="form-select small-select"
                                    aria-label="Default select example">
                                    <option value="">Select Agent</option>
                                    @foreach ($agents as $agent)
                                        <option value="{{ $agent->id }}">{{ ucfirst($agent->name) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group row ml-2">
                            <label for="selectWeek_agentDataByAdmin"
                                class="col-sm-auto col-form-label small-margin">Week:</label>
                            <div class="col-sm-auto">
                                <select id="selectWeek_agentDataByAdmin" 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="selectMonth_agentDataByAdmin"
                                class="col-sm-auto col-form-label small-margin">Month:</label>
                            <div class="col-sm-auto">
                                <select id="selectMonth_agentDataByAdmin" 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_agentDataByAdmin"
                                class="col-sm-auto col-form-label small-margin">Year:</label>
                            <div class="col-sm-auto">
                                <select id="selectYear_agentDataByAdmin" 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="agentDataByAdmin">
                <div class="agentDataLoaderByAdmin mx-auto my-1" style="display: none;"></div>
            </div>
        </div>
    @endif

    {{-- City Data Model --}}
    <div class="modal fade custom-modal" id="cityDataModel" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-labelledby="cityDataModel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modelTitle"></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="cityDataTableBody">

                        </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/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@0.4.0/dist/lottie-player.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsvectormap/dist/css/jsvectormap.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/jsvectormap"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsvectormap/dist/maps/world.js"></script>

    <script>
        $(document).ready(function() {
            $(".mapDataLoader,.cityDataLoader,.stateDataLoader,.countryDataLoader,.agentDataLoaderByAdmin").show();

            var hasMapDataPermission = @json(userCan('leadmgt.map'));
            var hasCityDataPermission = @json(userCan('leadmgt.city'));
            var hasStateDataPermission = @json(userCan('leadmgt.state'));
            var hasCountryDataPermission = @json(userCan('leadmgt.country'));
            var hasAgentDataPermission = @json(userCan('leadmgt.agent'));


            if (hasMapDataPermission) {
                getMapData();
            }
            if (hasCityDataPermission) {
                getCityData();
            }
            if (hasStateDataPermission) {
                getStateData();
            }
            if (hasCountryDataPermission) {
                getCountryData();
            }
            if (hasAgentDataPermission) {
                getAgentDataByAdmin();
            }

            $('#selectMonth_mapData, #selectYear_mapData').change(function() {
                $(".mapDataLoader").show();
                getMapData();
            })
            $('#selectWeek_cityData, #selectMonth_cityData, #selectYear_cityData').change(function() {
                $(".cityDataLoader").show();
                getCityData();
            })
            $('#selectWeek_stateData, #selectMonth_stateData, #selectYear_stateData').change(function() {
                $(".stateDataLoader").show();
                getStateData();
            })
            $('#selectWeek_countryData, #selectMonth_countryData, #selectYear_countryData').change(function() {
                $(".countryDataLoader").show();
                getCountryData();
            })
            $('#selectWeek_agentDataByAdmin, #selectMonth_agentDataByAdmin, #selectYear_agentDataByAdmin,#selectAgent_agentDataByAdmin')
                .change(function() {
                    $(".agentDataLoaderByAdmin").show();
                    getAgentDataByAdmin();
                })

        });
    </script>

    <script>
        // Map Data
        function getMapData() {
            monthSelect = $("#selectMonth_mapData").val();
            yearSelect = $("#selectYear_mapData").val();

            $.ajax({
                url: "{{ route('lead.getMapData') }}",
                type: 'GET',
                dataType: 'json',
                data: {
                    yearSelect: yearSelect,
                    monthSelect: monthSelect,
                },
                success: function(data) {
                    let leads = data;
                    document.getElementById('map').innerHTML = '';
                    $(".mapDataLoader").hide();

                    // if (jvm && typeof jvm.destroy === 'function') {
                    //     console.log("jvm.destroy");
                    //     $("#map").jsVectorMap('get', 'mapObject').remove();
                    //     jvm.destroy();
                    //     jvm.reset();
                    // }

                    var jvm = new jsVectorMap({
                        selector: "#map",
                        zoomButtons: true,
                        zoomOnScroll: true,

                        regionStyle: {
                            initial: {
                                fill: "#d1d5db"
                            }
                        },

                        labels: {
                            markers: {
                                render: (marker) => marker.name
                            }
                        },

                        markersSelectable: true,
                        markers: leads,
                        markerStyle: {
                            initial: {
                                fill: "#5c5cff"
                            },
                            selected: {
                                fill: "#ff5050"
                            }
                        },
                        markerLabelStyle: {
                            initial: {
                                fontFamily: "Roboto",
                                fontWeight: 400,
                                fontSize: 13
                            }
                        },

                        onMarkerTipShow: function(event, label, index) {
                            label.html(leads[index].name + "<br/>" + leads[index].count);
                        }
                    });

                    // To reset the map:
                    // jvm.reset();

                    // // To destroy the map:
                    // jvm.destroy();


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




        }

        // City Data     
        var cityData = {};

        function getCityData() {
            weekSelect = $("#selectWeek_cityData").val();
            monthSelect = $("#selectMonth_cityData").val();
            yearSelect = $("#selectYear_cityData").val();

            $.ajax({
                url: "{{ route('lead.getCityData') }}",
                type: 'GET',
                dataType: 'json',
                data: {
                    yearSelect: yearSelect,
                    monthSelect: monthSelect,
                    weekSelect: weekSelect,
                },
                success: function(data) {
                    cityData = 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 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" onclick="sendCityModelData('${date}','cityData');">All City</a>
                            </div>
                            </div>
                            </div>
                            </div>`;
                        } else {
                            html += `
                            </div>
                            </div>
                            </div>
                            </div>`;
                        }
                    }

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

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




        }

        var stateData = {};

        function getStateData() {
            weekSelect = $("#selectWeek_stateData").val();
            monthSelect = $("#selectMonth_stateData").val();
            yearSelect = $("#selectYear_stateData").val();

            $.ajax({
                url: "{{ route('lead.getStateData') }}",
                type: 'GET',
                dataType: 'json',
                data: {
                    yearSelect: yearSelect,
                    monthSelect: monthSelect,
                    weekSelect: weekSelect,
                },
                success: function(data) {
                    stateData = 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 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" onclick="sendCityModelData('${date}','stateData');">All States</a>
                            </div>
                            </div>
                            </div>
                            </div>`;
                        } else {
                            html += `
                            </div>
                            </div>
                            </div>
                            </div>`;
                        }
                    }

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

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




        }

        var countryData = {};

        function getCountryData() {
            weekSelect = $("#selectWeek_countryData").val();
            monthSelect = $("#selectMonth_countryData").val();
            yearSelect = $("#selectYear_countryData").val();

            $.ajax({
                url: "{{ route('lead.getCountryData') }}",
                type: 'GET',
                dataType: 'json',
                data: {
                    yearSelect: yearSelect,
                    monthSelect: monthSelect,
                    weekSelect: weekSelect,
                },
                success: function(data) {
                    countryData = data;
                    // console.log("getCountryData",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 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" onclick="sendCityModelData('${date}','countryData');">All Countries</a>
                            </div>
                            </div>
                            </div>
                            </div>`;
                        } else {
                            html += `
                            </div>
                            </div>
                            </div>
                            </div>`;
                        }
                    }

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

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




        }

        var agentDataByAdmin = {};

        function getAgentDataByAdmin() {
            weekSelect = $("#selectWeek_agentDataByAdmin").val();
            monthSelect = $("#selectMonth_agentDataByAdmin").val();
            yearSelect = $("#selectYear_agentDataByAdmin").val();
            agent_ID = $("#selectAgent_agentDataByAdmin").val();

            $.ajax({
                url: "{{ route('lead.getAgentDataByAdmin') }}",
                type: 'GET',
                dataType: 'json',
                data: {
                    yearSelect: yearSelect,
                    monthSelect: monthSelect,
                    weekSelect: weekSelect,
                    agent_ID: agent_ID,
                },
                success: function(data) {
                    agentDataByAdmin = 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 >= 4) {
                                break;
                            }
                        }
                        // const encodedData = btoa(JSON.stringify(sortedDict));

                        if (loopCount >= 4) {
                            html += `<a href="#" class="px-4 d-block text-right mt-3" onclick="sendCityModelData('${date}','agentDataByAdmin');">All Stages</a>
                            </div>
                            </div>
                            </div>
                            </div>`;
                        } else {
                            html += `
                            </div>
                            </div>
                            </div>
                            </div>`;
                        }
                    }

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

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

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

        // City Wise Weekly Details(Model)
        function sendCityModelData(date, t) {

            let decodedData = {};
            let modelTitle = '';
            if (t == "cityData") {
                decodedData = cityData[date];
                modelTitle = "Cities";
            } else if (t == "stateData") {
                decodedData = stateData[date];
                modelTitle = "States";
            } else if (t == "countryData") {
                decodedData = countryData[date];
                modelTitle = "Countries";
            } else if (t == "agentDataByAdmin") {
                decodedData = agentDataByAdmin[date];
                modelTitle = "Agents";
            }

            $("#modelTitle").text(modelTitle);
            // const decodedData = JSON.parse(atob(modelData));
            // console.log("modelData",stateData)
            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>`;
            }

            $("#cityDataTableBody").html(tableBody);
            $("#cityDataModel").modal("show");
        }

        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);
        }
    </script>
@endsection

@section('style')
    <style>
        .mapDataLoader,
        .cityDataLoader,
        .stateDataLoader,
        .countryDataLoader,
        .agentDataLoader,
        .agentDataLoaderByAdmin {
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #3498db;
            width: 120px;
            height: 120px;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
        }

        .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;
        }



        @-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;
        }

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

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

        #showDivYearlyChart i,
        #showDivCityWise i {
            margin-left: 10px !important;
        }
    </style>
@endsection