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

<style>
    #datatable_1_wrapper .row:first-child .col-sm-12,
    #datatable_1_wrapper .row:last-child .col-sm-12,
    #datatable_2_wrapper .row:first-child .col-sm-12,
    #datatable_2_wrapper .row:last-child .col-sm-12,
    #datatable_3_wrapper .row:first-child .col-sm-12,
    #datatable_3_wrapper .row:last-child .col-sm-12,
    #datatable_4_wrapper .row:first-child .col-sm-12,
    #datatable_4_wrapper .row:last-child .col-sm-12 {
        
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%;
    }

    th.reason-for-hospitalise,
    td.reason-for-hospitalise {
        width: 10px;
        max-width: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            @include('../reachassuree_agent/master/comman/header')
            <div class="page-title-right">
              <a href="{{route('add.claim.data')}}" class="btn btn-primary px-4 w-md"><i class="bx bx-plus font-size-16 align-middle me-2"></i>Add</a>
            </div>
        </div>
        <!-- end page title -->

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

        <!-- start row -->
        <div class="row">
            <div class="col-md-12 d-flex justify-content-center">
                <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link waves-effect active" id="medi-claim" data-bs-toggle="tab" data-bs-target="#mediClaim" type="button" role="tab" aria-controls="profile" aria-selected="false">Mediclaim</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link waves-effect" id="vehicle-claim" data-bs-toggle="tab" data-bs-target="#vehicleClaim" type="button" role="tab" aria-controls="contact" aria-selected="false">Vehicle Claim</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link waves-effect" id="death-claim" data-bs-toggle="tab" data-bs-target="#deathClaim" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">Death Claim</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link waves-effect" id="disability-claim" data-bs-toggle="tab" data-bs-target="#disabilityClaim" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">Disability Claim</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link waves-effect" id="other-claim" data-bs-toggle="tab" data-bs-target="#otherClaim" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">Other Claim</button>
                    </li>
                </ul>
            </div>                        
        </div>

        <div class="row">
            <div class="card">
                <div class="card-body">                                       
                    <div class="tab-content" id="myTabContent">
                        <!-- mediclaim -->
                        <div class="tab-pane fade show active" id="mediClaim" role="tabpanel" aria-labelledby="medi-claim">
                            <div class="row">
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="filter_status" class="form-label">Record Status</label>
                                        <select class="form-control select2-ajax" name="filter_status" id="filter_status">
                                            <option value="-1">All</option>
                                            <option value="0">Lodged Pending</option>
                                            <option value="1">Lodged Complete</option>
                                        </select>
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="from_date" class="form-label">Intimation From Date</label>
                                        <input type="text" name="from_date" id="from_date" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="end_date" class="form-label">Intimation End Date</label>
                                        <input type="text" name="end_date" id="end_date" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                      <label  class="form-label extra_space" for="btnClear">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                      <button type="button" onclick="return clearSearch();" class="form-control btn btn-primary" id="btnClear">Clear</button>
                                    </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 table-striped display nowrap w-100">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Action</th>
                                            <th>Status</th>
                                            <th>Form Fill Continue</th>
                                            <th>Policy Number<br><input type="text" class="form-control" name="policy_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>                        
                                            <th>Policy Holder Name<br><input type="text" class="form-control" name="policy_holder_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                            <th>Insurance Comp. Name<br><input type="text" class="form-control" name="ins_comp_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                            <th>Transaction Date<br><input type="text" class="form-control" name="transaction_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Intimation Date<br><input type="text" class="form-control" name="intimation_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Claim Type<br><input type="text" class="form-control" name="claim_type" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Mobile Number<br><input type="text" class="form-control" name="mobile_num" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Patient Name<br><input type="text" class="form-control" name="name_of_patient" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                            <th>Admission Date<br><input type="text" class="form-control" name="date_of_admission" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Hospitalise Reason<br><input type="text" class="form-control" name="reason_for_hospitalise" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Hospital Name<br><input type="text" class="form-control" name="hospital_name" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Hospital Address<br><input type="text" class="form-control" name="hospital_address" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Hospital Contact No.<br><input type="text" class="form-control" name="hospital_cont_num" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Direct Company Name<br><input type="text" class="form-control" name="direct_comp_name" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>TPA Company Name<br><input type="text" class="form-control" name="tpa_comp_name" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Intimated To<br><input type="text" class="form-control" name="intimated_to" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                @csrf
                            </div>
                        </div>

                        <!-- vehicle claim -->
                        <div class="tab-pane fade show" id="vehicleClaim" role="tabpanel" aria-labelledby="vehicle-claim">
                            <div class="row">
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="filter_status_1" class="form-label">Record Status</label>
                                        <select class="form-control select2-ajax" name="filter_status" id="filter_status_1">
                                            <option value="-1">All</option>
                                            <option value="0">Lodged Pending</option>
                                            <option value="1">Lodged Complete</option>
                                        </select>
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="from_date_1" class="form-label">Intimation From Date</label>
                                        <input type="text" name="from_date" id="from_date_1" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="end_date_1" class="form-label">Intimation End Date</label>
                                        <input type="text" name="end_date" id="end_date_1" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                      <label  class="form-label extra_space" for="btnClear_1">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                      <button type="button" onclick="return clearSearch_1();" class="form-control btn btn-primary" id="btnClear_1">Clear</button>
                                    </div>
                                  </div>
                            </div>

                            <div class="row mt-3 search-value-1">
                                <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_1" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Action</th>
                                            <th>Status</th>
                                            <th>Form Fill Continue</th>
                                            <th>Policy Number<br><input type="text" class="form-control" name="policy_number_1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>                        
                                            <th>Policy Holder Name<br><input type="text" class="form-control" name="policy_holder_name_1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Insurance Comp. Name<br><input type="text" class="form-control" name="ins_comp_name_1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Transaction Date<br><input type="text" class="form-control" name="transaction_date_1" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Intimation Date<br><input type="text" class="form-control" name="intimation_date_1" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Claim Type<br><input type="text" class="form-control" name="claim_type_1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Mobile Number<br><input type="text" class="form-control" name="mobile_num_1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Incident Date<br><input type="text" class="form-control" name="incident_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Vehicle Reg. No.<br><input type="text" class="form-control" name="vehicle_reg_no" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Garage Name<br><input type="text" class="form-control" name="garage_name" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Garage Contact No.<br><input type="text" class="form-control" name="garage_contact_no" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Garage Address<br><input type="text" class="form-control" name="garage_address" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Vehicle Driving By<br><input type="text" class="form-control" name="vehicle_driving_by" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Incident Detail<br><input type="text" class="form-control" name="incident_detail" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Damage Detail<br><input type="text" class="form-control" name="damage_detail" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Intimation Through<br><input type="text" class="form-control" name="intimation_through" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Direct Company Name<br><input type="text" class="form-control" name="direct_comp_name_1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>TPA Company Name<br><input type="text" class="form-control" name="tpa_comp_name_1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Intimated To<br><input type="text" class="form-control" name="intimated_to_1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                @csrf
                            </div>
                        </div>

                        <!-- death claim -->
                        <div class="tab-pane fade show" id="deathClaim" role="tabpanel" aria-labelledby="death-claim">
                            <div class="row">
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="filter_status_2" class="form-label">Record Status</label>
                                        <select class="form-control select2-ajax" name="filter_status" id="filter_status_2">
                                            <option value="-1">All</option>
                                            <option value="0">Lodged Pending</option>
                                            <option value="1">Lodged Complete</option>
                                        </select>
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="from_date_2" class="form-label">Intimation From Date</label>
                                        <input type="text" name="from_date" id="from_date_2" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="end_date_2" class="form-label">Intimation End Date</label>
                                        <input type="text" name="end_date" id="end_date_2" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                      <label  class="form-label extra_space" for="btnClear_2">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                      <button type="button" onclick="return clearSearch_2();" class="form-control btn btn-primary" id="btnClear_2">Clear</button>
                                    </div>
                                  </div>
                            </div>

                            <div class="row mt-3 search-value-2">
                                <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_2" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Action</th>
                                            <th>Status</th>
                                            <th>Form Fill Continue</th>
                                            <th>Policy Number<br><input type="text" class="form-control" name="policy_number_2" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>                        
                                            <th>Policy Holder Name<br><input type="text" class="form-control" name="policy_holder_name_2" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                            <th>Insurance Comp. Name<br><input type="text" class="form-control" name="ins_comp_name_2" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                            <th>Transaction Date<br><input type="text" class="form-control" name="transaction_date_2" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Intimation Date<br><input type="text" class="form-control" name="intimation_date_2" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Claim Type<br><input type="text" class="form-control" name="claim_type_2" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Death Claim Type<br><input type="text" class="form-control" name="death_claim_type" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                            <th>Death Person Name<br><input type="text" class="form-control" name="death_person_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Nominee Name<br><input type="text" class="form-control" name="nominee_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Contact No.<br><input type="text" class="form-control" name="contact_num" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Death Date<br><input type="text" class="form-control" name="death_date" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Death Type<br><input type="text" class="form-control" name="death_type" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Reason Of Death<br><input type="text" class="form-control" name="reason_for_death" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Intimated Through<br><input type="text" class="form-control" name="intimated_through" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Direct Company Name<br><input type="text" class="form-control" name="direct_comp_name_2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>TPA Company Name<br><input type="text" class="form-control" name="tpa_comp_name_2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Intimated To<br><input type="text" class="form-control" name="intimated_to_2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Total Sum Assured<br><input type="text" class="form-control" name="total_sum_assu_2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Total Term Rider <br>Sum Assured<br><input type="text" class="form-control" name="total_term_rider_sum_assu_2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Total Accident <br> Sum Assured<br><input type="text" class="form-control" name="total_acci_sum_assu_2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Total Double <br> Accident Rider <br> Sum Assured<br><input type="text" class="form-control" name="total_double_acci_rider_sum_assu_2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                @csrf
                            </div>
                        </div>
                        
                        <!-- disability claim -->
                        <div class="tab-pane fade show" id="disabilityClaim" role="tabpanel" aria-labelledby="disability-claim">
                            <div class="row">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="text-center">
                                            <div class="row justify-content-center mt-1">
                                                <div class="col-sm-3">
                                                    <div class="maintenance-img">
                                                        <img src="{{ asset('assets/images/coming-soon.svg') }}" alt="" class="img-fluid mx-auto d-block">
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="row justify-content-center">
                                                <div class="col-md-8">
                                                    <h4>Coming Soon...!</h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- other claim -->
                        <div class="tab-pane fade show" id="otherClaim" role="tabpanel" aria-labelledby="other-claim">
                            <div class="row">
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="filter_status_4" class="form-label">Record Status</label>
                                        <select class="form-control select2-ajax" name="filter_status" id="filter_status_4">
                                            <option value="-1">All</option>
                                            <option value="0">Lodged Pending</option>
                                            <option value="1">Lodged Complete</option>
                                        </select>
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="from_date_4" class="form-label">Intimation From Date</label>
                                        <input type="text" name="from_date" id="from_date_4" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="end_date_4" class="form-label">Intimation End Date</label>
                                        <input type="text" name="end_date" id="end_date_4" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                      <label  class="form-label extra_space" for="btnClear_4">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                      <button type="button" onclick="return clearSearch_4();" class="form-control btn btn-primary" id="btnClear_4">Clear</button>
                                    </div>
                                  </div>
                            </div>

                            <div class="row mt-3 search-value-4">
                                <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_4" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Action</th>
                                            <th>Status</th>
                                            <th>Form Fill Continue</th>
                                            <th>Policy Number<br><input type="text" class="form-control" name="policy_number_4" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>                        
                                            <th>Policy Holder Name<br><input type="text" class="form-control" name="policy_holder_name_4" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Insurance Comp. Name<br><input type="text" class="form-control" name="ins_comp_name_4" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Transaction Date<br><input type="text" class="form-control" name="transaction_date_4" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Intimation Date<br><input type="text" class="form-control" name="intimation_date_4" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Claim Type<br><input type="text" class="form-control" name="claim_type_4" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Mobile Number<br><input type="text" class="form-control" name="mobile_num_4" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Incident_date<br><input type="text" class="form-control" name="incident_date_4" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Estimated Loss Amt.<br><input type="text" class="form-control" name="esti_loss_amt" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Incident Detail<br><input type="text" class="form-control" name="incident_detail_4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Incident Address<br><input type="text" class="form-control" name="incident_address" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Incident Contact No.<br><input type="text" class="form-control" name="incident_cont_num" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Intimation To Police<br><input type="text" class="form-control" name="intimation_police" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Intimation To Fire<br><input type="text" class="form-control" name="intimation_fire" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Direct Company Name<br><input type="text" class="form-control" name="direct_comp_name_4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>TPA Company Name<br><input type="text" class="form-control" name="tpa_comp_name_4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Intimated To<br><input type="text" class="form-control" name="intimated_to_4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                @csrf
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->
    </div>
</div>

<div class="modal fade" id="modalViewPolicy" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalViewPolicyLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalViewPolicyLabel">Death Claim Policy Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body pb-1">
                <div id="add_new_row_death"></div>

                <div class="row mt-3" id="riders-lable">
                    <div class="col-xl">
                        <div class="card text-white bg-secondary mb-3">
                            <div class="card-header text-center font-size-14">Sum Assured<br>
                                <div id="sum_assu_amt_1"></div>
                            </div>
                        </div>
                    </div>                    
                </div>
            </div>

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

<div class="modal fade" id="modalAddMultiClaim" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalAddMultiClaimLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalAddMultiClaimLabel">Select Reason For Add Multiple Claim</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="formAddMultipleClaimReason" method="POST" class="needs-validation" novalidate>
                <input type="hidden" class="form-control" name="id" id="id">
                @csrf

                <div class="modal-body pb-1">
                    <div class="row">
                        <div class="col-xxl-12">
                            <div class="mb-3">
                                <div class="form-check">
                                    <div class="form-check-inline">
                                        <input class="form-check-inline form-check-input multiple_claim_reason" type="checkbox" name="multiple_claim_reason[]" id="multiple_hospitalised" value="Multiple Hospitalised">
                                        <label class="form-check-label me-3" for="multiple_hospitalised">Multiple Hospitalised</label>
                                    </div>
                                    <br>
                                    <div class="form-check-inline">
                                        <input class="form-check-inline form-check-input multiple_claim_reason" type="checkbox" name="multiple_claim_reason[]" id="multiple_companies" value="Multiple Companies">
                                        <label class="form-check-label me-3" for="multiple_companies">Multiple Companies</label>
                                    </div>
                                    <br>
                                    <div class="form-check-inline">
                                        <input class="form-check-inline form-check-input multiple_claim_reason" type="checkbox" name="multiple_claim_reason[]" id="riders_claim" value="Riders Claim">
                                        <label class="form-check-label me-3" for="riders_claim">Riders Claim</label>
                                    </div>
                                    <br>
                                    <div class="form-check-inline">
                                        <input class="form-check-inline form-check-input multiple_claim_reason" type="checkbox" name="multiple_claim_reason[]" id="multiple_risk_covers" value="Multiple Risk Covers">
                                        <label class="form-check-label me-3" for="multiple_risk_covers">Multiple Risk Covers</label>
                                    </div>
                                    <br>
                                    <div class="form-check-inline">
                                        <input class="form-check-inline form-check-input multiple_claim_reason" type="checkbox" name="multiple_claim_reason[]" id="other_reason" value="Other Reason For This Claim">
                                        <label class="form-check-label" for="other_reason">Other Reason For This Claim</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary px-3" onClick='return SaveMultipleClaimReason();'>Add</button>
                </div>
            </form>
        </div>
    </div>
</div>

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

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

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

                <hr>

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

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

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/js/pages/sweet-alerts.init.js') }}"></script>

<script type="text/javascript">
    var ajaxURLGetClaimDataMediClaim = "{{route('mediclaim.data.ajax')}}";
    var ajaxURLGetClaimDataVehicleClaim = "{{route('vehicle.claim.data.ajax')}}";
    var ajaxURLGetClaimDataDeathClaim = "{{route('death.claim.data.ajax')}}";
    var ajaxURLGetClaimDataOtherClaim = "{{route('other.claim.data.ajax')}}";
    var deleteIntimationClaim = "{{route('delete.claim.intimation')}}";
    var changeIntimationStatusStatusURL = "{{route('change.intimation.claim.status')}}";
    var csrfToken = $("[name=_token").val();
    
    $("#filter_status, #filter_status_1, #filter_status_2, #filter_status_4").select2({placeholder:"Select Filter"});
    $(".search-value, .search-value-1, .search-value-2, .search-value-4").fadeOut();

    function intimationDelete(id){
        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 == true) {
                remove(id);
            }
        });
    }

    function remove(id) {
        $.ajax({
            type: 'GET',
            url: deleteIntimationClaim + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable , #datatable_1 , #datatable_2 , #datatable_4').DataTable().ajax.reload(null, false);
                    // $('#datatable_3').DataTable().ajax.reload(null, false);
                }else{
                    toastr["error"](resultData['msg']);
                    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",
                    });
                }
            }
        });
    }

    // status change
    function changeStatus(id) {
        var intimation_status = document.getElementById("intimation_status" + id);
        
        if (intimation_status.checked) {
            intimation_status = 1;
        } else {
            intimation_status = 0;
        }

        $.ajax({
            type: 'GET',
            url: changeIntimationStatusStatusURL + "?id=" + id + "&intimation_status=" + intimation_status,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable , #datatable_1 , #datatable_2 , #datatable_4').DataTable().ajax.reload(null, false);
                    // $('#datatable_3').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

    function addMultipleClaim(id){
        swal.fire({
            title: "Do you want to add multiple claim?",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes",
            cancelButtonText: "No",
        }).then((result) => {
            if (result.isConfirmed) {
                MultipleClaim(id);
            }
        });
    }
    
    function MultipleClaim(id){
        $("#modalAddMultiClaim").modal('show');
        $("#formAddMultipleClaimReason").removeClass('was-validated').trigger('reset');
        $(".multiple_claim_reason").removeClass('is-valid, is-invalid');
        $("#id").val(id);
    }

    function SaveMultipleClaimReason(){
        var saveMultipleClaim = "{{route('save.multiple.claim.reaason')}}";
        $.ajax({
            type: 'GET',
            url: saveMultipleClaim,
            _token: csrfToken,
            data: $('#formAddMultipleClaimReason').serialize(),
            beforeSend: function(){
                showLoader();
            },
            success: function(resultData) {
                hideLoader();

                if(resultData['status'] == 1){
                    var id = $("#id").val();
                    
                    var multiple_claim_reason = [];
                    $('.multiple_claim_reason:checked').each(function() {
                        multiple_claim_reason.push($(this).val());
                    });
                    
                    window.location = saveMultipleClaim + '?id='+ id + '&is_multiple=1&reasons='+multiple_claim_reason;

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

                                if (key === 'multiple_claim_reason') {
                                    $("#formAddMultipleClaimReason").removeClass('was-validated');
                                    $(".multiple_claim_reason").addClass('is-invalid').removeClass('is-valid');
                                }
                            }
                        }
                    }else{
                        console.error(resultData);
                    }
                }
            },
        });
    }

    function successMsg(){
        toastr["success"]('Already Added Claim Lodged');
    }

    function comingSoonMsg(){
        toastr["info"]("Coming Soon..!!");
    }   

    $('#from_date, #from_date_1, #from_date_2, #from_date_4').datepicker({
        format: "dd-mm-yyyy",
        orientation: "bottom auto"
    }).on('changeDate', function() {
        $('.datepicker').hide();
    });

    $('#end_date, #end_date_1, #end_date_2, #end_date_4').datepicker({
        format: "dd-mm-yyyy",
        orientation: "bottom auto"
    }).on('changeDate', function() {        
        $('.datepicker').hide();
    });

    dateValidations($('#from_date, #end_date, #from_date_1, #end_date_1, #from_date_2, #end_date_2, #from_date_4, #end_date_4'));      

    $('.multiple_claim_reason').on('change',function(){
        if ($('.multiple_claim_reason').is(':checked')) {
            $('.multiple_claim_reason').removeClass('is-invalid').addClass('is-valid');
        }else{
            $('.multiple_claim_reason').removeClass('is-valid').addClass('is-invalid');
        }
    });
</script>

<!-- for mediclaim -->
<script type="text/javascript">
    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]}],
        "order": [[0, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 350;},
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLGetClaimDataMediClaim,
            "type": "GET",
            "data": {
                // "_token": csrfToken,
                "status": function() { return $("#filter_status").val()},
                "from_date":function(){return $("#from_date").val();},
                "end_date":function(){return $("#end_date").val();},
            }         
        },
        "aoColumns": [
            {"mData": "action","bSortable": false,},
            {"mData": "status"},
            {"mData":"form_fill_continue","bSortable": false,},
            {"mData": "policy_number","bSortable": false,
                "render": function(data, type, full, meta) {
                    // if (type === 'display' && data != null && data.length > 20) {
                    //     return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                    // } else {
                    //     return data;
                    // }

                    if (type === 'display') {
                        return renderPolicyNumber(data);
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "policy_holder_name","bSortable": false,
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 20) {
                            return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "insurance_company_name","bSortable": false,},
            {"mData": "transaction_date"},
            {"mData": "intimation_date"},
            {"mData": "claim_type",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 10) {
                            return '<span title="' + data + '">' + data.substr(0, 10) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "mobile_number"},
            {"mData": "name_of_patient",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 15) {
                            return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                        } else {
                            return data;
                        }
                    }
             },
            {"mData": "date_of_admission"},
            {"mData": "reason_for_hospitalise",
                    "width": "10px",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 15) {
                            return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "hospital_name",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 10) {
                            return '<span title="' + data + '">' + data.substr(0, 10) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "hospital_address",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 15) {
                        return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "hospital_contact_num"},
            {"mData": "direct_company_name"},
            {"mData": "tpa_company_name"},
            {"mData": "intimated_to"},
        ]
    });

    var columnsMapping = [
        'transaction_date', 'intimation_date', 'claim_type', 'mobile_num', 'name_of_patient', 'date_of_admission', 'reason_for_hospitalise', 'hospital_name',
        'hospital_address', 'hospital_cont_num', 'direct_comp_name', 'tpa_comp_name', 'intimated_to'
    ];

    columnsMapping.forEach(function(columnName, columnIndex) {
        $('input[name="' + columnName + '"]').click(function (event) {
            event.stopPropagation();
        });

        $('input[name="' + columnName + '"]').on('keyup input', debounce(function () {
            // table.columns(columnIndex).search(this.value).draw();

            table.columns(columnIndex).search($('input[name="' + columnName + '"]').val()).draw();
            handleInputChange();
                    
            if($('input[name="' + columnName + '"]').val() != ''){
                $(".search-value").fadeIn();
            }else{
                $(".search-value").fadeOut();
            }
        }, 500));
    });

    const currentPage = window.location.pathname + "?mediclaim";

    const selectFilterStatus = $('#filter_status');
    selectFilterStatus.on('change', handleInputChange);

    const startInputDates = $('#from_date');
    startInputDates.on('change', handleInputChange);

    const endInputDates = $('#end_date');
    endInputDates.on('change', handleInputChange);

    function handleInputChange() {
        const FilterStatus = selectFilterStatus.val();
        const startInputDate = startInputDates.val();
        const endInputDate = endInputDates.val();

        const pageData = {
            record: FilterStatus,
            from_date: startInputDate,
            end_date: endInputDate,
        };

        columnsMapping.forEach(function(columnName, columnIndex) {
            const inputValue = $('input[name="' + columnName + '"]').val();
            pageData[columnName] = inputValue;
        });

        const jsonPageData = JSON.stringify(pageData);
        localStorage.setItem(currentPage, jsonPageData);
    }   
    
    const storedData = localStorage.getItem(currentPage);
    const parsedData = JSON.parse(storedData);

    if(parsedData != null){
        // for mediclaim
        if(currentPage == "/admin/manage-claim-intimation-data?mediclaim"){
            if(parsedData.record != ''){
                $('#filter_status').val(parsedData.record).change();
                if(parsedData.record != -1){
                    $(".search-value").fadeIn();
                }
            }else{
                $('#filter_status').val(-1).change();
            }

            if(parsedData.from_date != ''){
                $('#from_date').val(parsedData.from_date).datepicker("setDate", parsedData.from_date);
                $(".search-value").fadeIn();
            }

            if(parsedData.end_date != ''){
                $('#end_date').val(parsedData.end_date).datepicker("setDate", parsedData.end_date);
                $(".search-value").fadeIn();
            }
            
            columnsMapping.forEach(function(columnName, columnIndex) {
                if (parsedData && parsedData.hasOwnProperty(columnName)) {
                    $('input[name="' + columnName + '"]').val(parsedData[columnName]); // Set the value of the input field
                    table.columns(columnIndex).search(parsedData[columnName]);
                    handleInputChange();
                    
                    if(parsedData[columnName] != ''){
                        $(".search-value").fadeIn();
                    }
                }
            });
        }       
        
        setTimeout(function() {
            $('#datatable').DataTable().draw();
        }, 300);
    }

    $("#filter_status, #from_date, #end_date").on('change',function(){
        var fromDateVal = $("#from_date").val();
        var endDateVal = $("#end_date").val();
        var filterStatusVal = $("#filter_status").val();
        
        if ((fromDateVal !== '' || endDateVal !== '') || filterStatusVal !== '-1') {
            $(".search-value").fadeIn();
        } else {
            $(".search-value").fadeOut();
        }

        $('#datatable').DataTable().draw();
    });

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

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

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

        // for filter_status, from_date, end_date

        $('#from_date, #end_date').datepicker("destroy").val("");

        localStorage.removeItem(currentPage);

        $('#from_date').datepicker({
            format: "dd-mm-yyyy",
            orientation: "bottom auto"
        }).on('changeDate', function() {
            $('.datepicker').hide();
        });

        $('#end_date').datepicker({
            format: "dd-mm-yyyy",
            orientation: "bottom auto"
        }).on('changeDate', function() {
            $(".search-value").fadeIn();
            $('.datepicker').hide();
        });

        $('#filter_status').val(-1).change();
        $('#datatable').DataTable().ajax.reload(null, false);

        handleInputChange();
    }
</script>

<!-- for vehicle claim  -->
<script type="text/javascript">
     var table_1 = $('#datatable_1').DataTable({
        "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]}],
        "order": [[0, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 350;},
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLGetClaimDataVehicleClaim,
            "type": "GET",
            "data": {
                // "_token": csrfToken,
                "status": function() { return $("#filter_status_1").val()},
                "from_date":function(){return $("#from_date_1").val();},
                "end_date":function(){return $("#end_date_1").val();},
            }         
        },
        "aoColumns": [
            {"mData": "action","bSortable": false,},
            {"mData": "status"},
            {"mData":"form_fill_continue","bSortable": false,},
            {"mData": "policy_number",
                    "render": function(data, type, full, meta) {
                        // if (type === 'display' && data != null && data.length > 20) {
                        //     return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                        // } else {
                        //     return data;
                        // }
                        if (type === 'display') {
                            return renderPolicyNumber(data);
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "policy_holder_name",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 20) {
                            return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "insurance_company_name"},
            {"mData": "transaction_date"},
            {"mData": "intimation_date"},
            {"mData": "claim_type_1",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 15) {
                            return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "mobile_number"},
            {"mData": "incident_date",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 15) {
                            return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                        } else {
                            return data;
                        }
                    }
             },
            {"mData": "vehicle_reg_no"},
            {"mData": "garage_name"},
            {"mData": "garage_contact_no"},            
            {"mData": "garage_address",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 15) {
                        return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "vehicle_driving_by"},
            {"mData": "incident_detail",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 15) {
                        return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "damage_detail",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 15) {
                        return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "intimation_through",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 15) {
                        return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "direct_company_name"},
            {"mData": "tpa_company_name"},
            {"mData": "intimated_to"},
        ]
    });

    // column search
    var columnsMapping_1 = [
        'policy_number_1','policy_holder_name_1','ins_comp_name_1','transaction_date_1','intimation_date_1','claim_type_1','mobile_num_1','incident_date','vehicle_reg_no','garage_name',
        'garage_contact_no','garage_address','vehicle_driving_by','incident_detail','damage_detail','intimation_through','direct_comp_name_1','tpa_comp_name_1','intimated_to_1',
    ];

    columnsMapping_1.forEach(function(columnName_1, columnIndex_1)  {
        $('input[name="' + columnName_1 + '"]').click(function (event) {
            event.stopPropagation();
        });

        $('input[name="' + columnName_1 + '"]').on('keyup input', debounce(function () {
            // table_1.columns(columnIndex).search(this.value).draw();

            table_1.columns(columnIndex_1).search($('input[name="' + columnName_1 + '"]').val()).draw();
            handleInputChange_1();
                    
            if($('input[name="' + columnName_1 + '"]').val() != ''){
                $(".search-value-1").fadeIn();
            }else{
                $(".search-value-1").fadeOut();
            }
        }, 500));
    });

    const currentPage_1 = window.location.pathname + "?vehicle_claim";

    const selectFilterStatus_1 = $('#filter_status_1');
    selectFilterStatus_1.on('change', handleInputChange_1);

    const startInputDates_1 = $('#from_date_1');
    startInputDates_1.on('change', handleInputChange_1);

    const endInputDates_1 = $('#end_date_1');
    endInputDates_1.on('change', handleInputChange_1);

    function handleInputChange_1(){
        const FilterStatus_1 = selectFilterStatus_1.val();
        const startInputDate_1 = startInputDates_1.val();
        const endInputDate_1 = endInputDates_1.val();

        const pageData_1 = {
            record_1: FilterStatus_1,
            from_date_1: startInputDate_1,
            end_date_1: endInputDate_1,
        };

        columnsMapping_1.forEach(function(columnName_1, columnIndex_1) {
            const inputValue_1 = $('input[name="' + columnName_1 + '"]').val();
            pageData_1[columnName_1] = inputValue_1;
        });

        const jsonPageData_1 = JSON.stringify(pageData_1);
        localStorage.setItem(currentPage_1, jsonPageData_1);
    }

    const storedData_1 = localStorage.getItem(currentPage_1);
    const parsedData_1 = JSON.parse(storedData_1);

    if(parsedData_1 != null){
        // for vehicle claim
        if(currentPage_1 == "/admin/manage-claim-intimation-data?vehicle_claim"){
            if(parsedData_1.record_1 != ''){
                $('#filter_status_1').val(parsedData_1.record_1).change();
                if(parsedData_1.record_1 != -1){
                    $(".search-value-1").fadeIn();
                }
            }else{
                $('#filter_status_1').val(-1).change();
            }

            if(parsedData_1.from_date_1 != ''){
                $('#from_date_1').val(parsedData_1.from_date_1).datepicker("setDate", parsedData_1.from_date_1);
                $(".search-value-1").fadeIn();
            }

            if(parsedData_1.end_date_1 != ''){
                $('#end_date_1').val(parsedData_1.end_date_1).datepicker("setDate", parsedData_1.end_date_1);
                $(".search-value-1").fadeIn();
            }

            columnsMapping_1.forEach(function(columnName_1, columnIndex_1) {
                if (parsedData_1 && parsedData_1.hasOwnProperty(columnName_1)) {
                    $('input[name="' + columnName_1 + '"]').val(parsedData_1[columnName_1]); // Set the value of the input field
                    table_1.columns(columnIndex_1).search(parsedData_1[columnName_1]);
                    handleInputChange_1();

                    if(parsedData_1[columnName_1] != ''){
                        $(".search-value-1").fadeIn();
                    }
                }
            });
        }

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

    $("#filter_status_1, #from_date_1, #end_date_1").on('change',function(){
        var fromDateVal = $("#from_date_1").val();
        var endDateVal = $("#end_date_1").val();
        var filterStatusVal = $("#filter_status_1").val();
        
        if ((fromDateVal !== '' || endDateVal !== '') || filterStatusVal !== '-1') {
            $(".search-value-1").fadeIn();
        } else {
            $(".search-value-1").fadeOut();
        }
        
        $('#datatable_1').DataTable().draw();
    });

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

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

        table_1.columns().search('').draw();

        // for filter_status, from_date, end_date

        $('#from_date_1, #end_date_1').datepicker("destroy").val("");

        localStorage.removeItem(currentPage_1);

        $('#from_date_1').datepicker({
            format: "dd-mm-yyyy",
            orientation: "bottom auto"
        }).on('changeDate', function() {
            $('.datepicker').hide();
        });

        $('#end_date_1').datepicker({
            format: "dd-mm-yyyy",
            orientation: "bottom auto"
        }).on('changeDate', function() {
            $(".search-value-1").fadeIn();
            $('.datepicker').hide();
        });

        $('#filter_status_1').val(-1).change();
        $('#datatable_1').DataTable().ajax.reload(null, false);

        handleInputChange_1();
    }
</script>

<!-- for death claim -->
<script type="text/javascript">
    var table_2 = $('#datatable_2').DataTable({
        "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]}],
        "order": [[0, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 350;},
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLGetClaimDataDeathClaim,
            "type": "GET",
            "data": {
                // "_token": csrfToken,
                "status": function() { return $("#filter_status_2").val()},
                "from_date":function(){return $("#from_date_2").val();},
                "end_date":function(){return $("#end_date_2").val();},
            }         
        },
        "aoColumns": [
            {"mData": "action","bSortable": false,},
            {"mData": "status"},
            {"mData":"form_fill_continue","bSortable": false,},
            {"mData": "policy_number","bSortable": false,
                    "render": function(data, type, full, meta) {
                        // if (type === 'display' && data != null && data.length > 20) {
                        //     return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                        // } else {
                        //     return data;
                        // }

                        if (type === 'display') {
                            return renderPolicyNumber(data);
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "policy_holder_name","bSortable": false,
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 20) {
                            return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "insurance_company_name","bSortable": false,},
            {"mData": "transaction_date"},
            {"mData": "intimation_date"},
            {"mData": "claim_type_2",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 15) {
                            return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "death_claim_type",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 15) {
                            return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "death_person_name",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 15) {
                            return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                        } else {
                            return data;
                        }
                    }
             },
            {"mData": "nominee_name",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 15) {
                            return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "contact_num"},
            {"mData": "death_date"},            
            {"mData": "death_type",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 12) {
                        return '<span title="' + data + '">' + data.substr(0, 12) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "death_reason",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 15) {
                            return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "intimation_through",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 15) {
                        return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "direct_company_name"},
            {"mData": "tpa_company_name"},
            {"mData": "intimated_to"},
            {"mData": "total_sum_assured"},
            {"mData": "total_term_rider_sum_assured","bVisible":false},
            {"mData": "total_accident_sum_assured","bVisible":false},
            {"mData": "total_double_acci_rider_sum_assured","bVisible":false},
        ]
    });

    var resultData ; 

    // death policy view
    function reloadDataAndCallDeathPolicyView(PolicyNumbers, policyHolderName, insCompany, claimType){
        $("#modalViewPolicy").modal('show');
        $(".multiple_policies").remove();
               
        if(claimType == 12){
            var path = "{{route('client.policy.detail.death')}}" + "?policy_holder_name=" + policyHolderName +"&ins_company_name=" + insCompany  + "&claim_type_id=" + claimType + "&history=1";

        }else{
            var path = "{{route('client.policy.detail.death')}}" + "?policy_holder_name=" + policyHolderName +"&policy_id=" + insCompany  + "&claim_type_id=" + claimType + "&history=1";
        }
        // table_2.ajax.reload(function(json) {
        //     resultData = table_2.ajax.json();
            
            $.ajax({
                type: "GET",
                url: path,
                beforeSend: function(){
                    showLoader();
                },
                success: function(resultData) {
                    hideLoader();

                    if (resultData['data']['status'] == 1) {

                        var index = 0; 
                        var newRowHtml = '';

                        if(claimType == 12){
                            var j = 1;
                            var TotalSumAssured = 0;
                            var TotalTermRider = 0;
                            var TotalDoubleAcciRider = 0;
                            var TotalAcciRiskAmt = 0;

                            var accumulatedAmounts = {};

                            for(var i=1; i<=resultData.total_policy; i++){
                                var policy_number = resultData.record[index].policy_number;
                                var nominee_name = resultData.record[index].nominee_name;
                                var agancy_name = resultData.record[index].agancy_name;
                                var mode_name = resultData.record[index].mode_name;
                                var plan_name = resultData.record[index].plan_name;
                                var plan_number = resultData.record[index].plan_number;
                                var risk_term = resultData.record[index].risk_term;
                                var sub_agent_name = resultData.record[index].sub_agent_name;
                                var broker_name = resultData.record[index].broker_name;
                                var risk_from_date = resultData.record[index].risk_from_date;
                                var risk_to_date = resultData.record[index].risk_to_date;
                                var policy_status_name = resultData.record[index].policy_status_name;
                                var basic_amount = resultData.record[index].basic_amount;
                                var sum_assured = resultData.record[index].sum_assured;
                                var maturity_date = resultData.record[index].maturity_date;
                                let riders = resultData.record[i - 1].riders;
                                var riders_sum_assured = resultData.record[i - 1].riders_sum_assured.split(',');
                                var riders_risk_term = resultData.record[i - 1].riders_risk_term.split(',');
                                var riders_premium_paying_term = resultData.record[i - 1].riders_premium_paying_term.split(',');
                                
                                if (PolicyNumbers.includes(policy_number)) {

                                    newRowHtml =`<div class="multiple_policies">
                                    
                                        <div class="row">
                                            <div class="col-xl-1">
                                                <div class="mb-3">
                                                    <label for="sr_no_${i}" class="form-label">Sr. No.</label>
                                                    <input type="text" class="form-control" name="sr_no_${i}" id="sr_no_${i}" value="${i}" readonly maxlength="3" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-xl-3">
                                                <div class="mb-3">
                                                    <label for="policy_num_death_${i}" class="form-label">Policy Number</label>
                                                    <input type="hidden" class="form-control" name="death_claim_policy_num${i}" id="death_claim_policy_num${i}" value="${policy_number}">
                                                    <input type="text" class="form-control" name="policy_num_death_${i}" id="policy_num_death_${i}" disabled value="${policy_number}">
                                                </div>
                                            </div>
                                            <div class="col-xl-3">
                                                <div class="mb-3">
                                                    <label for="nominee_name_${i}" class="form-label">Nominee Name</label>
                                                    <input type="text" class="form-control" name="nominee_name_${i}" id="nominee_name_${i}" disabled value="${nominee_name}" placeholder="Nominee Name">
                                                </div>
                                            </div>
                                            <div class="col-xl-2">
                                                <div class="mb-3">
                                                    <label for="assignee_name_${i}" class="form-label">Assignee Name</label>
                                                    <input type="text" class="form-control" name="assignee_name_${i}" id="assignee_name_${i}" disabled value="" placeholder="Assignee Name">
                                                </div>
                                            </div>
                                            <div class="col-xl-2">
                                                <div class="mb-3">
                                                    <label for="policy_status_death_${i}" class="form-label">Policy Status</label>
                                                    <input type="text" class="form-control" name="policy_status_death_${i}" id="policy_status_death_${i}" disabled value="${policy_status_name}">
                                                </div>
                                            </div>
                                            <div class="col-xl-1">
                                                <div class="mb-3">
                                                    <label for="term_death_${i}" class="form-label">Term</label>
                                                    <input type="text" class="form-control" name="term_death_${i}" id="term_death_${i}" disabled value="${risk_term}">
                                                </div>
                                            </div> 
                                        </div>
                                    
                                        <div class="row">
                                            <div class="col-xl-2">
                                                <div class="mb-3">
                                                    <label for="agency_name_death_${i}" class="form-label">Agency Name</label>
                                                    <input type="text" class="form-control" name="agency_name_death_${i}" id="agency_name_death_${i}" disabled value="${agancy_name}">
                                                </div>
                                            </div>
                                            <div class="col-xl-2">
                                                <div class="mb-3">
                                                    <label for="other_agency_name_death_${i}" class="form-label">Other Agency</label>
                                                    <input type="text" class="form-control" name="other_agency_name_death_${i}" id="other_agency_name_death_${i}" disabled value="" placeholder="Other Agency">
                                                </div>
                                            </div>                                           
                                            <div class="col-xl-2">
                                                <div class="mb-3">
                                                    <label for="mode_name_death_${i}" class="form-label">Mode Name</label>
                                                    <input type="text" class="form-control" name="mode_name_death_${i}" id="mode_name_death_${i}" disabled value="${mode_name}">
                                                </div>
                                            </div>
                                            <div class="col-xl-2">
                                                <div class="mb-3">
                                                    <label for="plan_name_death_${i}" class="form-label">Plan Name</label>
                                                    <input type="text" class="form-control" name="plan_name_death_${i}" id="plan_name_death_${i}" disabled value="${plan_name}">
                                                </div>
                                            </div>
                                            <div class="col-xl-2">
                                                <div class="mb-3">
                                                    <label for="plan_number_death_${i}" class="form-label">Plan Number</label>
                                                    <input type="text" class="form-control" name="plan_number_death_${i}" id="plan_number_death_${i}" disabled value="${plan_number}">
                                                </div>
                                            </div>
                                            <div class="col-xl-2">
                                                <div class="mb-3">
                                                    <label for="maturity_date_${i}" class="form-label">Maturity Date</label>
                                                    <input type="text" class="form-control" name="maturity_date_${i}" id="maturity_date_${i}" disabled value="${maturity_date}">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-xl-2">
                                                <div class="mb-3">
                                                    <label for="sub_agent_death_${i}" class="form-label">Sub Agent Name</label>
                                                    <input type="text" class="form-control" name="sub_agent_death_${i}" id="sub_agent_death_${i}" disabled value="${sub_agent_name}" placeholder="Sub Agent Name">
                                                </div>
                                            </div>
                                            <div class="col-xl-2">
                                                <div class="mb-3">
                                                    <label for="broker_name_death_${i}" class="form-label">Broker Name</label>
                                                    <input type="text" class="form-control" name="broker_name_death_${i}" id="broker_name_death_${i}" disabled value="${broker_name}">
                                                </div>
                                            </div>
                                            <div class="col-xl-2">
                                                <div class="mb-3">
                                                    <label for="risk_from_death_${i}" class="form-label">Risk From Date</label>
                                                    <input type="text" class="form-control" name="risk_from_death_${i}" id="risk_from_death_${i}" disabled value="${risk_from_date}">
                                                </div>
                                            </div>
                                            <div class="col-xl-2">
                                                <div class="mb-3">
                                                    <label for="risk_to_death_${i}" class="form-label">Risk To Date</label>
                                                    <input type="text" class="form-control" name="risk_to_death_${i}" id="risk_to_death_${i}" disabled value="${risk_to_date}">
                                                </div>
                                            </div>
                                        
                                            <div class="col-xl-2">
                                                <div class="mb-3">
                                                    <label for="prem_amt_death_${i}" class="form-label">Premium Amount</label>
                                                    <input type="text" class="form-control" name="prem_amt_death_${i}" id="prem_amt_death_${i}" disabled value="${basic_amount}">
                                                </div>
                                            </div>
                                            <div class="col-xl-2">
                                                <div class="mb-3">
                                                    <label for="sum_assured_death_${i}" class="form-label">Policy Sum Assured</label>
                                                    <input type="text" class="form-control" name="sum_assured_death_${i}" id="sum_assured_death_${i}" disabled value="${sum_assured}">
                                                </div>
                                            </div>
                                        </div>`;

                                        riders.forEach((rider, index) => {[index]
                                            newRowHtml += `<div class="row text-center">
                                                <div class="col-xl-12">
                                                    <div class="row">
                                                        <div class="col-md-3 mt-2">
                                                            <div class="mb-3">
                                                                <label class="form-check-label" for="riders_${rider.id}">${rider.optional_covers}</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="mb-3">
                                                                <input type="text" class="form-control" name="rider_sum_assured[]" id="rider_sum_assured_${rider.id}" placeholder="Sum Assured" value="${riders_sum_assured[index]}" disabled>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="mb-3">
                                                                <input type="text" class="form-control" name="rider_risk_term[]" id="rider_risk_term_${rider.id}" placeholder="Risk Term" value="${riders_risk_term[index]}" disabled>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div class="mb-3">
                                                                <input type="text" class="form-control" name="rider_premium_paying_term[]" id="rider_premium_paying_term_${rider.id}" placeholder="Premium Paying Term" value="${riders_premium_paying_term[index]}" disabled>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>`;

                                            if (accumulatedAmounts[rider.optional_covers]) {
                                                accumulatedAmounts[rider.optional_covers] += parseFloat(riders_sum_assured[index] || 0);
                                            } else {
                                                accumulatedAmounts[rider.optional_covers] = parseFloat(riders_sum_assured[index] || 0);
                                            }
                                        });

                                        // Clear the container before appending new cards (to avoid duplicates on rerun)
                                        $('.dynamic-riders').remove();

                                        // Generate and append the cards
                                        for (var title in accumulatedAmounts) {
                                            var cardHtml = `<div class="col-xl-3 dynamic-riders">
                                                <div class="card text-white bg-secondary mb-3">
                                                    <div class="card-header text-center font-size-14">${title}<br>
                                                        <div>${accumulatedAmounts[title]}</div>
                                                    </div>
                                                </div>
                                            </div>`;

                                            // Append the generated card to the container
                                            $('#riders-lable').append(cardHtml);
                                        }          
                                        
                                    newRowHtml +=`<hr></div>`;

                                    TotalSumAssured += sum_assured;
                                    j = j + 1;
                                }

                                $("#add_new_row_death").append(newRowHtml);

                                $("#sum_assu_amt_1").html(TotalSumAssured);
                                $("#term_sum_assu_amt_1").html(TotalTermRider);
                                $("#acci_sum_asuu_amt_1").html(TotalDoubleAcciRider);
                                $("#double_acci_sum_assu_amt_1").html(TotalAcciRiskAmt);
                            
                                var abc = PolicyNumbers.split(',');
                                let numbers = abc.map(Number);
                                var lastNumber = numbers[numbers.length - 1];
                            
                                if (lastNumber == policy_number) {
                                    j = 1;
                                    break;
                                } 
                                    
                                index = index+ 1;  
                            }
                        }else{

                            $("#riders-lable").hide();

                            var division_id = resultData.record.division_id;
                            var policy_number = resultData.record.policy_number;
                            var policy_holder_name = resultData.record.policy_holder_name;
                            var insurance_company = resultData.record.insurance_company;
                            var nominee_name = resultData.record.nominee_name;
                            var nominee_contact = resultData.record.nominee_contact;
                            var branch_name = resultData.record.branch_name;
                            var vehicle_name = resultData.record.vehicle_name;
                            var vehicle_no = resultData.record.vehicle_no;
                            var segment = resultData.record.segment_name;
                            var broker = resultData.record.broker_name;
                            var sub_agent_name = resultData.record.sub_agent_name;
                            var agency = resultData.record.agency_name;
                            var risk_from_date = resultData.record.risk_from_date;
                            var risk_to_date = resultData.record.risk_to_date;
                            var sum_assured = resultData.record.sum_assured;
                            var bank_name = resultData.record.bank_name;
                            var model = resultData.record.vehicle_manufacture_year;
                            var rto = resultData.record.rto;
                            var policy_address = resultData.record.address1;

                            newRowHtml = `<div class="multiple_policies">
                            <div class="row">
                                <div class="col-xxl-4">
                                    <div class="mb-3">
                                        <label for="policy_number_${index}" class="form-label">Policy Number</label>
                                        <input type="text" class="form-control" name="policy_number_${index}" id="policy_number_${index}" disabled value="${policy_number}">
                                    </div>
                                </div>
                                <div class="col-xxl-4">
                                    <div class="mb-3">
                                        <label for="policy_holder_name_${index}" class="form-label">Policy Holder Name</label>
                                        <input type="text" class="form-control" name="policy_holder_name_${index}" id="policy_holder_name_${index}" disabled value="${policy_holder_name}">
                                    </div>
                                </div>
                                <div class="col-xxl-4">
                                    <div class="mb-3">
                                        <label for="insurance_company_name_${index}" class="form-label">Insurance Company Name</label>
                                        <input type="text" class="form-control" name="insurance_company_name_${index}" id="insurance_company_name_${index}" disabled value="${insurance_company}">
                                    </div>
                                </div>
                            </div>
                            `;
                            if(division_id == 3){
                                newRowHtml += `
                                <div class="row">
                                    <div class="col-xxl-4">
                                        <div class="mb-3">
                                            <label for="nominee_name_${index}" class="form-label">Nominee Name</label>
                                            <input type="text" class="form-control" name="nominee_name_${index}" id="nominee_name_${index}" value="${nominee_name}" placeholder="Nominee Name" disabled>
                                        </div>
                                    </div>
                                    <div class="col-xxl-4">
                                        <div class="mb-3">
                                            <label for="nominee_contact_num_${index}" class="form-label">Nominee Contact No.</label>
                                            <input type="text" class="form-control" name="nominee_contact_num_${index}" id="nominee_contact_num_${index}" value="${nominee_contact}" placeholder="Nominee Contact No." disabled>
                                        </div>
                                    </div>
                                    <div class="col-xxl-4">
                                        <div class="mb-3">
                                            <label for="branch_name_${index}" class="form-label">Branch Name</label>
                                            <input type="text" class="form-control" name="branch_name_${index}" id="branch_name_${index}" value="${branch_name}" placeholder="Branch Name" disabled>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xxl-2">
                                        <div class="mb-3">
                                            <label for="vehicle_name_${index}" class="form-label">Vehicle Name</label>
                                            <input type="text" class="form-control" name="vehicle_name_${index}" id="vehicle_name_${index}" value="${vehicle_name}" disabled>
                                        </div>
                                    </div>
                                    <div class="col-xxl-2">
                                        <div class="mb-3">
                                            <label for="vehicle_number_${index}" class="form-label">Vehicle Number</label>
                                            <input type="text" class="form-control" name="vehicle_number_${index}" id="vehicle_number_${index}" value="${vehicle_no}" disabled>
                                        </div>
                                    </div>`;                                
                            }else{
                                newRowHtml += `
                                <div class="row">
                                    <div class="col-xxl-4">
                                        <div class="mb-3">
                                            <label for="branch_name_1" class="form-label">Branch Name</label>
                                            <input type="text" class="form-control" name="branch_name_1" id="branch_name_1" value="${branch_name}" placeholder="Branch Name" disabled="">
                                        </div>
                                    </div>`;
                            }

                            newRowHtml += `
                                <div class="col-xxl-2">
                                    <div class="mb-3">
                                        <label for="segment_${index}" class="form-label">Segment</label>
                                        <input type="text" class="form-control" name="segment_${index}" id="segment_${index}" value="${segment}" disabled>
                                    </div>
                                </div>
                                <div class="col-xxl-2">
                                    <div class="mb-3">
                                        <label for="broker_${index}" class="form-label">Broker</label>
                                        <input type="text" class="form-control" name="broker_${index}" id="broker_${index}" value="${broker}" disabled>
                                    </div>
                                </div>
                                <div class="col-xxl-2">
                                    <div class="mb-3">
                                        <label for="sub_agent_${index}" class="form-label">Sub Agent</label>
                                        <input type="text" class="form-control" name="sub_agent_${index}" id="sub_agent_${index}" placeholder="Sub agent" value="${sub_agent_name}" disabled>
                                    </div>
                                </div>
                                <div class="col-xxl-2">
                                    <div class="mb-3">
                                        <label for="agency_${index}" class="form-label">Agency</label>
                                        <input type="text" class="form-control" name="agency_${index}" id="agency_${index}" value="${agency}" placeholder="Agency" disabled>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xxl-2">
                                    <div class="mb-3">
                                        <label for="risk_from_date_1" class="form-label">Risk From Date</label>
                                        <input type="text" class="form-control" name="risk_from_date_${index}" id="risk_from_date_${index}" disabled value="${risk_from_date}">
                                    </div>
                                </div>
                                <div class="col-xxl-2">
                                    <div class="mb-3">
                                        <label for="risk_to_date_${index}" class="form-label">Risk To Date</label>
                                        <input type="text" class="form-control" name="risk_to_date_${index}" id="risk_to_date_${index}" disabled placeholder="dd-mm-yyyy" value="${risk_to_date}">
                                    </div>
                                </div>
                                <div class="col-xxl-2">
                                    <div class="mb-3">
                                        <label for="sum_assured_${index}" class="form-label">Sum Assured</label>
                                        <input type="text" class="form-control" name="sum_assured_${index}" id="sum_assured_${index}" disabled value="${sum_assured}">
                                    </div>
                                </div>
                                <div class="col-xxl-2">
                                    <div class="mb-3">
                                        <label for="bank_name_${index}" class="form-label">Bank Name</label>
                                        <input type="text" class="form-control" name="bank_name_${index}" id="bank_name_${index}" value="${bank_name}" placeholder="Bank Name" disabled>
                                    </div>
                                </div>`;

                                if(division_id == 3){
                                    newRowHtml +=`
                                    <div class="col-xxl-2">
                                        <div class="mb-3">
                                            <label for="model_year_${index}" class="form-label">Model</label>
                                            <input type="text" class="form-control" name="model_year_${index}" id="model_year_${index}" placeholder="Model" value="${model}" disabled>
                                        </div>
                                    </div>
                                    <div class="col-xxl-2">
                                        <div class="mb-3">
                                            <label for="rto_name_${index}" class="form-label">RTO</label>
                                            <input type="text" class="form-control" name="rto_name_${index}" id="rto_name_${index}" value="${rto}" placeholder="RTO" disabled>
                                        </div>
                                    </div>`;
                                }else{
                                    newRowHtml +=`
                                    <div class="col-xxl-4">
                                        <div class="mb-3">
                                            <label for="policy_address" class="form-label">Policy Holder Address</label>
                                            <input type="text" class="form-control" name="policy_address" id="policy_address" disabled value="${policy_address}">
                                        </div>
                                    </div>`;
                                }
                            newRowHtml +=`</div>`;

                            newRowHtml += `</div>`;
                            $("#add_new_row_death").append(newRowHtml);
                        }
                    }else{

                    }
                }
            });
    //  });
    }
  
    // column search   
    var columnsMapping_2 = [
        'transaction_date_2','intimation_date_2','claim_type_2','death_claim_type','death_person_name','nominee_name','contact_num','death_date','death_type','reason_for_death',
        'intimated_through','direct_comp_name_2','tpa_comp_name_2','intimated_to_2','total_sum_assu_2','total_term_rider_sum_assu_2','total_acci_sum_assu_2','total_double_acci_rider_sum_assu_2'
    ];

    columnsMapping_2.forEach(function(columnName_2, columnIndex_2) {
        $('input[name="' + columnName_2 + '"]').click(function (event) {
            event.stopPropagation();
        });

        $('input[name="' + columnName_2 + '"]').on('keyup input', debounce(function () {
            // table_2.columns(columnIndex_2).search(this.value).draw();

            table_2.columns(columnIndex_2).search($('input[name="' + columnName_2 + '"]').val()).draw();
            handleInputChange_2();
                    
            if($('input[name="' + columnName_2 + '"]').val() != ''){
                $(".search-value-2").fadeIn();
            }else{
                $(".search-value-2").fadeOut();
            }
        }, 500));
    });

    const currentPage_2 = window.location.pathname + "?death_claim";

    const selectFilterStatus_2 = $('#filter_status_2');
    selectFilterStatus_2.on('change', handleInputChange_2);

    const startInputDates_2 = $('#from_date_2');
    startInputDates_2.on('change', handleInputChange_2);

    const endInputDates_2 = $('#end_date_2');
    endInputDates_2.on('change', handleInputChange_2);

    function handleInputChange_2(){
        const FilterStatus_2 = selectFilterStatus_2.val();
        const startInputDate_2 = startInputDates_2.val();
        const endInputDate_2 = endInputDates_2.val();

        const pageData_2 = {
            record_2: FilterStatus_2,
            from_date_2: startInputDate_2,
            end_date_2: endInputDate_2,
        };

        columnsMapping_2.forEach(function(columnName_2, columnIndex_2) {
            const inputValue_2 = $('input[name="' + columnName_2 + '"]').val();
            pageData_2[columnName_2] = inputValue_2;
        });

        const jsonPageData_2 = JSON.stringify(pageData_2);
        localStorage.setItem(currentPage_2, jsonPageData_2);
    }

    const storedData_2 = localStorage.getItem(currentPage_2);
    const parsedData_2 = JSON.parse(storedData_2);

    if(parsedData_2 != null){
        // for death claim
        if(currentPage_2 == "/admin/manage-claim-intimation-data?death_claim"){
            if(parsedData_2.record_2 != ''){
                $('#filter_status_2').val(parsedData_2.record_2).change();
                if(parsedData_2.record_2 != -1){
                    $(".search-value-2").fadeIn();
                }
            }else{
                $('#filter_status_2').val(-1).change();
            }

            if(parsedData_2.from_date_2 != ''){
                $('#from_date_2').val(parsedData_2.from_date_2).datepicker("setDate", parsedData_2.from_date_2);
            }

            if(parsedData_2.end_date_2 != ''){
                $('#end_date_2').val(parsedData_2.end_date_2).datepicker("setDate", parsedData_2.end_date_2);
            }

            columnsMapping_2.forEach(function(columnName_2, columnIndex_2) {
                if (parsedData_2 && parsedData_2.hasOwnProperty(columnName_2)) {
                    $('input[name="' + columnName_2 + '"]').val(parsedData_2[columnName_2]); // Set the value of the input field
                    table_2.columns(columnIndex_2).search(parsedData_2[columnName_2]);
                    handleInputChange_2();

                    if(parsedData_2[columnName_2] != ''){
                        $(".search-value-2").fadeIn();
                    }
                }
            });
        }

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

    $("#filter_status_2, #from_date_2, #end_date_2").on('change',function(){
        var fromDateVal = $("#from_date_2").val();
        var endDateVal = $("#end_date_2").val();
        var filterStatusVal = $("#filter_status_2").val();
        
        if ((fromDateVal !== '' || endDateVal !== '') || filterStatusVal !== '-1') {
            $(".search-value-2").fadeIn();
        } else {
            $(".search-value-2").fadeOut();
        }

        $('#datatable_2').DataTable().draw();
    });

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

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

        table_2.columns().search('').draw();

        // for filter_status, from_date, end_date

        $('#from_date_2, #end_date_2').datepicker("destroy").val("");

        localStorage.removeItem(currentPage_2);

        $('#from_date_2').datepicker({
            format: "dd-mm-yyyy",
            orientation: "bottom auto"
        }).on('changeDate', function() {
            $('.datepicker').hide();
        });

        $('#end_date_2').datepicker({
            format: "dd-mm-yyyy",
            orientation: "bottom auto"
        }).on('changeDate', function() {
            $(".search-value-2").fadeIn();
            $('.datepicker').hide();
        });

        $('#filter_status_2').val(-1).change();
        $('#datatable_2').DataTable().ajax.reload(null, false);

        handleInputChange_2();
    }
</script>

<!-- for other claim -->
<script type="text/javascript">
    var table_4 = $('#datatable_4').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ,19]}],
        "order": [[0, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 350;},
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLGetClaimDataOtherClaim,
            "type": "GET",
            "data": {
                // "_token": csrfToken,
                "status": function() { return $("#filter_status_4").val()},
                "from_date":function(){return $("#from_date_4").val();},
                "end_date":function(){return $("#end_date_4").val();},
            }         
        },
        "aoColumns": [
            {"mData": "action","bSortable": false,},
            {"mData": "status"},
            {"mData":"form_fill_continue","bSortable": false,},
            {"mData": "policy_number",
                    "render": function(data, type, full, meta) {
                        // if (type === 'display' && data != null && data.length > 20) {
                        //     return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                        // } else {
                        //     return data;
                        // }
                        if (type === 'display') {
                            return renderPolicyNumber(data);
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "policy_holder_name",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 20) {
                        return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "insurance_company_name"},
            {"mData": "transaction_date"},
            {"mData": "intimation_date"},           
            {"mData": "claim_type_4",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 10) {
                        return '<span title="' + data + '">' + data.substr(0, 10) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "mobile_number"},
            {"mData": "incident_date"},
            {"mData": "esti_loss_amt"},
            {"mData": "incident_detail",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 15) {
                        return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "incident_address",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 10) {
                        return '<span title="' + data + '">' + data.substr(0, 10) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "incident_cont_num"},
            {"mData": "intimation_police"},
            {"mData": "intimation_fire"},
            {"mData": "direct_company_name"},
            {"mData": "tpa_company_name"},
            {"mData": "intimated_to"},
        ]
    });

    // column search
    var columnsMapping_4 = [
        'policy_number_4', 'policy_holder_name_4', 'ins_comp_name_4', 'transaction_date_4', 'intimation_date_4', 'intimation_type_4', 'claim_type_4', 'mobile_num_4', 'incident_date_4',
        'esti_loss_amt', 'incident_detail_4','incident_address','incident_cont_num','intimation_police', 'intimation_fire', 'direct_comp_name_4', 'tpa_comp_name_4', 'intimated_to_4'
    ];

    columnsMapping_4.forEach(function(columnName_4, columnIndex_4) {
        $('input[name="' + columnName_4 + '"]').click(function (event) {
            event.stopPropagation();
        });

        $('input[name="' + columnName_4 + '"]').on('keyup input', function () {
            // table_4.columns(columnIndex_4).search(this.value).draw();

            table_4.columns(columnIndex_4).search($('input[name="' + columnName_4 + '"]').val()).draw();
            handleInputChange_4();
                    
            if($('input[name="' + columnName_4 + '"]').val() != ''){
                $(".search-value-4").fadeIn();
            }else{
                $(".search-value-4").fadeOut();
            }
        });
    });

    const currentPage_4 = window.location.pathname + "?other_claim";

    const selectFilterStatus_4 = $('#filter_status_4');
    selectFilterStatus_4.on('change', handleInputChange_4);

    const startInputDates_4 = $('#from_date_4');
    startInputDates_4.on('change', handleInputChange_4);

    const endInputDates_4 = $('#end_date_4');
    endInputDates_4.on('change', handleInputChange_4);

    function handleInputChange_4(){
        const FilterStatus_4 = selectFilterStatus_4.val();
        const startInputDate_4 = startInputDates_4.val();
        const endInputDate_4 = endInputDates_4.val();

        const pageData_4 = {
            record_4: FilterStatus_4,
            from_date_4: startInputDate_4,
            end_date_4: endInputDate_4,
        };

        columnsMapping_4.forEach(function(columnName_4, columnIndex_4) {
            const inputValue_4 = $('input[name="' + columnName_4 + '"]').val();
            pageData_4[columnName_4] = inputValue_4;
        });

        const jsonPageData_4 = JSON.stringify(pageData_4);
        localStorage.setItem(currentPage_4, jsonPageData_4);
    }

    const storedData_4 = localStorage.getItem(currentPage_4);
    const parsedData_4 = JSON.parse(storedData_4);

    if(parsedData_4 != null){
        //  for other claim
        if(currentPage_4 == "/admin/manage-claim-intimation-data?other_claim"){
            if(parsedData_4.record_4 != ''){
                $('#filter_status_4').val(parsedData_4.record_4).change();
                if(parsedData_4.record_4 != -1){
                    $(".search-value-4").fadeIn();
                }
            }else{
                $('#filter_status_4').val(-1).change();
            }

            if(parsedData_4.from_date_4 != ''){
                $('#from_date_4').val(parsedData_4.from_date_4).datepicker("setDate", parsedData_4.from_date_4);
                $(".search-value-4").fadeIn();
            }

            if(parsedData_4.end_date_4 != ''){
                $('#end_date_4').val(parsedData_4.end_date_4).datepicker("setDate", parsedData_4.end_date_4);
                $(".search-value-4").fadeIn();
            }

            columnsMapping_4.forEach(function(columnName_4, columnIndex_4) {
                if (parsedData_4 && parsedData_4.hasOwnProperty(columnName_4)) {
                    $('input[name="' + columnName_4 + '"]').val(parsedData_4[columnName_4]); // Set the value of the input field
                    table_4.columns(columnIndex_4).search(parsedData_4[columnName_4]);
                    handleInputChange_4();

                    if(parsedData_4[columnName_4] != ''){
                        $(".search-value-4").fadeIn();
                    }
                }
            });
        }

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

    $("#filter_status_4, #from_date_4, #end_date_4").on('change',function(){
        var fromDateVal = $("#from_date_4").val();
        var endDateVal = $("#end_date_4").val();
        var filterStatusVal = $("#filter_status_4").val();
        
        if ((fromDateVal !== '' || endDateVal !== '') || filterStatusVal !== '-1') {
            $(".search-value-4").fadeIn();
        } else {
            $(".search-value-4").fadeOut();
        }

        $('#datatable_4').DataTable().draw();
    });

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

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

       table_4.columns().search('').draw();

       // for filter_status, from_date, end_date

       $('#from_date_4, #end_date_4').datepicker("destroy").val("");

       localStorage.removeItem(currentPage_4);

       $('#from_date_4').datepicker({
           format: "dd-mm-yyyy",
           orientation: "bottom auto"
       }).on('changeDate', function() {
           $('.datepicker').hide();
       });

       $('#end_date_4').datepicker({
           format: "dd-mm-yyyy",
           orientation: "bottom auto"
       }).on('changeDate', function() {
           $(".search-value-4").fadeIn();
           $('.datepicker').hide();
       });

       $('#filter_status_4').val(-1).change();
       $('#datatable_4').DataTable().ajax.reload(null, false);

       handleInputChange_4();
    }
</script>

<!-- for tab selection  -->
<script type="text/javascript">
    $(document).ready(function () {
       updateURLWithActiveTabId();

       $('#medi-claim').click(function() {
            handleTabClick('#medi-claim', '#mediClaim', 'mediclaim');

            setTimeout(function() {
                table.columns.adjust().draw();
            }, 200);
       });

       $('#vehicle-claim').click(function() {
            handleTabClick('#vehicle-claim', '#vehicleClaim', 'vehicle-claim');

            setTimeout(function() {
                table_1.columns.adjust().draw();
            }, 200);
       });

       $('#death-claim').click(function() {
            handleTabClick('#death-claim', '#deathClaim', 'death-claim');

            setTimeout(function() {
                table_2.columns.adjust().draw();
            }, 200);
       });

       $('#disability-claim').click(function() {
            handleTabClick('#disability-claim', '#disabilityClaim', 'disability-claim');
       });

       $('#other-claim').click(function() {
            handleTabClick('#other-claim', '#otherClaim', 'other-claim');

            setTimeout(function() {
                table_4.columns.adjust().draw();
            }, 200);
       });
    });

    function clearActiveTabClass(){
        $('.nav-link.waves-effect').removeClass('active');
        $('.tab-pane').removeClass('active show');
    }

    function updateURLWithActiveTabId() {
        const currentUrl = window.location.href;
        const url = new URL(currentUrl);
        var typeValue = url.searchParams.get('type');
        
        if(typeValue == null || typeValue == "mediclaim" || typeValue == "mediclaim-pre-post"){
            handleTabClick('#medi-claim', '#mediClaim', 'mediclaim');
        }else if(typeValue == "vehicle-claim"){
            handleTabClick('#vehicle-claim', '#vehicleClaim', 'vehicle-claim');
        }else if(typeValue == "death-claim"){
            handleTabClick('#death-claim', '#deathClaim', 'death-claim');
        }else if(typeValue == "disability-claim"){
            handleTabClick('#disability-claim', '#disabilityClaim', 'disability-claim');
        }else if(typeValue == "other-claim"){
            handleTabClick('#other-claim', '#otherClaim', 'other-claim');
        }
    }

    function handleTabClick(tabId, contentId, urlType) {
        clearActiveTabClass();
        $(tabId).addClass('active');
        $(contentId).addClass('active show');
        const currentUrl = window.location.href;
        const url = new URL(currentUrl);
        url.searchParams.set('type', urlType);
        history.replaceState(null, null, url.toString());
    }    
</script>
@endsection