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

<style>
    .dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu .dropdown-menu {
        top: 0px;
        left: -100%;    
        display: none;
        position: absolute;
        background: #eeeef3;
    }

    .dropdown-submenu:hover .dropdown-menu {
        display: block;
    }

    .badge-soft-success{
        color: #fff;
        background-color: #34c38f;
        width: 68.5px;
    }
    .badge-soft-danger {
        color: #ffffff;
        background-color: #f46a6a;
    }
    .table .table-light{
        border-color: #d7dade !important;
    }
   
    .dropdown-checklist {
        padding: 0px 12px;
        line-height: 0px;
    }
    .custom-dropdown-toggle-top.show {
        top: 70% !important;
    }
    #datatable tbody td:nth-child(13),
    #datatable tbody td:nth-child(25) {
        white-space: normal;
        word-wrap: break-word;
    } 
    #datatable tbody td:nth-child(19),
    #datatable tbody td:nth-child(20),
    #datatable tbody td:nth-child(21) {
        white-space: normal;
        word-wrap: break-word;
        min-width: 200px;
    }
    .text-white{
        font-size: 14px;
    }
    #cards .card{
        margin-bottom: unset;
    }
    .head-lable-bg{
        background-color: #d4dcff;
        color: #000;
    }
    .head-row-bg{
        background-color: #d4dcff;
        color: #000;
    }
    .member-lable-bg{
        background-color: #d0e9ff;
        color: #000;
    }
    .member-row-bg{
        background-color: #d0e9ff;
        color: #000;
    }
    @media (max-width: 1199px){
        .text-white{
            font-size: 13px;
        }
    }
    @media (max-width: 991px){
        .text-white{
            font-size: 11px;
        }
    }
    @media (max-width: 767px){
        .float-end{
            margin-bottom: 5px;
        }
    }
   
    .modal-xxl {
        max-width: 1440px;
    }

    .popup {
        right: 0;
        left: 190px;
    }

    .select2-container--default.select2-container--disabled .select2-selection--multiple{
        background-color: transparent !important;   
    }    

    .custom-modal {
        max-width: 700px;  /* Adjust as needed */
    }

</style>

<div class="page-content">
    <div class="container-fluid">

        {{-- @include('../reachassuree_agent/master/comman/header') --}}

        {{-- <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">
                <a href="javascript:void(0);" onclick="history.back();"class="btn btn-primary px-3 waves-effect waves-light btn-sm backToButton" title="backbtn" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
            </h4>
            
            <div class="page-title-right">
                <a href="{{route('family.groups')}}" class="btn btn-primary px-4 w-md">Family Groups</a>
            </div>
        </div>

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

         <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">
                <a href="javascript:void(0);" onclick="history.back();"
                class="btn btn-primary px-3 waves-effect waves-light btn-sm backToButton"
                title="backbtn" id="backToButton">
                    <i class="mdi mdi-arrow-left font-size-20"></i>
                </a>
                &nbsp;&nbsp;&nbsp; {{ $data['title'] }}
            </h4>

            <!-- Put both buttons in the same flex container -->
            <div class="d-flex gap-2">
                <button class="btn btn-primary px-4 w-md" onclick="return addClient()" type="button">
                    <span>+ Add Client</span>
                </button>
                <a href="{{ route('family.groups') }}" class="btn btn-primary px-4 w-md">
                    Family Groups
                </a>
            </div>
        </div>


        <div class="modal fade" id="modalSelectForm" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        role="dialog" aria-labelledby="modalSelectFormLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered custom-modal" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalSelectFormLabel">Add Client</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="formPolicyHolderName" action="#" class="needs-validation" novalidate>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3 d-flex justify-content-center align-items-cente">
                                    <div class="form-check me-5" chec>
                                        <input type="radio" class="form-check-input" id="add_family_head"
                                            name="selection" value="family_head_id" checked>
                                        <label class="form-check-label" for="add_family_head">Family Head</label>
                                    </div>
                                    <div class="form-check me-5">
                                        <input type="radio" class="form-check-input" id="add_family_member"
                                            name="selection" value="family_member">
                                        <label class="form-check-label" for="add_family_member">Family
                                            Member</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="radio" class="form-check-input" id="add_firm" name="selection"
                                            value="firm">
                                        <label class="form-check-label" for="add_firm">Firm</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary px-3">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


        <div class="row" id="card">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-xl-10">
                            {{-- <div class="row" id="cards">
                                <div class="col-lg-2 col-sm-6 c mb-3">
                                    <div class="card text-center font-size-14 p-2" style="background-color: #f46a6a;">
                                        <h6 class="text-white mt-2">Total Group</h6>
                                        <h6 class="text-white" id="total_group"></h6>
                                    </div>
                                </div>
                                <div class="col-md-2 col-sm-6 c mb-3">
                                    <div class="head-lable-bg card text-center font-size-14 p-2">
                                        <h6 class="text-white mt-2">Total Family Head</h6>
                                        <h6 class="text-white" id="total_family"></h6>
                                    </div>
                                </div>
                                <div class="col-md-2 col-sm-6 c mb-3">
                                    <div class="member-lable-bg card text-center font-size-14 p-2">
                                        <h6 class="text-white mt-2">Total Member</h6>
                                        <h6 class="text-white" id="total_member"></h6>
                                    </div>
                                </div>
                                <div class="col-md-2 col-sm-6 c mb-3">
                                    <div class="card text-center font-size-14 p-2" style="background-color: #6c6e72;">
                                        <h6 class="text-white mt-2">Total Firm</h6>
                                        <h6 class="text-white" id="total_firm"></h6>
                                    </div>
                                </div>
                            </div> --}}

                            <div class="row" id="cards">
                                <div class="col-lg-2 col-sm-6 c mb-3">
                                    <div class="card text-center font-size-14 p-2" style="background-color: #81d181;">
                                        <h6 class="mt-2">Total Group</h6>
                                        <h6 class="" id="total_group"></h6>
                                    </div>
                                </div>

                                <div class="col-md-2 col-sm-6 c mb-3">
                                    <div class="head-lable-bg card text-center font-size-14 p-2">
                                        <h6 class="mt-2">Total Family Head</h6>
                                        <h6 id="total_family"></h6>
                                    </div>
                                </div>                             

                                <div class="col-md-2 col-sm-6 c mb-3">
                                    <div class="member-lable-bg card text-center font-size-14 p-2">
                                        <h6 class="mt-2">Total Member</h6>
                                        <h6 id="total_member"></h6>
                                    </div>
                                </div>


                                <div class="col-md-2 col-sm-6 c mb-3">
                                    <div class="card text-center font-size-14 p-2" style="background-color:#d7dade !important;">
                                        <h6 class="mt-2">Total Firm</h6>
                                        <h6 class="" id="total_firm"></h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-2 float-end">
                            <div class="float-end manageBox">

                                <button class="btn clearSearch tooltipMsg" onclick="return clearSearch();" type="button" title="Clear Search Data"><span class="mdi mdi-brush"></span><span class="tooltiptext">Clear Search Data</span></button>
                                <button class="btn openFullScreen tooltipMsg" onclick="return openFullScreen();" type="button" title="Open Full Screen"><span class="mdi mdi-arrow-expand-all"></span><span class="tooltiptext">Open Full Screen</span></button>
                                <button class="btn dropdown-toggle dropdownMenuButton1 tooltipMsg" type="button" title="Download" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"><span class="mdi mdi-file-download-outline"></span><span class="tooltiptext">Download</span></button> 
                                {{-- <div class="dropdown-menu custom-dropdown-toggle-top" aria-labelledby="dropdownMenuButton1">
                                    <div class="downloadReport" style="display: contents; position: relative;">
                                    <a href="#" class="dropdown-item" id="csv" style="width:150px;">Export CSV</a>
                                    <a href="#" class="dropdown-item" id="excel" style="width:150px;">Export Excel</a>
                                    <a href="#" class="dropdown-item" id="pdf" style="width:150px;">Export PDF</a>
                                    <button class="dropdown-item" id="print1" style="width:150px;"><del>Print</del></button>
                                </div> --}}
                                {{-- <div class="dropdown">
                                    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                        Export Report
                                    </button> --}}
                                    <ul class="dropdown-menu custom-dropdown-toggle-top" aria-labelledby="dropdownMenuButton1">
                                        <!-- CSV Export -->
                                        <li class="dropdown-submenu">
                                            <a href="#" class="dropdown-item dropdown-toggle">Export CSV</a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#" class="dropdown-item export-btn" data-format="csv" data-type="view">Current Page</a></li>
                                                <li><a href="#" class="dropdown-item export-btn" data-format="csv" data-type="all">All Records</a></li>
                                            </ul>
                                        </li>
                                
                                        <!-- Excel Export -->
                                        <li class="dropdown-submenu">
                                            <a href="#" class="dropdown-item dropdown-toggle">Export Excel</a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#" class="dropdown-item export-btn" data-format="excel" data-type="view">Current Page</a></li>
                                                <li><a href="#" class="dropdown-item export-btn" data-format="excel" data-type="all">All Records</a></li>
                                            </ul>
                                        </li>
                                
                                        <!-- PDF Export -->
                                        <li class="dropdown-submenu">
                                            <a href="#" class="dropdown-item dropdown-toggle">Export PDF</a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#" class="dropdown-item export-btn" data-format="pdf" data-type="view">Current Page</a></li>
                                                <li><a href="#" class="dropdown-item export-btn" data-format="pdf" data-type="all">All Records</a></li>
                                            </ul>
                                        </li>
                                
                                        <!-- Print -->
                                        <li><a href="#" class="dropdown-item export-btn" data-format="print" data-type="view"><del>Print</del></a></li>
                                    </ul>
                                {{-- </div> --}}
                                
                               
                                <button class="btn dropdown-toggle dropdownMenuButton2 tooltipMsg" type="button" title="Hide Columns" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false"><span class="mdi mdi-format-list-bulleted"></span><span class="tooltiptext">Hide Columns</span></button>
                                <div class="dropdown-menu custom-dropdown-toggle-top scrollable-menu" aria-labelledby="dropdownMenuButton2">
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked data-column="-1">
                                            <label class="form-check-label">All</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Actions" data-column="0">
                                            <label class="form-check-label">Actions</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Status" data-column="1">
                                            <label class="form-check-label">Status</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Id" data-column="2">
                                            <label class="form-check-label">Id</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="App Tracker" data-column="3">
                                            <label class="form-check-label">App Tracker</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Group" data-column="4">
                                            <label class="form-check-label">Group</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Full Name" data-column="5">
                                            <label class="form-check-label">Full Name</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Relation" data-column="6">
                                            <label class="form-check-label">Relation</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Gender" data-column="7">
                                            <label class="form-check-label">Gender</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="DOB" data-column="8">
                                            <label class="form-check-label">DOB</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Anniversary" data-column="9">
                                            <label class="form-check-label">Anniversary</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Mobile No." data-column="10">
                                            <label class="form-check-label">Mobile No.</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Whatsapp No." data-column="11">
                                            <label class="form-check-label">Whatsapp No.</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Email" data-column="12">
                                            <label class="form-check-label">Email</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Client Status" data-column="13">
                                            <label class="form-check-label">Client Status</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="marriage Status" data-column="14">
                                            <label class="form-check-label">Marriage Status</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Bussiness" data-column="15">
                                            <label class="form-check-label">Business</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="City" data-column="16">
                                            <label class="form-check-label">City</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Area" data-column="17">
                                            <label class="form-check-label">Area</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Address" data-column="18">
                                            <label class="form-check-label">Address</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Address 2" data-column="19">
                                            <label class="form-check-label">Address 2</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Join With Us" data-column="20">
                                            <label class="form-check-label">Join With Us</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Pan No." data-column="21">
                                            <label class="form-check-label">Pan No.</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Aadhar No." data-column="22">
                                            <label class="form-check-label">Aadhar No.</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Gst No." data-column="23">
                                            <label class="form-check-label">Gst No.</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Reference" data-column="24">
                                            <label class="form-check-label">Reference</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Created By" data-column="25">
                                            <label class="form-check-label">Created By</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Created date" data-column="26">
                                            <label class="form-check-label">Created date</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Modified By" data-column="27">
                                            <label class="form-check-label">Modified By</label>
                                        </div>
                                    </a>
                                    <a class="dropdown-item" href="#">
                                        <div class="form-check form-check-primary mb-3">
                                            <input type="checkbox" class="toggle-vis form-check-input" checked title="Modified date" data-column="28">
                                            <label class="form-check-label">Modified date</label>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3 search-value">
                        <div class="text-center">
                          <span class="alert-warning alert-animation px-3 py-1 rounded-3">Filter is applied...</span>              
                        </div>
                    </div>

                    <br>

                    <div class="table-responsive">
                        <table id="datatable" class="table align-middle table-nowrap display nowrap w-100">
                            <thead class="table-light">
                                <tr>
                                    <th>Action</th>
                                    <th>Status</th>
                                    <th>Id<br><input type="text" class="form-control" name="id" placeholder="Search" autocomplete="off" style="width: 50px; height: 25px"></th>
                                    <th class="text-center">App <br>Tracker</th>
                                    <th>Group<br><input type="text" class="form-control" name="group" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Full Name<br><input type="text" class="form-control" name="full_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Relation<br><input type="text" class="form-control" name="relation" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Gender<br><input type="text" class="form-control" name="gender" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>DOB<br><input type="text" class="form-control" name="dob" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Anniversary<br><input type="text" class="form-control" name="anniversary_date" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Mobile No.<br><input type="text" class="form-control" name="mobile_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Whatsapp No.<br><input type="text" class="form-control" name="whatsapp_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Email<br><input type="text" class="form-control" name="email" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Client Status<br><input type="text" class="form-control" name="client_status" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Marriage Status<br><input type="text" class="form-control" name="marriage_status" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Business<br><input type="text" class="form-control" name="business" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>City<br><input type="text" class="form-control" name="city" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Area<br><input type="text" class="form-control" name="area" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Address<br><input type="text" class="form-control" name="address1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Address 2<br><input type="text" class="form-control" name="address2" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Join With Us<br><input type="text" class="form-control" name="join_with_us" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Pan No.<br><input type="text" class="form-control" name="pan_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Aadhar No.<br><input type="text" class="form-control" name="aadhaar_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Gst No.<br><input type="text" class="form-control" name="gst_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Reference<br><input type="text" class="form-control" name="reference_by" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Created By<br><input type="text" class="form-control" name="created_by" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Created date<br><input type="text" class="form-control" name="crated_at" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Modified By<br><input type="text" class="form-control" name="modify_by" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Modified date<br><input type="text" class="form-control" name="updated_at" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        @csrf
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('../reachassuree_agent/alteration_endorsment/client_history')

<div class="modal fade" id="modalPolicies" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalPoliciesLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xxl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <input type="hidden" id="client_id" value="">
                <h5 class="modal-title" id="modalPoliciesLabel">Client Policy Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead>
                                <tr class="table-light border-0">
                                    <th class="border-0 text-uppercase" colspan="6">Client Information</th>
                                </tr>
                                <tr>
                                    <th>Id</th>
                                    <th>Group</th>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th>Mobile Number</th>
                                    <th>Email</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row" id="user_id"></th>
                                    <td id="client_group"></td>
                                    <td id="client_name"></td>
                                    <td id="client_type"></td>
                                    <td id="client_mobile"></td>
                                    <td id="client_email"></td>
                                </tr>
                            </tbody>
                        </table>

                        <table class="table table-sm table-bordered" id="generalTable">
                            <thead>
                                <tr class="table-light border-0">
                                    <th class="border-0 text-uppercase" colspan="7">General Insurance</th>
                                </tr>
                                <tr>
                                    <th><input type="checkbox" name="generalMaincheckBox" id="generalMaincheckBox" value="generalMaincheckBox"></th>
                                    <th>Due Date</th>
                                    <th>Transaction Date</th>
                                    <th>Policy No.</th>
                                    <th>Total Amount</th>
                                    <th>Segment</th>
                                    <th>Insurance Company</th>
                                </tr>
                            </thead>
                            <tbody class="generalTableData"></tbody>
                        </table>

                        <table class="table table-sm table-bordered" id="lifeTable">
                            <thead>
                                <tr class="table-light border-0">
                                    <th class="border-0 text-uppercase" colspan="7">Life Insurance</th>
                                </tr>
                                <tr>
                                    <th><input type="checkbox" name="lifeMaincheckBox" id="lifeMaincheckBox" value="lifeMaincheckBox"></th>
                                    <th>Due Date</th>
                                    <th>Transaction Date</th>
                                    <th>Policy No.</th>
                                    <th>Total Amount</th>
                                    <th>Plan Number/ Plan Name</th>
                                    <th>Insurance Company</th>
                                </tr>
                            </thead>
                            <tbody class="lifeTableData"></tbody>
                        </table>

                        <table class="table table-sm table-bordered" id="investmentTable">
                            <thead>
                                <tr class="table-light border-0">
                                    <th class="border-0 text-uppercase" colspan="7">Investment</th>
                                </tr>
                                <tr>
                                    <th><input type="checkbox" name="investmentMaincheckBox" id="investmentMaincheckBox" value="investmentMaincheckBox"></th>
                                    <th>Due Date</th>
                                    <th>Mature Date</th>
                                    {{-- <th>Document Number</th> --}}
                                    <th>Investment Amount</th>
                                    <th>Investment Select</th>
                                    <th>Investment Type</th>
                                </tr>
                            </thead>
                            <tbody class="investmentTableData"></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="justify-content: space-between;">
                <div class="d-flex">
                    <button type="button" class="btn btn-info waves-effect waves-light me-2" id="resetButton">Reset</button>
                    <button type="button" class="btn btn-danger waves-effect waves-light" id="deleteButton">Delete Record</button>
                </div>
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('custom-scripts')
<script type="text/javascript">
    var visibleColumns = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28];
    var changeClientStatusURL = "{{ route('change.client.status') }}";
    var ajaxURLGetClients = "{{ route('clients.ajax') }}";
    var restoreClient = "{{ route('restore.client') }}";
    var deleteClient = "{{ route('delete.client') }}";
    var policyList = "{{ route('policy.list') }}";
    var isDeleted = "{{ $data['is_deleted'] }}";
    var authType = "{{ Auth::user()->type }}";
    var csrfToken = $("[name=_token").val();

    const selectedGeneralValues = [];
    const selectedLifeValues = [];
    const selectedInvestmentValues = [];

    const currentPage = window.location.pathname
    const storedData = localStorage.getItem(currentPage);
    const parsedData = JSON.parse(storedData);

    $(".search-value").fadeOut();


    window.addEventListener('DOMContentLoaded', function() {
        const checkboxes = document.querySelectorAll('input[name="selection"]');
        const form = document.getElementById('formPolicyHolderName');

        checkboxes.forEach(function(checkbox) {
            checkbox.addEventListener('change', function() {
                checkboxes.forEach(function(box) {
                    if (box !== checkbox) {
                        box.checked = false;
                    }
                });
            });
        });

        form.addEventListener('submit', function(e) {
            e.preventDefault();

            const selectedOption = form.querySelector('input[name="selection"]:checked');

            if (!selectedOption) {
                alert("Please select an option.");
                return;
            }

            let route = '';

            switch (selectedOption.value) {
                case 'family_head_id':
                    route = '{{ route('add.family.head') }}';
                    break;
                case 'family_member':
                    route = '{{ route('add.family.member') }}';
                    break;
                case 'firm':
                    route = '{{ route('add.firm') }}';
            }

            // window.open(route, '_blank');
            window.location.href = route;
            $("#modalSelectForm").modal('hide');
        });

    });

    $(document).ready(function() {
        $('input.toggle-vis').on('click', function(e) {
            var columnIndex = $(this).attr('data-column');
            var unHiddenValues = [2, 3, 5, 10];

            if (columnIndex === "-1") {
                var checked = $(this).prop('checked');

                if (!checked) {
                    table.columns().visible(false);

                    unHiddenValues.forEach(function(index) {
                        table.column(index).visible(true);
                    });

                    $('input.toggle-vis').not('[data-column="-1"]').prop('checked', false).prop('disabled', true);
                } else {
                    table.columns().visible(true);
                    $('input.toggle-vis').not('[data-column="-1"]').prop('disabled', false).prop('checked', true);
                }
            } else {
                var column = table.column(columnIndex);
                column.visible($(this).prop('checked'));

                var allUnchecked = true;

                $('input.toggle-vis').not('[data-column="-1"]').each(function() {
                    if ($(this).prop('checked')) {
                        allUnchecked = false;
                        return false;
                    }
                });

                if (allUnchecked) {
                    var allCheckbox = $('input.toggle-vis[data-column="-1"]');
                    allCheckbox.prop('checked', false).prop('disabled', true);
                    
                    var allColumn = table.column("-1");
                    allColumn.visible(false);
                } else {
                    var allCheckbox = $('input.toggle-vis[data-column="-1"]');
                    allCheckbox.prop('disabled', false);
                }
            }
        });
   
        $(".export-btn").on("click", function(event) {
            event.preventDefault();
            
            var format = $(this).data("format"); // CSV, Excel, PDF, Print
            var type = $(this).data("type"); // "view" or "all"
          
            if (type === "all") {
                $.ajax({
                    url: ajaxURLGetClients,
                    type: "POST",
                    data: {
                        _token: csrfToken,
                        export: true,
                        is_deleted: isDeleted,
                        is_new: 0,                      
                    },
                    beforeSend: function() {
                        showLoader();
                    },
                    success: function(response) {
                        hideLoader();

                        var table = $("#datatable").DataTable();
                        table.clear().rows.add(response.data);
                        table.button(".buttons-" + format).trigger();

                        $('#datatable').DataTable().draw();
                    }
                });
            } else {
                var table = $("#datatable").DataTable();                
                table.button(".buttons-" + format).trigger();
            }
        });

        // ["csv", "excel", "pdf", "print"].forEach(function(format) {
            //     $("#" + format).on('click', function() {
            //         var exportType = $("#exportType").val(); // 
            //         if (exportType === "all") {
            //             $.ajax({
            //                 url: ajaxURLGetClients,
            //                 type: "POST",
            //                 data: {
            //                     _token: csrfToken,
            //                     export: true, // Send export flag
            //                     is_deleted: isDeleted,
            //                     is_new: 0,
            //                 },
            //                 success: function(response) {
            //                     var table = $('#datatable').DataTable();
            //                     table.clear().rows.add(response.data);
            //                     table.button('.buttons-' + format).trigger();
            //                 }
            //             });
            //         }else{
            //             var table = $('#datatable').DataTable();
            //             table.button('.buttons-' + format).trigger();
            //         }
            //     });
        // });

        $('#deleteButton').on('click', function () {
            var checkedGeneralIds = $('input[name="generalIds[]"]:checked').map(function() {
                return this.value;
            }).get();

            var checkedLifeIds = $('input[name="lifeIds[]"]:checked').map(function() {
                return this.value;
            }).get();

            var checkedInvestmentIds = $('input[name="investmentIds[]"]:checked').map(function() {
                return this.value;
            }).get();

            var allCheckedRecords = {
                generalIds: checkedGeneralIds,
                lifeIds: checkedLifeIds,
                investmentIds: checkedInvestmentIds
            };

            if (Object.values(allCheckedRecords).flat().length > 0) {

                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) {
                        deleteRecords(allCheckedRecords);
                    }else{
                        resetCheckbox();
                    }
                });
            } else {
                toastr.error('Please select record(s) for delete operation');
            }
        });

        $('#resetButton').on('click', function () {
            if ($('input[name="generalIds[]"]:checked').length > 0 || $('input[name="lifeIds[]"]:checked').length > 0 || $('input[name="investmentIds[]"]:checked').length > 0) {
                resetCheckbox();
            } else {
                toastr.info('All checkboxes are already unchecked');
            }
        });
    });    

    var table = $('#datatable').DataTable({        
        buttons: [
            {extend: 'csvHtml5',exportOptions: {columns: ':visible', exportOptions: {columns: ':visible'}},title: 'Client Manage Report', exportOptions: {columns: visibleColumns}}, 
            {extend: 'excelHtml5',exportOptions: {columns: ':visible'},title: 'Client Manage Report', exportOptions: {columns: visibleColumns}}, 
            {extend: 'pdfHtml5',orientation: 'landscape',pageSize: 'A1',exportOptions: {columns: ':visible'},title: 'Client Manage Report', exportOptions: {columns: visibleColumns}},             
            {extend: 'print',orientation: 'landscape',exportOptions: {columns: ':visible'},title: 'Client Manage Report', exportOptions: {columns: visibleColumns}}, 
        ],
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]}],
        "order": [[1, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "scrollY": function() {return $(window).height() - 300;},
        "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": ajaxURLGetClients,
            "type": "POST",
            "data": { "_token": csrfToken, "is_deleted": isDeleted, "is_new":0 }
        },
        "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            if (aData['form_type'] == 0) {
                $(nRow).removeClass().addClass('head-row-bg');
            } else if(aData['form_type'] != 2) {
                $(nRow).removeClass().addClass('member-row-bg');
            }else{
                $(nRow).removeClass().addClass('table-light');
            }
            return nRow;
        },
        "aoColumns": [
            {"mData": "action", "bSortable": false},
            {"mData": "status", "bSortable": false},
            {"mData": "id"},
            {"mData": "is_app_user"},
            {"mData": "group"},
            {"mData": "full_name"},
            {"mData": "relation"},
            {"mData": "gender"},
            {"mData": "dob"},
            {"mData": "anniversary_date"},
            {"mData": "mobile_number"},
            {"mData": "whatsapp_number"},
            {"mData": "email"},
            {"mData": "client_status"},
            {"mData": "marriage_status"},
            {"mData": "business"},
            {"mData": "city"},
            {"mData": "area"},
            {"mData": "address1"},
            {"mData": "address2"},
            {"mData": "join_with_us"},
            {"mData": "pan_number"},
            {"mData": "aadhaar_number"},
            {"mData": "gst_number"},
            {"mData": "reference_by"},
            {"mData": "created_by"},
            {"mData": "created_at"},
            {"mData": "modified_by"},
            {"mData": "updated_at"},
        ]
    });

    table.on('xhr', function() {
        var responseData = table.ajax.json();

        if(responseData['recordsTotal'] == 0){
            $('#dropdownMenuButton1').hide();
        }
        
        if(responseData['recordsFiltered'] == 0){
            $('#dropdownMenuButton1').hide();
        }else{
            $('#dropdownMenuButton1').show();
        }

        $("#total_family").html(responseData['client_count'].total_family);
        $("#total_member").html(responseData['client_count'].total_member);
        $("#total_firm").html(responseData['client_count'].total_firm);
        $("#total_group").html(responseData['client_count'].total_group);
        // $("#total_unit").html(responseData['client_count'].total_unit);
        // $("#total_used_unit").html(responseData['client_count'].total_used_unit);
    });

    var inputNames = [
        'id', 'app_tracker', 'group', 'full_name', 'relation', 'gender', 'dob', 'anniversary_date', 'mobile_number', 'whatsapp_number', 'email', 'client_status', 
        'marriage_status', 'business', 'city', 'area', 'address1', 'address2', 'join_with_us', 'pan_number', 'aadhaar_number', 'gst_number', 
        'reference_by', 'created_by', 'crated_at', 'modify_by', 'updated_at'
    ];

    inputNames.forEach(function(id, index) {
        $('input[name="' + id + '"]').click(function(event) {
            event.stopPropagation();
        });

        $('input[name="' + id + '"]').on('keyup input', debounce(function() {
            // table.columns(index+2).search(this.value).draw();
            table.columns(index + 2).search($('input[name="' + id + '"]').val()).draw();
            handleInputChange();
                    
            if($('input[name="' + id + '"]').val() != ''){
                $(".search-value").fadeIn();
            }else{
                $(".search-value").fadeOut();
            }
        }, 500));
    });

    if(parsedData != null){
        if(currentPage == "/admin/manage-clients" || currentPage == "/admin/deleted-clients"){
            inputNames.forEach(function(id, index) {
                if (parsedData && parsedData.hasOwnProperty(id)) {
                    $('input[name="' + id + '"]').val(parsedData[id]); // Set the value of the input field
                    table.columns(index + 2).search(parsedData[id]);
                    handleInputChange();

                    if(parsedData[id] != ''){
                        $(".search-value").fadeIn();
                    }
                }
            });
        }

        setTimeout(function() {
            $('#datatable').DataTable().draw();
        }, 300);
    }

    function deleteRecords(allCheckedRecords) {
        var clientId = $('#client_id').val();

        var deleteRecords = "{{ route('delete-record-list-data') }}";
        $.ajax({
            type: 'GET',
            url: deleteRecords,
            data : allCheckedRecords,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    resetCheckbox();
                    deletePolicyAlert(clientId);
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

    function resetCheckbox(){
        $('input[name="generalIds[]"]').prop('checked', false);
        $('input[name="lifeIds[]"]').prop('checked', false);
        $('input[name="investmentIds[]"]').prop('checked', false);

        $('input[name="generalMaincheckBox"]').prop('checked', false);
        $('input[name="lifeMaincheckBox"]').prop('checked', false);
        $('input[name="investmentMaincheckBox"]').prop('checked', false);
    }

    function deletePolicyAlert(id) {
        showLoader();
        resetCheckbox();
        $.ajax({
            type: 'GET',
            url: policyList + "?id=" + id,
            success: function(resultData) {
                $('#client_id').val('');
                $('#client_id').val(id);
                if (resultData['status'] == 1) {
                    
                    $("#modalPolicies").modal('show'); 

                    $('#user_id').text(resultData['data']['client']['id']);
                    $('#client_group').text(resultData['data']['client']['group']);
                    $('#client_name').text(resultData['data']['client']['full_name']);
                    var userType = '';
                    if(resultData['data']['client']['form_type'] == 'Head') {
                        userType = 'Head';
                    } else if (resultData['data']['client']['form_type'] == 'Member') {
                        userType = 'Member';
                    } else if (resultData['data']['client']['form_type'] == 'Firm') {
                        userType = 'Firm';
                    }
                    $('#client_type').text(userType);
                    $('#client_mobile').text(resultData['data']['client']['mobile_number']);
                    $('#client_email').text(resultData['data']['client']['email']);

                    // General
                    $('#generalTable').hide();
                    $('.generalTableData').html('');

                    if(resultData['data']['general'].length == 0 && resultData['data']['life'].length == 0 && resultData['data']['investment'].length == 0){
                        $('#resetButton, #deleteButton').addClass('d-none');
                    }else{
                        $('#resetButton, #deleteButton').removeClass('d-none');
                    }
                    
                    if(resultData['data']['general'].length > 0){

                        $('#generalTable').show();
                        var GeneralTableData = $('.generalTableData');

                        $.each(resultData['data']['general'], function(index, generalItem) {
                            var row = $('<tr>');
                            row.html(`
                                <td><input type="checkbox" class="childCheckboxGeneral" name="generalIds[]" id="general_${generalItem.id}" value="${generalItem.id}"></td>
                                <td>${generalItem.risk_to_date}</td>
                                <td>${generalItem.transaction_date}</td>
                                <td>${generalItem.current_policy_number}</td>
                                <td>${generalItem.total_amount}</td>
                                <td>${generalItem.segment}</td>
                                <td>${generalItem.insurance_company}</td>
                            `);
                            GeneralTableData.append(row);
                        });
                    }

                    const generalMaincheckBox = document.getElementById('generalMaincheckBox');
                    const childCheckboxGeneral = document.querySelectorAll('.childCheckboxGeneral');
                
                    generalMaincheckBox.addEventListener('change', function() {
                        const isChecked = generalMaincheckBox.checked;
                
                        childCheckboxGeneral.forEach(function(checkbox) {
                            checkbox.checked = isChecked;
                            updateGeneralSelectedValues(checkbox);
                        });
                    });
                
                    childCheckboxGeneral.forEach(function(checkbox) {
                        checkbox.addEventListener('change', function() {
                            updateGeneralSelectedValues(checkbox);
                            updateGeneralMainCheckbox();
                        });
                    });
                
                    function updateGeneralMainCheckbox() {
                        const checkedChildCheckboxes = document.querySelectorAll('.childCheckboxGeneral:checked');
                        generalMaincheckBox.checked = checkedChildCheckboxes.length === childCheckboxGeneral.length;
                    }
                
                    function updateGeneralSelectedValues(checkbox) {
                        const value = checkbox.value;
                        
                        if (checkbox.checked) {
                            if (!selectedGeneralValues.includes(value)) {
                                selectedGeneralValues.push(value);
                            }
                        } else {
                            
                            const index = selectedGeneralValues.indexOf(value);
                            if (index !== -1) {
                                selectedGeneralValues.splice(index, 1);
                            }
                        }
                    }
                
                    // ---------------------------------------------------------------------------------------------------------
                
                    // Life
                    $('#lifeTable').hide();
                    $('.lifeTableData').html('');
                    
                    if(resultData['data']['life'].length > 0){

                        $('#lifeTable').show();
                        var lifeTableData = $('.lifeTableData');

                        $.each(resultData['data']['life'], function(index, lifeItem) {
                            var row = $('<tr>');
                            row.html(`
                                <td><input type="checkbox" name="lifeIds[]" class="childCheckboxLife" id="life_${lifeItem.id}" value="${lifeItem.id}"></td>
                                <td>${lifeItem.risk_to_date}</td>
                                <td>${lifeItem.transaction_date}</td>
                                <td>${lifeItem.policy_number}</td>
                                <td>${lifeItem.total_amount}</td>
                                <td>${lifeItem.insurance_plan}</td>
                                <td>${lifeItem.insurance_company}</td>
                            `);
                            lifeTableData.append(row);
                        });
                    }

                    const lifeMaincheckBox = document.getElementById('lifeMaincheckBox');
                    const childCheckboxLife = document.querySelectorAll('.childCheckboxLife');
                
                    lifeMaincheckBox.addEventListener('change', function() {
                        const isChecked = lifeMaincheckBox.checked;
                
                        childCheckboxLife.forEach(function(checkbox) {
                            checkbox.checked = isChecked;
                            updateLifeSelectedValues(checkbox);
                        });
                    });
                
                    childCheckboxLife.forEach(function(checkbox) {
                        checkbox.addEventListener('change', function() {
                            updateLifeSelectedValues(checkbox);
                            updateLifeMainCheckbox();
                        });
                    });
                
                    function updateLifeMainCheckbox() {
                        const checkedChildCheckboxes = document.querySelectorAll('.childCheckboxLife:checked');
                        lifeMaincheckBox.checked = checkedChildCheckboxes.length === childCheckboxLife.length;
                    }
                
                    function updateLifeSelectedValues(checkbox) {
                        const value = checkbox.value;
                        
                        if (checkbox.checked) {
                            if (!selectedLifeValues.includes(value)) {
                                selectedLifeValues.push(value);
                            }
                        } else {
                            
                            const index = selectedLifeValues.indexOf(value);
                            if (index !== -1) {
                                selectedLifeValues.splice(index, 1);
                            }
                        }
                    }
                
                    // Investment
                    $('#investmentTable').hide();
                    $('.investmentTableData').html('');
                    
                    if(resultData['data']['investment'].length > 0){

                        $('#investmentTable').show();
                        var investmentTableData = $('.investmentTableData');
                        
                        $.each(resultData['data']['investment'], function(index, investmentItem) {
                            var row = $('<tr>');
                            row.html(`
                                <td><input type="checkbox" name="investmentIds[]" class="childCheckboxInvestment" id="investment_${investmentItem.id}" value="${investmentItem.id}"></td>
                                <td>${investmentItem.to_date}</td>
                                <td>${investmentItem.mature_date}</td>
                                <td>${investmentItem.invested_amount}</td>
                                <td>${investmentItem.investment_select}</td>
                                <td>${investmentItem.investment_type}</td>
                            `);
                            investmentTableData.append(row);
                        });

                        // <td>${investmentItem.investment_document_number}</td>
                    }

                    // ---------------------------------------------------------------------------------------------------------
                    const investmentMaincheckBox = document.getElementById('investmentMaincheckBox');
                    const childCheckboxInvestment = document.querySelectorAll('.childCheckboxInvestment');
                
                    investmentMaincheckBox.addEventListener('change', function() {
                        const isChecked = investmentMaincheckBox.checked;
                
                        childCheckboxInvestment.forEach(function(checkbox) {
                            checkbox.checked = isChecked;
                            updateInvestmentSelectedValues(checkbox);
                        });
                    });
                
                    childCheckboxInvestment.forEach(function(checkbox) {
                        checkbox.addEventListener('change', function() {
                            updateInvestmentSelectedValues(checkbox);
                            updateInvestmentMainCheckbox();
                        });
                    });
                
                    function updateInvestmentMainCheckbox() {
                        const checkedChildCheckboxes = document.querySelectorAll('.childCheckboxInvestment:checked');
                        investmentMaincheckBox.checked = checkedChildCheckboxes.length === childCheckboxInvestment.length;
                    }
                
                    function updateInvestmentSelectedValues(checkbox) {
                        const value = checkbox.value;
                        
                        if (checkbox.checked) {
                            if (!selectedInvestmentValues.includes(value)) {
                                selectedInvestmentValues.push(value);
                            }
                        } else {
                            
                            const index = selectedInvestmentValues.indexOf(value);
                            if (index !== -1) {
                                selectedInvestmentValues.splice(index, 1);
                            }
                        }
                    }
                
                    // ---------------------------------------------------------------------------------------------------------

                    hideLoader();
                }
            }
        });
    }   

    function changeStatus(id) {
        var client_status = document.getElementById("client_status" + id);

        if (client_status.checked) {
            client_status = 1;
        } else {
            client_status = 0;
        }

        $.ajax({
            type: 'GET',
            url: changeClientStatusURL + "?id=" + id + "&client_status=" + client_status,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                }
            }
        });
    }

    function addClient() {
        // $('#formCity').trigger("reset").removeClass('was-validated');
        $("#modalSelectForm").modal('show');
    }


    function deleteAlert(id) {
        swal.fire({
            title: "Delete Linked Record First",
            text: "Unable to delete the record. Please delete the linked record with its ID first.",
            showCancelButton: false,
            confirmButtonColor: "#526BDF",
            confirmButtonText: "Okay",
            // closeButton: true,
            // closeButtonAriaLabel: "Close",
        });
    }

    function showSubAgentMSG(id) {
        var clientQueryMsg = "{{ route('client.query.msg') }}";
        $.ajax({
            type: 'GET',
            url: clientQueryMsg + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    swal.fire({
                        title: "Sub agent raised this query!",
                        text: resultData['msg'],
                    });
                }else{
                    toastr["error"]("Sub agent raised query not found");
                }
            }
        });
    }

    function clientDelete(id) {
        swal.fire({
            title: "Are you sure want to delete this?",
            text: "It will be moved to Trash and can be restored later.",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                remove(id);
            }
        });
    }

    function remove(id) {
        $.ajax({
            type: 'GET',
            url: deleteClient + "?client_id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

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

    function restore(id) {
        $.ajax({
            type: 'GET',
            url: restoreClient + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                }else{
                    toastr["error"](resultData['msg']);

                    if(authType == 1 && resultData['msg'] == "Cross-Client Registration Unit Limit Exceeded"){
                        $('#modelPlanName').text('');
                        $('#modelPlanName').text("Client Registration");
                        $('#upgradePurchaseModal').modal('show');
                    }
                }
            }
        });
    }

    function openFullScreen() {
        var element = document.getElementById("card");

        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.webkitRequestFullscreen) {
            /* Safari */
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            /* IE11 */
            element.msRequestFullscreen();
        }
    }  

    function clearSearch() {
        for (let index = 0; index <= 27; index++) {
            table.column(index).visible(true);
        }

        $('.custom-select option:first').prop('selected', true);
        $('.toggle-vis').prop('checked', true);

        for (var i = 0; i < inputNames.length; i++) {
            $('[name="' + inputNames[i] + '"]').val('');
        }

        localStorage.removeItem(currentPage);

        $(".search-value").fadeOut();

        table.columns().search('').draw();
    }    

    function handleInputChange() {
        const pageData = {};

        inputNames.forEach(function(id) {
            const inputValue = $('input[name="' + id + '"]').val();
            pageData[id] = inputValue;
        });

        const jsonPageData = JSON.stringify(pageData);
        localStorage.setItem(currentPage, jsonPageData);
    }

    function viewClientHistory(recordId){
        $('#clientEndorsementHistory').modal('show');

        $.ajax({
            type: 'GET',
            url: "{{ route('edit.client.endorsement') }}" + "?id=" + recordId + "&type=history",
            success: function(resultData) {

                $('.appendTrForClientEndorsementHistory').html('');

                var linkedRecord = resultData['data']['linked_record'];
                $.each(linkedRecord, function(index, record) {
                    var operationText;

                    if (record.operation_type == 'view') {
                        operationText = 'View Only in Endorsement';
                    } else {
                        operationText = 'Effect on Policy';
                    }

                    var oldData = record.old_data;
                    var endorsedData = record.endorsed_data;

                    if (record.field_name == 'Optional Cover') {
                        if (record.old_optional_cover) {
                            const optionalCoversArray = record.old_optional_cover.map(item => item.optional_covers);
                            let combinedOptionalCovers = optionalCoversArray.join(', ');

                            if (combinedOptionalCovers.length > 40) {
                                combinedOptionalCovers = combinedOptionalCovers.substring(0, 40) + 
                                    `<a href="#" class="text-decoration-underline" data-tooltip title="${combinedOptionalCovers}">...</a>`;
                            }

                            oldData = combinedOptionalCovers;
                        }

                        if (record.new_optional_cover) {
                            const optionalCoversArray = record.new_optional_cover.map(item => item.optional_covers);
                            let combinedNewOptionalCovers = optionalCoversArray.join(', ');
    
                            if (combinedNewOptionalCovers.length > 40) {
                                combinedNewOptionalCovers = combinedNewOptionalCovers.substring(0, 40) + 
                                    `<a href="#" class="text-decoration-underline" data-tooltip title="${combinedNewOptionalCovers}">...</a>`;
                            }
    
                            endorsedData = combinedNewOptionalCovers;
                        }
                    }

                    if (record.field_name == 'Family Member') {
                        if (record.old_family_member) {
                            const optionalFamilyMember = record.old_family_member.map(item => item.text);
                            let combinedFamilyMember = optionalFamilyMember.join(', ');

                            if (combinedFamilyMember.length > 40) {
                                combinedFamilyMember = combinedFamilyMember.substring(0, 40) + 
                                    `<a href="#" class="text-decoration-underline" data-tooltip title="${combinedFamilyMember}">...</a>`;
                            }

                            oldData = combinedFamilyMember;
                        }

                        if (record.new_family_member) {
                            const familyMemberArray = record.new_family_member.map(item => item.text);
                            let combinedFamilyMember = familyMemberArray.join(', ');
    
                            if (combinedFamilyMember.length > 40) {
                                combinedFamilyMember = combinedFamilyMember.substring(0, 40) + 
                                    `<a href="#" class="text-decoration-underline" data-tooltip title="${combinedFamilyMember}">...</a>`;
                            }
    
                            endorsedData = combinedFamilyMember;
                        }
                    }

                    if (record.field_name == 'Policy Type') {
                        if(record.new_policy_type){
                            endorsedData = record.new_policy_type['text'];
                        }
                    }
                    
                    if (record.field_name == 'RTO') {
                        if(record.name_endorsed_data){
                            endorsedData = record.name_endorsed_data;
                        }
                    }
                    
                    var row = `<tr>
                        <th>${record.field_name}</th>
                        <td>${ oldData || '-'}</td>
                        <td>${record.transaction_type.charAt(0).toUpperCase() + record.transaction_type.slice(1)}</td>
                        <td>${ endorsedData || '-'}</td>
                        <td>${record.remarks || '-'}</td>
                        <td>${operationText}</td>
                    </tr>`;

                    $('.appendTrForClientEndorsementHistory').append(row);
                });

                var optionsHTML = '';
                $('#client_general_policies').html('');
                var generalPolicies = resultData['data']['general_policies'];

                if(generalPolicies && generalPolicies.length != 0){
                    for(var i = 0; i < generalPolicies.length; i++){
                        var genPolicy = generalPolicies[i];
                        optionsHTML += '<option value="' + genPolicy.id + '" selected>' + genPolicy.current_policy_number + '</option>';

                        $('#client_general_policies').html(optionsHTML);
                    }
                }

                var optionsHTML = '';
                $('#client_life_policies').html('');
                var lifePolicies = resultData['data']['life_policies'];

                if(lifePolicies && lifePolicies.length != 0){
                    for(var i = 0; i < lifePolicies.length; i++){
                        var lifePolicy = lifePolicies[i];
                        optionsHTML += '<option value="' + lifePolicy.id + '" selected>' + lifePolicy.policy_number + '</option>';

                        $('#client_life_policies').html(optionsHTML);
                    }
                }

                $('.client_transaction_date').val('').val(resultData['data']['transaction_date']);
                $('.client_document_number').val('').val(resultData['data']['document_number']);
                $('.client_family_group_id').val('').val(resultData['data']['family_group']);
                $('.client_policy_holder_id').val('').val(resultData['data']['client_name']);                
                $('#client_reference_no').val('').val(resultData['data']['reference_no']);
                $('#client_effective_date').val('').val(resultData['data']['effective_date']);
                $('.client_remarks').val('').val(resultData['data']['remarks']);

                $('#client_viewPhoto').hide();
                if(resultData['data']['document']){
                    $('#client_viewPhoto').show().attr('href', resultData['data']['document']);
                }
            }
        });

        $('#client_general_policies').select2({placeholder: 'Search for general policies'});    
        $('#client_life_policies').select2({placeholder: 'Search for life policies'});            
    }
</script>
@endsection