@extends('admin.layouts.app')
@section('title')
     {{ __('dashboard') }}
@endsection
{{-- @section('breadcrumbs')
    <div class="row mb-2">
        <div class="col-md-2">
            <h1 class="m-0">Agent {{ __('dashboard') }}  
            </h1> 
         
        </div>
        <div class="col-md-6">
                @if (userCan('dashboard.selectAgents'))
                    <div class="col-2 m-0">       
                        <select name="admin_list_id" id="admin_list_id" class="form-control mr-3">
                            <option value="">Select Agent</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>
                @else
                <h2 class="m-0">({{ Auth()->user()->name }})
                </h2> 
              
                <input type="hidden" name="admin_list_id" id="admin_list_id" value="{{ Auth()->user()->id }}">
                @endif  
        </div>
    </div>
@endsection --}}

@section('breadcrumbs')
 <div class="d-flex ">
    <div class="d-inline">
            <h1 class="m-0">Agent {{ __('dashboard') }}  
            </h1> 
         
    </div>
    <div class="d-inline ml-2">
        @if (userCan('dashboard.selectAgents'))
            <div class="">       
                <select name="admin_list_id" id="admin_list_id" class="form-control mr-3">
                    <option value="">Select Agent</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>
        @else
        <h2 class="m-0">({{ Auth()->user()->name }})
        </h2> 
      
        <input type="hidden" name="admin_list_id" id="admin_list_id" value="{{ Auth()->user()->id }}">
        @endif  
    </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">
            <div class="d-flex justify-content-between align-items-center">
                <h3 class="card-title">Application Submited</h3>
                <div class="d-flex justify-content-center align-items-center">
                    <div class="form-group row ml-2">
                        <label for="selectMonth_monthlyApplication"
                            class="col-sm-auto col-form-label small-margin">Month:</label>
                        <div class="col-sm-auto">
                            <select id="selectMonth_monthlyApplication" 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_monthlyApplication"
                            class="col-sm-auto col-form-label small-margin">Year:</label>
                        <div class="col-sm-auto">
                            <select id="selectYear_monthlyApplication" 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 id="container" class="container mt-5">
            <div class="progress px-1" style="height: 3px;">
              <div class="progress-bar application-P1" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="step-container d-flex justify-content-between">

                <div id="applicationstep1"  class="application step-circle inactive"><span>1</span></div>
                <div id="applicationstep2"  class="application step-circle inactive"><span>2</span></div>
                <div id="applicationstep3"  class="application step-circle inactive"><span>3</span></div>
                <div id="applicationstep4"  class="application step-circle inactive"><span>4</span></div>
                <div id="applicationstep5"  class="application step-circle inactive"><span>5</span></div>
                <div id="applicationstep6"  class="application step-circle inactive"><span>6</span></div>
                <div id="applicationstep7"  class="application step-circle inactive"><span>7</span></div>
                <div id="applicationstep8"  class="application step-circle inactive"><span>8</span></div>
                <div id="applicationstep9"  class="application step-circle inactive "><span>9</span></div>
                <div id="applicationstep10" class="application step-circle inactive"><span>10</span></div>
                <div id="applicationstep11" class="application step-circle inactive"><span>11</span></div>
                <div id="applicationstep12" class="application step-circle inactive"><span>12</span></div>
                <div id="applicationstep13" class="application step-circle inactive"><span>13</span></div>
                <div id="applicationstep14" class="application step-circle inactive"><span>14</span></div>
                <div id="applicationstep15" class="application step-circle inactive"><span>15+</span></div>
            </div>
          
          
          </div>
        {{-- <div class="row justify-content-center">
            <div class="col-md-12 col-lg-8 circle-container my-3" id="circleContainerApplication">
                <!-- Circles and lines will be added here dynamically -->
            </div>
        </div> --}}
   
    </div>
    <div class="card">
        <div class="card-header">
        
            <div class="d-flex justify-content-between align-items-center">
                <h3 class="card-title">Admitteds</h3>
                <div class="d-flex justify-content-center align-items-center">
                    <div class="form-group row ml-2">
                        <label for="selectMonth_monthlyConversion"
                            class="col-sm-auto col-form-label small-margin">Month:</label>
                        <div class="col-sm-auto">
                            <select id="selectMonth_monthlyConversion" 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_monthlyConversion"
                            class="col-sm-auto col-form-label small-margin">Year:</label>
                        <div class="col-sm-auto">
                            <select id="selectYear_monthlyConversion" 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 id="container" class="container mt-5">
            <div class="progress px-1" style="height: 3px;">
              <div class="progress-bar conversion-P1" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="step-container d-flex justify-content-between">

                <div id="conversionstep1"  class="conversion step-circle inactive"><span>1</span></div>
                <div id="conversionstep2"  class="conversion step-circle inactive"><span>2</span></div>
                <div id="conversionstep3"  class="conversion step-circle inactive"><span>3</span></div>
                <div id="conversionstep4"  class="conversion step-circle inactive"><span>4</span></div>
                <div id="conversionstep5"  class="conversion step-circle inactive"><span>5+</span></div>
                {{-- <div id="conversionstep6"  class="conversion step-circle inactive"><span>6</span></div>
                <div id="conversionstep7"  class="conversion step-circle inactive"><span>7</span></div>
                <div id="conversionstep8"  class="conversion step-circle inactive"><span>8</span></div>
                <div id="conversionstep9"  class="conversion step-circle inactive "><span>9</span></div>
                <div id="conversionstep10" class="conversion step-circle inactive"><span>10</span></div>
                <div id="conversionstep11" class="conversion step-circle inactive"><span>11</span></div>
                <div id="conversionstep12" class="conversion step-circle inactive"><span>12</span></div>
                <div id="conversionstep13" class="conversion step-circle inactive"><span>13</span></div>
                <div id="conversionstep14" class="conversion step-circle inactive"><span>14</span></div>
                <div id="conversionstep15" class="conversion step-circle inactive"><span>15+</span></div> --}}
            </div>
          
          
          </div>
        {{-- <div class="row justify-content-center">
            <div class="col-md-12 col-lg-8 circle-container my-3" id="circleContainerConversion">
                <!-- Circles and lines will be added here dynamically -->
            </div>
        </div> --}}
    </div>
 
   {{-- 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">Weekly Details(Leads)</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 --}}

<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>
 {{-- Day Details(Leads) --}}
 <div class="card">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <h3 class="card-title">Daily Activity 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>


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


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

@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'));
            getWeeklyData();
            getMonthlyData();
            getTimeLineData();
            getMonthlyDataConversion();
            getMonthlyDataApplication();
            // if (hasWeeklyDetailsPermission) {
            //     getWeeklyData();
            // }
            // if (hasMonthlyDetailsPermission) {
            //     getMonthlyData();
            // }
            // if (hasTimelineDetailsPermission) {
            //     getTimeLineData();
            // }



            $('#admin_list_id').on('change', function() {
            getTimeLineData();
        });
        $('#selectMonth_monthlyGrid, #selectYear_monthlyGrid').change(function() {
                $(".loader2").show();
                getMonthlyData();
            })

            $('#selectMonth_monthlyConversion, #selectMonth_monthlyConversion').change(function() {
                $(".loader4").show();
                getMonthlyDataConversion();
            })
            $('#selectMonth_monthlyApplication, #selectMonth_monthlyApplication').change(function() {
                $(".loader5").show();
                getMonthlyDataApplication();
            })
                // getYearlyDataChart();
                $('#weekSelect,#monthSelect').change(function() {
                $(".loader1").show();
                getWeeklyData();
            })
    
            $('#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();
        //    getTimeLineData(yearSelect,monthSelect,weekSelect,admin_list_id);
        });
        getWeeklyData();

        $('#admin_list_id').on('change', function() {
            getMonthlyData();
            getTimeLineData();
            getWeeklyData();
            getMonthlyDataConversion();
            getMonthlyDataApplication();
        });


            // Stages Wise Weekly Details
            function getTimeLineData() {
            weekSelect = $("#time_lineweekSelect").val();
            monthSelect = $("#time_linemonthSelect").val();
            yearSelect = $("#time_lineyearSelect").val();
            var admin_list_id = $("#admin_list_id").val();
            $.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) {
                    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);
            });

        }


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

           // 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 capitalizeFirstLetter(str) {
            return str.charAt(0).toUpperCase() + str.slice(1);
        }


             // Monthly Details
             var monthlyData = {};

function getMonthlyData() {
    selectMonth = $("#selectMonth_monthlyGrid").val();
    yearSelect = $("#selectYear_monthlyGrid").val();
    var admin_list_id = $("#admin_list_id").val();
    $.ajax({
        url: "{{ route('dashboard.agentGetMonthlyData') }}",
        type: 'GET',
        dataType: 'json',
        data: {
            selectMonth: selectMonth,
            yearSelect: yearSelect,
            admin_list_id: admin_list_id,
        },
        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 Follow up</div>
                            <div class="card-text">${response.totalfollowups}</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();
        }
    });
}


function getMonthlyDataConversion() {
    selectMonth = $("#selectMonth_monthlyConversion").val();
    yearSelect = $("#selectYear_monthlyConversion").val();
    var admin_list_id = $("#admin_list_id").val();
    $('.conversion').removeClass('active');
    $('.conversion').removeClass('inactive');
      $('.conversion-P1').css('width','0%');
    $.ajax({
        url: "{{ route('dashboard.getMonthlyDataConversion') }}",
        type: 'GET',
        dataType: 'json',
        data: {
            selectMonth: selectMonth,
            yearSelect: yearSelect,
            admin_list_id: admin_list_id,
        },
        success: function(response) {

        $(".loader4").hide();
        const applicationAdmitteds = response.applicationAdmitted;
            
            // Loop through steps and add 'active' class
          
           
            for (let i = 1; i <= applicationAdmitteds; i++) {
                let width = (window.innerWidth <1200) ? 13 : 13;
                $('#conversionstep' + i).addClass('active');         
                $('.conversion-P1').css('width',(i*width)+'%');
                
            }
            // Clear existing content from circleContainer
            // const circleContainer = document.getElementById('circleContainerConversion');
            // circleContainer.innerHTML = '';

            // // Create rows and add circle elements and lines to the container
            // for (let i = 0; i < Math.ceil(applicationAdmitted / circlesPerRow); i++) {
            //     const circleRow = document.createElement('div');
            //     circleRow.className = 'row justify-content-center';

            //     for (let j = 0; j < circlesPerRow; j++) {
            //         const circleIndex = i * circlesPerRow + j;

            //         if (circleIndex >= applicationAdmitted) {
            //             break;
            //         }

            //         const circle = document.createElement('div');
            //         circle.className = 'circle';
            //         circle.innerText = (circleIndex + 1).toString();

            //         // Add a line except for the last circle in the row
            //         if (j !== circlesPerRow - 1 && circleIndex !== applicationAdmitted - 1) {
            //             const line = document.createElement('div');
            //             line.className = 'line';
            //             circle.appendChild(line);
            //         }

            //         circleRow.appendChild(circle);
            //     }

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

function getMonthlyDataApplication() {
    selectMonth = $("#selectMonth_monthlyApplication").val();
    yearSelect = $("#selectYear_monthlyApplication").val();
    var admin_list_id = $("#admin_list_id").val();
    $('.application').removeClass('active')
    $('.application').removeClass('inactive');
    $('.application-P1').css('width','0%');
    $.ajax({
        url: "{{ route('dashboard.getMonthlyDataApplication') }}",
        type: 'GET',
        dataType: 'json',
        data: {
            selectMonth: selectMonth,
            yearSelect: yearSelect,
            admin_list_id: admin_list_id,
        },
        success: function(response) {
            $(".loader5").hide();
            const applicationAdmitted = response.applicationSubmitted;
            const circlesPerRow = 15;

            for (let i = 1; i <= applicationAdmitted; i++) {
                console.log('applicationAdmitted ' + i, applicationAdmitted);
                let width = (window.innerWidth >1600) ? 5 : 5;
                $('#applicationstep' + i).addClass('active');
                $('.application-P1').css('width',(i*width)+'%');
            }

            // Clear existing content from circleContainer
            // const circleContainer = document.getElementById('circleContainerApplication');
            // circleContainer.innerHTML = '';

            // // Create rows and add circle elements and lines to the container
            // for (let i = 0; i < Math.ceil(applicationAdmitted / circlesPerRow); i++) {
            //     const circleRow = document.createElement('div');
            //     circleRow.className = 'row justify-content-center';

            //     for (let j = 0; j < circlesPerRow; j++) {
            //         const circleIndex = i * circlesPerRow + j;

            //         if (circleIndex >= applicationAdmitted) {
            //             break;
            //         }

            //         const circle = document.createElement('div');
            //         circle.className = 'circle';
            //         circle.innerText = (circleIndex + 1).toString();

            //         // Add a line except for the last circle in the row
            //         if (j !== circlesPerRow - 1 && circleIndex !== applicationAdmitted - 1) {
            //             const line = document.createElement('div');
            //             line.className = 'line';
            //             circle.appendChild(line);
            //         }

            //         circleRow.appendChild(circle);
            //     }

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





     // Weekly Details
     function getWeeklyData() {
            yearSelect = $("#yearSelect").val();
            monthSelect = $("#monthSelect").val();
            weekSelect = $("#weekSelect").val();
            var admin_list_id = $("#admin_list_id").val();
           
            $.ajax({
                url: "{{ route('dashboard.agentGetWeeklyData') }}",
                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 = '';
                    
                    for (const date in data.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">
                                    <h6 class="px-3 pt-2">Total Follow UP <span class="float-end fw-bold">${data.data[date]['totalFollowUP']}</span></h6>
                                    </div>
                                <div class="mt-1 mb-3">`;

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

                        let loopCount = 0;
                        for (const property in data.data[date]) {
                            if (property !== 'totalFollowUP' && property !== 'totalUsers') {
                                count++;
                                if (property == '') {
                                    propertiesArray['Not Defined'] = data.data[date][property];
                                    html +=
                                        `<span class="px-4 d-block mb-1">Not Defined <span class="float-end">${data.data[date][property]}</span></span>`;
                                } else {
                                    propertiesArray[property] = data.data[date][property];
                                    html +=
                                        `<span class="px-4 d-block mb-1">${property} <span class="float-end">${data.data[date][property]}</span></span>`;
                                }
                                loopCount++;
                              
                            }
                        }
                        const encodedData = btoa(JSON.stringify(data.data[date]));
                        html += `
                        </div>
                        </div>
                        <div class="mt-1 mb-3">
                                    
                                    </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);
            });
        }

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



</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;
        }
        .circle-container {
      display: flex;
      flex-wrap: wrap;
    }

    .circle-row {
      display: flex;
      margin-right: -15px;
      margin-left: 25px;
    }

    .circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: blue;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: white;
      position: relative;
      margin: 10px;
    }

    .line {
      width: 30px;
      height: 2px;
      background-color: black;
      position: absolute;
      top: 50%;
      left: 100%;
      transform: translate(0, -50%);
    }


    #container {
  max-width: 850px;  
}

    .step-container {
      position: relative;
      text-align: center;
      transform: translateY(-43%);
    }

    .step-circle.active {
  /* color: green; */
  background-color: #007bff;
  /* position: absolute; */
      top: 16px;
      left: 50px;
      /* width: calc(100% - 100px); */
      /* height: 2px; */
      background-color: #007bff;
      z-index: -1;
}

    .step-circle.inactive {
        width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #fff;
      border: 2px solid #007bff;
      line-height: 30px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      cursor: pointer; /* Added cursor pointer */
    }


    .step-circle {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #fff;
      border: 2px solid #007bff;
      line-height: 30px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      cursor: pointer; /* Added cursor pointer */
    }

    .step-line {
      position: absolute;
      top: 16px;
      left: 50px;
      width: calc(100% - 100px);
      height: 2px;
      background-color: #007bff;
      z-index: -1;
    }
    


    </style>
@endsection