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

<style>
    #datatable1_wrapper .row:first-child > div , 
    #datatable1_wrapper .row:last-child > div ,
    #datatable2_wrapper .row:first-child > div ,
    #datatable2_wrapper .row:last-child > div {
        width: 50%;
    }

    #datatable1 td ,
    #datatable2 td {
        padding:0.4rem;
    }

    .modal-xxl {
        max-width: 1550px;
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
             @include('../reachassuree_agent/master/comman/header')
        <!-- 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>

        <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-xxl-2 col-xl-3">
                                    <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">Answer Pending</option>
                                            <option value="1">Settlement Pending</option>
                                            <option value="2">Answer Complete</option>
                                            <option value="3">Settlement Complete</option>
                                        </select>
                                    </div>
                                </div>
    
                                <div class="col-xxl-2 col-xl-3">
                                    <div class="mb-3">
                                        <label for="from_date" class="form-label">Query Raised 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-xxl-2 col-xl-3">
                                    <div class="mb-3">
                                        <label for="end_date" class="form-label">Query Raised 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" 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>Query Raised Date<br><input type="text" class="form-control" name="query_raised_date" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Query Source<br><input type="text" class="form-control" name="query_source" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Client Code<br><input type="text" class="form-control" name="client_code" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Discussion & Talk / Remarks<br><input type="text" class="form-control" name="discussion_talk" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>View<br><input type="text" class="form-control" name="view" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></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">Answer Pending</option>
                                            <option value="1">Settlement Pending</option>
                                            <option value="2">Answer Complete</option>
                                            <option value="3">Settlement Complete</option>
                                        </select>
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="from_date_1" class="form-label">Query Raised 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">Query Raised 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>

                            <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" 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_1" placeholder="Search" 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>Query Raised Date<br><input type="text" class="form-control" name="query_raised_date_1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                        <th>Query Source<br><input type="text" class="form-control" name="query_source_1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                        <th>Client Code<br><input type="text" class="form-control" name="client_code_1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                        <th>Discussion & Talk / Remarks<br><input type="text" class="form-control" name="discussion_talk_1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                        <th>View<br><input type="text" class="form-control" name="view" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            @csrf
                        </div>

                        <!-- death claim -->
                        <div class="tab-pane fade show" id="deathClaim" role="tabpanel" aria-labelledby="death-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>

                        <!-- 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_5" class="form-label">Record Status</label>
                                        <select class="form-control select2-ajax" name="filter_status" id="filter_status_5">
                                            <option value="-1">All</option>
                                            <option value="0">Answer Pending</option>
                                            <option value="1">Settlement Pending</option>
                                            <option value="2">Answer Complete</option>
                                            <option value="3">Settlement Complete</option>
                                        </select>
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="from_date_5" class="form-label">Query Raised From Date</label>
                                        <input type="text" name="from_date" id="from_date_5" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="end_date_5" class="form-label">Query Raised End Date</label>
                                        <input type="text" name="end_date" id="end_date_5" 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_5">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                      <button type="button" onclick="return clearSearch_5();" class="form-control btn btn-primary" id="btnClear_5">Clear</button>
                                    </div>
                                  </div>
                            </div>
                            
                            <div class="row mt-3 search-value-5">
                                <div class="text-center">
                                  <span class="alert-warning alert-animation px-3 py-1 rounded-3">Filter is applied...</span>              
                                </div>
                            </div>
                        
                            <br>
                            
                            <table id="datatable_5" 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_5" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                        <th>Claim Type<br><input type="text" class="form-control" name="claim_type_5" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                        <th>Query Raised Date<br><input type="text" class="form-control" name="query_raised_date_5" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                        <th>Query Source<br><input type="text" class="form-control" name="query_source_5" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                        <th>Client Code<br><input type="text" class="form-control" name="client_code_5" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                        <th>Discussion & Talk / Remarks<br><input type="text" class="form-control" name="discussion_talk_5" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                        <th>View<br><input type="text" class="form-control" name="view" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                                @csrf
                            </div>
                        </div>
                    </div>

                    {{-- <div class="row">
                        <div class="col-xxl-2 col-xl-3">
                            <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">Answer Pending</option>
                                    <option value="1">Settlement Pending</option>
                                    <option value="2">Answer Complete</option>
                                    <option value="3">Settlement Complete</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-xxl-2 col-xl-3">
                            <div class="mb-3">
                                <label for="from_date" class="form-label">Query Raised 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-xxl-2 col-xl-3">
                            <div class="mb-3">
                                <label for="end_date" class="form-label">Query Raised 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" 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>Query Raised Date<br><input type="text" class="form-control" name="query_raised_date" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Query Source<br><input type="text" class="form-control" name="query_source" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Client Code<br><input type="text" class="form-control" name="client_code" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Discussion & Talk / Remarks<br><input type="text" class="form-control" name="discussion_talk" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>View<br><input type="text" class="form-control" name="view" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        @csrf
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Answer For Queries Modal -->
<div class="modal fade" id="addQueryAns" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addAnswerLable" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xxl mx-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addAnswerLable">Query Answer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            {{-- <form id="formQueryAns" action="{{route('query.ans.save')}}" method="POST" class="needs-validation" novalidate> --}}
            <form id="formQueryAns" method="POST" class="needs-validation" novalidate>
                @csrf
                <input type="hidden" name="id" id="id">
                <input type="hidden" name="query_id" id="query_id">
                <input type="hidden" name="lodged_id" id="lodged_id">
                <input type="hidden" name="intimation_type" id="intimation_type">

                <div class="modal-body">  
                    <div id="add_new_row_query"></div>
                    <div class="dropdown-divider"></div>                   

                    <div id="add_new_row_second"></div>
                    <div class="dropdown-divider"></div>

                    <div class="row">
                        <div class="col-xl-6">
                            <div class="mb-3">
                                <label for="ans_docs_date" class="form-label">Answer / Docs. Received From Client Date<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="ans_docs_date" id="ans_docs_date" placeholder="dd-mm-yyyy" value="" autocomplete="off" required>
                            </div>
                        </div>
                        <div class="col-xl-6">
                            <div class="mb-3">
                                <label for="general_comments_ans" class="form-label">General Comments For Answer</label>
                                <input type="text" class="form-control" name="general_comments_ans" id="general_comments_ans" placeholder="Enter comments" value="" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="row" id="not_death_claim_id">
                        <div class="col-xl-6">
                            <div class="mb-3">
                                <label for="query_ans_submission" class="form-label">Query Answer Submission Date<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="query_ans_submission" id="query_ans_submission" placeholder="dd-mm-yyyy" value="" autocomplete="off" required>
                            </div>
                        </div>
                        <div class="col-xl-3">
                            <div class="mb-3">
                                <label for="company_tpa_name" class="form-label ">Query Answer Submission To...</label>
                                <select class="form-control select2-ajax" id="company_tpa_name" name="company_tpa_name" required></select>
                                <div class="invalid-feedback">This value is required.</div>
                            </div>
                        </div>
                        <div class="col-xl-3">
                            <div class="mb-3">
                                <div class="form-check">
                                    <div class="form-check-inline" style="margin-bottom: 5px;">
                                        <input class="form-check-inline form-check-input" type="radio" name="company_tpa" id="company" value="Company" checked>
                                        <label class="form-check-label me-5" for="company">Company</label>
                                    </div>
                                    <div class="form-check-inline" id="not_vehicle_id">
                                        <input class="form-check-inline form-check-input" type="radio" name="company_tpa" id="tpa" value="TPA">
                                        <label class="form-check-label me-5" for="tpa">TPA</label>
                                    </div>
                                </div>
                                <select class="form-control select2-ajax" id="company_tpa_email" name="company_tpa_email" required></select>
                                <div class="invalid-feedback">This value is required.</div>
                            </div>
                        </div>
                    </div>

                    <div class="row" id="death_claim_id">
                        <div class="col-md-2"></div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="answer_by_name" class="form-label">Answer By Name</label>
                                <input type="text" class="form-control" name="answer_by_name" id="answer_by_name" placeholder="Enter name" value="">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="agent" class="form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                <div class="form-check">
                                    <div class="form-check-inline">
                                        <input class="form-check-inline form-check-input" type="radio" name="answer_by_relation" id="agent" value="Agent" checked="">
                                        <label class="form-check-label me-5" for="agent">Agent</label>
                                    </div>
                                    <div class="form-check-inline">
                                        <input class="form-check-inline form-check-input" type="radio" name="answer_by_relation" id="policy_holder" value="Policy Holder">
                                        <label class="form-check-label me-5" for="policy_holder">Policy Holder</label>
                                    </div>
                                    <div class="form-check-inline">
                                        <input class="form-check-inline form-check-input" type="radio" name="answer_by_relation" id="relative" value="Relative">
                                        <label class="form-check-label me-5" for="relative">Relative</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2"></div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="button" id="btnevent" class="btn btn-primary px-4" onclick="return saveQueryAns(0);">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- End modal -->

<!-- Queries View Modal -->
<div class="modal fade" id="modalViewQuery" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modal_query_lable" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg mx-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalViewQueryLabel">Queries</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="table-responsive">
                    <table id="datatable1" class="table align-middle table-nowrap table-striped display nowrap w-100">   
                        <thead class="table-light">
                            <tr>
                                <th>Sr No.</th>
                                <th>Query Detail</th>
                                <th>Amount</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>
<!-- End modal -->

<!-- Answers View Modal -->
<div class="modal fade" id="modalViewAns" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modal_ans_lable" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xxl mx-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalViewAnsLabel">Queries</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                {{-- <form id="formQueryAnsEdit" action="{{route('query.ans.save')}}" method="POST" class="needs-validation" novalidate> --}}
                <form id="formQueryAnsEdit" method="POST" class="needs-validation" novalidate>
                    @csrf
                    <input type="hidden" name="id" id="id_one">
                    <input type="hidden" name="query_id" id="query_id_1">
                    <input type="hidden" name="lodged_id" id="lodged_id_1">
                    <input type="hidden" name="intimation_type" id="intimation_type_1">

                    <div id="idOne">
                        <div class="row">
                            <div class="col-md-1">
                                <div class="mb-3">
                                    <label for="sr_number_one" class="form-label">Sr. No.</label>
                                    <input type="text" class="form-control" name="sr_number" id="sr_number_one" readonly value="1">
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="mb-3">
                                    <label for="query_ans_detail_one" class="form-label">Query Answer Detail</label>
                                    <input type="text" class="form-control" name="query_ans_detail" id="query_ans_detail_one" placeholder="Enter query answer detail" value="" autocomplete="off" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="submited_docs_details_one" class="form-label">Submited Documents Detail</label>
                                    <input type="text" class="form-control" name="submited_docs_details" id="submited_docs_details_one" placeholder="Enter submited document detail" value="" autocomplete="off" required>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label for="amount_one" class="form-label">Amount<span style="font-size: 12px;color: #808080bd;">(Rs.)</span></label>
                                    <input type="text" class="form-control isNumber" name="amount" id="amount_one" placeholder="Enter amount" maxlength="7" value="" autocomplete="off">
                                </div>
                            </div>
                        </div>
                    
                        <div id="idTwo">
                            <div class="row">
                                <div class="col-xl-6">
                                    <div class="mb-3">
                                        <label for="ans_docs_date_one" class="form-label">Answer / Docs. Received From Client Date</label>
                                        <input type="text" class="form-control" name="ans_docs_date" id="ans_docs_date_one" placeholder="dd-mm-yyyy" value="" autocomplete="off" required>
                                    </div>
                                </div>
                                <div class="col-xl-6">
                                    <div class="mb-3">
                                        <label for="general_comments_ans_one" class="form-label">General Comments For Answer</label>
                                        <input type="text" class="form-control" name="general_comments_ans" id="general_comments_ans_one" placeholder="Enter comments" value="" autocomplete="off" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row" id="not_death_claim_id_1">
                                <div class="col-xl-6">
                                    <div class="mb-3">
                                        <label for="query_ans_submission_one" class="form-label">Query Answer Submission Date</label>
                                        <input type="text" class="form-control" name="query_ans_submission" id="query_ans_submission_one" placeholder="dd-mm-yyyy" value="" autocomplete="off" required>
                                    </div>
                                </div>
                                <div class="col-xl-3">
                                    <div class="mb-3">
                                        <label for="company_tpa_name_one" class="form-label ">Query Answer Submission To...</label>
                                        <select class="form-control select2-ajax" id="company_tpa_name_one" name="company_tpa_name"></select>
                                        <div class="invalid-feedback">This value is required.</div>
                                    </div>
                                </div>
                                <div class="col-xl-3 ">
                                    <div class="mb-3">
                                        <div class="form-check">
                                            <div class="form-check-inline" style="margin-bottom: 5px;">
                                                <input class="form-check-inline form-check-input" type="radio" name="company_tpa" id="company_one" value="Company" checked>
                                                <label class="form-check-label me-5" for="company_one">Company</label>
                                            </div>
                                            <div class="form-check-inline">
                                                <input class="form-check-inline form-check-input" type="radio" name="company_tpa" id="tpa_one" value="TPA">
                                                <label class="form-check-label me-5" for="tpa_one">TPA</label>
                                            </div>
                                        </div>
                                        <select class="form-control select2-ajax" id="company_tpa_email_one" name="company_tpa_email"></select>
                                        <div class="invalid-feedback">This value is required.</div>
                                    </div>
                                </div>
                            </div>

                            <div class="row" id="death_claim_id_1">
                                <div class="col-md-2"></div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="answer_by_name" class="form-label">Answer By Name</label>
                                        <input type="text" class="form-control" name="answer_by_name" id="answer_by_name" placeholder="Enter name" value="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="agent" class="form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                        <div class="form-check">
                                            <div class="form-check-inline">
                                                <input class="form-check-inline form-check-input" type="radio" name="answer_by_relation" id="agent_1" value="Agent" checked="">
                                                <label class="form-check-label me-5" for="agent_1">Agent</label>
                                            </div>
                                            <div class="form-check-inline">
                                                <input class="form-check-inline form-check-input" type="radio" name="answer_by_relation" id="policy_holder_1" value="Policy Holder">
                                                <label class="form-check-label me-5" for="policy_holder_1">Policy Holder</label>
                                            </div>
                                            <div class="form-check-inline">
                                                <input class="form-check-inline form-check-input" type="radio" name="answer_by_relation" id="relative_1" value="Relative">
                                                <label class="form-check-label me-5" for="relative_1">Relative</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2"></div>
                            </div>
                        </div>

                        <button type="button" class="btn btn-primary px-5 float-end" onclick="return saveQueryAns(1);">Save</button>
                        <br>
                        <br>
                        <div class="dropdown-divider"></div>
                    </div>
                </form>

                <div class="table-responsive">
                    <table id="datatable2" class="table align-middle table-nowrap table-striped display nowrap w-100">   
                        <thead class="table-light">
                            <tr>
                                <th>Action</th>
                                <th>Sr No.</th>
                                <th>Answer Detail</th>
                                <th>Document Detail</th>
                                <th>Amount</th>
                                <th>Docs. Received Date</th>
                                <th>Comments</th>
                                <th>Submission</th>
                                <th>Submission To</th>
                                <th>Name</th>
                                <th>Email</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>
<!-- End modal -->

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

            <div class="modal-body pb-1">
                <form id="formAddFollowUps" method="POST"  class="needs-validation" novalidate>
                    <input type="hidden" class="form-control" name="follow_up_id" id="follow_up_id">
                    <input type="hidden" class="form-control" name="data_id" id="data_id">   
                    <input type="hidden" class="form-control" name="follow_up_type" id="follow_up_type" value="Query">
                    <input type="hidden" class="form-control" name="current_tab" id="current_tab" value="Query">
                    @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 src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/kendo.all.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    function saveQueryAns(id){
        var saveQueryAnsAjax = "{{route('query.ans.save')}}";
        
        if(id == 0){
            var formData = new FormData($('#formQueryAns')[0]);
            
            $.ajax({
                type: 'POST',
                url: saveQueryAnsAjax,
                data: formData,
                processData: false, // Don't process the data
                contentType: false, 
                beforeSend: function(){
                    showLoader();
                },
                success: function(responseText) {
                    hideLoader();
    
                    if (responseText['status'] == 1) {
    
                        toastr["success"](responseText['msg']);
    
                        $('#datatable, #datatable_1, #datatable_5').DataTable().ajax.reload(null, false);
                        $("#formQueryAns").removeClass('was-validated').trigger("reset");
                        $("#addQueryAns").modal("hide");
                    
                        $("#company_tpa_name, #company_tpa_email").empty().trigger("change");
    
                    } else if (responseText['status'] == 0) {
                        $("#formQueryAns").addClass('was-validated');
                     
                        if (typeof responseText['data'] !== "undefined") {
                           var size = Object.keys(responseText['data']).length;
                            if (size > 0) {
                                for (var [key, value] of Object.entries(responseText['data'])) {
                                    toastr["error"](value);
                                }
                            }
                        } else {
                            if (typeof responseText['data'] !== "undefined") {
                                var size = Object.keys(responseText['data']).length;
                                if (size > 0) {
                                    for (var [key, value] of Object.entries(responseText['data'])) {
                                    toastr["error"](value);
                                    }
                                }
                            } else {
                                toastr["error"](responseText['msg']);
                            }
                        }
                    }
                }
            });
        }else if(id == 1){
            var formData = new FormData($('#formQueryAnsEdit')[0]);

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

                        $('#datatable2').DataTable().ajax.reload(null, false);
                    
                        $('#formQueryAnsEdit').removeClass('was-validated').trigger("reset");
    
                    } else if (responseText['status'] == 0) {
                        toastr["error"](responseText['msg']);
                        $("#formQueryAnsEdit").addClass('was-validated');
                    }
                }
            });
        }
    }
    
    var ajaxURLGetClaimQueryData = "{{route('claim.query.data.ajax')}}";
    var deleteQueryClaim = "{{route('delete.claim.query')}}";
    var changeClaimQueryStatusURL = "{{route('change.claim.query.status')}}";
    var ajaxURLGetQuery="{{route('claim.query.ajax')}}";
    var ajaxURLGetAnswer="{{route('claim.ans.ajax')}}";
    var ajaxSearchInsCompanyName = "{{route('search.insurance.company')}}";
    var ajaxSearchInsCompanyEmail = "{{route('search.insurance.company.email')}}";
    var deleteAnswer = "{{route('delete.query.ans')}}";
    var editQueryAns = "{{route('edit.query.ans')}}";
    var RecordQueries = "{{route('get.record.queries')}}";
    var table1,table2;
    var csrfToken = $("[name=_token").val();
    var currentDate = new Date();
    
    $(document).ready(function(){
        $("#idOne , #idTwo").hide();
        
        if($("input[type=radio][name=company_tpa]:checked").val() == "Company") {
            initializeSelect2();
        }else{
            initializeTPASelect2();
        }

        $("input[type=radio][name=company_tpa]").on('change', function () {
            $("#company_tpa_name , #company_tpa_email , #company_tpa_name_one , #company_tpa_email_one").empty().val("").trigger("change");

            if ($(this).val() == "Company") {
                initializeSelect2();
            } else {
                initializeTPASelect2();
            }
        });

        $("#company_tpa_name").on("change", function () {
            $("#company_tpa_email").val("").trigger("change");
            $("#company_tpa_name").val();
        });

        $("#company_tpa_name_one").on("change", function () {
            $("#company_tpa_email_one").val("").trigger("change");
        });

        $("#company_tpa_email").on("select2:open", function (e) {
            if (!$("#company_tpa_name option:selected").length) {
                toastr.error("Please select a name first.");
            }
        });

        $("#company_tpa_email_one").on("select2:open", function (e) {
            if (!$("#company_tpa_name_one option:selected").length) {
                toastr.error("Please select a name first.");
            }
        });

        $(".isNumber").on('keyup',function(){
            var node = $(this);
            node.val(node.val().replace(/[^0-9]/g, ''));
        });

        $("#add_new_row_second").on('keyup', '.isNumber', function() {
            var node = $(this);
            node.val(node.val().replace(/[^0-9]/g, ''));
        });

        $('#query_ans_detail_1, #submited_docs_details_1, #general_comments_ans, #query_ans_submission').on('input', function() {
            var inputValue = $(this).val();
            var capitalizedValue = capitalizeString(inputValue);
            $(this).val(capitalizedValue);
        });

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

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

        $('#end_date, #end_date_1, #end_date_5').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_5, #end_date_5')); 

        $("#filter_status, #filter_status_1, #filter_status_5").select2({placeholder:"Select Filter"});      
    });

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

    function remove(id) {
        $.ajax({
            type: 'GET',
            url: deleteQueryClaim + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable, #datatable_1, #datatable_5').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 query_status = document.getElementById("query_status" + id);
        
        if (query_status.checked) {
            query_status = 1;
        } else {
            query_status = 0;
        }

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

    function Reject(id){
        var claimDetails = "{{route('reverse.claim.details')}}";

        $.ajax({
            type: 'GET',
            url: claimDetails + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    window.location = "{{route('add.claim.lodged.data')}}?id=" + resultData.id + "&type=" + resultData.type + "-reject&parent_id=" + id;

                }else{
                    toastr['error'](resultData['msg']);
                }
            }
        });
    }

    function viewQuery(id){
        $("#modalViewQuery").modal('show');
        $("#modalViewQueryLabel").html("Queries #"+id );
      
        queryDataTable(id);
    }

    function viewAns(id){
        $("#modalViewAns").modal('show');
        $("#modalViewAnsLabel").html("Answers #"+id );
        
        $("#idOne, #idTwo").hide();
        
        ansDataTable(id);
    }

    function editQueryAnswer(id){
        $('#formQueryAnsEdit').trigger("reset");
       
        $("#idOne").show();
        $("#idTwo").hide();

        $.ajax({
            url: editQueryAns + "?id=" + id,
            type: 'GET',
            success: function(response) {
                if(response.data.sr_number == 1){
                    // if(response.data.ans_docs_received_date != '' && response.data.comments != '' && response.data.query_ans_submited != ''){
                    $("#idTwo").show();
                }
 
                if(response.data.query_ans_submited_to_name_id == null && response.data.query_ans_submited_to_email_id == null){
                    $("#death_claim_id_1").show();
                    $("#not_death_claim_id_1").hide().find(':input').attr('disabled',true);
                    $("#intimation_type_1").val("Death Claim");

                }else{
                    $("#death_claim_id_1").hide();
                    $("#not_death_claim_id_1").show().find(':input').attr('disabled',false);
                }

                $("#id_one").val(response.data.id);
                $("#query_id_1").val(response.data.query_id);
                $("#lodged_id_1").val(response.data.claim_lodged_id);
                $("#sr_number_one").val(response.data.sr_number);
                $("#query_ans_detail_one").val(response.data.query_ans_details);
                $("#submited_docs_details_one").val(response.data.submited_docs_details);
                $("#amount_one").val(response.data.amount);
                $("#ans_docs_date_one").val(response.data.ans_docs_received_date);
                $("#general_comments_ans_one").val(response.data.comments);
                $("#query_ans_submission_one").val(response.data.query_ans_submited_date);
              
                $("#ans_docs_date_one, #query_ans_submission_one").datepicker({
                    format: "dd-mm-yyyy",
                    endDate: currentDate,
                    container:$("#modalViewAns"),
                }).on('changeDate', function() {
                    $('.datepicker').hide();
                });

               if(response.data.query_ans_submited_to == "Company"){
                    $("#company_one").prop('checked',true);
                
                    var newOption = new Option(response.data.insurance_comp_name, response.data.query_ans_submited_to_name_id, false, false);
                    $('#company_tpa_name_one').append(newOption).trigger('change');
                
                    var newOption = new Option(response.data.insurance_comp_email, response.data.query_ans_submited_to_email_id, false, false);
                    $('#company_tpa_email_one').append(newOption).trigger('change');

               }else if(response.data.query_ans_submited_to == "TPA"){
                    $("#tpa_one").prop('checked',true);
                
                    var newOption = new Option(response.data.name, response.data.query_ans_submited_to_name_id, false, false);
                    $('#company_tpa_name_one').append(newOption).trigger('change');
                
                    var newOption = new Option(response.data.email, response.data.query_ans_submited_to_email_id, false, false);
                    $('#company_tpa_email_one').append(newOption).trigger('change');

               }else if(response.data.query_ans_submited_to == "Agent"){
                    $("#agent_1").prop('checked',true);

               }else if(response.data.query_ans_submited_to == "Policy Holder"){
                    $("#policy_holder_1").prop('checked',true);

               }else if(response.data.query_ans_submited_to == "Relative"){
                    $("#relative_1").prop('checked',true);
               }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error(textStatus, errorThrown);
            }
        });
    }

    function queryDataTable(id){
        if (table1) {
            table1.clear().destroy();
        }

        setTimeout(function() {
            table1= $('#datatable1').DataTable({
                "order":[[ 2, 'desc' ]],
                "ordering": false,
                "processing": true,
                "serverSide": true,
                "scrollX": true,
                "scrollY": function() { return $(window).height() - 430; },
                "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": ajaxURLGetQuery + "?id=" +  id,
                    "type": "POST",
                    "data": {"_token": csrfToken,}
                },  
                "aoColumns" : [
                    {"mData" : "sr_num_query"},
                    {"mData" : "query_detail",
                            "render": function(data, type, full, meta) {
                                if (type === 'display' && data != null && data.length > 50) {
                                    return '<span title="' + data + '">' + data.substr(0, 50) + '...</span>';
                                } else {
                                    return data;
                                }
                            }    
                    },
                    {"mData" : "amount_query"},
                ]
            });
        }, 200);
    }

    function ansDataTable(id){
        if (table2) {
            table2.clear().destroy();
        }

        setTimeout(function() {
            table2= $('#datatable2').DataTable({
                "order":[[ 2, 'desc' ]],
                "ordering": false,
                "processing": true,
                "serverSide": true,
                "scrollX": true,
                "scrollY": function() { return $(window).height() - 430; },
                "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": ajaxURLGetAnswer + "?id=" +  id,
                    "type": "POST",
                    "data": {"_token": csrfToken,}
                },  
                "aoColumns" : [
                    {"mData" : "action"},
                    {"mData" : "sr_number"},
                    {"mData" : "ans_details",
                        "render": function(data, type, full, meta) {
                            if (type === 'display' && data != null && data.length > 40) {
                                return '<span title="' + data + '">' + data.substr(0, 40) + '...</span>';
                            } else {
                                return data;
                            }
                        }  
                    },
                    {"mData" : "submited_docs_details",
                        "render": function(data, type, full, meta) {
                            if (type === 'display' && data != null && data.length > 30) {
                                return '<span title="' + data + '">' + data.substr(0, 30) + '...</span>';
                            } else {
                                return data;
                            }
                        }  
                    },
                    {"mData" : "amount"},
                    {"mData" : "docs_received_date"},
                    {"mData" : "comments"},
                    {"mData" : "ans_submited"},
                    {"mData" : "ans_submited_to"},
                    {"mData" : "name"},
                    {"mData" : "email"},
                ]
            });
        }, 200);
    }

    // add query ans
    // function addQueryAnswer(id,lodged_id, claim_type_id, count, query_date, claim_intimation_type,direct_comp_id,direct_comp_name,tpa_comp_id,tpa_comp_name){
    function addQueryAnswer(value){
        var id = value.id;
        var lodged_id = value.claim_lodged_id;
        var claim_intimation_type = value.claim_intimation_type;
        var count= value.count;
        var claim_type_id = value.claim_type_id;
        var query_date = value.query_raised_date;        
        var direct_comp_name = value.direct_comp_name;
        if(direct_comp_name == null){
            direct_comp_name = '';
        }
        var direct_comp_id = value.intimation_direct_company_name_id;
        var tpa_comp_name = value.tpa_comp_name;
        if(tpa_comp_name == null){
            tpa_comp_name = '';
        }
        var tpa_comp_id = value.intimation_tpa_company_name_id;
        var intimation_company = value.intimation_company;

        $("#addQueryAns").modal("show");
        $("#addAnswerLable").html("Query #" + id + " Add Answer");
        $("#query_id").val(id);
        $("#lodged_id").val(lodged_id);
        $("#formQueryAns").removeClass('was-validated');

        $("#company_tpa_name , #company_tpa_email").empty().trigger("change");       

        $("#intimation_type").val(claim_intimation_type);

        if(claim_intimation_type == "Vehicle Claim"){
            $("#not_vehicle_id").hide();
        }else{
            $("#not_vehicle_id").show();
        }

        if(claim_intimation_type == "Death Claim"){
            $("#death_claim_id").show();
            $("#not_death_claim_id").hide().find(':input').attr('disabled',true);
        }else{
            $("#death_claim_id").hide();
            $("#not_death_claim_id").show();
        }

        AddNewRowSecond(count,id);
        companyType(claim_type_id);
      
        $("#ans_docs_date, #query_ans_submission").datepicker({
            format: "dd-mm-yyyy",
            startDate: query_date,
            endDate: currentDate,
            container: "#addQueryAns",
            orientation: 'bottom',
        }).on('changeDate', function() {
            $('.datepicker').hide();
        });        

        if(direct_comp_name != '' || tpa_comp_name != ''){
            if(intimation_company == "Direct Company" || intimation_company == "Both Company"){
                var newOption = new Option(direct_comp_name, direct_comp_id, false, false);
                $('#company_tpa_name').append(newOption).trigger('change');
        
                var newOption = new Option(value['direct_email'][0]['email'], value['direct_email'][0]['id'], false, false);
                $('#company_tpa_email').append(newOption).trigger('change');
    
                $("#company").prop('checked',true);
            }else{
                var newOption = new Option(tpa_comp_name, tpa_comp_id, false, false);
                $('#company_tpa_name').append(newOption).trigger('change');
        
                var newOption = new Option(value['tpa_email'][0]['email'], value['tpa_email'][0]['id'], false, false);
                $('#company_tpa_email').append(newOption).trigger('change');
    
                $("#tpa").prop('checked',true);
            }
        }
        
        // var optionsHTML = '';
        // value['direct_email'].forEach(function(emailObj) {
        //   optionsHTML += '<option value="' + emailObj['id'] + '" selected>' + emailObj['email'] + '</option>';
        // });

        // $('#company_tpa_email').html(optionsHTML);

    }

    function AddNewRowSecond(count,id) {
        $("#add_new_row_query, #add_new_row_second").empty();

        $.ajax({
            type: 'GET',
            url: RecordQueries + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    var index = 0; 

                    for(var j = 1 ; j <= count ; j++){
                        var queryDetail = resultData.data[index].query_detail;
                        var amount = resultData.data[index].amount;

                        if(j == 1){
                            var newRowHtml = `<div class="row">
                                <div class="col-md-1">
                                    <div class="mb-3">
                                        <label for="sr_no_${j}" class="form-label">Sr. No.<span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="sr_no_${j}" id="sr_no_${j}" readonly value="${j}">
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="mb-3">
                                        <label for="query_details_${j}" class="form-label">Query Details<span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="query_details_${j}" id="query_details_${j}" value="${queryDetail}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label for="amount_rs_${j}" class="form-label">Amount<span style="font-size: 12px;color: #808080bd;">(Rs.)</span></label>
                                        <input type="text" class="form-control" name="amount_rs_${j}" id="amount_rs_${j}" value="${amount}" readonly>
                                    </div>
                                </div>
                            </div>`;
                        }else{
                            var newRowHtml = `<div class="row">
                                <div class="col-md-1">
                                    <div class="mb-3">
                                        <input type="text" class="form-control" name="sr_no_${j}" id="sr_no_${j}" readonly value="${j}">
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="mb-3">
                                        <input type="text" class="form-control" name="query_details_${j}" id="query_details_${j}" value="${queryDetail}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <input type="text" class="form-control" name="amount_rs_${j}" id="amount_rs_${j}" value="${amount}" readonly>
                                    </div>
                                </div>
                            </div>`;
                        }

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

                        index = index + 1;
                    }                   
                }else{
                    toastr["error"](resultData['msg']);
                }
            }
        });

        for(var i = 1 ; i <= count ; i++){

            if(i == 1){
                var newRowHtml = `<div class="row">
                    <div class="col-md-1">
                        <div class="mb-3">
                            <label for="sr_number_${i}" class="form-label">Sr. No.<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="sr_number_${i}" id="sr_number_${i}" readonly value="${i}" required>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="mb-3">
                            <label for="query_ans_detail_${i}" class="form-label">Query Answer Detail<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="query_ans_detail_${i}" id="query_ans_detail_${i}" placeholder="Enter query answer detail" value="" autocomplete="off" required>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="mb-3">
                            <label for="amount_${i}" class="form-label">Amount<span style="font-size: 12px;color: #808080bd;">(Rs.)</span></label>
                            <input type="text" class="form-control isNumber" name="amount_${i}" id="amount_${i}" placeholder="Enter amount" maxlength="7" value="" autocomplete="off">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="submited_docs_details_${i}" class="form-label">Submited Documents Detail<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="submited_docs_details_${i}" id="submited_docs_details_${i}" placeholder="Enter submited document detail" value="" autocomplete="off" required>
                        </div>
                    </div>
                </div>`;
            }else{
                var newRowHtml = `<div class="row">
                    <div class="col-md-1">
                        <div class="mb-3">
                            <input type="text" class="form-control" name="sr_number_${i}" id="sr_number_${i}" readonly value="${i}">
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="mb-3">
                            <input type="text" class="form-control" name="query_ans_detail_${i}" id="query_ans_detail_${i}" placeholder="Enter query answer detail" value="" autocomplete="off" required>
                        </div>
                    </div>                   
                    <div class="col-md-2">
                        <div class="mb-3">
                            <input type="text" class="form-control isNumber" name="amount_${i}" id="amount_${i}" placeholder="Enter amount" maxlength="7" value="" autocomplete="off">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <input type="text" class="form-control" name="submited_docs_details_${i}" id="submited_docs_details_${i}" placeholder="Enter submitted document detail" value="" autocomplete="off" required>
                        </div>
                    </div>
                </div>`;
            }
            
            $("#add_new_row_second").append(newRowHtml);

            $('#query_ans_detail_'+ i +', #submited_docs_details_'+ i).on('input', function() {
                var inputValue = $(this).val();
                var capitalizedValue = capitalizeString(inputValue);
                $(this).val(capitalizedValue);
            });
        }
    }

    function initializeSelect2() {

        initializeInsCompNameSelect2("#company_tpa_name", "#addQueryAns .modal-body");
        initializeInsCompNameSelect2("#company_tpa_name_one", "#modalViewAns .modal-body");

        // for editS
        initializeInsCompEmailSelect2("#company_tpa_email", "#company_tpa_name" , "#addQueryAns .modal-body");
        initializeInsCompEmailSelect2("#company_tpa_email_one", "#company_tpa_name_one" , "#modalViewAns .modal-body");
    }

    function initializeInsCompNameSelect2(selector, dropdownParent) {
        $(selector).select2({
            ajax: {
                url: ajaxSearchInsCompanyName,
                dataType: 'json',
                delay: 0,
                data: function (params) {
                    return {
                        "company_type": companyType(),
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for company name',
            dropdownParent: $(dropdownParent)
        });
    }

    function initializeInsCompEmailSelect2(selector, companyIdSelector , parentSelector) {
        $(selector).select2({
            ajax: {
                url: ajaxSearchInsCompanyEmail,
                dataType: 'json',
                delay: 0,
                data: function (params) {
                    return {
                        "company_id": $(companyIdSelector).val(),
                        search_value: params.term,
                        page: params.page
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for company email',
            dropdownParent: $(parentSelector)
        });
    }

    function companyType(claim_type_id) {
        if(claim_type_id == 5 || claim_type_id == 12 || claim_type_id == 19){
            return "life";
        }else{
            return "general";
        }
    }

    function initializeTPASelect2() {
        initializeTPACompNameSelect2("#company_tpa_name", "#addQueryAns .modal-body");
        initializeTPACompNameSelect2("#company_tpa_name_one", "#modalViewAns .modal-body");

        // for edit
        initializeTPACompEmailSelect2("#company_tpa_email", "#company_tpa_name", "#addQueryAns .modal-body");
        initializeTPACompEmailSelect2("#company_tpa_email_one", "#company_tpa_name_one", "#modalViewAns .modal-body");
    }

    function initializeTPACompNameSelect2(selector, parentSelector) {
        $(selector).select2({
            ajax: {
                url: ajaxSearchInsCompanyName,
                dataType: 'json',
                delay: 0,
                data: function (params) {
                    return {
                        "company_type": "TPA",
                        search_value: params.term,
                        page: params.page
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for TPA name',
            dropdownParent: $(parentSelector)
        });
    }

    function initializeTPACompEmailSelect2(selector, companyIdSelector, parentSelector) {
        $(selector).select2({
            ajax: {
                url: ajaxSearchInsCompanyEmail,
                dataType: 'json',
                delay: 0,
                data: function (params) {
                    return {
                        "company_id": $(companyIdSelector).val(),
                        search_value: params.term,
                        page: params.page
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for TPA email',
            dropdownParent: $(parentSelector)
        });
    }

    // delete Query Answer
    function deleteQueryAns(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) {
                removeAnswer(id);
            }
        });
    }

    function removeAnswer(id){
        $.ajax({
            type: 'GET',
            url: deleteAnswer + "?id=" + id ,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable2, #datatable, #datatable_1, #datatable_5').DataTable().ajax.reload(null, false);
                }else{
                    toastr["error"](resultData['msg']);
                }
            }
        });
    }
    
    function alreadyAnswer(id){
        if(id == 0){
            toastr["success"]("Already Submited Answer Of This Query");
        }

        if(id == 1){
            toastr["success"]("Already Added Settlement Of This Query");
        }
    }

    function errorMsg(){
        toastr["error"]("Answers Are Pending Of This Query");
    }

    function latestSettlementMsg(){
        toastr["info"]("You are add settlement from latest query of this claim");
    }
</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]}],
         "order": [[0, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() { return $(window).height() - 300; },
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLGetClaimQueryData,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "status": function(){return $("#filter_status").val()},
                "from_date":function(){return $("#from_date").val();},
                "end_date":function(){return $("#end_date").val();},
                "claim_type": "Mediclaim",
            }         
        },
        "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;
                        }
                    }
            },
            {"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": "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": "query_raised_date"},
            {"mData": "query_source",
                    "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": "client_code"},
            {"mData": "discussion_talk",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 30) {
                        return '<span title="' + data + '">' + data.substr(0, 30) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "query_ans","bSortable": false,},
        ]
    });   

    var columnsMapping = [
        'transaction_date', 'claim_type', 'query_raised_date', 'query_source', 'client_code', 'discussion_talk'
    ];

    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;

    const selectFilterStatus = $('#filter_status');
    selectFilterStatus.on('change ready', 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-query-data?type=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]);
                    // table_1.columns(columnIndex).search(parsedData[columnName]);
                    // table_5.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();
    }

    $('#medi-claim').click(function() {
        setTimeout(function() {
            table.columns.adjust().draw();
        }, 200);
    });
</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]}],
         "order": [[0, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() { return $(window).height() - 300; },
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLGetClaimQueryData,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "status": function(){return $("#filter_status").val()},
                "from_date":function(){return $("#from_date").val();},
                "end_date":function(){return $("#end_date").val();},
                "claim_type": "Vehicle Claim",
            }         
        },
        "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;
                        }
                    }
            },
            {"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": "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": "query_raised_date"},
            {"mData": "query_source",
                    "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": "client_code"},
            {"mData": "discussion_talk",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 30) {
                        return '<span title="' + data + '">' + data.substr(0, 30) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "query_ans","bSortable": false,},
        ]
    });

    var columnsMapping_1 = [
       'transaction_date', 'claim_type', 'query_raised_date', 'query_source', 'client_code', 'discussion_talk'
    ];

    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 ready', 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-query-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').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();
    }

    $('#vehicle-claim').click(function() {
        setTimeout(function() {
            table_1.columns.adjust().draw();
        }, 200);       
    });
</script>

<!-- for other claim -->
<script type="text/javascript">
    var table_5 = $('#datatable_5').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}],
         "order": [[0, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() { return $(window).height() - 300; },
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLGetClaimQueryData,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "status": function(){return $("#filter_status").val()},
                "from_date":function(){return $("#from_date").val();},
                "end_date":function(){return $("#end_date").val();},
                "claim_type": "Other Claim",
            }         
        },
        "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;
                        }
                    }
            },
            {"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": "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": "query_raised_date"},
            {"mData": "query_source",
                    "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": "client_code"},
            {"mData": "discussion_talk",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 30) {
                        return '<span title="' + data + '">' + data.substr(0, 30) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "query_ans","bSortable": false,},
        ]
    });

    var columnsMapping_5 = [
        'transaction_date', 'claim_type', 'query_raised_date', 'query_source', 'client_code', 'discussion_talk'
    ];

    columnsMapping_5.forEach(function(columnName_5, columnIndex_5) {
        $('input[name="' + columnName_5 + '"]').click(function (event) {
            event.stopPropagation();
        });
 
        $('input[name="' + columnName_5 + '"]').on('keyup input', debounce(function () {
            // table_5.columns(columnIndex).search(this.value).draw();
           
            table_5.columns(columnIndex_5).search($('input[name="' + columnName_5 + '"]').val()).draw();
            handleInputChange_5();
                    
            if($('input[name="' + columnName_5 + '"]').val() != ''){
                $(".search-value-5").fadeIn();
            }else{
                $(".search-value-5").fadeOut();
            }
        }, 500));
    });

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

    const selectFilterStatus_5 = $('#filter_status_5');
    selectFilterStatus_5.on('change ready', handleInputChange_5);

    const startInputDates_5 = $('#from_date_5');
    startInputDates_5.on('change', handleInputChange_5);

    const endInputDates_5 = $('#end_date_5');
    endInputDates_5.on('change', handleInputChange_5);

    function handleInputChange_5(){
        const FilterStatus_5 = selectFilterStatus_5.val();
        const startInputDate_5 = startInputDates_5.val();
        const endInputDate_5 = endInputDates_5.val();

        const pageData_5 = {
            record_5: FilterStatus_5,
            from_date_5: startInputDate_5,
            end_date_5: endInputDate_5,
        };

        columnsMapping_5.forEach(function(columnName_5, columnIndex_5) {
            const inputValue_5 = $('input[name="' + columnName_5 + '"]').val();
            pageData_5[columnName_5] = inputValue_5;
        });

        const jsonPageData_5 = JSON.stringify(pageData_5);
        localStorage.setItem(currentPage_5, jsonPageData_5);
    }

    const storedData_5 = localStorage.getItem(currentPage_5);
    const parsedData_5 = JSON.parse(storedData_5);

    if(parsedData_5 != null){
        //  for other claim
        if(currentPage_5 == "/admin/manage-claim-query-data?other_claim"){
            if(parsedData_5.record_5 != ''){
                $('#filter_status_5').val(parsedData_5.record_5).change();
                if(parsedData_5.record_5 != -1){
                    $(".search-value-5").fadeIn();
                }
            }else{
                $('#filter_status_5').val(-1).change();
            }

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

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

            columnsMapping_5.forEach(function(columnName_5, columnIndex_5) {
                if (parsedData_5 && parsedData_5.hasOwnProperty(columnName_5)) {
                    $('input[name="' + columnName_5 + '"]').val(parsedData_5[columnName_5]); // Set the value of the input field
                    table_5.columns(columnIndex_5).search(parsedData_5[columnName_5]);
                    handleInputChange_5();

                    if(parsedData_5[columnName_5] != ''){
                        $(".search-value-5").fadeIn();
                    }
                }
            });
        }

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

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

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

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

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

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

        // for filter_status, from_date, end_date

        $('#from_date_5, #end_date_5').datepicker("destroy").val("");

        localStorage.removeItem(currentPage_5);

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

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

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

        handleInputChange_5();
    }

    $('#other-claim').click(function() {
        setTimeout(function() {
            table_5.columns.adjust().draw();
        }, 200);
    });
</script>

<!-- for tab selection -->
<script type="text/javascript">
    $(document).ready(function () {
        updateURLWithActiveTabId();
 
        $('#medi-claim').click(function() {
            handleTabClick('#medi-claim', '#mediClaim', 'mediclaim');
        });
 
        $('#vehicle-claim').click(function() {
            handleTabClick('#vehicle-claim', '#vehicleClaim', 'vehicle-claim');
        });
 
        $('#death-claim').click(function() {
            handleTabClick('#death-claim', '#deathClaim', 'death-claim');
        });
 
        $('#disability-claim').click(function() {
            handleTabClick('#disability-claim', '#disabilityClaim', 'disability-claim');
        });
 
        $('#other-claim').click(function() {
            handleTabClick('#other-claim', '#otherClaim', 'other-claim');
        });
    });
 
    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"){
            handleTabClick('#medi-claim', '#mediClaim', 'mediclaim');
            $(".amount_hide").show();
        }else if(typeValue == "vehicle-claim"){
            handleTabClick('#vehicle-claim', '#vehicleClaim', 'vehicle-claim');
            $(".amount_hide").show();
        }else if(typeValue == "death-claim"){
            handleTabClick('#death-claim', '#deathClaim', 'death-claim');
            $(".amount_hide").hide();
        }else if(typeValue == "disability-claim"){
            handleTabClick('#disability-claim', '#disabilityClaim', 'disability-claim');
            $(".amount_hide").hide();
        }else if(typeValue == "other-claim"){
            handleTabClick('#other-claim', '#otherClaim', 'other-claim');
            $(".amount_hide").hide();
        }
    }
 
    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