@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    table.dataTable thead .sorting:after,
    table.dataTable thead .sorting_asc:after,
    table.dataTable thead .sorting_desc:after,
    table.dataTable thead .sorting_asc_disabled:after,
    table.dataTable thead .sorting_desc_disabled:after,
    table.dataTable thead .sorting:before,
    table.dataTable thead .sorting_asc:before,
    table.dataTable thead .sorting_desc:before,
    table.dataTable thead .sorting_asc_disabled:before,
    table.dataTable thead .sorting_desc_disabled:before {
        display: none !important;
    }

    table.dataTable thead .sorting span:after,
    table.dataTable thead .sorting_asc span:after,
    table.dataTable thead .sorting_desc span:after,
    table.dataTable thead .sorting_asc_disabled span:after,
    table.dataTable thead .sorting_desc_disabled span:after{
        right: 0.5em;
        content: "\2193";
        opacity: 0.3;
    }
    table.dataTable thead .sorting span:before,
    table.dataTable thead .sorting_asc span:before,
    table.dataTable thead .sorting_desc span:before,
    table.dataTable thead .sorting_asc_disabled span:before,
    table.dataTable thead .sorting_desc_disabled span:before {
        right: 1em;
        content: "\2191";
        opacity: 0.3;
    }

    table.dataTable thead .sorting_asc span:before,
    table.dataTable thead .sorting_desc span:after {
        opacity: 1;
    }

    table.dataTable thead .sorting span,
    table.dataTable thead .sorting_asc span,
    table.dataTable thead .sorting_desc span,
    table.dataTable thead .sorting_asc_disabled span,
    table.dataTable thead .sorting_desc_disabled span,
    table.dataTable thead .sorting span,
    table.dataTable thead .sorting_asc span,
    table.dataTable thead .sorting_desc span,
    table.dataTable thead .sorting_asc_disabled span,
    table.dataTable thead .sorting_desc_disabled span {
        margin-left: 10px;
    }

    strong {
        font-weight: 500;
    }

    .rounded-pill {
        margin: 5px auto !important;
        line-height: 10px !important;
        padding: 0.26rem 0.6rem 0.2rem !important;
    }

    .modal-dialog.modal-xxl {
        max-width: calc(90% - 1rem);
        width: calc(90% - 1rem);
        margin: 0.5rem;
    }

    tr.zabuto-calendar__week--last .zabuto-calendar__day:hover,
    tr.zabuto-calendar__week--first .zabuto-calendar__day:hover,
    tr.zabuto-calendar__week .zabuto-calendar__day:hover {
        cursor: pointer;
    }

    tr.zabuto-calendar__week--last .zabuto-calendar__day--today:hover,
    tr.zabuto-calendar__week--first .zabuto-calendar__day--today:hover,
    tr.zabuto-calendar__week .zabuto-calendar__day--today:hover {
        cursor: pointer;
    }

    .contact-links {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .contact-links li {
        margin-right: 5px;
        align-items: center !important;
        display: flex;
    }  

    .popup{
        right: -120px !important;
        top: 17px !important;
    }

    .custom-dropdown-toggle-top.show {
        top: 70% !important;
    }

    .col-md-2.col-md-3 {
        margin: 0 .25rem;
        border: 0;
        flex-basis: 74%;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .row.col-md-2.col-md-3 {
        align-items: stretch;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: auto;
    }

    .col-md-12.subscription {
        margin: 0 3.25rem;
        border: 0;
        flex-basis: 95%;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .row.col-md-12.subscription {
        align-items: stretch;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: auto;
    }

    table.dataTable thead tr>.dtfc-fixed-left,
    table.dataTable thead tr>.dtfc-fixed-right,
    table.dataTable tfoot tr>.dtfc-fixed-left,
    table.dataTable tfoot tr>.dtfc-fixed-right {
        top: 0;
        bottom: 0;
        z-index: 3;
        background-color: white
    }

    table.dataTable tbody tr>.dtfc-fixed-left,
    table.dataTable tbody tr>.dtfc-fixed-right {
        z-index: 1;
        background-color: white
    }

    div.dtfc-left-top-blocker,
    div.dtfc-right-top-blocker {
        background-color: white
    }

    p {
        margin-top: 0;
        margin-bottom: 0rem;
    }

    /* input[type="radio"] {
        display: none;
    }

    input[type="radio"]+label {
        display: inline-block;
        padding: 10px 15px;
        background-color: #f1f5fe;
        border-radius: 0.8rem;
        cursor: pointer;
    }

    input[type="radio"]:checked+label {
        background-color: #2762e4;
        color: #fff;
    } */

    input[type="checkbox"][name="consolited_report"]{
        display: none;
    }
    
    input[type="checkbox"][name="consolited_report"]+label{
        display: inline-block;
        padding: 10px 15px;
        background-color: #f1f5fe;
        border-radius: 0.8rem;
        cursor: pointer;
    }

    input[type="checkbox"][name="consolited_report"]:checked+label {
        background-color: #2762e4;
        color: #fff;
    }

    .highcharts-menu-item:nth-child(7),
    .highcharts-menu-item:nth-child(8),
    .highcharts-menu-item:nth-child(9),
    .highcharts-menu-item:nth-child(10) {
        display: none;
    }

    .highcharts-data-table {
        margin: 0px 30px;
    }

    .highcharts-data-table table {
        width: 100%;
        outline: none;
    }

    tr.zabuto-calendar__days-of-week th:nth-child(5) {
        padding: 0px 6px !important;
    }

    @media (max-width: 1600px) {
        figure {
            margin: 0px !important;
        }
    }

    @media (max-width: 1440px) {
        #myTab {
            align-items: stretch;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            overflow-x: auto !important;
        }
    }

    @media (max-width: 1402px) {
        .calander-container {
            margin-left: 150px !important;
            overflow: auto;
        }
  
        .subscription {
            margin-left: 135px !important;
            max-width: 74% !important;
        }
    }

    @media (max-width: 1300px) {
        .navbaar {
            margin-left: 10px !important;
            margin-right: 10px !important;
        }
   
        #all_data,
        #investment_management,
        #docs,
        #greeting_id {
            margin-top: 10px !important;
        }

        .nav-item {
            flex: auto !important;
        }
    }

    @media (max-width: 1200px) {
        .calander-container {
            margin-left: 5px !important;
            overflow: auto;
        }

        .row.highcharts-main {
            justify-content: center;
            padding-right: 0px !important;
            padding-left: 25px !important;
        }

        .subscription {
            margin-left: 105px !important;
            max-width: 74% !important;
        }

        .radiobtn {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
            margin-left: 55px !important;
        }
    }

    @media (max-width: 992px) {
        .calander-container {
            margin-left: 10px !important;
            overflow: auto;
        }

        .subscription {
            margin-left: 100px !important;
            max-width: 74% !important;
        }

        #myTab {
            margin-right: 14px !important;
            margin-left: 83px !important;
        }

        .navbaar {
            margin-left: -35px !important;
            padding-right: 32px !important;
        }
    }

    @media (max-width: 767px) {
        .radiobtn {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
            margin-left: 180px !important;
        }
    }
 
    @media (max-width: 700px) {
        .subscription {
            margin-left: 75px !important;
            max-width: 74% !important;
        }
    }

    @media (max-width: 575px) {
        .radiobtn {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
            margin-left: 100px !important;
        }
    }

    @media (max-width: 500px) {
        .subscription {
            margin-left: 50px !important;
            max-width: 74% !important;
        }
    }

    @media (max-width: 415px) {
        .col-md-2.highcharts-figure.chart-container {
            width: 275px !important;
            height: 290px !important;
        }
    }  

    @media (max-width: 350px) {
        .subscription {
            margin-left: 40px !important;
            max-width: 74% !important;
        }
   
        .radiobtn {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
            margin-left: 60px !important;
        }
    }

    input[type="file"] {
            margin: 10px 0;
        }
    #uploadBtn {
        padding: 10px 20px;
        background-color: #28a745;
        color: white;
        border: none;
        cursor: pointer;
    }
    #uploadBtn:hover {
        background-color: #218838;
    }
    #response {
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #ddd;
        background-color: #f8f8f8;
        display: none;
    }
</style>

<div class="page-content">
    @include('../reachassuree_agent/insurance/general/policy_num_save_modal')
    @include('../reachassuree_agent/insurance/life/policy_num_save_modal')

    <div class="row justify-content-end">
        <a href="javascript:void(0);" onclick="return learningVideo()" class="btn-youtube-pulse btn-youtube-pulse-border">
            <i class="mdi mdi-youtube"></i>
        </a>
    </div>

    @if(getSpacesFolder() == "Localhost")
        <input type="file" id="fileInput" name="file[]" multiple accept=".pdf">
        <button id="uploadBtn">Upload & Extract Data</button>
        
        <div id="response">
            <h3>Extracted Data:</h3>
            <pre id="result"></pre>
        </div>
    @endif

    @if(Auth::user()->type == 1)
        <div class="row">
            <div class="col-xxl-3 col-xl-10">
    @else
        <div class="row d-flex justify-content-center">
            <div class="col-xl-6">
    @endif
            <div class="card calander-container" style="margin-top:20px;">
                <div class="card-body">
                    <div class="d-flex justify-content-center">
                        <div class="mb-3">
                            <button class="btn btn-primary px-3 form-control" onclick="return addEvent();" type="button"><span>+ Add Event</span></button>
                        </div>
                    </div>

                    <div id="my-calander"></div>
                </div>
            </div>
        </div>

        @if(Auth::user()->type == 1)
            <div class="row col-md-2 col-md-3 mb-2 subscription" style="overflow-x: auto;background-color: #f1f5fe">
                <div class="col-md-4" style="height: 300px; margin-top:30px;">
                    <a href="javascript:void(0);" title="client-registration">
                        <div class="card">
                            <div class="card-body">
                                <figure class="highcharts-figure">
                                    <div id="container-client-registration" class="chart-container" style="height: 210px"></div>
                                </figure>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-md-4" style="height: 300px; margin-top:30px;">
                    <a href="javascript:void(0);" title="policy-entry">
                        <div class="card">
                            <div class="card-body">
                                <figure class="highcharts-figure">
                                    <div id="container-policy-entry" class="chart-container" style="height: 210px"></div>
                                </figure>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-md-4" style="height: 300px; margin-top:30px;">
                    <a href="javascript:void(0);" title="docs">
                        <div class="card">
                            <div class="card-body">
                                <figure class="highcharts-figure">
                                    <div id="container-docs" class="chart-container" style="height: 210px"></div>
                                </figure>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-md-4" style="height: 300px; margin-top:30px;">
                    <a href="javascript:void(0);" title="days">
                        <div class="card">
                            <div class="card-body">
                                <figure class="highcharts-figure">
                                    <div id="container-days" class="chart-container" style="height: 210px"></div>
                                </figure>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-md-4" style="height: 300px; margin-top:30px;">
                    <a href="javascript:void(0);" title="sms">
                        <div class="card">
                            <div class="card-body">
                                <figure class="highcharts-figure">
                                    <div id="container-sms" class="chart-container" style="height: 210px"></div>
                                </figure>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-md-4" style="width: 360px;height: 290px;">
                    <div class="card text-white bg-dark" style="margin-top:80px;">
                        <div class="card-header font-size-13">
                            <b>Subscription Details</b>
                            <br>
                            <div id="plan_name"></div>
                            <div id="mode"></div>
                            <div id="register_date"></div>
                            <div id="subscription_date"></div>
                            <div id="subscription_expired_date"></div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>

    @php
        $privileges = getPrivileges();
    @endphp

    {{-- @if (getExpiryDateWithGracePeriod() <= date('Y-m-d H:i:s')) --}}
        <div class="row pt-1">
            <div class="col-lg-16">
                <!--  NAVBAR  -->
                <div class="row justify-content-center d-flex navbaar">
                    <ul class="nav nav-tabs mb-2 " id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link waves-effect active" id="all_data" data-bs-toggle="tab" data-bs-target="#all" type="button" role="tab" aria-controls="profile" aria-selected="false">All</button>
                        </li>
                        @if(Auth::user()->type == 1)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link waves-effect" id="general_insurance" data-bs-toggle="tab" data-bs-target="#generalInsurance" type="button" role="tab" aria-controls="contact" aria-selected="false">General Insurance</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link waves-effect" id="life_insurance" data-bs-toggle="tab" data-bs-target="#lifeInsurance" type="button" role="tab" aria-controls="contact" aria-selected="false">Life Insurance</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link waves-effect" id="investment_management" data-bs-toggle="tab" data-bs-target="#investment" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">Investment</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link waves-effect" id="docs" data-bs-toggle="tab" data-bs-target="#Documents" type="button" role="tab" aria-controls="contact" aria-selected="false">Documents</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link waves-effect" id="greeting_id" data-bs-toggle="tab" data-bs-target="#greetings" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">Greetings</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link waves-effect" id="follow_ups" data-bs-toggle="tab" data-bs-target="#follow" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">Follow Ups</button>
                            </li>                          
                        @else
                            @if(!empty($privileges && array_key_exists(4,$privileges)))
                                @if(array_key_exists(25,$privileges[4]))
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link waves-effect" id="general_insurance" data-bs-toggle="tab" data-bs-target="#generalInsurance" type="button" role="tab" aria-controls="contact" aria-selected="false">General Insurance</button>
                                    </li>
                                @endif
                            @endif

                            @if(!empty($privileges && array_key_exists(7,$privileges)))
                                @if(array_key_exists(26,$privileges[7]))
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link waves-effect" id="life_insurance" data-bs-toggle="tab" data-bs-target="#lifeInsurance" type="button" role="tab" aria-controls="contact" aria-selected="false">Life Insurance</button>
                                    </li>
                                @endif
                            @endif

                            @if(!empty($privileges && array_key_exists(10,$privileges)))
                                @if(array_key_exists(27,$privileges[10]))
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link waves-effect" id="investment_management" data-bs-toggle="tab" data-bs-target="#investment" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">Investment</button>
                                    </li>
                                @endif
                            @endif

                            @if(!empty($privileges && array_key_exists(19,$privileges)))
                                @if(array_key_exists(29,$privileges[19]))
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link waves-effect" id="docs" data-bs-toggle="tab" data-bs-target="#Documents" type="button" role="tab" aria-controls="contact" aria-selected="false">Documents</button>
                                    </li>
                                @endif
                            @endif

                            @if(!empty($privileges && array_key_exists(1,$privileges)))
                                @if(array_key_exists(24,$privileges[1]))
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link waves-effect" id="greeting_id" data-bs-toggle="tab" data-bs-target="#greetings" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">Greetings</button>
                                    </li>
                                @endif
                            @endif

                            @if(!empty($privileges && array_key_exists(13,$privileges)))
                                @if(array_key_exists(28,$privileges[13]))
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link waves-effect" id="follow_ups" data-bs-toggle="tab" data-bs-target="#follow" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">Follow Ups</button>
                                </li>
                                @endif
                            @endif
                        @endif
                        <li class="nav-item" role="presentation">
                            <button class="nav-link waves-effect" id="my_today_date" data-bs-toggle="tab" data-bs-target="#today" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">My Today</button>
                        </li>
                    </ul>
                </div>

                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="text-center mb-2">
                                    <h5 id="display" type="button" class="btn btn-light w-md waves-effect waves-light m-0"></h5>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-8 mb-3" id="events_show"></div>
                            <div class="col-md-2 mb-2 mt-2 text-end">
                                <label for="calender_status" class="form-label">Calendar :</label>
                            </div>
                            <div class="col-md-2">
                                <select class="form-control" name="calender_status" id="calender_status">
                                    <option value="-3">Previous Month</option>
                                    <option value="-2">This Day</option>
                                    <option value="0">Week</option>
                                    <option value="1">Next Week</option>
                                    <option value="-1">Current Month</option>
                                    <option value="2">Next Month</option>
                                </select>
                            </div>

                            <div class="col-md-1 mb-2 mt-2 text-end" id="event_status_id_1">
                                <label for="event_status" class="form-label">Status :</label>
                            </div>
                            <div class="col-md-2 mb-3" id="event_status_id_2">
                                <select class="form-control" name="event_status" id="event_status">
                                    <option value="-2">Today</option>
                                    <option value="-1">All</option>
                                    <option value="0">Prev. Pending</option>
                                    <option value="1">Complete</option>
                                </select>
                            </div>
                        </div>

                        {{-- DATATABLES --}}
                        <div class="tab-content" id="myTabContent">
                            {{-- ALL --}}
                            <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all_data">
                                <div class="d-flex justify-content-end mb-2">
                                    <input type="checkbox" class="form-check-inline" id="consolited_report" name="consolited_report">
                                    <label for="consolited_report" class="form-label me-3">Consolited Report</label>
                                </div> 

                                <div class="table-responsive" id="allTable">
                                    <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Sr. No. <span></span></th>
                                                <th>Dept Name <span></span></th>
                                                <th>Client Info. <span></span></th>
                                                <th>Action <span></span></th>
                                                <th>Status <span></span></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                    @csrf
                                </div>

                                <div id="consolitedReport">
                                    <form class="needs-validation" id="consolitedReportForm" novalidate>
                                        @csrf
                                        <div class="row">
                                            <div class="col-xl-4">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label for="from_date" class="form-label">From Date<span class="text-danger">*</span></label>
                                                            <input type="text" class="form-control" name="from_date" id="from_date" placeholder="dd-mm-yyyy" autocomplete="off" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label for="end_date" class="form-label">End Date<span class="text-danger">*</span></label>
                                                            <input type="text" class="form-control" name="end_date" id="end_date" placeholder="dd-mm-yyyy" autocomplete="off" required>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xl-4">
                                                <div class="mb-3">
                                                    <div class="d-flex justify-content-between">
                                                        <label for="departments" class="form-label">Department<span class="text-danger">*</span></label>
                                                        <div class="button-group">
                                                            <button type="button" class="btn btn-outline-primary btn-sm waves-effect waves-light font-size-13 px-2 chosen-toggle select" style="height:22px;" onclick="selectAllDepartment()">Select all</button>
                                                            <button type="button" class="btn btn-outline-danger btn-sm waves-effect waves-light font-size-13 px-2 chosen-toggle select" style="height:22px;" onclick="clearAllDepartment()">clear</button>
                                                        </div>
                                                    </div>
                                                    <select name="department[]" id="departments" class="form-control select2-ajax" multiple required>
                                                        {{-- <option value="All">All</option> --}}
                                                        <option value="General Insurance">General Insurance</option>
                                                        <option value="Life Insurance">Life Insurance</option>
                                                        <option value="Investment">Investment</option>
                                                        <option value="Documents">Documents</option>
                                                    </select>
                                                    <div class="invalid-feedback">This value is required.</div>
                                                </div>
                                            </div>
                                            <div class="col-xl-4">
                                                <div class="mb-3">
                                                    <div class="d-flex justify-content-between">
                                                        <label for="division_ids" class="form-label">Division<span class="text-danger">*</span></label>
                                                        <div class="button-group">
                                                            <button type="button" class="btn btn-outline-primary btn-sm waves-effect waves-light font-size-13 px-2 chosen-toggle select" style="height:22px;" onclick="selectAllDivision()">Select all</button>
                                                            <button type="button" class="btn btn-outline-danger btn-sm waves-effect waves-light font-size-13 px-2 chosen-toggle select" style="height:22px;" onclick="clearAllDivision()">clear</button>
                                                        </div>
                                                    </div>
                                                    <select name="division_ids[]" id="division_ids" class="form-control select2-ajax" multiple required></select>                                                                                                   
                                                    <div class="invalid-feedback">This value is required.</div>
                                                </div>
                                            </div>
                                        </div>
    
                                        <div class="row">
                                            <div class="col-xl-4">
                                                <div class="mb-3">
                                                    <div class="d-flex justify-content-between">
                                                        <label for="family_group_id" class="form-label">Group<span class="text-danger">*</span></label>
                                                        <div class="button-group">
                                                            <button type="button" class="btn btn-outline-primary btn-sm waves-effect waves-light font-size-13 px-2 chosen-toggle select" style="height:22px;" onclick="selectAllGroup()">Select all</button>
                                                            <button type="button" class="btn btn-outline-danger btn-sm waves-effect waves-light font-size-13 px-2 chosen-toggle select" style="height:22px;" onclick="clearAllGroup()">clear</button>
                                                        </div>
                                                    </div>
                                                    <select name="family_group_id[]" id="family_group_id" class="form-control select2-ajax" multiple required></select>
                                                    <div class="invalid-feedback">This value is required.</div>
                                                </div>
                                            </div>
    
                                            <div class="col-xl-4">
                                                <div class="mb-3">
                                                    <div class="d-flex justify-content-between">
                                                        <label for="families_id" class="form-label">Family<span class="text-danger">*</span></label>
                                                        <div class="button-group">
                                                            <button type="button" class="btn btn-outline-primary btn-sm waves-effect waves-light font-size-13 px-2 chosen-toggle select" style="height:22px;" onclick="selectAllFamily()">Select all</button>
                                                            <button type="button" class="btn btn-outline-danger btn-sm waves-effect waves-light font-size-13 px-2 chosen-toggle select" style="height:22px;" onclick="clearAllFamily()">clear</button>
                                                        </div>
                                                    </div>
                                                    <select class="form-control select2-ajax" id="families_id" name="families_id[]" multiple required></select>
                                                    <div class="invalid-feedback">This value is required.</div>
                                                </div>
                                            </div>
    
                                            <div class="col-xl-4">
                                                <div class="mb-3">
                                                    <div class="d-flex justify-content-between">
                                                        <label for="family_members_id" class="form-label">Member<span class="text-danger">*</span></label>
                                                        <div class="button-group">
                                                            <button type="button" class="btn btn-outline-primary btn-sm waves-effect waves-light font-size-13 px-2 chosen-toggle select" style="height:22px;" onclick="selectAllMember()">Select all</button>
                                                            <button type="button" class="btn btn-outline-danger btn-sm waves-effect waves-light font-size-13 px-2 chosen-toggle select" style="height:22px;" onclick="clearAllMember()">clear</button>
                                                        </div>
                                                    </div>
                                                    <select class="form-control select2-ajax" id="family_members_id" name="family_members_id[]" multiple required></select>
                                                    <div class="invalid-feedback">This value is required.</div>
                                                </div>
                                            </div>
                                        </div>
    
                                        <div class="row d-flex justify-content-end">
                                            <div class="col-xl-4">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <button type="button" onclick="resetFillUpForm();" class="form-control btn btn-outline-primary" id="btnClear">Reset</button>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <button type="button" onclick="applyOnConsolitedReport();" class="form-control btn btn-primary" id="btnApply">Apply</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            {{-- Documents --}}
                            <div class="tab-pane fade" id="Documents" role="tabpanel" aria-labelledby="docs">
                                <div class="table-responsive">
                                    <table id="datatable1" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Sr. No <span></span>.</th>
                                                <th>Client Name <span></span></th>
                                                <th>Document Type <span></span></th>
                                                <th>Document Name <span></span></th>
                                                <th>Document Number <span></span></th>
                                                <th>Document <span></span></th>
                                                <th>Due Date <span></span></th>
                                                <th>Action <span></span></th>
                                                <th>Status <span></span></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                    @csrf
                                </div>
                            </div>

                            {{-- GENERAL --}}
                            <div class="tab-pane fade" id="generalInsurance" role="tabpanel" aria-labelledby="general_insurance">
                                <div class="table-responsive">
                                    <table id="datatable2" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Sr. No. <span></span></th>
                                                <th>Policy No. <span></span></th>
                                                <th>Policy Holder Name <span></span></th>
                                                <th>Segment Name <span></span></th>
                                                <th>Segment Detail <span></span></th>
                                                <th>Total Premium Amt. <span></span></th>
                                                <th>Prem. Mode <span></span></th>
                                                <th>Due Type <span></span></th>
                                                <th>Due Date <span></span></th>
                                                <th>Action <span></span></th>
                                                <th>Status <span></span></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                    @csrf
                                </div>
                            </div>

                            {{-- LIFE --}}
                            <div class="tab-pane fade" id="lifeInsurance" role="tabpanel" aria-labelledby="life_insurance">
                                <div class="table-responsive">
                                    <table id="datatable3" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Sr. No. <span></span></th>
                                                <th>Policy No <span></span>.</th>
                                                <th>Policy Holder Name <span></span></th>
                                                <th>Plan Name <span></span></th>
                                                <th>Plan Detail <span></span></th>
                                                <th>Total Prem. Amt <span></span></th>
                                                <th>Prem. Mode <span></span></th>
                                                <th>Due Type <span></span></th>
                                                <th>Due Date <span></span></th>
                                                <th>Action <span></span></th>
                                                <th>Status <span></span></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                    @csrf
                                </div>
                            </div>

                            {{-- INVESTMENT --}}
                            <div class="tab-pane fade" id="investment" role="tabpanel" aria-labelledby="investment_management">
                                <div class="table-responsive">
                                    <table id="datatable4" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Sr. No. <span></span></th>
                                                <th>Invest Holder Name <span></span></th>
                                                <th>Investment To <span></span></th>
                                                <th>Investment Type <span></span></th>
                                                <th>Invest To Party Name <span></span></th>
                                                <th>Investment Amt. <span></span></th>
                                                <th>Due Date <span></span></th>
                                                <th>Action <span></span></th>
                                                <th>Status <span></span></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                    @csrf
                                </div>
                            </div>

                            {{-- GREETINGS --}}
                            <div class="tab-pane fade" id="greetings" role="tabpanel" aria-labelledby="greeting_id">
                                <div class="table-responsive">
                                    <table id="datatable5" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Sr. No. <span></span></th>
                                                <th>Greeting Type <span></span></th>
                                                <th>Cilent Name <span></span></th>
                                                <th>Date <span></span></th>
                                                <th>Action <span></span></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                    @csrf
                                </div>
                            </div>

                            {{-- MY TODAY --}}
                            <div class="tab-pane fade" id="today" role="tabpanel" aria-labelledby="my_today_date">
                                <div class="table-responsive">
                                    <table id="datatable7" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Sr. No. <span></span></th>
                                                <th>Event Name <span></span></th>
                                                <th>Event Date <span></span></th>
                                                <th>Event Time <span></span></th>
                                                <th>Event Repeated <span></span></th>
                                                <th>Action <span></span></th>
                                                <th>Status <span></span></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                    @csrf
                                </div>
                            </div>

                            {{-- FOLLOW UP --}}
                            <div class="tab-pane fade" id="follow" role="tabpanel" aria-labelledby="follow_ups">
                                <div class="table-responsive">
                                    <table id="datatable8" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Sr. No. <span></span></th>
                                                <th>Tab <span></span></th>
                                                <th>Client Name <span></span></th>
                                                <th>Date <span></span></th>
                                                <th>Remarks <span></span></th>
                                                <th>Action <span></span></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                    @csrf
                                </div>
                            </div>                          
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{-- @endif --}}
</div>

<!-- add event modal -->
<div class="modal fade" id="modalAddEvent" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalAddEventLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalAddEventLabel">Add Event</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            {{-- {{ route('save.calander.event') }}  --}}
            <form id="formAddEvent" action="javascript:void(0);" method="POST" class="needs-validation" novalidate>
                @csrf
                <input type="hidden" name="event_id" id="event_id">
                <input type="hidden" name="is_repeated_event" id="is_repeated_event">
                <input type="hidden" name="event_type" id="event_type">

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="event_date" class="form-label">Select Date<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="event_date" name="event_date" placeholder="dd-mm-yyyy" required autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="event_time" class="form-label">Select Time</label>
                                <input type="time" class="form-control" id="event_time" name="event_time" placeholder="hh:mm" autocomplete="off" onclick="this.showPicker()">
                            </div>
                        </div>   
                    </div>
                    <div class="row">
                        <div class="col-md-12 event_note_id">
                            <div class="mb-3">
                                <label for="event_note" class="form-label">Note<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="event_note" name="event_note" placeholder="Enter Event Note" required autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 mt-4 align-items-center" id="event_does_repeat_id">
                            <div class="mb-3">
                                <input type="checkbox" class="form-check-input" name="event_does_repeat" id="event_does_repeat" value>
                                <label for="event_does_repeat" class="form-label">Does Repeat</label>
                            </div>
                        </div>
                        <div class="col-md-9 d-none" id="event_repeated_id">
                            <div class="mb-3">
                                <label for="event_repeated" class="form-label">Event Repeated<span class="text-danger">*</span></label>
                                <select class="form-control select2-ajax" id="event_repeated" name="event_repeated" required>
                                    <option value=""></option>
                                    <option value="Every Day">Every Day</option>
                                    <option value="Every Week">Every Week</option>
                                    <option value="Every Month">Every Month</option>
                                    <option value="Every Year">Every Year</option>
                                    <option value="After Days">After Days</option>
                                </select>
                                <div class="invalid-feedback">This value is required.</div>
                            </div>
                        </div>
                        <div class="col-md-3 d-none after_days_id">
                            <div class="mb-3">
                                <label for="after_days" class="form-label">Days<span class="text-danger">*</span></label>
                                <input type="text" name="after_days" id="after_days" class="form-control" placeholder="Enter days" autocomplete="off" required onkeypress="return isNumber(event)" maxlength="3">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" id="btnevent" class="btn btn-primary px-3">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- not renew modal -->
<div class="modal fade" id="modalNotRenew" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalNotRenewLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalNotRenewLabel">Not Renew Policy</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="formNotRenew" action="{{route('not.renew.policy')}}" method="POST" class="needs-validation" novalidate>
                @csrf
                <input type="hidden" name="policy_id" id="policy_id">
                <input type="hidden" name="type_name" id="type_name">

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="remarks" class="form-label">Remarks<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="remarks" name="remarks" placeholder="Enter remarks" required autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" id="btnpolicy" class="btn btn-primary px-3">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- follow up modal -->
<div class="modal fade" id="modalAddFollowUp" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalAddFollowUpLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalAddFollowUpLabel">Follow Up</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body pb-1">
                <form id="formAddFollowUps" method="POST"  class="needs-validation" novalidate>
                    <input type="hidden" class="form-control" name="follow_up_id" id="follow_up_id">
                    <input type="hidden" class="form-control" name="data_id" id="data_id">   
                    <input type="hidden" class="form-control" name="follow_up_type" id="follow_up_type" value="">
                    <input type="hidden" class="form-control" name="type" id="type" value="">
                    @csrf

                    <div class="row">
                        <div class="col-xxl-5">
                            <div class="mb-3">
                                <label for="follow_up_date" class="form-label">Follow Up Date</label>
                                <input type="text" class="form-control" name="follow_up_date" id="follow_up_date" placeholder="dd-mm-yyyy" autocomplete="off" required>
                            </div>
                        </div>
                        <div class="col-xxl-5">
                            <div class="mb-3">
                                <label for="follow_up_remarks" class="form-label">Follow Up Remarks</label>
                                <input type="text" class="form-control" name="follow_up_remarks" id="follow_up_remarks" value="" placeholder="Enter remarks" maxlength="255" autocomplete="off" required>
                            </div>
                        </div>
                        <div class="col-xxl-2">
                            <div class="mb-3">
                                <label for="saveFolloUpsBtn" class="form-label">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                <button type="button" class="btn btn-primary form-control px-5 float-end" id="saveFolloUpsBtn" onclick="return saveFollowUp();">Save</button>
                            </div>
                        </div>
                    </div>
                </form>

                <hr>

                <div class="table-responsive">
                    <table id="followupDatatable" class="table align-middle table-nowrap table-striped display nowrap w-100">   
                        <thead class="table-light">
                            <tr>
                                <th>Action</th>
                                <th>Tab</th>
                                <th>Date</th>
                                <th>Remarks</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    @csrf
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>                    
            </div>
        </div>
    </div>
</div>

<!-- recurring event edit modal -->
<div class="modal fade" id="modalEditRecurringEvent" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalEditRecurringEventLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalEditRecurringEventLabel">Edit Recurring Event</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="return modalEditRecurring()"></button>
            </div>

            <form id="formEditRecurringEvent" action="javascript:void(0);" method="POST" class="needs-validation" novalidate>
                @csrf
                {{-- <input type="hidden" name="event_type" id="event_type"> --}}

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <input type="radio" class="form-check-inline form-check-input" id="this_event" name="edit_type" value="1" checked>
                            <label for="this_event" class="form-label">This Event</label>
                        </div>
                        {{-- <div class="col-md-12">
                            <input type="radio" class="form-check-inline form-check-input" id="this_and_following_events" name="edit_type" value="1">
                            <label for="this_and_following_events" class="form-label">This And Following Events</label>
                        </div> --}}
                        <div class="col-md-12">
                            <input type="radio" class="form-check-inline form-check-input" id="all_events" name="edit_type" value="2">
                            <label for="all_events" class="form-label">All Events</label>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" onclick="return modalEditRecurring()">Close</button>
                    <button type="button" id="btnRecurringEvent" onclick="return editDelete(0)" class="btn btn-primary px-3">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('assets/js/pages/kendo.all.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>

<script src="{{ asset('assets/libs/moment/min/moment.min.js') }}"></script>
<script src="{{ asset('assets/libs/chance/chance.min.js') }}"></script>

<!-- for calender -->
<link href="{{ asset('assets/js/zabunto_calander/demo.css') }}" rel="stylesheet">
<link href="{{ asset('assets/js/zabunto_calander/zabuto_calendar.min.css') }}" rel="stylesheet">
<script src="{{ asset('assets/js/zabunto_calander/zabuto_calendar.min.js') }}"></script>

<!-- for Highcharts -->
<script src="{{ asset('assets/js/highchart/highcharts.js') }}"></script>
<script src="{{ asset('assets/js/highchart/highcharts-more.js') }}"></script>
<script src="{{ asset('assets/js/highchart/solid-gauge.js') }}"></script>
<script src="{{ asset('assets/js/highchart/data.js') }}"></script>
<script src="{{ asset('assets/js/highchart/drilldown.js') }}"></script>
<script src="{{ asset('assets/js/highchart/exporting.js') }}"></script>
<script src="{{ asset('assets/js/highchart/offline-exporting.js') }}"></script>
<script src="{{ asset('assets/js/highchart/export-data.js') }}"></script>
<script src="{{ asset('assets/js/highchart/accessibility.js') }}"></script>

<script type="text/javascript">
    var totleUsedLimit = "{{ route('total.used.limit') }}";
    var ajaxCalendarData = "{{ route('dashboard.calendar') }}";
    var forwardEvent = "{{ route('forword.calander.event') }}";
    var deleteEvent = "{{ route('delete.calander.event') }}";
    var completeEvent = "{{ route('complete.calander.event') }}";
    var downloadDashboardPdf = "{{ route('download.dashborad.pdf') }}";
    var currentDate = new Date();
    var csrfToken = $("[name=_token]").val();
    var smsChart;
    var options;   

    $('#event_note, #remarks').on('input', function() {
        var inputValue = $(this).val();
        var capitalizedValue = capitalizeString(inputValue);
        $(this).val(capitalizedValue);
    });

    Highcharts.setOptions({lang: {thousandsSep: ""}});

    // ZABUTO CALANDER
    $('#my-calander').zabuto_calendar({
        ajax: ajaxCalendarData,
        cell_border: true,
        today: true,
        classname: 'table-bordered',
        navigation_markup: {
            prev: '<i class="fas fa-chevron-circle-left"></i>',
            next: '<i class="fas fa-chevron-circle-right"></i>'
        }
    });    

    if("{{$data['user_type']}}" == 1){
        $.ajax({
            url: totleUsedLimit,
            type: 'GET',
            success: function(response) {
                // HIGHCHART FOR CLIENT REGISTRATION
                Highcharts.chart('container-client-registration', {
                    chart: {type: 'column'},
                    title: {
                        text: "Client Registration",
                        style: {
                            fontSize: '15px',
                            fontWeight: 'bold',
                            color: '#f1b44c',
                            textAlign: 'center'
                        }
                    },
                    xAxis: {
                        categories: response.data.total_client === -1 ? ['Used'] : ['Clients'],
                        crosshair: true,
                    },
                    yAxis: {
                        min: 0,
                        title: {text: 'Count'},
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0,
                            dataLabels: {enabled: true}
                        }
                    },
                    colors: response.data.total_client === -1 ? ['#0c62e1'] : ['#1565C0', '#1E88E5'],
                    series: response.data.total_client === -1
                        ? [{ name: 'Clients', data: [response.data.used_client] }]
                        : [
                            { name: 'Total', data: [response.data.total_client] },
                            { name: 'Used', data: [response.data.used_client] },
                        ],
                });
            
                // HIGHCHART FOR POLICY ENTRY
                Highcharts.chart('container-policy-entry', {
                    chart: {type: 'column'},
                    title: {
                        text: "Policy Entry",
                        style: {
                            fontSize: '15px',
                            fontWeight: 'bold',
                            color: '#f1b44c',
                            textAlign: 'center'
                        }
                    },
                    xAxis: {
                        categories: response.data.total_policy === -1 ?  ["Used"] : ["Policies"],
                        crosshair: true,
                    },
                    yAxis: {
                        min: 0,
                        title: {text: 'Count'},
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0,
                            dataLabels: {enabled: true}
                        }
                    },
                    colors: response.data.total_policy === -1 ? ['#0c62e1'] : ['#1565C0', '#1E88E5'],
                    series:  response.data.total_policy === -1 
                        ? [{ name: "Policies", data: [response.data.used_policy] }]
                        : [
                            { name: "Total", data: [response.data.total_policy] },
                            { name: "Used", data: [response.data.used_policy] }
                        ],
                });

                // if(response.data.unit == "")
                // {
                //     // HIGHCHART FOR DOCUMENTS UPLOAD
                //     Highcharts.chart('container-docs', {
                //         chart: {type: 'column'},
                //         title: {
                //             text: "Documents Upload",
                //             style: {
                //                 fontSize: '15px',
                //                 fontWeight: 'bold',
                //                 color: '#f1b44c',
                //                 textAlign: 'center'
                //             }
                //         },
                //         xAxis: {
                //             categories: response.data.total_documents === -1 ? ["Used"] : ["Storage"],
                //             crosshair: true,
                //         },
                //         yAxis: {
                //             min: 0,
                //             title: {text: 'Count'},
                //         },
                //         plotOptions: {
                //             column: {
                //                 pointPadding: 0.2,
                //                 borderWidth: 0,
                //                 dataLabels: {enabled: true}
                //             }
                //         },
                //         colors: response.data.total_documents === -1 ? ['#0c62e1'] : ['#1565C0', '#1E88E5'],
                //         series: response.data.total_documents === -1 
                //         ? [{ name: "Documents", data: [response.data.used_documents] }]
                //         : [
                //             { name: "Total", data: [response.data.total_documents] },
                //             { name: "Used", data: [response.data.used_documents] }
                //         ],
                //     });
                // }
                if(response.data.unit == "")
                {
                    // HIGHCHART FOR DOCUMENTS UPLOAD
                    Highcharts.chart('container-docs', {
                        chart: {type: 'column'},
                        title: {
                            text: "Documents Upload",
                            style: {
                                fontSize: '15px',
                                fontWeight: 'bold',
                                color: '#f1b44c',
                                textAlign: 'center'
                            }
                        },
                        xAxis: {
                            categories: response.data.total_documents === -1 ? ["Used"] : ["Storage"],
                            crosshair: true,
                        },
                        yAxis: {
                            min: 0,
                            title: {text: 'Count'},
                        },
                        plotOptions: {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0,
                                dataLabels: {enabled: true}
                            }
                        },
                        colors: response.data.total_documents === -1 ? ['#0c62e1'] : ['#1565C0', '#1E88E5'],
                        series: response.data.total_documents === -1 
                        ? [{ name: "Documents", data: [response.data.used_documents] }]
                        : [
                            { name: "Total", data: [response.data.total_documents] },
                            { name: "Used", data: [response.data.used_documents] }
                        ],
                    });
                }
                // else
                // {
                //     const total = response.data.total_documents;
                //     const used  = response.data.used_documents;

                //     const percentUsed = total > 0 ? (used / total) * 100 : 0;

                //     // HIGHCHART FOR DOCUMENTS UPLOAD 
                //     Highcharts.chart('container-docs', {
                //         chart: {type: 'column'},
                //         title: {
                //             text: "Documents Upload",
                //             style: {
                //                 fontSize: '15px',
                //                 fontWeight: 'bold',
                //                 color: '#f1b44c',
                //                 textAlign: 'center'
                //             }
                //         },
                //         xAxis: {
                //             categories: ["Storage"],
                //             crosshair: true,
                //         },
                //         yAxis: {
                //             min: 0,
                //             max: 100,
                //             title: {text: 'Usage (%)'},
                //         },
                //         plotOptions: {
                //             column: {
                //                 pointPadding: 0.2,
                //                 borderWidth: 0,
                //                 dataLabels: {
                //                     enabled: true,
                //                     formatter: function() {
                //                         if (this.series.name === "Total") {
                //                             return "100%";
                //                         } 
                //                         if (this.series.name === 'Used') {
                //                             return percentUsed.toFixed(2) + "%";
                //                         }
                //                     }
                //                 }
                //             }
                //         },
                //         colors: ['#1565C0', '#1E88E5'],
                //         series: [
                //                 { name: "Total", data: [100] },
                //                 { name: "Used", data: [parseFloat(percentUsed.toFixed(2))] }
                //             ],
                //     });
                // }
                else
                {
                    const total = response.data.total_documents;
                    const used  = response.data.used_documents;

                    let totalGB = parseFloat(response.data.unit);
                    const usedBytes = response.data.used_documents;
                    const usedGB = usedBytes / (1024 * 1024 * 1024);

                    // HIGHCHART FOR DOCUMENTS UPLOAD 
                    Highcharts.chart('container-docs', {
                        chart: {type: 'column'},
                        title: {
                            text: "Documents Upload",
                            style: {
                                fontSize: '15px',
                                fontWeight: 'bold',
                                color: '#f1b44c',
                                textAlign: 'center'
                            }
                        },
                        xAxis: {
                            categories: ["Storage"],
                            crosshair: true,
                        },
                        yAxis: {
                            min: 0,
                            title: {text: 'GB'},
                        },
                        plotOptions: {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0,
                                dataLabels: { 
                                    enabled: true,
                                    formatter: function() {
                                        if (this.series.name === 'Total') {
                                            return totalGB + ' GB';
                                        } 
                                        if (this.series.name === 'Used') {
                                            return formatBytes(usedBytes);
                                        }
                                    }
                                }
                            }
                        },
                        tooltip: {
                            formatter: function() {
                                if (this.series.name === "Total") {
                                    return '<b>Total:</b> ' + totalGB + ' GB';
                                } else if (this.series.name === "Used") {
                                    return '<b>Used:</b> ' + formatBytes(usedGB * 1024 * 1024 * 1024);
                                }
                            }
                        },
                        colors: ['#1565C0', '#1E88E5'],
                        series: [
                                { name: "Total", data: [totalGB] },
                                { name: "Used", data: [parseFloat(usedGB.toFixed(2))] },
                            ],
                    });
                }

                // HIGHCHART FOR SUBSCRIPTION DAYS
                Highcharts.chart('container-days', {
                    chart: { type: 'column',
                    },
                    title: {
                        text: "Subscription Days",
                        style: {
                            fontSize: '15px',
                            fontWeight: 'bold',
                            color: '#f1b44c',
                            textAlign: 'center'
                        }
                    },
                    xAxis: {
                        categories:["Days", "Used"],
                        crosshair: true,
                    },
                    yAxis: {
                        allowDecimals: false,
                        min: 0,
                        title: {text: 'Days'},
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0,
                            dataLabels: {enabled: true},
                            stacking: 'normal'
                        }
                    },
                    colors: response.data.expired_days === 0 ? ['#1565C0' , '#1E88E5'] : ['#1565C0', '#ff0000' , '#1E88E5'],
                    series: response.data.expired_days === 0 ? 
                            [{ name: "Total", data: [response.data.total_sub_days], stack: 'normal'},
                            { name: "Used", data: [response.data.used_sub_days] }] 
                            :
                            [{ name: "Total", data: [response.data.total_sub_days], stack: 'normal'},
                            { name: "Grace Period", data: [response.data.expired_days]},
                            { name: "Used", data: [response.data.used_sub_days] }],
                });

                // HIGHCHART FOR SMS
                smsChart = Highcharts.chart('container-sms', {
                    chart: {type: 'column'},
                    title: {
                        text: "SMS",
                        style: {
                            fontSize: '15px',
                            fontWeight: 'bold',
                            color: '#f1b44c',
                            textAlign: 'center'
                        }
                    },
                    xAxis: {
                        categories: ["SMS"],
                        crosshair: true,
                    },
                    yAxis: {
                        min: 0,
                        title: {text: 'Count'},
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0,
                            dataLabels: {enabled: true}
                        }
                    },
                    colors: ['#1565C0', '#1E88E5'],
                    series: [
                                {name: "Total", data: [response.data.total_sms] }, 
                                {name: "Used", data: [response.data.used_sms] }
                            ],
                });

                // SUBSCRIPTION DETAILS
                var planName = response.data.plan_name;
                var modeName = response.data.mode;
                var registerDate = response.data.register_date;
                var subscriptionDate = response.data.subscription_date;
                var subscriptionExpreDate = response.data.subscription_expired_date;

                document.getElementById("plan_name").innerHTML = planName;
                document.getElementById("mode").innerHTML = "<b>Mode</b> : " + modeName;
                document.getElementById("register_date").innerHTML = "<b>Register Date</b> : " + registerDate;
                document.getElementById("subscription_date").innerHTML = "<b>Subscription Date</b> : " + subscriptionDate;
                document.getElementById("subscription_expired_date").innerHTML = "<b>Subscription Due Date</b> : " + subscriptionExpreDate;
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // Handle the error
                console.error(textStatus, errorThrown);
            }
        });
    }

    var selectedDate = new Date();

    $("#event_date").datepicker({
        format: "dd-mm-yyyy",
        startDate: currentDate,
        container: "#modalAddEvent",
    }).on('changeDate', function() {
        selectedDate = $(this).datepicker('getDate');

        $("#event_time").val('');

        $('.datepicker').hide();
    });

    dateValidations($('#event_date'));

    // Handle input change event
    $("#event_time").on("change", function() {
        const selectedTime =  $(this).val(); 
        const currentDateTime = new Date();
        const timeParts = selectedTime.split(":");
        const selectedHour = parseInt(timeParts[0], 10);
        const selectedMinute = parseInt(timeParts[1], 10);
        const providedTime = new Date();
        providedTime.setHours(selectedHour, selectedMinute);
       
        if (providedTime < currentDateTime && currentDateTime.toDateString() === selectedDate.toDateString()) {
            $(this).val('');
            toastr["error"]("Please select a time in the future.");
        }
    });

    $("#event_repeated").select2({placeholder:"Select status"}).on('change',function(){
        var value = $(this).val();

        if(value == "After Days"){
            $(".after_days_id").removeClass('d-none');
            $('#event_repeated_id').removeClass('col-md-9').addClass('col-md-6');
            
        }else{
            $(".after_days_id").addClass('d-none').find('input').val('');
            $('#event_repeated_id').removeClass('col-md-6').addClass('col-md-9');
        }
    });

    $('#event_status_id_1, #event_status_id_2').hide();
    $("#calender_status").val("-2").trigger("change").select2({placeholder:"Select Calendar Status"});
    $("#event_status").select2({placeholder:"Select Event Status"});

    $("#event_does_repeat").on('change',function(){
        $("#event_repeated").val('').trigger('change');

        if ($(this).prop('checked')) {
            $(this).val(1);
            eventRepeatedFunc(1);
        }else{
            $(this).val(0);
            eventRepeatedFunc(0);
        }
    });

    $("#after_days").on('input',function(e){
        var days = $(this).val();

        if(days == 0){
            e.preventDefault();
            $(this).val('');
        }
    });

    function addEvent() {
        $("#modalAddEvent").modal('show');

        $("#modalAddEventLabel").html("Add Event");
        $("#btnevent").html("Save");

        $("#event_id, #event_repeated").val('').trigger('change');
        $("#event_does_repeat_id").show();

        eventRepeatedFunc(0);

        $("#editevent").attr("id", "btnevent");

        $('#formAddEvent').removeClass('was-validated').trigger('reset');
    } 

    $(document).ready(function() {
        options = {
            beforeSubmit: showRequest, 
            success: showResponse 
        };

        // $('#formAddEvent').submit(function() {
        //     $(this).ajaxSubmit(options);
        //     return false;
        // });

        $('#formNotRenew, #formAddGeneralPolicy, #formAddLifePolicy').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });

        $("#uploadBtn").click(function () {
            var file = $("#fileInput")[0].files[0];
            
            if (!file) {
                toastr['error']("Please select a file first.");
                return;
            }

            var formData = new FormData();
            formData.append("file", file);

            $.ajax({
                url: "{{route('extract.text')}}",  // Replace with your Laravel API URL
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                beforeSend: function () {
                    $("#response").hide();
                    $("#uploadBtn").text("Uploading...").prop("disabled", true);
                },
                success: function (response) {
                    $("#result").html(JSON.stringify(response.data.replace(/\n/g, "<br>"), null, 2));
                    $("#response").show();
                },
                error: function (xhr) {
                    console.error("Error: " + xhr.responseText);
                },
                complete: function () {
                    $("#uploadBtn").text("Upload & Extract Data").prop("disabled", false);
                }
            });
        });
    });    

    function showRequest(formData, jqForm, options) {
       showLoader();

        var queryString = $.param(formData);
        return true;
    }

    function showResponse(responseText, statusText, xhr, $form) {
        hideLoader();

        if (responseText['status'] == 1) {
            toastr["success"](responseText['msg']);
            $("#" + $form[0].id + "").trigger("reset").removeClass('was-validated');
            $("#modalAddEvent, #modalNotRenew, #modalGenPendingPolicy, #modalLifePendingPolicy").modal('hide');
            $('#my-calander').zabuto_calendar('data');
            $('#datatable, #datatable1, #datatable2, #datatable3, #datatable4, #datatable5, #datatable7, #datatable8').DataTable().ajax.reload(null, false);
        } else {
            if (typeof responseText['data'] !== "undefined") {
          
                var size = Object.keys(responseText['data']).length;
                if (size > 0) {
                    for (var [key, value] of Object.entries(responseText['data'])) {
                        toastr["error"](value);
                    }
                }
            } else {
                toastr["error"](responseText['msg']);
            }
        }
    }

    function eventForword(value, type) {
        
        var id = value.id
        var event_date = value.recurrence_event_date;

        showLoader();

        $("#event_type").val(type);

        document.getElementById("btnRecurringEvent").setAttribute("onclick", "return editDelete(0)");
        
        $.ajax({
            type: 'GET',
            url: forwardEvent + "?event_id=" + id + "&event_date=" + event_date + "&event_type=" + type,
            success: function(resultData) {
                hideLoader();
                modalEditRecurring();

                $("#modalAddEvent").modal('show');
                $("#modalAddEventLabel").html("Edit Event #" + id);
                $("#btnevent").html("Update");
                $('#formAddEvent').removeClass('was-validated');

                if (resultData['status'] == 1) {
                    if(resultData['data']['event_repeated'] == "One-Time Event"){
                        $("#event_does_repeat_id").hide();
                        eventRepeatedFunc(0);

                        setTimeout(function(){
                            $("#is_repeated_event").val(1);
                        }, 400);
                    }else{
                        $("#event_does_repeat_id").show();
                        eventRepeatedFunc(1);
                        
                        $("#event_repeated").val(resultData['data']['event_repeated']).trigger('change');
                        $("#after_days").val(resultData['data']['event_days']);
                    }

                    $("#event_id").val(resultData['data']['event_id']);
                    $("#event_date").val(resultData['data']['event_date']);
                    $("#event_time").val(resultData['data']['event_time']);
                    $("#event_note").val(resultData['data']['event_title']);

                    $("#event_date").datepicker('destroy');

                    setTimeout(function() {
                        $("#event_date").datepicker({
                            update: resultData['data']['event_date'],
                            startDate: currentDate,
                            format: "dd-mm-yyyy",
                            container: "#modalAddEvent",
                        }).on('changeDate', function() {
                            $('.datepicker').hide();
                        });
                        
                    }, 400);
                }
            }
        });
    }

    function eventDelete(id, type) {
        swal.fire({
            title: "Are you sure want to delete this?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                remove(id, type);
            }
        });
    }

    function remove(value, type) {        
        var id = value.id
        var event_date = value.recurrence_event_date;
        
        if(type == 0){
            var editType = $("input[type=radio][name=edit_type]:checked").val();

            event_date = value.date;

            $.ajax({
                type: 'GET',
                url: deleteEvent + "?event_id=" + id + "&event_date=" + event_date + "&event_type=" + type + "&edit_type=" + editType,
                success: function(resultData) {
                    if (resultData['status'] == 1) {
                        toastr["success"](resultData['msg']);
                        $('#my-calander').zabuto_calendar('data');
                        $('#datatable, #datatable7').DataTable().ajax.reload(null, false);
                    }
                }
            });
        }else{
            $("input[type=radio][name=edit_type]").prop('checked', false);
            $("#this_event").prop('checked', true);
    
            $("#modalEditRecurringEvent").modal('show');
        
            $("#modalEditRecurringEventLabel").text('Delete Recurring Event')

            document.getElementById("btnRecurringEvent").setAttribute("onclick", "return editDelete(1,"+id+",'" + event_date + "',"+type+")");
        }
    } 
    
    function eventDone(id, type) {
        swal.fire({
            title: "Are you sure complete this event?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, Done it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                complete(id, type);
            }
        });
    }

    function complete(value, type) {

        var id = value.id
        var event_date = value.recurrence_event_date;

        $.ajax({
            url: completeEvent + "?event_id=" + id + "&event_date=" + event_date + "&event_type=" + type,
            type: 'GET',
            data: {
                "_token": csrfToken,
                "id": id,
            },
            success: function(response) {
                toastr["success"](response['msg']);
                // table.ajax.url(ajaxAllDataList + "?label=" + response.label).draw();
                // table7.ajax.url(ajaxMyTodayList + "?label=" + response.label).draw();
                $('#datatable, #datatable7').DataTable().ajax.reload(null, false);
            }
        });
    }

    function notRenew(id, type){
        $("#modalNotRenew").modal("show");
        $('#formNotRenew').trigger("reset").removeClass('was-validated');

        $("#policy_id").val(id);
        if(type == "Documents"){
            $("#modalNotRenewLabel").html("Not Renew Document")
        }else{
            $("#modalNotRenewLabel").html("Not Renew Policy")
        }
        $("#type_name").val(type);       
    }

    function eventRepeatedFunc(checked){
        $("#is_repeated_event").val(checked);

        if(checked == 0){
            $("#event_does_repeat").prop('checked',false).val(0);
            $("#event_repeated_id").addClass('d-none').find('input, select').attr('disabled',true);
        }else{
            $("#event_does_repeat").prop('checked',true).val(1);
            $("#event_repeated_id").removeClass('d-none').find('input, select').attr('disabled',false);
        }
    }

    function modalEditRecurring(){
        $("#modalAddEvent").css({"opacity" : "1.0"})
    }

    $("#btnevent").on('click',function(){
        var id = $("#event_id").val();
        var formData = new FormData($('#formAddEvent')[0]);
        var editType = $("#event_type").val();
        var does_reapet = $("#event_does_repeat").val();        

        if(id != ''){
            if(editType == 1 && does_reapet == 1){
                $("input[type=radio][name=edit_type]").prop('checked', false);
                $("#this_event").prop('checked', true);
    
                $("#modalEditRecurringEvent").modal('show');

                $("#modalEditRecurringEventLabel").text('Edit Recurring Event')
    
                $("#modalAddEvent").css({"opacity" : "0.5"})
            }else{
                saveEvent(formData);
            }
        }else{
            saveEvent(formData);
        }
    });

    function editDelete(isDeleted,id,eventDate,type){
        // $("#btnRecurringEvent").on('click',function(){   
            if(isDeleted == 0){
                        
                var formData = new FormData($('#formEditRecurringEvent')[0]);
        
                var data = new FormData($('#formAddEvent')[0]);
                for (var [key, value] of data.entries()) {
                    formData.append(key, value);
                }
                
                saveEvent(formData);
            }else{
                var editType = $("input[type=radio][name=edit_type]:checked").val();
                
                $.ajax({
                    type: 'GET',
                    url: deleteEvent + "?event_id=" + id + "&event_date=" + eventDate + "&event_type=" + type+ "&edit_type=" + editType,
                    success: function(resultData) {
                        if (resultData['status'] == 1) {
                            toastr["success"](resultData['msg']);
                            $('#my-calander').zabuto_calendar('data');
                            $('#datatable, #datatable7').DataTable().ajax.reload(null, false);

                            $("#modalAddEvent, #modalEditRecurringEvent").modal('hide');
                        }
                    }
                });
            }
        // });
    }

    function saveEvent(formData){
        var saveRecurringEvent = "{{ route('save.calander.event') }}"; 

        $.ajax({
            type: 'POST',
            url: saveRecurringEvent,
            data: formData,
            processData: false, // Don't process the data
            contentType: false, 
            beforeSend: function(){
                showLoader();
            },
            success: function(responseText) {
                hideLoader();
                
                if (responseText['status'] == 1) {
                    toastr["success"](responseText['msg']);
                    
                    modalEditRecurring();

                    $("#modalAddEvent, #modalEditRecurringEvent").modal('hide');
                    $('#my-calander').zabuto_calendar('data');
                    $('#datatable, #datatable7').DataTable().ajax.reload(null, false);
                }else{
                    if (typeof responseText['data'] !== "undefined") {
          
                        var size = Object.keys(responseText['data']).length;
                        if (size > 0) {
                            for (var [key, value] of Object.entries(responseText['data'])) {
                                toastr["error"](value);
                            }
                        }
                    } else {
                        toastr["error"](responseText['msg']);
                    }
                }
            }
        });
    }

    var status = 'calender';

    $("#calender_status").on('change',function(){
        status = 'calender';

        $('#datatable, #datatable1, #datatable2, #datatable3, #datatable4, #datatable5, #datatable7, #datatable8').DataTable().ajax.reload(null, false);
    });

    $("#event_status").on('change',function(){
        status = 'event';

        $('#datatable7').DataTable().ajax.reload(null, false);
    });

    // show current date in calendar
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1; // getMonth() returns 0-11, so add 1 to get 1-12
    var day = date.getDate();

    // var startDate = year + "-" + month + "-" + day;
    var startDate = year + "-" + String(month).padStart(2, '0') + "-" + String(day).padStart(2, '0');
    var selectDate = "";

    if(day < 10){
        day = "0" + day;
    }

    if(month < 10){
        month = "0" + month;
    }

    var convertDate = day + "-" + month + "-" + year;
    $("#display").html(convertDate);
    // document.getElementById("display").innerHTML = convertDate;

    // DATATABLES
    var table, table1, table2, table3, table4, table5, table7, table8;

    // ALL DATA
    var ajaxAllDataList = "{{ route('dashboard.calendar.all.records') }}";

    table = $('#datatable').DataTable({
        "aoColumnDefs": [{ "bSortable": true, "aTargets": [2] }],
        "order": [2,'asc'],
        // "columnDefs": [{
        //     "targets": 'no-sort',
        //     "orderable": false,
        // }],
        "scrollX": true,
        "processing": true,
        "serverSide": true,
        "scrollY": function() {return $(window).height() - 250;},
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "lengthMenu": [[-1],["All"]],
        "ajax": {
            "url": ajaxAllDataList,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "startDate": function() { return startDate },
                "calender_status": function() { return $("#calender_status").val()},
            }
        },
        "aoColumns": [
            {"mData": "id"},
            // {"mData": "tick"},
            {"mData": "dept_name" , "bSortable": false},
            {"mData": "client_info",},
            {"mData": "action", "bSortable": false},
            {"mData": "label", "bSortable": false},
        ],
    });

    // Documents DATA
    var ajaxDocumentList = "{{ route('dashboard.calendar.document') }}";

    table1 = $('#datatable1').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8]}],
        "order": [[6, 'asc']],
        // "scrollCollapse": true,
        // "fixedColumns": {
        //     right: 1,

        // },
        "scrollX": true,
        "processing": true,
        "serverSide": true,
        // "sScrollX": "100%",
        "scrollY": function() { return $(window).height() - 250; },
        "lengthMenu": [[10, 50, 100, 150], [10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxDocumentList,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "startDate": function() { return startDate },
                "calender_status": function() { return $("#calender_status").val()},
            }
        },
        "aoColumns": [
            {"mData": "id"},
            // {"mData": "tick"},
            {"mData": "client_name"},
            {"mData": "document_type"},
            {"mData": "document_name"},
            {"mData": "document_number"},
            {"mData": "document_photo", "bSortable": false},
            {"mData": "due_date"},
            {"mData": "action", "bSortable": false},
            {"mData": "label", "bSortable": false},
        ],
    });

    //GENARAL INS DATA
    var ajaxGenaralInsList = "{{ route('dashboard.calendar.gen.ins') }}";

    table2 = $('#datatable2').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}],
        "order": [[8, 'asc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollY": function() { return $(window).height() - 250; },
        "scrollX": true,
        "lengthMenu": [[10, 50, 100, 150], [10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        // "fixedColumns": {
        //     leftColumns: 1,
        // },  
        "ajax": {
            "url": ajaxGenaralInsList,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "startDate": function() { return startDate },
                "calender_status": function() { return $("#calender_status").val()},
            }
        },
        "aoColumns": [
            {"mData": "id",},
            // {"mData": "tick"},
            {"mData": "current_policy_number","visible": false},
            {"mData": "policy_holder_name",
                    "render": function(data, type, full, meta) {
                        return full.current_policy_number + ' <br> ' + data;
                    },
                    "title": "Policy No. & Holder Name"
            },
            {"mData": "segement_name","visible": false},
            {"mData": "segement_detail",
                    "render": function(data, type, full, meta) {
                        return full.segement_name + ' <br> ' + data;
                    },
                    "title": "Segment Name & Detail"
            },
            {"mData": "current_policy_prem_amt"},
            {"mData": "prem_mode"},
            {"mData": "due_type" , "bSortable": false},
            {"mData": "due_date"},
            {"mData": "action" , "bSortable": false},
            {"mData": "label" , "bSortable": false},
        ],
    });

    // LIFE INS. DATA
    var ajaxLifeInsList = "{{ route('dashboard.calendar.life.ins') }}";

    table3 = $('#datatable3').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}],
        "order": [[8, 'asc']],
        "scrollX": true,
        "processing": true,
        "serverSide": true,
        "scrollY": function() { return $(window).height() - 250; },
        "lengthMenu": [[10, 50, 100, 150], [10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxLifeInsList,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "startDate": function() { return startDate },
                "calender_status": function() { return $("#calender_status").val()},
            }
        },
        "aoColumns": [
            {"mData": "id"},
            // {"mData": "tick"},
            {"mData": "current_policy_number","visible": false},
            {"mData": "policy_holder_name",
                    "render": function(data, type, full, meta) {
                        return full.current_policy_number + ' <br> ' + data;
                    },
                    "title": "Policy No. & Holder Name"
            },
            {"mData": "segement_name","visible": false},
            {"mData": "segement_detail",
                    "render": function(data, type, full, meta) {
                        return full.segement_name + ' <br> ' + data;
                    },
                    "title": "Plan Name & Detail"
            },
            {"mData": "current_policy_prem_amt"},
            {"mData": "prem_mode"},
            {"mData": "due_type", "bSortable": false},
            {"mData": "due_date"},
            {"mData": "action", "bSortable": false},
            {"mData": "label", "bSortable": false},
        ],
    });

    // INVESTMENT
    var ajaxInvestmentList = "{{ route('dashboard.calendar.investment') }}";

    table4 = $('#datatable4').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8]}],
        //"order": [[6, 'asc']],
        "order": [[0, 'desc']],
        "scrollX": true,
        "processing": true,
        "serverSide": true,
        "scrollY": function() { return $(window).height() - 250; },
        "lengthMenu": [[10, 50, 100, 150], [10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxInvestmentList,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "startDate": function() { return startDate },
                "calender_status": function() { return $("#calender_status").val()},
            }
        },
        "aoColumns": [
            {"mData": "id"},
            // {"mData": "tick"},
            {"mData": "invest_holder_name"},
            {"mData": "invest_to"},
            {"mData": "invest_type"},
            {"mData": "invest_to_party_name"},
            {"mData": "invest_amt"},
            {"mData": "due_date"},
            {"mData": "action" , "bSortable": false},
            {"mData": "label" , "bSortable": false},
        ],
    });

    // GREETINGS
    var ajaxGreetingList = "{{ route('dashboard.calendar.greeting') }}";

    table5 = $('#datatable5').DataTable({
        "order": [],
        "columnDefs": [{
            "targets": 'no-sort',
            "orderable": false,
        }],
        "scrollX": true,
        "processing": true,
        "serverSide": true,
        "scrollY": function() { return $(window).height() - 250; },
        "lengthMenu": [[10, 50, 100, 150], [10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxGreetingList,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "startDate": function() { return startDate },
                "calender_status": function() { return $("#calender_status").val()},
            }
        },
        "aoColumns": [
            {"mData": "id"},
            // {"mData": "tick"},
            {"mData": "greeting_type"},
            {"mData": "client_name"},
            {"mData": "date"},
            {"mData": "action", "bSortable" : false},
        ],
    });

    //  MY TODAY
    var ajaxMyTodayList = "{{ route('dashboard.calendar.my.today') }}";

    table7 = $('#datatable7').DataTable({
        "order": [],
        "columnDefs": [{"targets": 'no-sort',"orderable": false,}],
        "scrollX": true,
        "processing": true,
        "serverSide": true,
        "scrollY": function() { return $(window).height() - 250; },
        "lengthMenu": [[10, 50, 100, 150], [10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxMyTodayList,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "startDate": function() { return startDate },
                "event_status": function() { return $("#event_status").val(); },
                "calender_status": function() { return $("#calender_status").val()},
                "status": function(){return status},
            }
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "event_name"},
            {"mData": "event_date"},
            {"mData": "event_time"},
            {"mData": "event_repeated"},
            {"mData": "action", "bSortable" : false},
            {"mData": "label"},
        ],
    });

    var ajaxFollowUpList = "{{ route('dashboard.follow.ups') }}";

    table8 = $('#datatable8').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2]}],
        "order": [[3, 'desc']],
        "scrollX": true,
        "processing": true,
        "serverSide": true,
        "scrollY": function() { return $(window).height() - 250; },
        "lengthMenu": [[10, 50, 100, 150], [10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxFollowUpList,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "startDate": function() { return startDate },
                "event_status": function() { return $("#event_status").val(); },
                "calender_status": function() { return $("#calender_status").val()},
                "status": function(){return status},
            }
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "tab", "bSortable" : false},
            {"mData": "client_name"},
            {"mData": "date"},
            {"mData": "remakrs"},
            {"mData": "action", "bSortable" : false},
        ],
    });

    // CALANDER CLICK EVENT
    $('#my-calander').on('click', '.zabuto-calendar__event', function() {
        $('#all_data').tab('show');

        const myTabElement = document.getElementById('myTab');

        // Scroll to the element
        myTabElement.scrollIntoView({
            behavior: 'smooth'
        });

        var eventdate = $(this).data('date');
        startDate = eventdate;

        var parts = eventdate.split('-');
        var calanderConvertDate = `${parts[2]}-${parts[1]}-${parts[0]}`;

        document.getElementById('display').innerHTML = calanderConvertDate;

        $("#calender_status").val(-2).trigger('change');
        consolitedReportCheckBox("false");

        // reloadDatatable();
        // reloadTable1();
        // reloadTable2();
        // reloadTable3();
        // reloadTable4();
        // reloadTable5();
        // reloadTable7();
        // reloadTable8();
    });

    $('#all_data').click(function() {
        $('#event_status_id_1, #event_status_id_2').hide();
        $("#events_show").removeClass('col-md-5').addClass('col-md-8');
        reloadDatatable();
        consolitedReportCheckBox("false");
    });

    $('#docs').click(function() {
        $('#event_status_id_1 , #event_status_id_2').hide();
        $("#events_show").removeClass('col-md-5').addClass('col-md-8');
        reloadTable1();
        consolitedReportCheckBox("false");
    });

    $('#general_insurance').click(function() {
        $('#event_status_id_1 , #event_status_id_2').hide();
        $("#events_show").removeClass('col-md-5').addClass('col-md-8');
        reloadTable2();
        consolitedReportCheckBox("false");
    });

    $('#life_insurance').click(function() {
        $('#event_status_id_1 , #event_status_id_2').hide();
        $("#events_show").removeClass('col-md-5').addClass('col-md-8');
        reloadTable3();
        consolitedReportCheckBox("false");
    });

    $('#investment_management').click(function() {
        $('#event_status_id_1 , #event_status_id_2').hide();
        $("#events_show").removeClass('col-md-5').addClass('col-md-8');
        reloadTable4();
        consolitedReportCheckBox("false");
    });

    $('#greeting_id').click(function() {
        $('#event_status_id_1 , #event_status_id_2').hide();
        $("#events_show").removeClass('col-md-5').addClass('col-md-8');
        reloadTable5();
        consolitedReportCheckBox("false");
    });

    $('#my_today_date').click(function() {
        $('#event_status_id_1 , #event_status_id_2').show();
        $("#events_show").removeClass('col-md-8').addClass('col-md-5');     
        reloadTable7();
        consolitedReportCheckBox("false");
    });

    $('#follow_ups').click(function() {
        $('#event_status_id_1 , #event_status_id_2').hide();
        $("#events_show").removeClass('col-md-5').addClass('col-md-8');
        reloadTable8();
        consolitedReportCheckBox("false");
    });

    function reloadDatatable() {
        setTimeout(function() {
            var table = $('#datatable').DataTable();
            table.columns.adjust().draw();
        }, 200);
    }

    function reloadTable1() {
        setTimeout(function() {
            var table1 = $('#datatable1').DataTable();
            table1.columns.adjust().draw();
        }, 200);
    }

    function reloadTable2() {
        setTimeout(function() {
            var table2 = $('#datatable2').DataTable();
            table2.columns.adjust().draw();
        }, 200);
    }

    function reloadTable3() {
        setTimeout(function() {
            var table3 = $('#datatable3').DataTable();
            table3.columns.adjust().draw();
        }, 200);
    }

    function reloadTable4() {
        setTimeout(function() {
            var table4 = $('#datatable4').DataTable();
            table4.columns.adjust().draw();
        }, 200);
    }

    function reloadTable5() {
        setTimeout(function() {
            var table5 = $('#datatable5').DataTable();
            table5.columns.adjust().draw();
        }, 200);
    }

    function reloadTable7() {
        setTimeout(function() {
            var table7 = $('#datatable7').DataTable();
            table7.columns.adjust().draw();
        }, 200);
    }

    function reloadTable8() {
        setTimeout(function() {
            var table8 = $('#datatable8').DataTable();
            table8.columns.adjust().draw();
        }, 200);
    }

    var sendtxt = "{{ route('send.txt.message') }}";

    function sendTextMessage(id, type, usedLimit) {
        $.ajax({
            url: sendtxt,
            type: 'POST',
            data: {
                "_token": csrfToken,
                id: id,
                type: type,
                usedLimit: usedLimit,
            },
            success: function(response) {
                if (response.status_code == 200) {
                    toastr["success"](response['msg']);
                    $(".bxs-message").prop("disabled", true);

                    updateChart(response['msg_status']['used_sms']);

                    table.draw();
                    table1.draw();
                    table2.draw();
                    table3.draw();
                    table4.draw();
                    table5.draw();
                    table7.draw();
                    table8.draw();
                }else{
                    toastr["error"](response['msg']);
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
            }
        });
    }

    function updateChart(usedSmsValue) {
        smsChart.series[1].setData([usedSmsValue]);
    }

    function warningTextMessage() {
        setTimeout(function() {
            Swal.fire({
                title: 'Your SMS Unit Out Of Limit',
                icon: 'error',
                showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                },
            });
        }, 1000);
    }

    function NotFound(id) {
        if (id == 1) {
            setTimeout(function() {
                Swal.fire({
                    title: 'Client Mobile Number Not Found',
                    icon: 'error',
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    },
                });
            }, 1000)
        } else if (id == 2) {
            setTimeout(function() {
                Swal.fire({
                    title: 'Client Whatsapp Number Not Found',
                    icon: 'error',
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    },
                });
            }, 1000)
        } else if (id == 3) {
            setTimeout(function() {
                Swal.fire({
                    title: 'Client Email Not Found',
                    icon: 'error',
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    },
                });
            }, 1000)
        }
    }   
    
    function generalPendingPolicy(id, policy_holder, mode, risk_from, risk_to){
        $("#modalGenPendingPolicy").modal('show');
        $("#formAddGeneralPolicy").trigger('reset').removeClass('was-validated');
        $("#modalGenPendingPolicyLabel").text("Pending Policy #" + id);

        $("#general_insurance_id").val(id);
        $("#general_policy_holder_name").val(policy_holder);
        $("#general_policy_mode").val(mode);
        $("#general_risk_from_date").val(risk_from);
        $("#general_risk_to_date").val(risk_to);
    }

    function lifePendingPolicy(id, policy_holder, mode, risk_from, risk_to){
        $("#modalLifePendingPolicy").modal('show');
        $("#formAddLifePolicy").trigger('reset').removeClass('was-validated');
        $("#modalLifePendingPolicyLabel").text("Pending Policy #" + id);

        $("#life_insurance_id").val(id);
        $("#life_policy_holder_name").val(policy_holder);
        $("#life_policy_mode").val(mode);
        $("#life_risk_from_date").val(risk_from);
        $("#life_risk_to_date").val(risk_to);
    }

    $("#life_policy_number").on('change',function() {
        var policy = $(this).val();
        var id = $("#life_insurance_id").val();        

        $("#life_policy_number").removeClass('is-valid');

        $.ajax({
            type: "GET",
            url: "{{ route('check.policy.exits') }}?type=life",
            data: {
                policy: policy,
                id: id
            },
            success: function(resultData) {
                if (resultData['status'] == 0) {
                    toastr["error"](resultData['msg']);
                   
                    $("#life_policy_number").val('').addClass('is-invalid').removeClass('is-valid');
                } else {
                    $("#life_policy_number").removeClass('is-invalid').addClass('is-valid');
                }
            }
        });
    });

    $("#general_current_policy_number").on('change',function() {
        $(this).removeClass('is-valid');

        var policy = $(this).val();
        var id = $("#general_insurance_id").val();

        $.ajax({
            type: "GET",
            url: "{{ route('check.policy.exits') }}",
            data: {
                policy: policy,
                id:id,
            },
            success: function(resultData) {
                if (resultData['status'] == 0) {
                    toastr["error"](resultData['msg']);

                    $("#general_current_policy_number").val('').addClass('is-invalid').removeClass('is-valid');
                    $('#btnSave').attr('disabled', true);
                } else {
                    $("#general_current_policy_number").removeClass('is-invalid').addClass('is-valid');
                    $('#btnSave').attr('disabled', false);
                }
            }
        });
    });      
</script>

<!-- for consolited report -->
<script type="text/javascript">
    var currentUrl = window.location.href;
    var url = new URL(currentUrl);

    $(document).ready(function() {
        $("#consolitedReport").hide();

        var type = url.searchParams.get("report");       
        consolitedReportCheckBox(type)
        
        $('input[type="checkbox"][name="consolited_report"]').on("change",function(){
            var checkedValue = $(this).is(':checked');            
            consolitedReportView(checkedValue);            
        });        
    }); 
    
    dateSelection($("#calender_status").val());

    $("#calender_status").on('change',function(){        
        dateSelection($(this).val());
    });
    
    function dateSelection(calenderStatus){

        var currentDate = new Date();
    
        // Current month and day
        let currentMonth = currentDate.getMonth() + 1; // Months are 0-based in JS
        let currentDay = currentDate.getDate();

        // Previous month
        let previousMonthFirstDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1);
        let previousMonthLastDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0);

        // Current week (starting from Monday)
        let currentWeekStart = new Date(currentDate);
        currentWeekStart.setDate(currentDate.getDate() - currentDate.getDay() + 1); // Adjust for Monday start
        let currentWeekEnd = new Date(currentWeekStart);
        currentWeekEnd.setDate(currentWeekStart.getDate() + 6);

        // Next week
        let nextWeekStart = new Date(currentWeekStart);
        nextWeekStart.setDate(currentWeekStart.getDate() + 7);
        let nextWeekEnd = new Date(nextWeekStart);
        nextWeekEnd.setDate(nextWeekStart.getDate() + 6);

        // Next month
        let nextMonthFirstDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
        let nextMonthLastDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 2, 0);

        let calenderStart, calenderEnd;

        if (calenderStatus == -3) {
            calenderStart = formatDate(previousMonthFirstDate);
            calenderEnd = formatDate(previousMonthLastDate);
        } else if (calenderStatus == -2) {
            calenderStart = formatDate(new Date(currentDate));
            calenderEnd = formatDate(new Date(currentDate));
        } else if (calenderStatus == -1) {
            calenderStart = formatDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 1));
            calenderEnd = formatDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0));
        } else if (calenderStatus == 0) {
            calenderStart = formatDate(currentWeekStart);
            calenderEnd = formatDate(currentWeekEnd);
        } else if (calenderStatus == 1) {
            calenderStart = formatDate(nextWeekStart);
            calenderEnd = formatDate(nextWeekEnd);
        } else if (calenderStatus == 2) {
            calenderStart = formatDate(nextMonthFirstDate);
            calenderEnd = formatDate(nextMonthLastDate);
        }

        $("#from_date").val(calenderStart).datepicker({
            format: "dd-mm-yyyy",
            autoclose: true,
            setDate: calenderStart
        }).on('changeDate', function() {
            $('.datepicker').hide();
        });

        $("#end_date").val(calenderEnd).datepicker({
            format: "dd-mm-yyyy",
            autoclose: true,
            setDate:calenderEnd
        }).on('changeDate', function() {
            $('.datepicker').hide();
        });
    }

    dateValidations($('#from_date, #end_date'));

    function formatDate(date) {
        return date.getDate().toString().padStart(2, '0') + '-' +
            (date.getMonth() + 1).toString().padStart(2, '0') + '-' +
            date.getFullYear();
    }   

    $("#departments").select2({placeholder: "Search for department"}).on('change',function(){
        // var selectedValues = $(this).val();

        // if (selectedValues.includes('All') && selectedValues.length > 1) {
        //     // If "All" is selected along with other options, remove all other options
        //     $(this).val(['All']).trigger('change');
        // } else if (selectedValues.length > 1 && selectedValues.includes('All')) {
        //     // If other options are selected while "All" is already selected, deselect "All"
        //     var filteredValues = selectedValues.filter(function (value) {
        //         return value !== 'All';
        //     });
        //     $(this).val(filteredValues).trigger('change');
        // }
    });

    $("#division_ids").select2({
        ajax: {
            url: "{{ route('search.division') }}",
            dataType: 'json',
            delay: 0,
            data: function(params) {
                return {
                    "division_type": "all",
                    search_value: params.term,
                    page: params.page
                };
            },
            processResults: function(data, params) {
                params.page = params.page || 1;

                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: false
        },
        placeholder: 'Search for division',

    }).on('change',function(){
        var selectedValues = $(this).val();
        
        if(selectedValues.length > 1){
            var lastElement = selectedValues[selectedValues.length - 1];
            if(lastElement == '-1'){
                selectedValues.forEach(function(value) {                    
                    if (value != '-1') {
                        $('#division_ids').find('option[value="' + value + '"]').remove();
                    }
                });

                var newOption = new Option("All", '-1', false, false);
                $('#division_ids').append(newOption).trigger('change');            
            }
        }

        var selectedValues = $(this).val();
        if(selectedValues.length > 1){
            var exists = $.inArray('-1', selectedValues) != -1;
            if (exists) {
                $("#division_ids").find('option[value="-1"]').remove();
            }
        }
    });

    var ajaxSearchFamilyGroup = "{{route('search.family.group')}}";
    var ajaxSearchFamilyHead = "{{ route('search.family.head.without.groupid') }}";
    var ajaxSearchFamilyMember = "{{ route('search.family.member.without.groupid') }}";

    $("#family_group_id").select2({
        ajax: {
            url: ajaxSearchFamilyGroup, 
            dataType: 'json', 
            delay: 0, 
            data: function(params) {
                return {
                    "all_group": "all",
                    search_value: params.term, 
                    page: params.page
                };
            }, 
            processResults: function(data, params) {
                params.page = params.page || 1;

                return {
                    results: data.results, 
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            }, 
            cache: false
        }, 
        placeholder: 'Search for family group', 
    }).on('change', function(){
        $("#families_id, #family_members_id").empty().trigger('change');

        var selectedValues = $(this).val();
        
        if(selectedValues.length > 1){
            var lastElement = selectedValues[selectedValues.length - 1];
            
            if(lastElement == '-1'){
                selectedValues.forEach(function(value) {                    
                    if (value != '-1') {
                        $('#family_group_id').find('option[value="' + value + '"]').remove();
                    }
                });

                var newOption = new Option("All", '-1', false, false);
                $('#family_group_id').append(newOption).trigger('change');            
            }
        }

        var selectedValues = $(this).val();
        if(selectedValues.length > 1){
            var exists = $.inArray('-1', selectedValues) != -1;
            if (exists) {
                $("#family_group_id").find('option[value="-1"]').remove();
            }
        }
    });

    $("#families_id").select2({
        ajax: {
            url: ajaxSearchFamilyHead, 
            dataType: 'json', 
            delay: 0, 
            data: function(params) {
                return {
                    "group_ids" : function(){ return $("#family_group_id").val() },
                    "all_family": "all",
                    search_value: params.term, 
                    page: params.page
                };
            }, 
            processResults: function(data, params) {
                params.page = params.page || 1;

                return {
                    results: data.results, 
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }, 
                };
            }, 
            cache: false
        }, 
        placeholder: 'Search for family', 
    }).on('change', function(){
        $("#family_members_id").empty().trigger('change');

        var selectedValues = $(this).val();
        
        if(selectedValues.length > 1){
            var lastElement = selectedValues[selectedValues.length - 1];
            if(lastElement == '-1'){
                selectedValues.forEach(function(value) {                    
                    if (value != '-1') {
                        $('#families_id').find('option[value="' + value + '"]').remove();
                    }
                });

                var newOption = new Option("All", '-1', false, false);
                $('#families_id').append(newOption).trigger('change');            
            }
        }

        var selectedValues = $(this).val();
        if(selectedValues.length > 1){
            var exists = $.inArray('-1', selectedValues) != -1;
            if (exists) {
                $("#families_id").find('option[value="-1"]').remove();
            }
        }
    });

    $("#family_members_id").select2({
        ajax: {
            url: ajaxSearchFamilyMember, 
            dataType: 'json', 
            delay: 0, 
            data: function(params) {
                return {
                    "group_ids" : function(){ return $("#family_group_id").val() },
                    "familys_id" : function(){ return $("#families_id").val() },
                    "is_firm" : 1,
                    search_value: params.term, 
                    page: params.page
                };
            }, 
            processResults: function(data, params) {
                params.page = params.page || 1;

                return {
                    results: data.results, 
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }, 
                };
            }, cache: false
        }, 
        placeholder: 'Search for member', 
    });

    $("#consolitedReportForm input:required, #consolitedReportForm select:required").on("keyup change", function() {
        var fieldValue = $(this).val();
        
        if (!fieldValue || fieldValue === '') {
            $(this).addClass("is-invalid").removeClass("is-valid");
        } else {
            $(this).addClass("is-valid").removeClass("is-invalid");
        }
    });

    function applyOnConsolitedReport() {
        showLoader();

        $.ajax({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            url: "{{ route('dashboard.consolited.report.ajax') }}",
            type: "POST",
            data: $("#consolitedReportForm").serialize(),
            beforeSend: function(){
              showLoader();  
            },    
            success: function(resultData) {
                hideLoader();

                if (resultData['status'] == 1) {
                    var path = resultData['path'];
                    window.open(path, '_blank');
                    
                }else{
                    if (typeof resultData['data'] !== "undefined") {
                        var size = Object.keys(resultData['data']).length;
                        if (size > 0) {
                            for (var [key, value] of Object.entries(resultData['data'])) {
                                toastr["error"](value);

                                if (key === 'from_date') {
                                    $("#consolitedReportForm").removeClass('was-validated');
                                    $("#from_date").addClass('is-invalid').removeClass('is-valid');
                                } else if (key === 'end_date') {
                                    $("#consolitedReportForm").removeClass('was-validated');
                                    $("#end_date").addClass('is-invalid').removeClass('is-valid');
                                }else if (key === 'department'){
                                    $("#consolitedReportForm").removeClass('was-validated');
                                    $("#departments").addClass('is-invalid').removeClass('is-valid');
                                }else if(key === 'division_ids'){
                                    $("#consolitedReportForm").removeClass('was-validated');
                                    $("#division_ids").addClass('is-invalid').removeClass('is-valid');
                                }else if (key === 'family_group_id'){
                                    $("#consolitedReportForm").removeClass('was-validated');
                                    $("#family_group_id").addClass('is-invalid').removeClass('is-valid');
                                }else if (key === 'families_id'){
                                    $("#consolitedReportForm").removeClass('was-validated');
                                    $("#families_id").addClass('is-invalid').removeClass('is-valid');
                                }else if (key === 'family_members_id'){
                                    $("#consolitedReportForm").removeClass('was-validated');
                                    $("#family_members_id").addClass('is-invalid').removeClass('is-valid');
                                }else{                                    
                                    // $("#from_date, #end_date, #departments, #family_members_id, #families_id, #family_group_id").removeClass('is-invalid');
                                }
                            }
                        }
                    }else{
                        toastr['error'](resultData['msg']);
                    }
                }
            }
        });
    }

    function resetFillUpForm() {
        $("#departments, #division_ids, #family_group_id, #families_id, #family_members_id").find("option").prop("selected", false).trigger("change");

        $('#from_date, #end_date').datepicker("destroy").val("").datepicker({
            format: "dd-mm-yyyy",
            autoclose: true
        }).on('changeDate', function() {
            $('.datepicker').hide();
        });
    }

    function consolitedReportView(flag){
        if(flag == true){
            $("#consolitedReport").show();
            $("#allTable").hide();

            url.searchParams.set('report', "true");
            history.replaceState(null, null, url.toString());
        }else{
            $("#consolitedReport").hide();
            $("#allTable").show();

            reloadDatatable();

            if (url.searchParams.has('report')) {
                url.searchParams.delete('report');
                history.replaceState(null, null, url.toString());
            }
        }
    }

    function consolitedReportCheckBox(type){        
        if(type == "true"){            
            $("#consolited_report").prop('checked',true).trigger('change');
            consolitedReportView(true);

            const myTabElement = document.getElementById('myTab');

            // Scroll to the element
            myTabElement.scrollIntoView({
                behavior: 'smooth'
            });
            
        }else{
            $("#consolited_report").prop('checked',false).trigger('change');
            consolitedReportView(false);
        }
    }

    function selectAllDepartment() {
        $("#departments").find("option").prop("selected", true).trigger("change");        
    }
    function clearAllDepartment() {
        $("#departments").find("option").prop("selected", false).trigger("change");        
    }

    function selectAllDivision() {
        $("#division_ids").empty().trigger('change');

        $.ajax({
            url: "{{ route('search.division') }}",
            dataType: 'json',
            data: { "division_type": "all" }, // Fetch all data initially
            beforeSend: function(){
              showLoader();  
            },
            success: function (data) {
                hideLoader();

                let options = data.results.map(item => {
                    return new Option(item.text, item.id, false, false);
                });

                // Append options before initializing Select2
                $("#division_ids").append(options).find("option").prop("selected", true).trigger("change");    
            }
        });
    }
    function clearAllDivision(){
        $("#division_ids").find("option").prop("selected", false).trigger("change");
    }

    function selectAllGroup() {
        var newOption = new Option("All Group", '-1', false, false);
        $('#family_group_id').empty().append(newOption).find("option").prop("selected", true).trigger('change');
    }
    function clearAllGroup() {
        $("#family_group_id").find("option").prop("selected", false).trigger("change");        
    }

    function selectAllFamily() {
        var newOption = new Option("All Family", '-1', false, false);
        $('#families_id').empty().append(newOption).find("option").prop("selected", true).trigger('change');
    }
    function clearAllFamily() {
        $("#families_id").find("option").prop("selected", false).trigger("change");       
    }

    function selectAllMember() {
        $("#family_members_id").empty();

        $.ajax({
            url: ajaxSearchFamilyMember,
            dataType: 'json',
            data:{"group_ids" : function(){ return $("#family_group_id").val() }, "familys_id" : function(){ return $("#families_id").val() }, "is_firm" : 1,}, // Fetch all data initially
            beforeSend: function(){
              showLoader();  
            },
            success: function (data) {
                hideLoader();

                let options = data.results.map(item => {
                    return new Option(item.text, item.id, false, false);
                });

                // Append options before initializing Select2
                $("#family_members_id").append(options).find("option").prop("selected", true).trigger("change");
            }
        });
    }
    function clearAllMember() {
        $("#family_members_id").find("option").prop("selected", false).trigger("change");       
    }
    function formatBytes(bytes) {
        if (bytes === 0) return '0 B';
        const k = 1024;
        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
</script>
@endsection