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

<style>
    .badge-soft-success{
        color: #fff;
        background-color: #34c38f;
    }
    .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: #3e62ff;
    }
    .head-row-bg{
        background-color: #d4dcff;
        color: #000;
    }
    .member-lable-bg{
        background-color: #2d9dff;
    }
    .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;
        }
    }
    @media only screen and (max-width:375px) {
        .card-body {
            -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 1.25rem 0.8rem;
        }
    }    
    .modal-xxl {
        max-width: 1440px;
    }

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

</style>

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

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

        <div class="row" id="card">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="row" id="cards">
                                <div class="col-md-3 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-3 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-3 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-3 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>
                        
                        <div class="col-md-3 float-end">
                            <div class="float-end manageBox">

                                <button class="btn clearSearch tooltipMsg" onclick="return clearSearch();" type="button"><span class="mdi mdi-brush"></span><span class="tooltiptext">Clear Search Data</span></button>
                                <button class="btn openFullScreen tooltipMsg" onclick="return openFullScreen();" type="button"><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" 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">
                                    <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>
                                
                                <button class="btn dropdown-toggle dropdownMenuButton2 tooltipMsg" type="button" 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" id="a">
                                            <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">
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <div class="d-flex align-items-center">
                                <label for="sub_agent_id" class="form-label text-nowrap mb-0 me-2">Sub Agent : </label>
                                <select class="form-control select2-ajax" id="sub_agent_id" name="sub_agent_id"></select>
                            </div>
                        </div>
                        <div class="col-md-4"></div>
                    </div>

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

<div class="modal fade" id="queryModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Sub Agent Query</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <input type="hidden" name="client_id" id="client_id" value="">
            <div class="modal-body">
                <p id="queryContent"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary pe-auto" id="resolveBtn">Resolved it</button>
                <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('subagent.clients.ajax') }}";
    var restoreClient = "{{ route('restore.client') }}";
    var policyList = "{{ route('policy.list') }}";
    var isDeleted = "{{ $data['is_deleted'] }}";
    var csrfToken = $("[name=_token").val();

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

    $(document).ready(function() {

        $.ajax({
            type: 'GET',
            url: "{{ route('master.sub.agent.detail') }}" + "?id=0",
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    // if(resultData['data']['id'] == 1){
                        // var newOption = new Option("Akash -TATA", '8', false, false);
                        var newOption = new Option(resultData.data.name, resultData.data.id, false,false);
                        $('#sub_agent_id').append(newOption).trigger('change');
                    // }
                }
            }
        });

        $('#queryModal').modal('hide');
        
        $('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);
                }
            }
        });
   
        ['csv', 'excel', 'pdf', 'print'].forEach(function(format) {
            $("#" + format).on('click', function() {
                $('#datatable').DataTable().button('.buttons-' + format).trigger();
            });
        });

    });
    
    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]],
        "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>'},
        "scrollY": function() {return $(window).height() - 300;},
        "ajax": {
            "url": ajaxURLGetClients,
            "type": "POST",
            "data": { 
                "_token": csrfToken, 
                "is_deleted": isDeleted,
                "sub_agent_id": function() {return $("#sub_agent_id").val();},

            }
        },
        "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){
            function strikeThroughElement(id) {
                var text = $("#" + id).text();
                $("#" + id).html("<del>" + text + "</del>").css({'cursor': 'no-drop'});
            }

            strikeThroughElement("pdf");
            strikeThroughElement("csv");
            strikeThroughElement("excel");

        }else{
            function strikeThroughElement(id) {
                var text = $("#" + id).text();
                $("#" + id).html(text ).css({'cursor': 'pointer'});
            }

            strikeThroughElement("pdf");
            strikeThroughElement("csv");
            strikeThroughElement("excel");
        }

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

    $("#sub_agent_id").on('change',function(){
        $('#datatable').DataTable().draw();
    });

    $("#sub_agent_id").select2({
        ajax: {
            url: "{{ route('search.sub.agent') }}",
            dataType: 'json',
            delay: 0,
            data: function(params) {
                return {
                    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 sub agent',
    });
    
    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'
    ];

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

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

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

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

        $('input[name="' + id + '"]').on('keyup input', function() {
            table.columns(index+1).search(this.value).draw();
        });
    });

    function handleQueryProcess(recordID) {

        $('#client_id').val(recordID);
        var getClientQuery = "{{ route('subagent.get.client.query') }}";

        $.ajax({
            type: 'GET',
            url: getClientQuery + "?id=" + recordID,
            success: function(response) {
                if(response['data']['tr_confir'] == 1){

                    $('#queryContent').text('');
                    $('#queryContent').text(response['data']['query']);

                    $('#queryModal').modal('show');

                }
            }
        });
    }

    $('#queryModal .btn-primary').click(function(){
        $('#queryModal').modal('hide');

        var raisedClientQuery = "{{ route('subagent.resolve.client.query') }}";
        var formData = {
            client_id: $('#client_id').val(),
            action: 'resolved',
            _token: $('[name="_token"]').val()
        };

        $.ajax({
            type: 'POST',
            url: raisedClientQuery,
            data: formData,
            success: function(response) {

            }
        });

        table.search('').columns().search('').draw();
        $('#queryContent').text('');
    });

</script>
@endsection