@extends('admin.layouts.app')
@section('title')
     {{ __('dashboard') }}
@endsection
@section('breadcrumbs')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1 class="m-0">Agent {{ __('dashboard') }}</h1> 
            <br>
            <div class="row">
                <div class="col-2">
                    <label>Assign To</label>
                    <select name="admin_list_id" id="admin_list_id" class="form-control mr-3">
                        <option value="">Select Assign To</option>
                        @foreach ($admin_list as $option)
                            @if (!@empty($option))
                                <option value="{{ $option['id'] }}"
                                    {{ Auth()->user()->id == $option['id'] ? 'selected' : '' }}>
                                    {{ $option['name'] }}
                                </option>
                            @endif
                        @endforeach
                    </select>
                </div>
            </div>
            
        </div>
    </div>
@endsection
@section('content')
    @if ($appSetup->where('status', 0)->count())
        <x-setup-guide />
    @endif

    {{-- no permission --}}
    @if (
        !userCan('admin.Dashboard.agent') &&
            !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

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Application Submited</h3>
        </div>
        <div class="card-body">

        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Conversion</h3>
        </div>
        <div class="card-body">

        </div>
    </div>
      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

  <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>

@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('admin.Dashboard.agent'));
            // var hasMonthlyDetailsPermission = @json(userCan('dashboard.monthly_details'));
            // var hasTimelineDetailsPermission = @json(userCan('dashboard.timeline_details'));

            if (hasWeeklyDetailsPermission) {
                agentDataDashboard();
            }
            // 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();
                var  yearSelect = $("#yearSelect").val();
                var  monthSelect = $("#monthSelect").val();
                var  weekSelect = $("#weekSelect").val();
                var admin_list_id = $("#admin_list_id").val();
                agentDataDashboard(yearSelect,monthSelect,weekSelect,admin_list_id);
            
            })

            $("#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>
     $(document).ready(function() {
            var  yearSelect = $("#yearSelect").val();
            var  monthSelect = $("#monthSelect").val();
            var  weekSelect = $("#weekSelect").val();
           var admin_list_id = $("#admin_list_id").val();
           agentDataDashboard(yearSelect,monthSelect,weekSelect,admin_list_id);
        });

        $('#admin_list_id').on('change', function() {
            var selectedOption = $(this).val();
            var  yearSelect = $("#yearSelect").val();
            var  monthSelect = $("#monthSelect").val();
            var  weekSelect = $("#weekSelect").val();
           agentDataDashboard(yearSelect,monthSelect,weekSelect,selectedOption);
        });



        // Weekly Details
        function agentDataDashboard(yearSelect,monthSelect,weekSelect,admin_list_id) {
            $.ajax({
                url: "{{ route('dashboard.agentDataDashboard') }}",
                type: 'GET',
                dataType: 'json',
                data: {
                    yearSelect: yearSelect,
                    monthSelect: monthSelect,
                    weekSelect: weekSelect,
                    admin_list_id: admin_list_id,
                },
                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 User <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 />`;


                        // 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>`;
                        
                        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 >= 0) {
                            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>`;
                        }
                        // 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="sendModelDataLeads('${encodedData}');">All Stages</a>
                        // </div>
                        // </div>
                        // </div>
                        // </div>`;
                        // } else {
                        //     html += `
                        // </div>
                        // </div>
                        // </div>
                        // </div>`;
                        // }
                    }

                    $(".loader3").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);
            });
        }
        // 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");
        //     $("#viewtimeLineWise").html(tableBody);
        //     $("#leadsModel_3").modal("show");
            
        // }

        function sendModelDataTimeLine(modelData) {
            const decodedData = JSON.parse(atob(modelData));
            console.log("test".decodedData);
            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 capitalizeFirstLetter(str) {
            return str.charAt(0).toUpperCase() + str.slice(1);
        }

        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
                        }
                    }
                ]
            });
        }

</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);
            }
        }
                                                                                                                                                                                                                     } */
        .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;
        }

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

    </style>
@endsection