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

    <div class="container-fluid my-dashboard">
        <div class="top">
            <p class="head-name">My Dashboard</p>
            <div class="dropdown-list">
                <img src="{{ asset('backend') }}/loader/three-dot-loader.gif" style="height: 32px;margin: 0 15px;display:none" class="loader">
                <div class="single-list filter-select-row">
                    @if(userCan('admin.assign_list') || userCan('admin.assign'))
                        <select name="assign_to" id="assign_to" class="select2" onchange="updateDateRange()">
                            <option value="">Select Assign To</option>

                            @foreach (array_filter($admin_list, function ($item) {return $item['status'] == 1;}) as $option)
                                @if (!@empty($option))
                                    <option value="{{ $option['id'] }}"
                                        {{ old('assign_to', Auth::user()->id) === $option['id'] ? 'selected' : '' }}>
                                        {{ $option['name'] }}
                                    </option>
                                @endif
                            @endforeach
                        </select>
                    @endif
                    {{-- <input type="text" class="input-field" name="" id="" readonly placeholder="Date To - From"> --}}
                    <input type="text" id="daterange" name="daterange" value="{{ $dateRange }}" class="input-field"
                        autocomplete="off" id="my_txtbox" placeholder="Date To - From" readonly />
                </div>

                {{-- <div class="single-list">
                <select class="select2" name="" id="">
                    <option value="" selected disabled>Year</option>
                    <option value="">2021</option>
                    <option value="">2022</option>
                    <option value="">2023</option>
                </select>
            </div>

            <div class="single-list">
                <select class="select2 select-list" name="" id="">
                    <option value="" selected disabled>Month</option>
                    <option value="">January</option>
                    <option value="">February</option>
                    <option value="">March</option>
                    <option value="">April</option>
                    <option value="">May</option>
                    <option value="">June</option>
                    <option value="">July</option>
                    <option value="">August</option>
                    <option value="">September</option>
                    <option value="">October</option>
                    <option value="">November</option>
                    <option value="">December</option>
                </select>
            </div> --}}
            </div>
        </div>

        {{-- <div class="common-box range-wrpr">
            <div class="left-table" style="display: none">
                <p class="table-title">Targets</p>

                <table class="common-table">
                    <thead>
                        <tr>
                            <th class="table-head">Type</th>
                            <th class="table-head">Target</th>
                            <th class="table-head">Submitted</th>
                            <th class="table-head">Successful</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td class="table-col">Application</td>
                            <td class="table-col">10</td>
                            <td class="table-col pointer" id="applicationSubmitted">0</td>
                            <td class="table-col pointer" id="applicationSuccessful">0</td>
                        </tr>

                        <tr>
                            <td class="table-col">Visa</td>
                            <td class="table-col">5</td>
                            <td class="table-col pointer" id="visaSubmitted">0</td>
                            <td class="table-col pointer" id="visaSuccessful">0</td>
                        </tr>
                    </tbody>

                </table>

            </div>

            <div class="right-bar">
                <div class="slider-list">
                    <p class="label">Application</p>
                    <div class="slider-item">
                        <input type="range" class="range-slider" name="submitted" id="app_submitted-range" min="1"
                            max="10" value="0">
                        <input type="range" class="range-slider above" name="successful" id="app_success-range" min="1"
                            max="10" value="0">
                        <input type="range" class="range-slider above incentive" name="app_incentive_value" id="app_incentive_value" min="1"
                            max="10" value="5" disabled>

                        <div class="scales-values">
                            <span class="value">1</span><span class="value">2</span><span class="value">3</span><span
                                class="value">4</span><span class="value">5</span><span class="value">6</span><span
                                class="value">7</span><span class="value">8</span><span class="value">9</span><span
                                class="value" id="applicationSubmittedSuccessfulTotal">10</span>
                        </div>
                    </div>
                </div>

                <div class="slider-list">
                    <p class="label">Visa</p>
                    <div class="slider-item">
                        <input type="range" class="range-slider" name="submitted" id="visa_submitted-range" min="1"
                            max="5" value="0">
                        <input type="range" class="range-slider above" name="successful" id="visa_success-range" min="1"
                            max="5" value="0">
                        <input type="range" class="range-slider above incentive" name="visa_incentive_value" id="visa_incentive_value" min="1"
                            max="5" value="3" disabled>

                        <div class="scales-values">
                            <span class="value">1</span><span class="value">2</span><span class="value">3</span><span
                                class="value">4</span><span class="value" id="visaSubmittedSuccessfulTotal">5</span>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
       {{-- Today Yesterday new code start  --}}
        {{-- <div class="common-box slide-box">
            <!--New-->
            <div class="left-table">
                <table class="common-table">
                    <thead>
                        <tr>
                            <th class="table-head"></th>
                            <th class="table-head">Today</th>
                            <th class="table-head">Yesterday</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td class="table-col">Leads</td>
                            <td class="table-col">10</td>
                            <td class="table-col pointer">6</td>
                        </tr>

                        <tr>
                            <td class="table-col">Follow-Ups</td>
                            <td class="table-col">10</td>
                            <td class="table-col pointer">10</td>
                        </tr>
                    </tbody>

                </table>
            </div>

            <div class="right-slider">
                <p class="sub-head">Intake time is running out! Find your dream University now</p>

                <div class="slide-list">
                    <p class="single-slide">Start applying to the interested colleges and universities to get an admit on
                        time. Find courses and universities from our advanced AI tools.Start applying to the interested
                        colleges and universities to get an admit on time. Find courses and universities from our advanced
                        AI tools.
                    </p>

                    <p class="single-slide">Start applying to the interested colleges and universities to get an admit on
                        time. Find courses and universities from our advanced AI tools.Start applying to the interested
                        colleges and universities to get an admit on time. Find courses and universities from our advanced
                        AI tools.
                    </p>
                </div>

                <a href="javascript:;" class="view-all-feeds">View All Feeds</p>
            </div>
        </div> --}}
   {{-- Today Yesterday new code end  --}}
        <div class="chart-section">
            <div class="chart-table common-box">
                <p class="table-title">Stage Wise Report <span class="total">Total Lead: <span class="totalLeed"></span>
                </p>

                <div class="table-list">
                    <ul class="head-list">
                        <li class="sub-li-item">Stage Name</li>
                        <li class="sub-li-item">No. of Customer</li>
                        <li class="sub-li-item">%</li>
                        <li class="sub-li-item"></li>
                    </ul>
                    <span id="getStageWiseReportData">

                    </span>


                    {{-- <ul class="item-list">
                    <li class="acc-head active">
                        <ul class="sub-list">
                            <li class="sub-li-item">Inquiry Stage</li>
                            <li class="sub-li-item">500</li>
                            <li class="sub-li-item">100%</li>
                            <li class="sub-li-item"><span class="accordion-btn"></span></li>
                        </ul>
                    </li>
                    <li class="acc-list show">
                        <ul class="sub-list">
                            <li class="sub-li-item">Counselling</li>
                            <li class="sub-li-item">150</li>
                            <li class="sub-li-item">20%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">Document Received</li>
                            <li class="sub-li-item">80</li>
                            <li class="sub-li-item">10%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">Document Pending</li>
                            <li class="sub-li-item">250</li>
                            <li class="sub-li-item">5%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">University to be Suggested</li>
                            <li class="sub-li-item">15</li>
                            <li class="sub-li-item">2%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">University Suggested</li>
                            <li class="sub-li-item">05</li>
                            <li class="sub-li-item">1%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>
                    </li>
                </ul>

                <ul class="item-list">
                    <li class="acc-head">
                        <ul class="sub-list">
                            <li class="sub-li-item">Application Stage</li>
                            <li class="sub-li-item">100</li>
                            <li class="sub-li-item">50%</li>
                            <li class="sub-li-item"><span class="accordion-btn"></span></li>
                        </ul>
                    </li>
                    <li class="acc-list">
                        <ul class="sub-list">
                            <li class="sub-li-item">Counselling</li>
                            <li class="sub-li-item">150</li>
                            <li class="sub-li-item">20%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">Document Received</li>
                            <li class="sub-li-item">80</li>
                            <li class="sub-li-item">10%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">Document Pending</li>
                            <li class="sub-li-item">250</li>
                            <li class="sub-li-item">5%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">University to be Suggested</li>
                            <li class="sub-li-item">15</li>
                            <li class="sub-li-item">2%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">University Suggested</li>
                            <li class="sub-li-item">05</li>
                            <li class="sub-li-item">1%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>
                    </li>
                </ul>

                <ul class="item-list">
                    <li class="acc-head">
                        <ul class="sub-list">
                            <li class="sub-li-item">Application Stage</li>
                            <li class="sub-li-item">100</li>
                            <li class="sub-li-item">50%</li>
                            <li class="sub-li-item"><span class="accordion-btn"></span></li>
                        </ul>
                    </li>
                    <li class="acc-list">
                        <ul class="sub-list">
                            <li class="sub-li-item">Counselling</li>
                            <li class="sub-li-item">150</li>
                            <li class="sub-li-item">20%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">Document Received</li>
                            <li class="sub-li-item">80</li>
                            <li class="sub-li-item">10%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">Document Pending</li>
                            <li class="sub-li-item">250</li>
                            <li class="sub-li-item">5%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">University to be Suggested</li>
                            <li class="sub-li-item">15</li>
                            <li class="sub-li-item">2%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">University Suggested</li>
                            <li class="sub-li-item">05</li>
                            <li class="sub-li-item">1%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>
                    </li>
                </ul>

                <ul class="item-list">
                    <li class="acc-head">
                        <ul class="sub-list">
                            <li class="sub-li-item">Offer Stage</li>
                            <li class="sub-li-item">20</li>
                            <li class="sub-li-item">10%</li>
                            <li class="sub-li-item"><span class="accordion-btn"></span></li>
                        </ul>
                    </li>
                    <li class="acc-list">
                        <ul class="sub-list">
                            <li class="sub-li-item">Counselling</li>
                            <li class="sub-li-item">150</li>
                            <li class="sub-li-item">20%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">Document Received</li>
                            <li class="sub-li-item">80</li>
                            <li class="sub-li-item">10%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">Document Pending</li>
                            <li class="sub-li-item">250</li>
                            <li class="sub-li-item">5%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">University to be Suggested</li>
                            <li class="sub-li-item">15</li>
                            <li class="sub-li-item">2%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">University Suggested</li>
                            <li class="sub-li-item">05</li>
                            <li class="sub-li-item">1%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>
                    </li>
                </ul>
                <ul class="item-list">
                    <li class="acc-head">
                        <ul class="sub-list">
                            <li class="sub-li-item">Visa Stage</li>
                            <li class="sub-li-item">05</li>
                            <li class="sub-li-item">10%</li>
                            <li class="sub-li-item"><span class="accordion-btn"></span></li>
                        </ul>
                    </li>
                    <li class="acc-list">
                        <ul class="sub-list">
                            <li class="sub-li-item">Counselling</li>
                            <li class="sub-li-item">150</li>
                            <li class="sub-li-item">20%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">Document Received</li>
                            <li class="sub-li-item">80</li>
                            <li class="sub-li-item">10%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">Document Pending</li>
                            <li class="sub-li-item">250</li>
                            <li class="sub-li-item">5%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">University to be Suggested</li>
                            <li class="sub-li-item">15</li>
                            <li class="sub-li-item">2%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">University Suggested</li>
                            <li class="sub-li-item">05</li>
                            <li class="sub-li-item">1%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>
                    </li>
                </ul>
                <ul class="item-list">
                    <li class="acc-head">
                        <ul class="sub-list">
                            <li class="sub-li-item">Invoice Stage</li>
                            <li class="sub-li-item">02</li>
                            <li class="sub-li-item">10%</li>
                            <li class="sub-li-item"><span class="accordion-btn"></span></li>
                        </ul>
                    </li>
                    <li class="acc-list">
                        <ul class="sub-list">
                            <li class="sub-li-item">Counselling</li>
                            <li class="sub-li-item">150</li>
                            <li class="sub-li-item">20%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">Document Received</li>
                            <li class="sub-li-item">80</li>
                            <li class="sub-li-item">10%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">Document Pending</li>
                            <li class="sub-li-item">250</li>
                            <li class="sub-li-item">5%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">University to be Suggested</li>
                            <li class="sub-li-item">15</li>
                            <li class="sub-li-item">2%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">University Suggested</li>
                            <li class="sub-li-item">05</li>
                            <li class="sub-li-item">1%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>
                    </li>
                </ul>
                <ul class="item-list">
                    <li class="acc-head">
                        <ul class="sub-list">
                            <li class="sub-li-item">Deferred Application</li>
                            <li class="sub-li-item">02</li>
                            <li class="sub-li-item">10%</li>
                            <li class="sub-li-item"><span class="accordion-btn"></span></li>
                        </ul>
                    </li>
                    <li class="acc-list">
                        <ul class="sub-list">
                            <li class="sub-li-item">Counselling</li>
                            <li class="sub-li-item">150</li>
                            <li class="sub-li-item">20%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">Document Received</li>
                            <li class="sub-li-item">80</li>
                            <li class="sub-li-item">10%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">Document Pending</li>
                            <li class="sub-li-item">250</li>
                            <li class="sub-li-item">5%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">University to be Suggested</li>
                            <li class="sub-li-item">15</li>
                            <li class="sub-li-item">2%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">University Suggested</li>
                            <li class="sub-li-item">05</li>
                            <li class="sub-li-item">1%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>
                    </li>
                </ul>

                <ul class="item-list">
                    <li class="acc-head">
                        <ul class="sub-list">
                            <li class="sub-li-item">Dropped Application</li>
                            <li class="sub-li-item">02</li>
                            <li class="sub-li-item">10%</li>
                            <li class="sub-li-item"><span class="accordion-btn"></span></li>
                        </ul>
                    </li>
                    <li class="acc-list">
                        <ul class="sub-list">
                            <li class="sub-li-item">Counselling</li>
                            <li class="sub-li-item">150</li>
                            <li class="sub-li-item">20%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">Document Received</li>
                            <li class="sub-li-item">80</li>
                            <li class="sub-li-item">10%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">Document Pending</li>
                            <li class="sub-li-item">250</li>
                            <li class="sub-li-item">5%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">University to be Suggested</li>
                            <li class="sub-li-item">15</li>
                            <li class="sub-li-item">2%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>

                        <ul class="sub-list">
                            <li class="sub-li-item">University Suggested</li>
                            <li class="sub-li-item">05</li>
                            <li class="sub-li-item">1%</li>
                            <li class="sub-li-item">&nbsp;</li>
                        </ul>
                    </li>
                </ul> --}}
                </div>
            </div>

            <div class="section-right">
                <div class="chart">
                    <div class="donut" id="donutchart"></div>
                    <div class="piehole-text">
                        <div class="mid">
                            <p class="text">Total Lead</p>
                            <span class="value totalLeed"></span>
                        </div>
                    </div>
                    <div class="border">

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

        <div class="table-grps">
            <div class="single-table">
                <p class="table-title">Type Wise Report</p>

                <table class="common-table">
                    <thead>
                        <tr>
                            <th class="table-head">Type</th>
                            <th class="table-head">No. of Customer</th>
                            <th class="table-head">%</th>
                        </tr>
                    </thead>

                    <tbody id="getTypeWiseReportData">

                    </tbody>

                </table>

            </div>

            <div class="single-table">
                <p class="table-title">Category Wise Report</p>

                <table class="common-table">
                    <thead>
                        <tr>
                            <th class="table-head">Type</th>
                            <th class="table-head">No. of Customer</th>
                            <th class="table-head">%</th>
                        </tr>
                    </thead>

                    <tbody id="getCategoryWiseReportData">

                    </tbody>

                </table>

            </div>

            <div class="single-table">
                <p class="table-title">Country Wise Report</p>

                <div class="country-wise-table">
                    <table class="common-table">
                        <thead>
                            <tr>
                                <th class="table-head">Type</th>
                                <th class="table-head">No. of Customer</th>
                                <th class="table-head">%</th>
                            </tr>
                        </thead>

                        <tbody id="getCountryWiseReportData">
                            <tr>
                                <td class="table-col">UK</td>
                                <td class="table-col table-col-gray">0</td>
                                <td class="table-col table-col-gray">0%</td>
                            </tr>

                            <tr>
                                <td class="table-col">USA</td>
                                <td class="table-col table-col-gray">0</td>
                                <td class="table-col table-col-gray">0%</td>
                            </tr>

                            <tr>
                                <td class="table-col">UK</td>
                                <td class="table-col table-col-gray">0</td>
                                <td class="table-col table-col-gray">0%</td>
                            </tr>
                        </tbody>

                    </table>
                </div>

            </div>

            <div class="single-table single-intake-table">
                <p class="table-title">Intake Wise Report</p>

                <div class="intake-table">
                    <table class="common-table">
                        <thead>
                            <tr id="getIntakeCountryTheadData">
                                <th class="table-head">Type</th>
                                <th class="table-head">UK</th>
                                <th class="table-head">USA</th>
                                <th class="table-head">AU</th>
                            </tr>
                        </thead>

                        <tbody id="getIntakeCountryTbodyData">
                            <tr>
                                <td class="table-col">Nov 23</td>
                                <td class="table-col table-col-gray">0</td>
                                <td class="table-col table-col-gray">0</td>
                                <td class="table-col table-col-gray">0</td>
                            </tr>

                            <tr>
                                <td class="table-col">Feb 24</td>
                                <td class="table-col table-col-gray">0</td>
                                <td class="table-col table-col-gray">0</td>
                                <td class="table-col table-col-gray">0</td>
                            </tr>

                            <tr>
                                <td class="table-col">Nov 24</td>
                                <td class="table-col table-col-gray">0</td>
                                <td class="table-col table-col-gray">0</td>
                                <td class="table-col table-col-gray">0</td>
                            </tr>
                        </tbody>

                    </table>
                </div>

            </div>
            {{-- Today Yesterday new code start  --}}
            {{-- <div class="single-table">
                <p class="table-title">Language Test Report</p>

                <div class="country-wise-table">
                    <table class="common-table">
                        <thead>
                            <tr>
                                <th class="table-head">Test</th>
                                <th class="table-head">No. of Student</th>
                                <th class="table-head">Converted</th>
                            </tr>
                        </thead>

                        <tbody id="getCountryWiseReportData">
                            <tr>
                                <td class="table-col">IELTS</td>
                                <td class="table-col table-col-gray">100</td>
                                <td class="table-col table-col-gray">50</td>
                            </tr>

                            <tr>
                                <td class="table-col">PTE</td>
                                <td class="table-col table-col-gray">20</td>
                                <td class="table-col table-col-gray">50</td>
                            </tr>

                            <tr>
                                <td class="table-col">TOEFL</td>
                                <td class="table-col table-col-gray">05</td>
                                <td class="table-col table-col-gray">50</td>
                            </tr>
                        </tbody>

                    </table>
                </div>

            </div>

            <div class="single-table">
                <p class="table-title">Webinars & Events Report</p>

                <div class="country-wise-table">
                    <table class="common-table">
                        <thead>
                            <tr>
                                <th class="table-head">Test</th>
                                <th class="table-head">No. of Student</th>
                                <th class="table-head">Converted</th>
                            </tr>
                        </thead>

                        <tbody id="getCountryWiseReportData">
                            <tr>
                                <td class="table-col">IELTS</td>
                                <td class="table-col table-col-gray">100</td>
                                <td class="table-col table-col-gray">50</td>
                            </tr>

                            <tr>
                                <td class="table-col">VISA</td>
                                <td class="table-col table-col-gray">20</td>
                                <td class="table-col table-col-gray">50</td>
                            </tr>

                            <tr>
                                <td class="table-col">Study Abroad</td>
                                <td class="table-col table-col-gray">05</td>
                                <td class="table-col table-col-gray">50</td>
                            </tr>
                        </tbody>

                    </table>
                </div>

            </div> --}}
             {{-- Today Yesterday new code end  --}}
        </div>
         {{-- Today Yesterday new code start  --}}
        <div class="report">
            <div class="top">
                <p class="head-name">Call Report</p>
                <div class="dropdown-list">
                    <img src="{{ asset('backend') }}/loader/three-dot-loader.gif" style="height: 32px;margin: 0 15px;display:none" id="call_filter_loader">
                    {{-- <p class="single-tab active">Today</p>
                    <p class="single-tab">Yesterday</p> --}}
                    <div class="single-list">
                    @if(userCan('admin.assign_list') || userCan('admin.assign'))
                    <select name="assign_to2" id="assign_to2" class="select2" onchange="getcallData()">
                        <option value="">All</option>

                        @foreach (array_filter($admin_list, function ($item) { return $item['status'] == 1; }) as $option)
                            @if (!@empty($option) && !@empty($option['dialer_id']))
                                <option value="{{ $option['dialer_id'] }}" 
                                    {{ old('assign_to', Auth::user()->id) === $option['id'] ? 'selected' : '' }}>
                                    {{ $option['name'] }}
                                </option>
                            @endif
                        @endforeach
                    </select>
                @endif
            </div>
                    <div class="single-list">
                        <input type="text" id="calldaterange" name="calldaterange" value=""
                            class="input-field" autocomplete="off" id="my_txtbox" placeholder="Date To - From"
                            readonly />
                    </div>
                </div>
            </div>

            <div class="call-details">
                <div class="common-box">
                    <p class="small-head">Inbound Calls</p>
                    <div class="detail-box">
                        <div class="box">
                            <p class="big-text">--/--</p>
                            <span class="small-text">Connected / Total Calls</span>
                        </div>
                        <div class="box">
                            <p class="big-text">--</p>
                            <span class="small-text">Avg Talk Time</span>
                        </div>
                        <div class="box">
                            <p class="big-text">--</p>
                            <span class="small-text">Total Talk Time</span>
                        </div>
                    </div>
                    <ul class="list">
                        <li class="list-item">Answered:<span class="value">--</span></li>
                        <li class="list-item">Cancelled:<span class="value">--</span></li>
                    </ul>
                </div>

                <div class="common-box">
                    <p class="small-head">Outbound Calls</p>
                    <div class="detail-box">
                        <div class="box">
                            <p class="big-text">--/--</p>
                            <span class="small-text">Connected / Total Calls</span>
                        </div>
                        <div class="box">
                            <p class="big-text">--</p>
                            <span class="small-text">Avg Talk Time</span>
                        </div>
                        <div class="box">
                            <p class="big-text">--</p>
                            <span class="small-text">Total Talk Time</span>
                        </div>
                    </div>
                    <ul class="list">
                        <li class="list-item">Answered:<span class="value">--</span></li>
                        <li class="list-item">No Answer:<span class="value">--</span></li>
                        <li class="list-item">Busy:<span class="value">--</span></li>
                        <li class="list-item">Cancelled:<span class="value">--</span></li>
                    </ul>
                </div>
            </div>
        </div>
         {{-- Today Yesterday new code end  --}}
    </div>

    <div class="stages-popup" style="display: none">
        <p class="head">
            <span id="documentsReceived_title"> Customers Application Submitted </span>
            <svg class="close-btn" width="24" height="24" viewBox="0 0 24 24" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path d="M7 7L17 17" stroke="#2B3340" stroke-width="2" stroke-linecap="round" />
                <path d="M17 7L7 17" stroke="#2B3340" stroke-width="2" stroke-linecap="round" />
            </svg>
        </p>

        <div class="popup-body">
            <table class="table">
                <thead id="documentsReceived_tableHead">
                    <tr>
                        <th class="t-head">Sr No.</th>
                        <th class="t-head">Name</th>
                        <th class="t-head">Count</th>
                    </tr>
                </thead>

                <tbody id="documentsReceived_table">
                    <div class="form-group">
                        <label for="tableSearch_Stages">Search</label>
                        <input type="text" class="input-field" id="tableSearch_Stages" aria-describedby="emailHelp"
                            placeholder="Search Name">
                    </div>
                    <tr>
                        <td class="t-col">1</td>
                        <td class="t-col">Document Received</td>
                        {{-- <td class="t-col">0</td> --}}
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    <div class="overlay"></div>
    <div class="sidebar-overlay"></div>

    <div class="loader"></div>

@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('backend') }}/lead-management/css/dashboard.css?v={{ env('CRM_VERSION') }}">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
    <style>
        .daterangepicker {
            right: 200px !important;
            font-family: "Roboto Regular";
        }
    </style>
@endsection



@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js?v={{ env('CRM_VERSION') }}"
        integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('backend') }}/lead-management/js/common.js?v={{ env('CRM_VERSION') }}"></script>
    <script src="{{ asset('backend') }}/lead-management/js/dashboard.js?v={{ env('CRM_VERSION') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js?v={{ env('CRM_VERSION') }}">
    </script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js?v={{ env('CRM_VERSION') }}"></script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js?v={{ env('CRM_VERSION') }}">
    </script>
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js?v={{ env('CRM_VERSION') }}"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css?v={{ env('CRM_VERSION') }}" />

    <!--Slick Slider-->
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

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

            $('.slide-list').slick({
                infinite: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 2000,
            });


            //     $('input[name="daterange"]').daterangepicker({
            //         autoUpdateInput: false,
            //         locale: {
            //             cancelLabel: 'Clear'
            //         },
            //         startDate: moment().startOf('month'), 
            //         endDate: moment().endOf('month') 
            //     });

            //     $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
            //         $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));

            //         getDate()
            //     });

            //     $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
            //         $(this).val('');
            //     });
            //     getDate()
            // });

            // function getDate(){
            //      $(".loader").show();
            //     var dateranged = $('input[name="daterange"]').val();
            //     if (!dateranged) {
            //         toastr.error("Date To - From is required.");
            //         return;
            //     }
            //     getStageWiseReportData();
            //     getTypeWiseReportData();
            //     getTargetsDataApplication();
            //     getCountryWiseReportData();
            //     getIntakeCountryWiseReportData();

            //     setTimeout(function() {
            //             $(".loader").hide();
            //         }, 1000);

        })


        $(document).ready(function() {
            getcallData();
            updateDateRange();
            // Initialize the date range picker
       

            $('#daterange').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear'
                },
                ranges: {
                    // 'Today': [moment(), moment()],
                    // 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    // 'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                },
                startDate: moment().startOf('month'),
                endDate: moment().endOf('month'),
                format: 'MM/DD/YYYY', // Customize the date format as needed
                // opens: 'left', // Set the opens option to 'left'
                // parentEl: '#your-parent-element' 
            });

            // $('#your-parent-element').css({
            //     'background-color': '#af1d1d', // Replace with your desired background color
            //     'padding': '10px' // Replace with your desired padding
            //     // Add more styles as needed
            // });

            // Handle apply event
            $('#daterange').on('apply.daterangepicker', function(ev, picker) {
                // var dateranged = $('input[name="daterange"]');
                // dateranged.val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
                // updateDateRange();
                var dateranged = $('input[name="daterange"]');
                if (dateranged && picker.startDate && picker.endDate) {
                    dateranged.val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format(
                        'MM/DD/YYYY'));
                    updateDateRange();
                } else {
                    $(".loader").hide();
                    toastr.error("Invalid date range.");
                }
            });

            // Handle cancel event
            $('#daterange').on('cancel.daterangepicker', function(ev, picker) {
                clearDateRange();
            });


            $('#calldaterange').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear'
                },
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                },
                startDate: moment(),  // Set the start date to the beginning of today
                endDate: moment(),    // Set the end date to the end of today
                format: 'MM/DD/YYYY',

            });

            $('#calldaterange').on('apply.daterangepicker', function(ev, picker) {
                var dateranged = $('input[name="calldaterange"]');
                
                if (dateranged && picker.startDate && picker.endDate) {
                    dateranged.val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
                    updateDatecalldaterange();
                } else {
                    $(".loader").hide();
                    toastr.error("Invalid date range.");
                }
            });

         
        });

        function updateDateRange() {
            $(".loader").show();
            // var dateranged = $('input[name="daterange"]').val();
            var dateranged = $('input[name="daterange"]');

            if (!dateranged) {
                $(".loader").hide();
                toastr.error("Date To - From is required.");
                return;
            }

            // Your custom functions with the formatted dates
            getStageWiseReportData();
            getTypeWiseReportData();
            getTargetsDataApplication();
            getCountryWiseReportData();
            getIntakeCountryWiseReportData();

            // Hide the loader after a short delay (adjust as needed)
            setTimeout(function() {
                $(".loader").hide();
            }, 1000);
        }

        function clearDateRange() {
            // Your logic to clear or reset data when the date range is cleared
            $(".loader").hide();
            // Additional logic if needed
        }
    </script>

    {{-- Stages Wise Report Details with pie charts --}}
    <script>
        function getStageWiseReportData() {
            var dateranged = $('input[name="daterange"]').val();
            var assign_to = $('#assign_to').val();
            $.ajax({
                url: "{{ route('admin.leadManagement.getStageWiseReportData') }}",
                type: 'GET',
                dataType: 'json',
                data: {
                    daterange: dateranged,
                    assign_to: assign_to,
                },
                success: function(data) {

                    $("#getStageWiseReportData").empty();
                    $(".totalLeed").text(' ');
                    $(".totalLeed").text(data.total);
                    $.each(data.data, function(index, stageCounts) {

                        var stageName = stageCounts.type;
                        var stageCount = stageCounts.count;
                        var stagePercentage = stageCounts.datas;
                        var link = stageCounts.link;

                        // Create a new list
                        var $listItem = $('<ul class="item-list">' +
                            '<li class="acc-head ' + (index === 0 ? 'active' : '') + '">' +
                            '<ul class="sub-list">' +
                            '<li class="sub-li-item">' + stageName + '</li>' +
                            // '<li class="sub-li-item"><a href="' + (link != null ? link : '#') + '" target="_blank">' + stageCount + '</a></li>' +
                            // '<li class="sub-li-item"><a href="' + (link != null ? link : '#') + '" target="_blank">' + calculatePercentage(stageCount, data.total) +'%</a></li>' +
                            '<li class="sub-li-item">' + (link != null ? '<a href="' + link +
                                '" target="_blank">' + stageCount + '</a>' : stageCount) + '</li>' +
                            '<li class="sub-li-item">' + (link != null ? '<a href="' + link +
                                '" target="_blank">' + calculatePercentage(stageCount, data.total) +
                                '%</a>' : calculatePercentage(stageCount, data.total) + '%') +
                            '</li>' +
                            // '<li class="sub-li-item"><a href="' + (link != null ? link : '#') + (link != null ? ' target="_blank"' : '') + '">' + stageCount + '</a></li>' +
                            // '<li class="sub-li-item"><a href="' + (link != null ? link : '#') + (link != null ? ' target="_blank"' : '') + '">' + calculatePercentage(stageCount, data.total) + '%</a></li>'+
                            '<li class="sub-li-item"><span class="accordion-btn"></span></li>' +
                            '</ul>' +
                            '</li>' +
                            '<li class="acc-list ' + (index === 0 ? 'show' : '') + '"></li>' +
                            // Create an empty acc-list
                            '</ul>');

                        // Append the list to the container element
                        $("#getStageWiseReportData").append($listItem);

                        $.each(stagePercentage, function(subIndex, subStage) {
                            $listItem.find('.acc-list').append(generateStageListItem(subStage
                                .name, subStage.count, subStage.percentage, subStage
                                .link));
                        });
                    });

                    // $.each(data.data, function(index, stageCounts) {
                    //     var stageName = stageCounts.type;
                    //     var stageCount = stageCounts.count;
                    //     var stagePercentage = stageCounts.datas;
                    //     var link = stageCounts.link;

                    //     // Create a new list
                    //     var $listItem = $('<ul class="item-list">' +
                    //         '<li class="acc-head ' + (index === 0 ? 'active' : '') + '">' +
                    //         '<ul class="sub-list">' +
                    //         '<li class="sub-li-item">' + stageName + '</li>');

                    //     if (link) {
                    //         $listItem.append('<li class="sub-li-item"><a href="' + link + '" target="_blank">' + stageCount + '</a></li>' +
                    //             '<li class="sub-li-item"><a href="' + link + '" target="_blank">' + calculatePercentage(stageCount, data.total) + '%</a></li>');
                    //     } else {
                    //         $listItem.append('<li class="sub-li-item">' + stageCount + '</li>' +
                    //             '<li class="sub-li-item">' + calculatePercentage(stageCount, data.total) + '%</li>');
                    //     }

                    //     $listItem.append('<li class="sub-li-item"><span class="accordion-btn"></span></li>' +
                    //         '</ul>' +
                    //         '</li>' +
                    //         '<li class="acc-list ' + (index === 0 ? 'show' : '') + '"></li>' + // Create an empty acc-list
                    //         '</ul>');

                    //     // Append the list to the container element
                    //     $("#getStageWiseReportData").append($listItem);

                    //     $.each(stagePercentage, function(subIndex, subStage) {
                    //         $listItem.find('.acc-list').append(generateStageListItem(subStage.name, subStage.count, subStage.percentage, subStage.link));
                    //     });
                    // });
                    //    var InquiryStageChart = " "+data.data[0].type+"("+ calculatePercentage(data.data[0].count, data.total) +")";
                    //    var ApplicationStageChart = " "+data.data[1].type+"("+ calculatePercentage(data.data[1].count, data.total) +")";
                    //    var OfferStageChart = " "+data.data[2].type+"("+ calculatePercentage(data.data[2].count, data.total) +")";
                    //    var DroppedApplicationChart = " "+data.data[3].type+"("+ calculatePercentage(data.data[3].count, data.total) +")";
                    //    var FeePaymentChart = " "+data.data[4].type+"("+ calculatePercentage(data.data[4].count, data.total) +")";
                    //    var DeferredApplicationChart = " "+data.data[5].type+"("+ calculatePercentage(data.data[5].count, data.total) +")";
                    //    var VisaStageChart = " "+data.data[6].type+"("+ calculatePercentage(data.data[6].count, data.total) +")";

                    // var chartData = [
                    //         ['Task', 'Hours per Day'],
                    //         [ApplicationStageChart, 5],
                    //         [InquiryStageChart, 5],
                    //         [OfferStageChart, 0],
                    //         [DroppedApplicationChart, 0],
                    //         [DeferredApplicationChart, 0],
                    //         [FeePaymentChart, 0],
                    //         [VisaStageChart, 0]
                    //         // ['Application Stage (26.7%)', 10],
                    //         // ['Inquiry Stage (10.9%)', 7],
                    //         // ['Offer Stage (10.9%)', 2],
                    //         // ['Dropped Application (10.9%)', 5],
                    //         // ['Deferred Application (15.2%)', 3],
                    //         // ['Invoice Stage (15.2%)', 6],
                    //         // ['Visa Stage (15.2%)', 4]
                    //     ];
                    //     drawChart(chartData);

                    //         var chartData = [['Task', 'Hours per Day']];
                    //         var OtherCount = 0;
                    //                 // Iterate through your data and generate chart data and labels
                    //                 for (var i = 0; i < data.data.length; i++) {
                    //                     var stage = data.data[i];
                    //                     var stageLabel = " " + stage.type + " (" + calculatePercentage(stage.count, data.total) + ")";
                    //                     var stageValue = stage.count;
                    //                     OtherCount = OtherCount+stageValue; 
                    //                     chartData.push([stageLabel, stageValue]);
                    //                 }
                    //                 OtherCountChart =  "Other ("+ calculatePercentage(OtherCount - data.total, data.total) +"), " + OtherCount;
                    //                 chartData.push([OtherCountChart]);
                    // // console.log(chartData);
                    //                 drawChart(chartData);

                    var chartData = [
                        ['Task', 'Hours per Day']
                    ];
                    var OtherCount = 0;

                    // Iterate through your data and generate chart data and labels
                    for (var i = 0; i < data.data.length; i++) {
                        var stage = data.data[i];
                        var stageLabel = " " + stage.type + " (" + calculatePercentage(stage.count, data
                            .total) + ")";
                        var stageValue = stage.count;
                        // var stageValue = stage.count+1;
                        // OtherCount += stageValue;
                        chartData.push([stageLabel, stageValue]);
                    }

                    // Calculate the "Other" category
                    // var OtherCountChart = "NA (" + calculatePercentage((data.total - OtherCount), data.total) + ")";
                    // chartData.push([OtherCountChart, (data.total - OtherCount)]);

                    // Draw the chart with the updated data
                    drawChart(chartData);


                    $(".acc-head").click(function() {
                        if ($(this).hasClass("active")) {
                            $(this).removeClass("active");
                            $(this).next('.acc-list').slideUp("show");
                        } else {
                            $(".acc-head").removeClass("active");
                            $(".acc-list").slideUp("show");
                            $(this).addClass("active");
                            $(this).next('.acc-list').slideDown("show");
                        }
                    })
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);

                }
            });


        }

        // function generateStageListItem(title, count, percentage, link) {
        //     return $(
        //         "<ul class='sub-list'>" +
        //         "<li class='sub-li-item'>" + title + "</li>" +
        //         if(link){
        //             "<li class='sub-li-item'><a href='" + link + "' target='_blank'>" + count +"</a></li>" +
        //         "<li class='sub-li-item'><a href='" + link + "' target='_blank'>" + percentage + "%" + "</a></li>" +
        //         }else{
        //             "<li class='sub-li-item'>" + count + "</li>" +
        //         "<li class='sub-li-item'>" + percentage + "%</li>" +
        //         }


        //         "<li class='sub-li-item'>&nbsp;</li>" +
        //         "</ul>" 
        //     );

        // }

        function generateStageListItem(title, count, percentage, link) {
            var $list = $("<ul class='sub-list'>" +
                "<li class='sub-li-item'>" + title + "</li>");

            if (link) {
                $list.append("<li class='sub-li-item'><a href='" + link + "' target='_blank'>" + count + "</a></li>" +
                    "<li class='sub-li-item'><a href='" + link + "' target='_blank'>" + percentage + "%" + "</a></li>");
            } else {
                $list.append("<li class='sub-li-item'>" + count + "</li>" +
                    "<li class='sub-li-item'>" + percentage + "%" + "</li>");
            }

            $list.append("<li class='sub-li-item'>&nbsp;</li></ul>");

            return $list;
        }



        function calculatePercentage(numerator, denominator) {
            if (numerator != 0) {
                var number = (numerator / denominator) * 100;
                var formattedNumber = number.toFixed(1);
                return formattedNumber
            } else {
                return 0;
            }
        }
    </script>
    {{-- Chart  --}}
    <script type="text/javascript">
        function drawChart(chartData) {
            google.charts.load("current", {
                packages: ["corechart"]
            });
            google.charts.setOnLoadCallback(function() {
                var data = google.visualization.arrayToDataTable(chartData);

                var options = {
                    pieHole: 0.4,
                    slices: {
                        0: {
                            color: '#BB2026'
                        },
                        1: {
                            color: '#1A64A4'
                        },
                        2: {
                            color: '#1C939A'
                        },
                        3: {
                            color: '#F36825'
                        },
                        4: {
                            color: '#A31C3C'
                        },
                        5: {
                            color: '#89A63C'
                        },
                        6: {
                            color: '#1EA4CE'
                        },
                        7: {
                            color: '#ccce2e'
                        }
                    },
                    pieSliceTextStyle: {
                        color: "#FFFFFF",
                        fontName: "Roboto Regular"
                    },
                    chartArea: {
                        top: 0,
                        right: 0,
                        bottom: 0,
                        left: 10,
                        width: "100%",
                        backgroundColor: " #E5E5E5"
                    },
                    pieSliceBorderColor: "transparent",
                    tooltip: {
                        trigger: "none"
                    },
                    legend: {
                        alignment: "end",
                        textStyle: {
                            colors: ['#BB2026', '#1A64A4', '#1C939A', '#F36825', '#A31C3C', '#89A63C',
                                '#1EA4CE', '#ccce2e'
                            ],
                            fontName: "Roboto Regular",
                            fontSize: 14
                        }
                    },
                    enableInteractivity: false
                };

                var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
                chart.draw(data, options);
            });
        }
    </script>
    {{-- Type Wise Report --}}
    <script>
        function getTypeWiseReportData() {
            var dateranged = $('input[name="daterange"]').val();
            var assign_to = $('#assign_to').val();
            $.ajax({
                url: "{{ route('admin.leadManagement.getTypeWiseReportData') }}",
                type: 'GET',
                dataType: 'json',
                data: {
                    daterange: dateranged,
                    assign_to: assign_to,
                },
                success: function(response) {
                    $("#getTypeWiseReportData").empty();
                    $("#getCategoryWiseReportData")
                        .empty(); // Make sure to clear the other table as well if needed

                    // Loop through the "TypeWise" array and append rows to the corresponding table
                    $.each(response.data.TypeWise, function(index, typeItem) {

                        appendTableRow(typeItem.name, typeItem.count, typeItem.percentage,
                            "#getTypeWiseReportData", typeItem.link);
                    });

                    // Loop through the "CategoryWise" array and append rows to the corresponding table
                    $.each(response.data.CategoryWise, function(index, categoryItem) {
                        appendTableRow(categoryItem.name, categoryItem.count, categoryItem.percentage,
                            "#getCategoryWiseReportData", categoryItem.link);
                    });

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

        function appendTableRow(name, count, percentage, tableId, link) {
            var $row = $("<tr>");
            $row.append("<td class='table-col'>" + name + "</td>");
            if (link) {
                $row.append("<td class='table-col'><a href='" + link + "' target='_blank'>" + count + "</a></td>");
                $row.append("<td class='table-col'><a href='" + link + "' target='_blank'>" + percentage + "%" +
                    "</a></td>");
            } else {
                $row.append("<td class='table-col table-col-gray'>" + count + "</td>");
                $row.append("<td class='table-col table-col-gray'>" + percentage + "</td>");
            }

            $(tableId).append($row);
        }
    </script>


    {{-- Country Wise Report --}}
    <script>
        function getCountryWiseReportData() {
            var dateranged = $('input[name="daterange"]').val();
            var assign_to = $('#assign_to').val();

            $("#getCountryWiseReportData").html('<tr>\
                    <td class="table-col">UK</td>\
                    <td class="table-col table-col-gray">0</td>\
                    <td class="table-col table-col-gray">0%</td>\
                </tr>\
                <tr>\
                    <td class="table-col">USA</td>\
                    <td class="table-col table-col-gray">0</td>\
                    <td class="table-col table-col-gray">0%</td>\
                </tr>\
                <tr>\
                    <td class="table-col">Canada</td>\
                    <td class="table-col table-col-gray">0</td>\
                    <td class="table-col table-col-gray">0%</td>\
                </tr>');
            $.ajax({
                url: "{{ route('admin.leadManagement.getCountryWiseReportData') }}",
                type: 'GET',
                dataType: 'json',
                data: {
                    daterange: dateranged,
                    assign_to: assign_to,
                },
                success: function(response) {

                    if (Array.isArray(response.data.countryWise) && response.data.countryWise.length > 0) {
                        $("#getCountryWiseReportData").empty();
                        $.each(response.data.countryWise, function(index, typeItem) {
                            appendTableRow(typeItem.name, typeItem.count, typeItem.percentage,
                                "#getCountryWiseReportData", typeItem.link);
                        });
                    }



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

        }
    </script>

    {{-- getIntakeCountryWiseReportData --}}
    <script>
        function getIntakeCountryWiseReportData() {
            var dateranged = $('input[name="daterange"]').val();
            var assign_to = $('#assign_to').val();
            $.ajax({
                url: "{{ route('admin.leadManagement.getIntakeCountryWiseReportData') }}",
                type: 'GET',
                dataType: 'json',
                data: {
                    daterange: dateranged,
                    assign_to: assign_to,
                },
                success: function(response) {

                    if (Array.isArray(response.intakeWiseData.intake) && response.intakeWiseData.intake.length >
                        0) {
                        $("#getIntakeCountryTheadData, #getIntakeCountryTbodyData").empty();
                        $("#getIntakeCountryTheadData").append(`<th class="table-head">Type</th>`)
                        $.each(response.availableCountries, function(key, value) {
                            $("#getIntakeCountryTheadData").append('<th class="table-head">' + value +
                                '</th>');

                        });

                        $.each(response.intakeWiseData.intake, function(index, typeItem) {
                            var intakeName = typeItem.name;
                            var rowHtml = "<tr><td class='table-col'>" + intakeName + "</td>";

                            $.each(typeItem.data, function(index, dataItem) {
                                var count = dataItem.count;
                                var link = dataItem.link;
                                var cellHtml = appendIntakeWiseDataTableRow(count, link);
                                rowHtml += cellHtml;
                            });

                            rowHtml += "</tr>";

                            $("#getIntakeCountryTbodyData").append(rowHtml);
                        });

                    }



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

        }

        function appendIntakeWiseDataTableRow(count, link) {
            if (count == "NA") {
                return "<td class='table-col table-col-gray'>" + count + "</td>";
            } else {
                return "<td class='table-col'><a href='" + link + "' target='_blank'>" + count + "</a></td>";
            }

        }
    </script>

    <script>
        var monthlyData = {};

        function getTargetsDataApplication() {
            //     var dateranged =   $('input[name="daterange"]').val();
            //     var assign_to =   $('#assign_to').val();
            // $.ajax({
            //     url: "{{ route('admin.leadManagement.getTargetsDataApplication') }}",
            //     type: 'GET',
            //     dataType: 'json',
            //     data: {
            //         daterange: dateranged,
            //         assign_to: assign_to,

            //     },
            //     success: function(response) {

            //         monthlyData = response;
            //                 const user_applicationSuccessful = ""
            //                 const user_applicationSubmitted = ""
            //                 const user_visaSuccessful = ""
            //                 const user_visaSubmitted = ""

            //         $("#applicationSubmitted, #applicationSuccessful, #visaSubmitted, #visaSuccessful").text(0);
            //         $("#app_submitted-range, #app_success-range, #visa_submitted-range, #visa_success-range").val(0);
            //         $("#applicationSubmittedSuccessfulTotal").text('10');
            //         $("#visaSubmittedSuccessfulTotal").text('5');

            //         // $("#applicationSubmitted").html('<a href="' + response.applicationSubmittedLink + '"' + (response.applicationSubmitted > 0 ? ' target="_blank"' : '') + '>' + response.applicationSubmitted + '</a>');
            //         // $("#applicationSuccessful").html('<a href="' + response.applicationSuccessfulLink + '"' + (response.applicationSuccessful > 0 ? ' target="_blank"' : '') + '>' + response.applicationSuccessful + '</a>');
            //         // $("#visaSubmitted").html('<a href="' + response.visaSubmittedLink + '"' + (response.visaSubmitted > 0 ? ' target="_blank"' : '') + '>' + response.visaSubmitted + '</a>');
            //         // $("#visaSuccessful").html('<a href="' + response.visaSuccessfulLink + '"' + (response.visaSuccessful > 0 ? ' target="_blank"' : '') + '>' + response.visaSuccessful + '</a>');

            //         var applicationSubmittedButton;
            //         if (response.applicationSubmitted > 0) {
            //             applicationSubmittedButton = '<span onclick="sendModeldocumentsReceived(\'' + user_applicationSubmitted + '\', \'Application Submitted\');">' + response.applicationSubmitted + '</span>';
            //         } else {
            //             applicationSubmittedButton = response.applicationSubmitted;
            //         }
            //         $("#applicationSubmitted").html(applicationSubmittedButton);


            //         var applicationSuccessfulButton;
            //         if (response.applicationSuccessful > 0) {
            //             applicationSuccessfulButton = '<span onclick="sendModeldocumentsReceived(\'' + user_applicationSuccessful + '\', \'Application Successful\');">' + response.applicationSuccessful + '</span>';
            //         } else {
            //             applicationSuccessfulButton = response.applicationSuccessful;
            //         }
            //         $("#applicationSuccessful").html(applicationSuccessfulButton);


            //         var visaSubmittedButton;
            //         if (response.visaSubmitted > 0) {
            //             visaSubmittedButton = '<span onclick="sendModeldocumentsReceived(\'' + user_visaSubmitted + '\', \'Visa Submitted\');">' + response.visaSubmitted + '</span>';
            //         } else {
            //             visaSubmittedButton = response.visaSubmitted;
            //         }
            //         $("#visaSubmitted").html(visaSubmittedButton);

            //         var visaSuccessfulButton;
            //         if (response.visaSuccessful > 0) {
            //             visaSuccessfulButton = '<span onclick="sendModeldocumentsReceived(\'' + user_visaSuccessful + '\', \'visa Successful\');">' + response.visaSuccessful + '</span>';
            //         } else {
            //             visaSuccessfulButton = response.visaSuccessful;
            //         }
            //         $("#visaSuccessful").html(visaSuccessfulButton);

            //         $("#app_submitted-range").val(response.applicationSubmitted);
            //         $("#app_success-range").val(response.applicationSuccessful);
            //         // $("#app_incentive_value").val(response.applicationSuccessful);

            //         $("#visa_submitted-range").val(response.visaSubmitted);
            //         $("#visa_success-range").val(response.visaSuccessful);
            //         // $("#visa_incentive_value").val(response.visaSuccessful);


            //         if(response.applicationSubmitted > 10 || response.applicationSuccessful > 10){
            //             if(response.applicationSubmitted > response.applicationSuccessful){
            //                 $("#applicationSubmittedSuccessfulTotal").text(response.applicationSubmitted);
            //             }else if(response.applicationSuccessful > response.applicationSubmitted ){
            //                 $("#applicationSubmittedSuccessfulTotal").text(response.applicationSuccessful);
            //             }else{
            //                 $("#applicationSubmittedSuccessfulTotal").text('10');
            //             }
            //         }

            //         if(response.visaSubmitted > 5 || response.visaSuccessful > 5){
            //             if(response.visaSubmitted > response.visaSuccessful){
            //                 $("#visaSubmittedSuccessfulTotal").text(response.visaSubmitted);
            //             }else if(response.visaSuccessful > response.visaSubmitted ){
            //                 $("#visaSubmittedSuccessfulTotal").text(response.visaSuccessful);
            //             }else{
            //                 $("#visaSubmittedSuccessfulTotal").text('5');
            //             }
            //         }
            //         // $("#applicationSubmittedSuccessfulTotal").text(response.visaSubmitted);
            //         // $("#visaSubmittedSuccessfulTotal").text(response.visaSubmitted);

            //         var inputrange = document.getElementById('app_submitted-range');
            //         var value = (inputrange.value - inputrange.min) / (inputrange.max - inputrange.min) * 100
            //         inputrange.style.background = 'linear-gradient(to right, #21BAEA 0%, #21BAEA ' + value + '%, #EBF0F5 ' + value + '%,#EBF0F5 100%)'

            //         //Slider color for app_success-range
            //         var inputrange = document.getElementById('app_success-range');
            //         var value = (inputrange.value - inputrange.min) / (inputrange.max - inputrange.min) * 100
            //         inputrange.style.background = 'linear-gradient(to right, #06617D 0%, #06617D ' + value + '%, transparent ' + value + '%,transparent 100%)'

            //         //Slider color for visa_submitted-range
            //         var inputrange = document.getElementById('visa_submitted-range');
            //         var value = (inputrange.value - inputrange.min) / (inputrange.max - inputrange.min) * 100
            //         inputrange.style.background = 'linear-gradient(to right, #9DC82D 0%, #9DC82D ' + value + '%, #EBF0F5 ' + value + '%,#EBF0F5 100%)'

            //         //Slider color for visa_success-range
            //         var inputrange = document.getElementById('visa_success-range');
            //         var value = (inputrange.value - inputrange.min) / (inputrange.max - inputrange.min) * 100
            //         inputrange.style.background = 'linear-gradient(to right, #475E0B 0%, #475E0B ' + value + '%, transparent ' + value + '%,transparent 100%)'




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


        function sendModeldocumentsReceived(modelData, t) {
            console.log("modelData " + JSON.stringify(monthlyData.applicationSubmitted_UserDetails));
            console.log("tt " + t);
            // const decodedData = JSON.parse(atob(modelData));
            if (t == "Application Successful") {
                decodedData = monthlyData.applicationSuccessful_UserDetails;
            } else if (t == "Application Submitted") {
                decodedData = monthlyData.applicationSubmitted_UserDetails;
            } else if (t == "Visa Submitted") {
                decodedData = monthlyData.visaSubmitted_UserDetails;
            } else if (t == "visa Successful") {
                decodedData = monthlyData.visaSuccessful_UserDetails;
            }

            if (t == "Application Submitted") {
                var tableHead = `
        <tr>
            <th class="t-head">Sr No.</th>
            <th class="t-head">Name</th>
            <th class="t-head">Count</th>
        </tr>`;
            } else {
                var tableHead = `
        <tr>
            <th class="t-head">Sr No.</th>
            <th class="t-head">Name</th>
        </tr>`;
            }
            $("#documentsReceived_tableHead").html(tableHead);



            let title = 'Customers ' + t;
            let tableBody = '';
            let count = 0;
            for (let key in decodedData) {
                let data = decodedData[key];
                console.log("decodedData " + JSON.stringify(data));
                let id = data.candidateID || "Not Defined";
                let name = data.name || "Not Defined";
                let applicationcount = data.applicationcount || "--";
                count++;
                $('.hideTheadTbody thead').show();
                $("#tableSearch_Stages").parent().show();
                if (t == "Application Submitted") {
                    tableBody += `
        <tr>
            <td class="t-col" scope="row">${count}</td>
            <td class="t-col pointer"><a href="/candidate/${id}/edit" target="_blank">${name}</a></td>
            <td class="t-col pointer"><a href="/candidate/${id}/edit" target="_blank">${applicationcount}</a></td
        </tr>`;
                } else {
                    tableBody += `
        <tr>
            <td class="t-col" scope="row">${count}</td>
            <td class="t-col"><a href="/candidate/${id}/edit" target="_blank">${name}</a></td>
        </tr>`;
                }

            }

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

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

            $(".overlay").show();
            $("body").addClass("no-scroll");

            $("#documentsReceived_table").html(tableBody);
            $("#documentsReceived_title").text(title);
            $('#tableSearch_Stages').val("");
            $(".stages-popup").show();


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

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

        $(".single-tab").click(function() {
            $(".single-tab").removeClass("active");
            $(this).addClass("active");
        });
    </script>
    <script>

        function updateDatecalldaterange() {
            $("#call_filter_loader").show();
            // var dateranged = $('input[name="daterange"]').val();
            var dateranged = $('input[name="calldaterange"]');

            if (!dateranged) {
                $("#call_filter_loader").hide();
                toastr.error("Date To - From is required.");
                return;
            }
            getcallData();
          
        }



        // function getcallData() {
        //     $("#call_filter_loader").show();
        //     var dateranged = $('input[name="calldaterange"]').val();
        //     var assign_to = $('#assign_to2').val();
        //     if (dateranged) {
        //         var dateParts = dateranged.split(' - ');
        //         startDate = formatDate(dateParts[0]);
        //         endDate = formatDate(dateParts[1]);
        //     } else {
        //         var today = new Date();
        //         var dd = String(today.getDate()).padStart(2, '0');
        //         var mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
        //         var yyyy = today.getFullYear();

        //         // Format the startDate and endDate in 'YYYY-MM-DD' format
        //         startDate = endDate = yyyy + '-' + mm + '-' + dd;
        //     }

        //     if(assign_to){
        //         var type = "agent"
        //     }else{
        //         var type = "all"
        //     }
        //     // Construct the URL with dynamic parameters
        //     var apiUrl = "https://vcrecordings.gradding.com/api.php";
        //     var apiParams = {
        //         action: "getAgentsRepoting",
        //         type: type,
        //         id: assign_to,
        //         date_from: startDate,
        //         date_to: endDate,
        //         token: "LUFJRTSHUKDMN4598WEFC"
        //     };

        //     $('.call-details .common-box:nth-child(1) .detail-box .box:nth-child(1) .big-text').text('--/--');
        //     $('.call-details .common-box:nth-child(1) .detail-box .box:nth-child(2) .big-text').text('--');
        //     $('.call-details .common-box:nth-child(1) .detail-box .box:nth-child(3) .big-text').text('--');

        //     $('.call-details .common-box:nth-child(1) .list-item:nth-child(1) .value').text('--');
        //     $('.call-details .common-box:nth-child(1) .list-item:nth-child(2) .value').text('--');

        //     $('.call-details .common-box:nth-child(2) .detail-box .box:nth-child(1) .big-text').text('--/--');
        //     $('.call-details .common-box:nth-child(2) .detail-box .box:nth-child(2) .big-text').text('--');
        //     $('.call-details .common-box:nth-child(2) .detail-box .box:nth-child(3) .big-text').text('--');

        //     $('.call-details .common-box:nth-child(2) .list-item:nth-child(1) .value').text('--');
        //     $('.call-details .common-box:nth-child(2) .list-item:nth-child(2) .value').text('--');
        //     $('.call-details .common-box:nth-child(2) .list-item:nth-child(3) .value').text('--');
        //     $('.call-details .common-box:nth-child(2) .list-item:nth-child(4) .value').text('--');
        //     $.ajax({
        //         url: apiUrl,
        //         type: 'GET',
        //         dataType: 'json',
        //         data: apiParams,
        //         success: function(response) {
        //             var responseData = response;

        //             if (responseData.call_data && responseData.call_data.INCOMING) {
        //                 var incomingData = responseData.call_data.INCOMING;

        //                 // Update HTML elements if properties exist
        //                 if ('connected' in incomingData && 'total_calls' in incomingData) {
        //                     $('.call-details .common-box:nth-child(1) .detail-box .box:nth-child(1) .big-text').text(incomingData.connected + '/' + incomingData.total_calls);
        //                 }

        //                 if ('avg_talk_time' in incomingData) {
        //                     $('.call-details .common-box:nth-child(1) .detail-box .box:nth-child(2) .big-text').text(formatTime(incomingData.avg_talk_time));
        //                 }

        //                 if ('total_talk_time' in incomingData) {
        //                     $('.call-details .common-box:nth-child(1) .detail-box .box:nth-child(3) .big-text').text(formatTime(incomingData.total_talk_time));
        //                 }

        //                 if ('ANSWER' in incomingData) {
        //                     $('.call-details .common-box:nth-child(1) .list-item:nth-child(1) .value').text(incomingData.ANSWER);
        //                 }

        //                 if ('CANCEL' in incomingData) {
        //                     $('.call-details .common-box:nth-child(1) .list-item:nth-child(2) .value').text(incomingData.CANCEL);
        //                 }
        //             }

        //             // Update Outbound Calls
        //             if (responseData.call_data && responseData.call_data.OUTGOING) {
        //                 var outgoingData = responseData.call_data.OUTGOING;

        //                 // Update HTML elements if properties exist
        //                 if ('connected' in outgoingData && 'total_calls' in outgoingData) {
        //                     $('.call-details .common-box:nth-child(2) .detail-box .box:nth-child(1) .big-text').text(outgoingData.connected + '/' + outgoingData.total_calls);
        //                 }

        //                 if ('avg_talk_time' in outgoingData) {
        //                     $('.call-details .common-box:nth-child(2) .detail-box .box:nth-child(2) .big-text').text(formatTime(outgoingData.avg_talk_time));
        //                 }

        //                 if ('total_talk_time' in outgoingData) {
        //                     $('.call-details .common-box:nth-child(2) .detail-box .box:nth-child(3) .big-text').text(formatTime(outgoingData.total_talk_time));
        //                 }

        //                 if ('ANSWER' in outgoingData) {
        //                     $('.call-details .common-box:nth-child(2) .list-item:nth-child(1) .value').text(outgoingData.ANSWER);
        //                 }

        //                 if ('NOANSWER' in outgoingData) {
        //                     $('.call-details .common-box:nth-child(2) .list-item:nth-child(2) .value').text(outgoingData.NOANSWER);
        //                 }

        //                 if ('BUSY' in outgoingData) {
        //                     $('.call-details .common-box:nth-child(2) .list-item:nth-child(3) .value').text(outgoingData.BUSY);
        //                 }

        //                 if ('CANCEL' in outgoingData) {
        //                     $('.call-details .common-box:nth-child(2) .list-item:nth-child(4) .value').text(outgoingData.CANCEL);
        //                 }
        //             }

        //             // // Update Inbound Calls
        //             // var incomingData = responseData.call_data.INCOMING;
        //             // $('.call-details .common-box:nth-child(1) .detail-box .box:nth-child(1) .big-text').text(incomingData.connected + '/' + incomingData.total_calls);
        //             // $('.call-details .common-box:nth-child(1) .detail-box .box:nth-child(2) .big-text').text(formatTime(incomingData.avg_talk_time));
        //             // $('.call-details .common-box:nth-child(1) .detail-box .box:nth-child(3) .big-text').text(formatTime(incomingData.total_talk_time));

        //             // $('.call-details .common-box:nth-child(1) .list-item:nth-child(1) .value').text(incomingData.ANSWER);
        //             // $('.call-details .common-box:nth-child(1) .list-item:nth-child(2) .value').text(incomingData.CANCEL);

        //             // // Update Outbound Calls
        //             // var outgoingData = responseData.call_data.OUTGOING;
        //             // $('.call-details .common-box:nth-child(2) .detail-box .box:nth-child(1) .big-text').text(outgoingData.connected + '/' + outgoingData.total_calls);
        //             // $('.call-details .common-box:nth-child(2) .detail-box .box:nth-child(2) .big-text').text(formatTime(outgoingData.avg_talk_time));
        //             // $('.call-details .common-box:nth-child(2) .detail-box .box:nth-child(3) .big-text').text(formatTime(outgoingData.total_talk_time));

        //             // $('.call-details .common-box:nth-child(2) .list-item:nth-child(1) .value').text(outgoingData.ANSWER);
        //             // $('.call-details .common-box:nth-child(2) .list-item:nth-child(2) .value').text(outgoingData.NOANSWER);
        //             // $('.call-details .common-box:nth-child(2) .list-item:nth-child(3) .value').text(outgoingData.BUSY);
        //             // $('.call-details .common-box:nth-child(2) .list-item:nth-child(4) .value').text(outgoingData.CANCEL);

              
        //         $("#call_filter_loader").hide();
        //         },
        //         error: function(xhr, status, error) {
        //             console.log(xhr.responseText);
        //             $("#call_filter_loader").hide();
        //         }
        //     });
        // }


        function getcallData() {
            $("#call_filter_loader").show();
            var dateranged = $('input[name="calldaterange"]').val();
            var assign_to = $('#assign_to2').val();
            if (dateranged) {
                var dateParts = dateranged.split(' - ');
                startDate = formatDate(dateParts[0]);
                endDate = formatDate(dateParts[1]);
            } else {
                var today = new Date();
                var dd = String(today.getDate()).padStart(2, '0');
                var mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
                var yyyy = today.getFullYear();

                // Format the startDate and endDate in 'YYYY-MM-DD' format
                startDate = endDate = yyyy + '-' + mm + '-' + dd;
            }

            if(assign_to){
                var type = "agent"
            }else{
                var type = "all"
            }

            // Construct the URL with dynamic parameters
            const apiUrl = `https://vcrecordings.gradding.com/api.php?action=getAgentsRepoting&type=${type}&id=${assign_to}&date_from=${startDate}&date_to=${endDate}&token=LUFJRTSHUKDMN4598WEFC`;

            const fetchOptions = {
                method: 'GET',
                // Remove or modify the Content-Type header
                // headers: { 'Content-Type': 'application/json' },
            };

            fetch(apiUrl, fetchOptions)
                .then(response => {
                    return response.json(); // Parse the JSON response
                })
                .then(responseData => {
                    

                    if (responseData.call_data && responseData.call_data.INCOMING) {
                        var incomingData = responseData.call_data.INCOMING;
                        var incomingPercentage = (outgoingData.connected /  incomingData.total_calls) * 100;
                        // Update HTML elements if properties exist
                        if ('connected' in incomingData && 'total_calls' in incomingData) {
                            $('.call-details .common-box:nth-child(1) .detail-box .box:nth-child(1) .big-text').text(incomingData.connected + '/' + incomingData.total_calls + '(' + incomingPercentage.toFixed(2) + '%)');
                        }

                        if ('avg_talk_time' in incomingData) {
                            $('.call-details .common-box:nth-child(1) .detail-box .box:nth-child(2) .big-text').text(formatTime(incomingData.avg_talk_time));
                        }

                        if ('total_talk_time' in incomingData) {
                            $('.call-details .common-box:nth-child(1) .detail-box .box:nth-child(3) .big-text').text(formatTime(incomingData.total_talk_time));
                        }

                        if ('ANSWER' in incomingData) {
                            $('.call-details .common-box:nth-child(1) .list-item:nth-child(1) .value').text(incomingData.ANSWER);
                        }

                        if ('CANCEL' in incomingData) {
                            $('.call-details .common-box:nth-child(1) .list-item:nth-child(2) .value').text(incomingData.CANCEL);
                        }
                    }

                    // Update Outbound Calls
                    if (responseData.call_data && responseData.call_data.OUTGOING) {
                        var outgoingData = responseData.call_data.OUTGOING;

                        var outgoinPercentage = (outgoingData.connected / outgoingData.total_calls) * 100;

                        if ('connected' in outgoingData && 'total_calls' in outgoingData) {
                            $('.call-details .common-box:nth-child(2) .detail-box .box:nth-child(1) .big-text').text(outgoingData.connected + '/' + outgoingData.total_calls + '(' + outgoinPercentage.toFixed(2) + '%)');
                        }

                        if ('avg_talk_time' in outgoingData) {
                            $('.call-details .common-box:nth-child(2) .detail-box .box:nth-child(2) .big-text').text(formatTime(outgoingData.avg_talk_time));
                        }

                        if ('total_talk_time' in outgoingData) {
                            $('.call-details .common-box:nth-child(2) .detail-box .box:nth-child(3) .big-text').text(formatTime(outgoingData.total_talk_time));
                        }

                        if ('ANSWER' in outgoingData) {
                            $('.call-details .common-box:nth-child(2) .list-item:nth-child(1) .value').text(outgoingData.ANSWER);
                        }

                        if ('NOANSWER' in outgoingData) {
                            $('.call-details .common-box:nth-child(2) .list-item:nth-child(2) .value').text(outgoingData.NOANSWER);
                        }

                        if ('BUSY' in outgoingData) {
                            $('.call-details .common-box:nth-child(2) .list-item:nth-child(3) .value').text(outgoingData.BUSY);
                        }

                        if ('CANCEL' in outgoingData) {
                            $('.call-details .common-box:nth-child(2) .list-item:nth-child(4) .value').text(outgoingData.CANCEL);
                        }
                    }

                    // // Update Inbound Calls
                    // var incomingData = responseData.call_data.INCOMING;
                    // $('.call-details .common-box:nth-child(1) .detail-box .box:nth-child(1) .big-text').text(incomingData.connected + '/' + incomingData.total_calls);
                    // $('.call-details .common-box:nth-child(1) .detail-box .box:nth-child(2) .big-text').text(formatTime(incomingData.avg_talk_time));
                    // $('.call-details .common-box:nth-child(1) .detail-box .box:nth-child(3) .big-text').text(formatTime(incomingData.total_talk_time));

                    // $('.call-details .common-box:nth-child(1) .list-item:nth-child(1) .value').text(incomingData.ANSWER);
                    // $('.call-details .common-box:nth-child(1) .list-item:nth-child(2) .value').text(incomingData.CANCEL);

                    // // Update Outbound Calls
                    // var outgoingData = responseData.call_data.OUTGOING;
                    // $('.call-details .common-box:nth-child(2) .detail-box .box:nth-child(1) .big-text').text(outgoingData.connected + '/' + outgoingData.total_calls);
                    // $('.call-details .common-box:nth-child(2) .detail-box .box:nth-child(2) .big-text').text(formatTime(outgoingData.avg_talk_time));
                    // $('.call-details .common-box:nth-child(2) .detail-box .box:nth-child(3) .big-text').text(formatTime(outgoingData.total_talk_time));

                    // $('.call-details .common-box:nth-child(2) .list-item:nth-child(1) .value').text(outgoingData.ANSWER);
                    // $('.call-details .common-box:nth-child(2) .list-item:nth-child(2) .value').text(outgoingData.NOANSWER);
                    // $('.call-details .common-box:nth-child(2) .list-item:nth-child(3) .value').text(outgoingData.BUSY);
                    // $('.call-details .common-box:nth-child(2) .list-item:nth-child(4) .value').text(outgoingData.CANCEL);


                    $("#call_filter_loader").hide();
                })
                .catch(error => {
                    console.log(error);
                    $("#call_filter_loader").hide();
                });
        }


      // Helper function to format time (assuming avg_talk_time and avg_wrap_up_time are in seconds)
      function formatTime(seconds) {
            var hours = Math.floor(seconds / 3600);
            var minutes = Math.floor((seconds % 3600) / 60);
            var remainingSeconds = seconds % 60;

            var formattedTime = '';

            if (hours > 0) {
                formattedTime += pad(hours) + 'h ';
            }

            formattedTime += pad(minutes) + 'm ' + pad(remainingSeconds) + 's';

            return formattedTime;
        }

        // Helper function to pad single-digit numbers with a leading zero
        function pad(number) {
            return (number < 10 ? '0' : '') + number;
        }

        function formatDate(inputDate) {
            var date = new Date(inputDate);
            var yyyy = date.getFullYear();
            var mm = String(date.getMonth() + 1).padStart(2, '0'); // January is 0!
            var dd = String(date.getDate()).padStart(2, '0');

            return yyyy + '-' + mm + '-' + dd;
        }
    </script>
@endsection