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

<style>
    @media only screen and (max-width:421px) {
        .actions li:first-child a{
            margin-bottom: .5rem!important;
        }
    }

    @media only screen and (max-width:767px) {
        .form-check .col-md-2 .form-control{
            width:267%!important;
        }
    }

    @media only screen and (max-width: 1665px) {
        #add_new_row .col-xxl-3,
        #add_new_row .col-xxl-2 {
            width: 50% !important;
        }

        #add_new_row .col-xxl-1 {
            width: 100% !important;
        }
    }

    button#btnSave {
        width: 105px;
        height: 39px;
        line-height: 14px;
    }

    button#send_email {
        width: 105px;
        margin-left: 15px;
    }
</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-lg-12">
                <div class="card">
                    <div class="card-body">
                        <form id="addquery" action="{{route('query.save')}}" method="POST" class="needs-validation m-0" enctype="multipart/form-data" novalidate>
                            @csrf
                            <input type="hidden" id="id" name="id">
                            <input type="hidden" id="claim_intimation_id" name="claim_intimation_id">
                            <input type="hidden" id="claim_lodged_id" name="claim_lodged_id">
                            <input type="hidden" id="url_type" name="url_type" value="">
                            <div id="basic-example">
                                 <!-- Step 1 -->
                                <h3>Step 1</h3>
                                <section class="wizard-step">
                                    <div class="row">
                                        <div class="col-md-12 mt-4">
                                            <div class="card text-white bg-dark mb-3">
                                            <div class="card-header text-center font-size-13" id="claim_type_name">CLAIM DETAIL</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" id="general_1">
                                        <div class="col-xl-3">
                                            <div class="mb-3">
                                                <label for="intimation_date" class="form-label">Intimation Date</label>
                                                <input type="text" class="form-control" name="intimation_date" id="intimation_date" disabled value="">
                                            </div>
                                        </div>
                                        <div class="col-xl-3">
                                            <div class="mb-3">
                                                <label for="policy_number" class="form-label">Policy Number</label>
                                                <input type="text" class="form-control" name="policy_number" id="policy_number" disabled value="">
                                            </div>
                                        </div>
                                        <div class="col-xl-3">
                                            <div class="mb-3">
                                                <input type="hidden" name="policy_holder_name_id_hidden" id="policy_holder_name_id_hidden">
                                                <label for="policy_holder_name" class="form-label">Policy Holder Name</label>
                                                <input type="text" class="form-control" name="policy_holder_name" id="policy_holder_name" disabled value="">
                                            </div>
                                        </div>
                                        <div class="col-xl-3">
                                            <div class="mb-3">
                                                <label for="insurance_company_name" class="form-label">Insaurance Company Name</label>
                                                <input type="text" class="form-control" name="insurance_company_name" id="insurance_company_name" disabled value="">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" id="general_2">
                                        <div class="col-xl-3" id="admission_date_id">
                                            <div class="mb-3">
                                                <label for="admission_date" class="form-label">Admission Date</label>
                                                <input type="text" class="form-control" name="admission_date" id="admission_date" disabled value="" >
                                            </div>
                                        </div>
                                        <div class="col-xl-3" id="incident_date_id">
                                            <div class="mb-3">
                                                <label for="incident_date" class="form-label">Incident Date</label>
                                                <input type="text" class="form-control" name="incident_date" id="incident_date" disabled value="" >
                                            </div>
                                        </div>
                                        <div class="col-xl-3" id="incident_address_id">
                                            <div class="mb-3">
                                                <label for="incident_address" class="form-label">Incident Address</label>
                                                <input type="text" class="form-control" name="incident_address" id="incident_address" disabled value="">
                                            </div>
                                        </div>
                                        <div class="col-xl-3" id="incident_details_id">
                                            <div class="mb-3">
                                                <label for="incident_detail" class="form-label">Short Detail Of Incident</label>
                                                <input type="text" class="form-control" name="incident_detail" id="incident_detail" disabled value="">
                                            </div>
                                        </div>
                                        <div class="col-xl-3" id="incident_reason_id">
                                            <div class="mb-3">
                                                <label for="incident_reason" class="form-label">Reason Of Incident</label>
                                                <input type="text" class="form-control" name="incident_reason" id="incident_reason" disabled value="">
                                            </div>
                                        </div>
                                        <div class="col-xl-3" id="patient_name_id">
                                            <div class="mb-3">
                                                <label for="patient_name" class="form-label">Patient Name</label>
                                                <input type="text" class="form-control" name="patient_name" id="patient_name" disabled value="" >
                                            </div>
                                        </div>
                                        <div class="col-xl-3" id="hospital_name_id">
                                            <div class="mb-3">
                                                <label for="hospital_name" class="form-label">Hospital Name</label>
                                                <input type="text" class="form-control" name="hospital_name" id="hospital_name" disabled value="">
                                            </div>
                                        </div>
                                        <div class="col-xl-3" id="vehicle_name_id">
                                            <div class="mb-3">
                                                <label for="vehicle_name" class="form-label">Vehicle Name</label>
                                                <input type="text" class="form-control" name="vehicle_name" id="vehicle_name" disabled value="" >
                                            </div>
                                        </div>
                                        <div class="col-xl-3" id="vehicle_number_id">
                                            <div class="mb-3">
                                                <label for="vehicle_number" class="form-label">Vehicle Number</label>
                                                <input type="text" class="form-control" name="vehicle_number" id="vehicle_number" disabled value="">
                                            </div>
                                        </div>
                                        <div class="col-xl-3" id="driver_tp_name_id">
                                            <div class="mb-3">
                                                <label for="driver_tp_name" class="form-label">Driver / TP Person Name</label>
                                                <input type="text" class="form-control" name="driver_tp_name" id="driver_tp_name" disabled value="">
                                            </div>
                                        </div>
                                        <div class="col-xl-3" id="admission_reason_id">
                                            <div class="mb-3">
                                                <label for="reason_of_admission" class="form-label">Admission Reason</label>
                                                <input type="text" class="form-control" name="reason_of_admission" id="reason_of_admission" disabled value="">
                                            </div>
                                        </div>  
                                    </div>

                                    <div class="row" id="general_3">                                                                                 
                                        <div class="col-xl-3" id="segment_id">
                                            <div class="mb-3">
                                                <label for="segment" class="form-label">Segment</label>
                                                <input type="text" class="form-control" name="segment" id="segment" disabled value="">
                                            </div>
                                        </div>
                                        <div class="col-xl-3" id="life_ins_plan_id">
                                            <div class="mb-3">
                                                <label for="life_ins_plan_name" class="form-label">Life Insurance Plan Name</label>
                                                <input type="text" class="form-control" name="life_ins_plan_name" id="life_ins_plan_name" disabled value="">
                                            </div>
                                        </div>
                                        <div class="col-xl-3" id="broker_id">
                                            <div class="mb-3">
                                                <label for="broker" class="form-label">Broker Name</label>
                                                <input type="text" class="form-control" name="broker" id="broker" disabled value="">
                                            </div>
                                        </div>
                                        <div class="col-xl-3" id="sub_agent_id">
                                            <div class="mb-3">
                                                <label for="sub_agent_name" class="form-label">Sub Agent Name</label>
                                                <input type="text" class="form-control" name="sub_agent_name" id="sub_agent_name" disabled value="" placeholder="Sub Agent Name">
                                            </div>
                                        </div>
                                        <div class="col-xl-3" id="agency_id">
                                            <div class="mb-3">
                                                <label for="agency" class="form-label">Agency Name</label>
                                                <input type="text" class="form-control" name="agency" id="agency" disabled value="">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" id="vehicle_lodged_id">
                                        <div class="col-xl-3">
                                            <div class="mb-3">
                                                <label for="claim_transaction_date" class="form-label">Claim Transaction Date</label>
                                                <input type="text" class="form-control" name="claim_transaction_date" id="claim_transaction_date" disabled value="">
                                            </div>
                                        </div>                                         
                                        <div class="col-xl-3">
                                            <div class="mb-3">
                                                <label for="file_submited_date" class="form-label">File Submited Date</label>
                                                <input type="text" class="form-control" name="file_submited_date" id="file_submited_date" disabled value="">
                                            </div>
                                        </div>
                                        <div class="col-xl-3">
                                            <div class="mb-3">
                                                <label for="total_claim_lodged_amt" class="form-label">Total Claim Lodged Amount</label>
                                                <input type="text" class="form-control" name="total_claim_lodged_amt" id="total_claim_lodged_amt" disabled value="">
                                            </div>
                                        </div>
                                        <div class="col-xl-3">
                                            <div class="mb-3">
                                                <label for="garage_name" class="form-label">Garage Name</label>
                                                <input type="text" class="form-control" name="garage_name" id="garage_name" disabled value="" placeholder="Garage Name">
                                            </div>
                                        </div> 
                                    </div>

                                    <div id="life_death_id">
                                        <div class="row">
                                            <div class="col-xl-4">
                                                <div class="mb-3">
                                                    <label for="intimation_date_1" class="form-label">Intimation Date</label>
                                                    <input type="text" class="form-control" name="intimation_date_1" id="intimation_date_1" disabled value="">
                                                </div>
                                            </div>
                                            <div class="col-xl-4">
                                                <div class="mb-3">
                                                    <label for="policy_holder_name_1" class="form-label">Policy Holder Name</label>
                                                    <input type="text" class="form-control" name="policy_holder_name_1" id="policy_holder_name_1" disabled value="">
                                                </div>
                                            </div>
                                            <div class="col-xl-4">
                                                <div class="mb-3">
                                                    <label for="insurance_company_name_1" class="form-label">Insurance Company Name</label>
                                                    <input type="text" class="form-control" name="insurance_company_name_1" id="insurance_company_name_1" disabled value="">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-xl-3">
                                                <div class="mb-3">
                                                    <label for="death_person_name" class="form-label">Death Person Name</label>
                                                    <input type="text" class="form-control" name="death_person_name" id="death_person_name" disabled value="">
                                                </div>
                                            </div>
                                            <div class="col-xl-3">
                                                <div class="mb-3">
                                                    <label for="nominee_name" class="form-label">Nominee Name</label>
                                                    <input type="text" class="form-control" name="nominee_name" id="nominee_name" disabled value="">
                                                </div>
                                            </div>
                                            <div class="col-xl-3">
                                                <div class="mb-3">
                                                    <label for="death_date" class="form-label">Death Date</label>
                                                    <input type="text" class="form-control" name="death_date" id="death_date" disabled value="">
                                                </div>
                                            </div>
                                            <div class="col-xl-3">
                                                <div class="mb-3">
                                                    <label for="intimation_sent_to" class="form-label">Intimation Sent To</label>
                                                    <input type="text" class="form-control" name="intimation_sent_to" id="intimation_sent_to" disabled value="">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-xl-3">
                                                <div class="mb-3">
                                                    <label for="total_sum_assure" class="form-label">Total Sum Assured Claimed</label>
                                                    <input type="text" class="form-control" name="total_sum_assure" id="total_sum_assure" disabled value="">
                                                </div>
                                            </div>
                                            <div class="col-xl-3">
                                                <div class="mb-3">
                                                    <label for="total_term_rider" class="form-label">Total Term Rider Claimed</label>
                                                    <input type="text" class="form-control" name="total_term_rider" id="total_term_rider" disabled value="">
                                                </div>
                                            </div>
                                            <div class="col-xl-3">
                                                <div class="mb-3">
                                                    <label for="total_acci_sum_assure" class="form-label">Total Accident Sum Assured Claimed</label>
                                                    <input type="text" class="form-control" name="total_acci_sum_assure" id="total_acci_sum_assure" disabled value="">
                                                </div>
                                            </div>
                                            <div class="col-xl-3">
                                                <div class="mb-3">
                                                    <label for="total_double_acci_sum_assure" class="form-label">Total Double Accident Sum Assured Claimed</label>
                                                    <input type="text" class="form-control" name="total_double_acci_sum_assure" id="total_double_acci_sum_assure" disabled value="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>

                                <!-- Step 2 -->
                                <h3>Step 2</h3>
                                <section class="wizard-step">
                                    <div class="row">
                                        <div class="col-md-12 mt-4">
                                            <div class="card text-white bg-dark mb-3">
                                            <div class="card-header text-center font-size-13" id="claim_type_value">Regular Claim</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12 mt-4">
                                            <div class="card text-white bg-secondary mb-3" style="background-color: #c1dbff !important;color: var(--bs-blue) !important">
                                            <div class="card-header text-center font-size-13">CLAIM QUERY ENTRY</div>
                                            </div>
                                        </div>
                                    </div>
            
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="transaction_date" class="form-label">Transaction Date<span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="transaction_date" id="transaction_date" placeholder="dd-mm-yyyy" value="{{date('d-m-Y')}}" autocomplete="off" required>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="document_number" class="form-label">Document Number<span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="document_number" id="document_number" readonly value="@php echo date('dmy'); echo mt_rand(10000,99999); @endphp" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-3" id="query_rasising_date_id">
                                            <div class="mb-3">
                                                <label for="query_raising_date" class="form-label">Query Raising Date<span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="query_raising_date" id="query_raising_date" placeholder="dd-mm-yyyy" value="" autocomplete="off" required>
                                            </div>
                                        </div>
                                        <div class="col-md-3" id="source_of_query_id">
                                            <div class="mb-3">
                                                <label for="source_of_query" class="form-label">Source Of Query<span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="source_of_query" id="source_of_query" placeholder="Enter query source" value="" autocomplete="off" required maxlength="90">
                                            </div>
                                        </div>
                                        <div class="col-md-3" id="query_send_client_code_id">
                                            <div class="mb-3">
                                                <label for="query_send_client_code" class="form-label">Query Send To Client</label>
                                                <input type="text" class="form-control" name="query_send_client_code" id="query_send_client_code" placeholder="Enter query" value="" autocomplete="off" maxlength="90">
                                            </div>
                                        </div>
                                        <div class="col-md-3" id="discussion_talking_detail_id">
                                            <div class="mb-3">
                                                <label for="discussion_talking_detail" class="form-label">Discussion / Talking Details</label>
                                                <input type="text" class="form-control" name="discussion_talking_detail" id="discussion_talking_detail" placeholder="Enter details" value="" autocomplete="off" maxlength="90">
                                            </div>
                                        </div>                                     
                                        <div class="col-md-9" id="remarks_id">
                                            <div class="mb-3">
                                                <label for="remarks" class="form-label">Remarks</label>
                                                <input type="text" class="form-control" name="remarks" id="remarks" placeholder="Enter remarks" maxlength="90" value="">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-2">
                                        <div class="col-md-12" id="source_of_query_id_1">
                                            <div class="mb-3">
                                                <label class="form-label" for="call">Source Of Query</label>
                                                <div class="form-check">
                                                    <div class="form-check-inline">
                                                        <input class="form-check-inline form-check-input" type="checkbox" name="source_of_query[]" id="call" value="Call From Company" checked="">
                                                        <label class="form-check-label me-5" for="call">Call From Comapny</label>
                                                    </div>
                                                    <div class="form-check-inline">
                                                        <input class="form-check-inline form-check-input" type="checkbox" name="source_of_query[]" id="email" value="Email">
                                                        <label class="form-check-label me-5" for="email">Email</label>
                                                    </div>
                                                    <div class="form-check-inline">
                                                        <input class="form-check-inline form-check-input" type="checkbox" name="source_of_query[]" id="personal_meeting" value="Personal Meeting">
                                                        <label class="form-check-label me-5" for="personal_meeting">Personal Meeting</label>
                                                    </div>
                                                    <div class="form-check-inline">
                                                        <input class="form-check-inline form-check-input" type="checkbox" name="source_of_query[]" id="sms_whatsapp" value="SMS / Whatsapp">
                                                        <label class="form-check-label me-5" for="sms_whatsapp">SMS / Whatsapp</label>
                                                    </div>
                                                    <div class="form-check-inline">
                                                        <input class="form-check-inline form-check-input" type="checkbox" name="source_of_query[]" id="other" value="Other">
                                                        <label class="form-check-label me-5" for="other">Other</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    @if($data['can_edit'] == 0)
                                        <div class="row">
                                            <div class="col-xl-1">
                                                <div class="mb-3">
                                                    <label for="sr_no_1" class="form-label">Sr. No.<span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" name="sr_no_1" id="sr_no_1" readonly value="1">
                                                </div>
                                            </div>
                                            <div class="col-xl-5">
                                                <div class="mb-3">
                                                    <label for="query_details_1" class="form-label">Query Details<span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" name="query_details_1" id="query_details_1" placeholder="Enter query detail" value="" autocomplete="off" required maxlength="160">
                                                </div>
                                            </div>
                                            <div class="col-xl-2">
                                                <div class="mb-3">
                                                    <label for="amount_rs_1" class="form-label">Amount<span style="font-size: 12px;color: #808080bd;">(Rs.)</span></label>
                                                    <input type="text" class="form-control isNumber query-amt" name="amount_rs_1" id="amount_rs_1" placeholder="Enter amount" maxlength="7" value="" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-xl-2">
                                                <div class="mb-3">
                                                    <input type="button" class="btn btn-primary form-control" name="add_row" id="add_row" value="Add Row" style="margin-top: 25px;" onclick="return AddNewRowFirst();">
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                                                    
                                    <div id="add_new_row_first"></div>

                                    <h5 class="text-center old-existing-query d-none">Old Existing Queries</h5>
                                    <div class="existing-queries"></div> 
                                </section>
                                
                                <!-- Step 3 -->
                                <h3>Step 3</h3>
                                <section class="wizard-step">
                                    {{-- @if($data['can_edit'] == 0)
                                        <div class="row row-item-document">
                                            <div class="col-xxl-3 col-xl-6">
                                                <div class="mb-3">
                                                    <label for="claim_document_type_1" class="form-label">Claim Document Type<span class="text-danger">*</span></label>
                                                    <select class="form-control select2-ajax" id="claim_document_type_1" name="claim_document_type_1" required></select>                                                    
                                                    <div class="invalid-feedback">This value is required.</div>
                                                </div>
                                            </div>
                                            <div class="col-xxl-3 col-xl-6">
                                                <div class="mb-3">
                                                    <label for="claim_document_name_1" class="form-label">Claim Document Name<span class="text-danger">*</span></label>
                                                    <select class="form-control select2-ajax" id="claim_document_name_1" name="claim_document_name_1" required></select>
                                                    <div class="invalid-feedback">This value is required.</div>
                                                </div>
                                            </div>
                                            <div class="col-xxl-3 col-xl-6">
                                                <div class="mb-3">
                                                    <label for="document_name_1" class="form-label">Upload Document<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span><span class="text-danger">*</span></label>
                                                    <input type="file" class="form-control" name="document_name_1[]" multiple id="document_name_1" required accept="image/jpeg,image/png,application/pdf">
                                                </div>
                                            </div>
                                            <div class="col-xxl-2 col-xl-6">
                                                <div class="mb-3">
                                                    <label for="nos_1" class="form-label">Nos</label>
                                                    <input class="form-control" id="nos_1" name="nos_1" placeholder="Enter nos" maxlength="4">
                                                </div>
                                            </div>
                                            <div class="col-xxl-1 justify-content-md-end">
                                                <div class="mb-3">
                                                    <input type="button" class="btn btn-primary form-control" name="add_row_document" id="add_row_document"  value="Add Row" style="margin-top: 25px;" onclick="return AddNewRowDocument();">
                                                </div>
                                            </div>
                                        </div>
                                    @endif --}}
                                
                                    <div class="row mb-3 ">
                                        <div class="col d-flex justify-content-end">
                                            <button type="button"
                                                class="btn btn-primary" style="padding-inline : 1.5rem !important"
                                                id="add_doc_row"
                                                onclick="AddNewRowDocumentUpload()">
                                                Add Row
                                            </button>
                                        </div>
                                    </div>

                                    <div id="add_new_row_document"></div>
                                </section>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('../reachassuree_agent/client/document_upload/restore_doc_modal')

@endsection

@section('custom-scripts')
<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>

<!-- jquery step -->
<script src="{{ asset('assets/libs/jquery-steps/build/jquery.steps.min.js') }}"></script>

<!-- form wizard init -->
<script src="{{ asset('assets/js/pages/form-wizard.init.js') }}"></script>

<script type="text/javascript">
    var authType = "{{ Auth::user()->type }}";

    var ajaxCheckDeletedDocument = "{{ route('check.deleted.document') }}";
    var ajaxPermanentlyDeleteDocument = "{{ route('permanent.delete.document') }}";
    var downloadRouteTemplate = "{{ route('download.client.document') }}";
    var ajaxRestoreDocument = "{{ route('restore.document') }}";

    var CURRENT_DEPARTMENT = 'ClaimQuery';
    var ajaxCheckDeletedClaimDocument = "{{ route('check.deleted.claim.document') }}";
    var ajaxPermanentlyDeleteClaimDocument = "{{ route('permanent.delete.claim.document') }}";
    var ajaxRestoreClaimDocument = "{{ route('restore.claim.document') }}";
    var ajaxDeleteClaimDocument = "{{ route('delete.claim.document') }}";
    var clientDocuments = [];  // Documents from client
    var claimDocuments = [];   // Documents from existing claim


    // Configuration
    const CONFIG = {
        maxRows: 29,
        alwaysHiddenTypeIds: [], // Always hidden
        conditionalHiddenTypeIds: [6], 
        container: '#add_new_row_document',
        addButton: '#add_doc_row'
    };

    // Check if row should be hidden
    function shouldHideRow(doc) {
        if (!doc) return false;
        if (doc.is_deleted) return true;
        
        const typeId = doc.document_type_id;
        
        // Always hide type 3
        if (CONFIG.alwaysHiddenTypeIds.includes(typeId)) return true;
        if (CONFIG.conditionalHiddenTypeIds.includes(typeId)) {
            const vehicleNo = $('#vehicle_number').val()?.trim();
            return !vehicleNo; // Hide if no vehicle number
        }
        
        return false;
    }

    function shouldHideByVehicle(doc, currentVehicleNo) {
        if (!doc) return false;
        const typeId = doc.document_type_id;
        const isVehicleDoc = CONFIG.conditionalHiddenTypeIds.includes(typeId);
        
        if (!isVehicleDoc) return false;
        
        // If document has no vehicle_no, hide it
        if (!doc.vehicle_no || doc.vehicle_no.toString().trim() === '') {
            return true;
        }
        
        // No vehicle selected in form → hide all vehicle docs
        if (!currentVehicleNo || currentVehicleNo.trim() === '') {
            return true;
        }
        
        // Compare vehicle numbers (normalized)
        const docVehicle = String(doc.vehicle_no)
            .replace(/[\s\-]/g, '')
            .toUpperCase()
            .trim();
        
        const currentVehicle = String(currentVehicleNo)
            .replace(/[\s\-]/g, '')
            .toUpperCase()
            .trim();
        
        // Hide if vehicle numbers don't match
        return docVehicle !== currentVehicle;
    }

    function recalcRowVisibility() {
        const currentVehicleNo = $('#vehicle_number').val()?.trim();
        
        let visibleRowCount = 0;

        $(`${CONFIG.container} .row-item-document`).each(function () {
            const $row = $(this);
            const doc = $row.data('doc') || null;
            
            let hidden = false;

            // Original rules
            if (shouldHideRow(doc)) hidden = true;

            // Vehicle-based rule
            if (!hidden) {
                hidden = shouldHideByVehicle(doc, currentVehicleNo);
            }

            $row.toggleClass('d-none', hidden);

            if (!hidden) {
                visibleRowCount++;
            }
        });

        if (visibleRowCount === 0) addRow();
        updateRowControls();
    }


    // Row template
    function rowTemplate(i, doc = null) {
        const isHidden = shouldHideRow(doc) ? 'd-none' : '';

        // Determine document type for new rows
        let docType = '';
        if (doc) {
            docType = doc.type; // Use existing type if available
        } else {
            // For new rows, we'll determine this dynamically when user selects
            docType = 'client_doc'; // Default
        }
        
        const downloadLink = doc?.name ? 
            `<a href="javascript:void(0)" data-document-name="${doc.name}" data-doc-type="${doc.type}" data-doc-department="${doc.type == "claim_doc" ? doc.department : null }" data-client-id="${doc.type == "client_doc" ? doc.client_id : null }" data-claim-number="${doc.type == "claim_doc" ? doc.id : null}" data-download-doc-num="${doc.type == "claim_doc" ? doc.download_document_number : null}"
                class="download-client-document-btn text text-primary ms-2">Download</a>` : '';

        return `
            <div class="row row-item-document ${isHidden}" data-row-index="${i}" data-doc-type="${docType}">
                ${doc ? `
                    <input type="hidden" name="hidden_doc_id_${i}" value="${doc.id}">
                    <input type="hidden" name="original_claim_id_${i}" value="${doc.original_claim_id ?? null}">
                    <input type="hidden" name="department_${i}" value="${doc.department ?? null}">
                ` : 
                `
                    <input type="hidden" name="department_${i}" value="${CURRENT_DEPARTMENT}">
                `}
                
                <div class="col-xxl-3 col-xl-6">
                    <div class="mb-3">
                        <label class="form-label">Document Type</label>
                        <select class="form-control select2-ajax" id="claim_document_type_${i}" name="claim_document_type_${i}"></select>
                    </div>
                </div>
                <div class="col-xxl-3 col-xl-6">
                    <div class="mb-3">
                        <label class="form-label">Document Name</label>
                        <select class="form-control select2-ajax document_name_row" id="claim_document_name_${i}" name="claim_document_name_${i}"></select>
                    </div>
                </div>
                <div class="col-xxl-3 col-xl-6">
                    <div class="mb-3">
                        <label class="form-label">
                            Upload Document
                            <span style="font-size:12px;color:#808080bd;">(JPG, PNG, JPEG or PDF)</span>
                        </label>
                        ${downloadLink}
                        <input type="file" class="form-control" name="document_name_${i}[]" multiple
                            id="document_name_${i}" accept="image/jpeg,image/png,application/pdf">
                    </div>
                </div>
                <div class="col-xxl-2 col-xl-6">
                    <div class="mb-3">
                        <label class="form-label">Nos</label>
                        <input type="text" class="form-control" name="nos_${i}" id="nos_${i}"
                            value="${doc?.document_number ?? ''}" placeholder="Enter nos">
                    </div>
                </div>
                <div class="col-xxl-1 justify-content-md-end">
                    <div class="mt-2">
                        <label class="form-label"></label>
                        <button type="button" class="btn btn-danger form-control docRemove" 
                            onclick="removeRowDocs(this)" data-document-id="${doc?.id ?? ''}" data-doc-type="${docType}">
                            Remove
                        </button>
                    </div>
                </div>
            </div>
        `;
    }

    // Get visible rows helper
    function getVisibleRows() {
        return $(`${CONFIG.container} .row-item-document`).not('.d-none');
    }

    // Get next row index
    function getNextRowIndex() {
        let maxIndex = 0;
        $(`${CONFIG.container} .row-item-document`).each(function() {
            const idx = parseInt($(this).attr('data-row-index')) || 0;
            if (idx > maxIndex) maxIndex = idx;
        });
        return maxIndex + 1;
    }

    // Initialize row (select2, events)
    function initializeRow(index, doc = null) {
        const clientId = $("#policy_holder_name_id_hidden").val();
        const claimId = $("#id").val();
        const $row = $(`div.row-item-document[data-row-index="${index}"]`);

        $row.data('doc', doc);

        // Set select2 values if doc exists
        if (doc) {
            $(`#claim_document_type_${index}`)
                .append(new Option(doc.document_type, doc.document_type_id, true, true))
                .trigger('change');
            $(`#claim_document_name_${index}`)
                .append(new Option(doc.document_name, doc.document_name_id, true, true))
                .trigger('change');
            
                // ⭐ CRITICAL: Store original values as data attributes
            $row.data({
                originalType: String(doc.document_type_id), // Convert to string for comparison
                originalName: String(doc.document_name_id)  // Convert to string for comparison
            });
        }

        // Add event listener to update doc-type when document type changes
        $(`#claim_document_type_${index}`).on('change', function() {
            const selectedTypeId = $(this).val();
            const isClaimDoc = (selectedTypeId == 3);
            const docType = isClaimDoc ? 'claim_doc' : 'client_doc';
            
            // Update the data attribute on the row
            $row.data('doc-type', docType);
            
            // Update the remove button's data attribute
            $row.find('.firstRemove').data('doc-type', docType);
        });
        
        DocumentSelect2(index, clientId, 'claim_document_', claimId);
            
        // Capitalize nos field
        $(`#nos_${index}`).on('input', function() {
            $(this).val(capitalizeString($(this).val()));
        });
    }

    // Add row
    function addRow(doc = null) {
        if (getVisibleRows().length >= CONFIG.maxRows) {
            $(CONFIG.addButton).prop('disabled', true);
            return;
        }
        
        rowCounter = getNextRowIndex();
        $(CONFIG.container).append(rowTemplate(rowCounter, doc));
        initializeRow(rowCounter, doc);
        updateRowControls();
    }

    // Alias for backward compatibility
    function AddNewRowDocumentUpload() {
        addRow();
    }

    // Remove row
    function removeRowDocs(button) {
        const $row = $(button).closest(".row-item-document");
        const docId = $(button).data('document-id');
        const type = $(button).data('doc-type');

        // Helper to handle removal
        const performRemoval = () => {
            $row.addClass("d-none").attr("data-deleted", "1");
            if (getVisibleRows().length === 0) addRow();
            else updateRowControls();
        };

        // If existing document, confirm deletion via AJAX
        if (docId) {
            Swal.fire({
                title: "Are you sure want to delete this?",
                text: "It will be moved to Trash and can be restored later.",
                showCancelButton: true,
                confirmButtonColor: "#526BDF",
                cancelButtonColor: "#EC6767",
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel it!"
            }).then((result) => {
                if (!result.isConfirmed) return;
                
                showLoader();
                ajaxUrl = type == "client_doc" ? "{{ route('delete.client.document') }}" : ajaxDeleteClaimDocument;

                $.ajax({
                    url: ajaxUrl,
                    method: "GET",
                    data: { 
                        _token: "{{ csrf_token() }}",
                        id: docId,
                        department: CURRENT_DEPARTMENT
                    },
                    success: (res) => {
                        hideLoader();
                        if (res.status === 1) {
                            toastr["success"](res.msg);
                            performRemoval();
                        } else {
                            toastr["error"](res.msg || "Failed to delete record.");
                        }
                    },
                    error: (xhr) => {
                        hideLoader();
                        toastr["error"](xhr.responseJSON?.message || "Error deleting record.");
                    }
                });
            });
        } else {
            // New row - just remove
            $row.remove();
            if (getVisibleRows().length === 0) addRow();
            else updateRowControls();
        }
    }

    // Update controls (add/remove button states)
    function updateRowControls() {
        const prefix = 'claim_document_';

        var visibleRows = getVisibleRows();
        var visibleCount = visibleRows.length;

         // Check for incomplete rows
        let hasIncomplete = false;
        visibleRows.each(function(index) {
            const $row = $(this);
            const rowId = $row.data('row-index');
            const complete = isRowComplete($row, prefix);
                    
            if (!complete) {
                hasIncomplete = true;
                return false; // break loop
            }
        });

        $(CONFIG.addButton).prop('disabled',  visibleCount >= CONFIG.maxRows || hasIncomplete);

        if (visibleCount <= 1) {
            visibleRows.each(function () {
                const removeBtn = $(this).find(".docRemove");
                removeBtn.prop('disabled', !removeBtn.data('document-id'));
            });
        } else {
            visibleRows.find(".docRemove").prop('disabled', false);
        }
    }

    // Load existing documents
    function loadExistingDocuments(documents) {
        $(CONFIG.container).empty();
        rowCounter = 0;

        if (!documents?.length) {
            addRow();
            recalcRowVisibility();
            return;
        }

        let hasVisible = false;
        documents.forEach((doc, i) => {
            rowCounter++;
            // if (!shouldHideRow(doc)) hasVisible = true;
            
            $(CONFIG.container).append(rowTemplate(rowCounter, doc));
            initializeRow(rowCounter, doc);
        });

        recalcRowVisibility();
        // if (!hasVisible) addRow();
        updateRowControls(); // important: run after rows exist
    }

    $(document).ready(function() {

        $(document).on('change blur', '#vehicle_number', function() {
            recalcRowVisibility();
        });

        var options = {
            beforeSubmit: showRequest, 
            success: showResponse
        };

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

        // $('#addquery').ajaxForm(options);
    });

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

        if (!validateDocumentsOnSubmit('claim_document_')) {
            hideLoader();
            return false; // ⛔ blocks ajaxSubmit HARD
        }

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

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

        if (responseText['status'] == 1) {
            toastr["success"](responseText['msg']);
           
            $("#addquery").removeClass('was-validated');
           
            // window.location = "{{route('manage.claim.query.data')}}";

            if(responseText['url_type'] == 'mediclaim' || responseText['url_type'] == 'Mediclaim'){
                window.location = "{{route('manage.claim.query.data')}}"  + "?type=mediclaim";
            }else if(responseText['url_type'] == 'vehicle-claim' || responseText['url_type'] == 'Vehicle Claim'){
                window.location = "{{route('manage.claim.query.data')}}" + "?type=vehicle-claim";
            }else if(responseText['url_type'] == 'death-claim' || responseText['url_type'] == 'Death Claim'){
                window.location = "{{route('manage.claim.query.data')}}"  + "?type=death-claim";
            }else if(responseText['url_type'] == 'disability_claim' || responseText['url_type'] == 'Disability Claim'){
                window.location = "{{route('manage.claim.query.data')}}"  + "?type=disability-claim";
            }else if(responseText['url_type'] == 'other-claim' || responseText['url_type'] == 'Other Claim'){
                window.location = "{{route('manage.claim.query.data')}}"  + "?type=other-claim";
            }else{
                window.location = "{{route('manage.claim.query.data')}}";
            }

        }else if (responseText['status'] == 0) {
            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']);
            }
            
            if(authType == 1 && responseText['flag'] == "Document"){
                $('#modelPlanName').text('');
                $('#modelPlanName').text("Document");
                $('.forPlanUpgrade').hide();
                $('.forPlanPurchase').show();
                $('#upgradePurchaseModal').modal('show');
            }
        }
    }

    var ajaxSearchDocumentType = "{{route('search.document.type')}}";
    var ajaxSearchDocumentName = "{{route('search.document.name')}}";
    var currentDate = new Date();    
    var date;        

    $(document).ready(function() {

        $("#url_type").val("{{$data['url_type']}}");
        
        var admissionDate = "{{$data['data']['admission_date']}}";
        var incidentDate ="{{$data['data']['incident_date']}}";
        var hospitalName = {!! json_encode($data['data']['hospital_name']) !!};

        var formattedDate = new Date();

        var year = formattedDate.getFullYear();
        var month = String(formattedDate.getMonth() + 1).padStart(2, '0'); // Months are zero-based, so add 1
        var day = String(formattedDate.getDate()).padStart(2, '0');

        var formattedDateNew = `${day}-${month}-${year}`;

        if(admissionDate != ''){
            date = admissionDate;

            setupDatepicker("Mediclaim" , date, formattedDateNew, "query_raising_date");

            $("#general_1 , #general_2 , #general_3 , #admission_date_id , #patient_name_id , #hospital_name_id , #admission_reason_id , #query_send_client_code_id , #discussion_talking_detail_id").show();
            $("#incident_date_id, #vehicle_name_id , #vehicle_number_id , #driver_tp_name_id , #vehicle_lodged_id , #incident_address_id , #incident_details_id , #incident_reason_id , #life_death_id , #remarks_id").hide();
            $("#source_of_query_id_1").hide().find('input').attr('disabled',true);
            $("#source_of_query_id , #query_rasising_date_id").removeClass('col-md-6').addClass('col-md-3');
            // $("#segment_id , #broker_id , #sub_agent_id , #agency_id").removeClass('col-xl-3').addClass('col-xl-2');
            
            $("#admission_date").val(date);

        }else if(incidentDate != ''){
            date = incidentDate;

            // setupDatepicker("Vehicle Claim" , date, formattedDateNew, "query_raising_date");

            $("#admission_date_id , #patient_name_id , #hospital_name_id , #admission_reason_id , #query_send_client_code_id , #discussion_talking_detail_id , #incident_address_id , #incident_details_id , #incident_reason_id , #life_death_id , #remarks_id").hide();
            $("#general_1 , #general_2 , #general_3 , #incident_date_id , #vehicle_name_id , #vehicle_number_id , #driver_tp_name_id , #vehicle_lodged_id").show();
            $("#source_of_query_id_1").hide().find('input').attr('disabled',true);
            // $("#segment_id , #broker_id , #sub_agent_id , #agency_id").addClass('col-xl-2').removeClass('col-xl-3');
            $("#source_of_query_id , #query_rasising_date_id").addClass('col-md-6').removeClass('col-md-3');
            
            $("#incident_date").val(date);
            $("#driver_tp_name").val("{{$data['data']['vehicle_driving_by']}}");
            $("#garage_name").val("{{$data['data']['garage_name']}}");
            $("#claim_transaction_date").val("{{$data['data']['lodged_date']}}");
            $("#file_submited_date").val("{{$data['data']['file_submited_date']}}");
            $("#total_claim_lodged_amt").val("{{$data['data']['grand_total_amt']}}");

            if("{{$data['data']['claim_intimation_type']}}" == "Other Claim"){
                $("#incident_address_id , #incident_details_id , #incident_reason_id , #query_send_client_code_id , #discussion_talking_detail_id").show();

                // $("#segment_id , #broker_id , #sub_agent_id , #agency_id").removeClass('col-xl-2').addClass('col-xl-3');
                $("#source_of_query_id , #query_rasising_date_id").removeClass('col-md-6').addClass('col-md-3');

                $("#vehicle_name_id , #vehicle_number_id , #driver_tp_name_id , #vehicle_lodged_id , #life_death_id , #remarks_id").hide();
                $("#source_of_query_id_1").hide().find('input').attr('disabled',true);
                
                $("#incident_address").val("{{$data['data']['incident_address']}}");
                $("#incident_detail").val("{{$data['data']['incident_detail']}}");
                $("#incident_reason").val("{{$data['data']['reason_of_incident']}}");
            }
        }else{
            $("#life_death_id, #remarks_id").show();
            $("#source_of_query_id_1").show().find('input').attr('disabled',false);
            $("#general_1 , #general_2 , #general_3 , #vehicle_lodged_id , #source_of_query_id , #query_send_client_code_id , #discussion_talking_detail_id").hide();
        }

        $("#claim_type_name").html("{{$data['data']['claim_type_name']}}" + " Details");
        $("#claim_type_value").html("{{$data['data']['claim_lodged_type']}}");

        $("#claim_intimation_id").val("{{$data['data']['claim_intimation_id']}}");
        $("#claim_lodged_id").val("{{$data['data']['claim_lodged_id']}}");
        $("#intimation_date, #intimation_date_1").val("{{$data['data']['intimation_date']}}");
        $("#death_person_name").val("{{$data['data']['death_person_name']}}");
        $("#nominee_name").val("{{$data['data']['nominee_name']}}");
        $("#death_date").val("{{$data['data']['death_date']}}");

        if("{{$data['data']['intimation_company']}}" == "Direct Company"){
            $("#intimation_sent_to").val("{{$data['data']['intimation_company']}}" + " => " + "{{$data['data']['direct_company_name']}}");
        }else if("{{$data['data']['intimation_company']}}" == "TPA Company"){
            $("#intimation_sent_to").val("{{$data['data']['intimation_company']}}" + " => " + "{{$data['data']['tpa_company_name']}}");
        }else if("{{$data['data']['intimation_company']}}" == "Both Company"){
            $("#intimation_sent_to").val("{{$data['data']['intimation_company']}}" + " => " + "{{$data['data']['direct_company_name']}}" + " , " +"{{$data['data']['tpa_company_name']}}");
        }

        $("#total_sum_assure").val("{{$data['data']['total_sum_assured']}}");
        $("#total_term_rider").val("{{$data['data']['total_term_rider_sum_assured']}}");
        $("#total_acci_sum_assure").val("{{$data['data']['total_accident_sum_assured']}}");
        $("#total_double_acci_sum_assure").val("{{$data['data']['total_double_acci_rider_sum_assured']}}");

        if("{{$data['data']['claim_type_id']}}" == 5 || "{{$data['data']['claim_type_id']}}" == 12){
            $('#policy_number').val("{{$data['data']['policy_number']}}");
            $("#policy_holder_name").val("{{$data['data']['policy_holder_name_life']}}");
        }else{
            $('#policy_number').val("{{$data['data']['current_policy_number']}}");
            $("#policy_holder_name").val("{{$data['data']['policy_holder_name_general']}}");
        }
        
        $('#policy_holder_name_id_hidden').val("{{$data['data']['policy_holder_name_id']}}");
        $("#patient_name").val("{{$data['data']['patient_name']}}");        
        $("#hospital_name").val(hospitalName);
        $("#reason_of_admission").val("{{$data['data']['hospitalise_reason']}}");
       
        @if(!empty($data['general']))
            $("#segment_id").show();
            $("#life_ins_plan_id").hide();

            $("#vehicle_number").val("{{$data['general']['vehicle_no']}}").trigger('change');
            $("#vehicle_name").val("{{$data['general']['vehicle_name']}}");
            $("#tp_due_date").val("{{$data['general']['tp_due_date']}}");

            var segmentName = {!! json_encode($data['general']['segment_name']) !!};

            $("#segment").val(segmentName);
            $("#broker").val("{{$data['general']['broker_name']}}");
            $("#sub_agent_name").val("{{$data['general']['sub_agent_name']}}");
            $("#agency").val("{{$data['general']['agency_name']}}");  
            $("#insurance_company_name").val("{{$data['general']['ins_comp_name']}}");
        
        @elseif(!empty($data['life']))  
            $("#life_ins_plan_id").show();
            $("#segment_id").hide();

            $("#life_ins_plan_name").val("{{$data['life']['life_ins_plan']}}");
            $("#broker").val("{{$data['life']['broker_name']}}");
            $("#sub_agent_name").val("{{$data['life']['sub_agent_name']}}");
            $("#agency").val("{{$data['life']['agency_name']}}");  
            $("#insurance_company_name , #insurance_company_name_1").val("{{$data['life']['ins_comp_name']}}");
            $("#policy_holder_name_1").val("{{$data['life']['policy_holder_name_life']}}");
        @endif

        // bootstrap datepicker
        $("#transaction_date").datepicker({
            format: "dd-mm-yyyy",
            endDate: currentDate,
        }).on('changeDate', function() {
            $('.datepicker').hide();
        });
 
        $("#query_raising_date").datepicker({
            format: "dd-mm-yyyy",
            startDate: date,
            endDate: currentDate,
        }).on('changeDate', function() {
            $('.datepicker').hide();
        });

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

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

        if("{{$data['can_edit']}}" == 0){
            var newOption = new Option("Claim Documents", '3', false, false);
            $('#claim_document_type_1').append(newOption).trigger('change');
        }
        
        // for document upload 
        // claimDocumentSelect2(1);
        

        dateValidations($('#transaction_date, #query_raising_date'));

        $('#source_of_query, #query_send_client_code, #discussion_talking_detail, #query_details_1, #nos_1').on('input', function() {
            var inputValue = $(this).val();
            var capitalizedValue = capitalizeString(inputValue);
            $(this).val(capitalizedValue);
        });

        $(".query-amt").on('input paste', function(){
            let value = $(this).val();

            // Remove leading zeros but keep "0" if it's the only digit
            value = notAllZeroAmt(value);

            // Set the cleaned value back to the input field
            $(this).val(value);            
        });

        var ajaxURL = "{{ route('get.existing.queries') }}";
        $.ajax({
            url: ajaxURL + "?id={{$data['data']['claim_lodged_id']}}",
            dataType: 'json',
            success: function(resultData) {
                hideLoader();

                if (resultData['status'] == 1) {
                    $('.old-existing-query').removeClass('d-none');

                    $(".existing-queries").empty();

                    var rowQuery = resultData['data'];
                    var index = 0; 

                    for(var i = 1 ; i <= rowQuery.length ; i++){
                        var queryDetail = rowQuery[index].query_detail;
                        var Amount = rowQuery[index].amount;

                        var newRowHTML =  
                        `<hr>                                           
                        <div class="row">
                            <div class="col-xl-1">
                                <div class="mb-3">
                                    <input type="text" class="form-control" name="sr_no_${i}" id="sr_no_${i}" disabled value="${i}">
                                </div>
                            </div>
                            <div class="col-xl-5">
                                <div class="mb-3">
                                    <input type="text" class="form-control" name="query_details_${i}" id="query_details_${i}" placeholder="Enter query detail" value="${queryDetail}" autocomplete="off" disabled maxlength="160">
                                </div>
                            </div>
                            <div class="col-xl-2">
                                <div class="mb-3">
                                    <input type="text" class="form-control isNumber query-amt" name="amount_rs_${i}" id="amount_rs_${i}" placeholder="Enter amount" maxlength="7" value="${Amount}" autocomplete="off" disabled>
                                </div>
                            </div>
                        </div>`;

                        $(".existing-queries").append(newRowHTML);

                        index = i;
                    }                   
                }
            }
        });
      
        $('a').click(function() {
            if ($('.actions li:eq(1)').hasClass('disabled')) {
                disabledFinish();
            }
            
            if ($('.actions li:eq(1)').attr('class') == '') {
                $('#btnSave , #send_email').hide();
            }
        });

        // for responsive ui
        $('.actions li:first-child a').addClass('form-control');

        // for form wizard step validation
        $(".actions ul li:contains('Next') a").on('click',function(){
            $(".wizard-step input:required, .wizard-step select:required").on("keyup change", function() {
                var fieldValue = $(this).val();
                
                if (!fieldValue || fieldValue.trim() === '') {
                    $(this).addClass("is-invalid").removeClass("is-valid");
                } else {
                    $(this).addClass("is-valid").removeClass("is-invalid");
                }
            });
        });
    });

    function setupDatepicker(Type ,admissionDate, riskToDate, datepickerId) {
        if(Type == "Mediclaim"){
            var parts = admissionDate.split("-");
            var newAdmissionDateStr = parts[2] + "-" + parts[1] + "-" + parts[0];
            var beforeDate = new Date(newAdmissionDateStr);
            beforeDate.setDate(beforeDate.getDate() - 30);
    
            parts = riskToDate.split("-");
            var newPolicyDueDateStr = parts[2] + "-" + parts[1] + "-" + parts[0];
            var afterDate = new Date(newPolicyDueDateStr);
            afterDate.setDate(afterDate.getDate() + 180);            

            var dd = beforeDate.getDate();
            var mm = beforeDate.getMonth() + 1;
            var yyyy = beforeDate.getFullYear();
            beforeDate = dd + '-' + mm + '-' + yyyy;
    
            dd = afterDate.getDate();
            mm = afterDate.getMonth() + 1;
            yyyy = afterDate.getFullYear();
            afterDate = dd + '-' + mm + '-' + yyyy;
    
            $("#" + datepickerId).datepicker({
                format: "dd-mm-yyyy",
                startDate: beforeDate,
                endDate: afterDate,
                orientation:"bottom",
            }).on('changeDate', function () {
                $('.datepicker').hide();
            });

        }else if(Type == "Vehicle Claim"){
            parts = riskToDate.split("-");
            var newPolicyDueDateStr = parts[2] + "-" + parts[1] + "-" + parts[0];
            var afterDate = new Date(newPolicyDueDateStr);
            afterDate.setDate(afterDate.getDate() + 180);
    
            var dd = afterDate.getDate();
            var mm = afterDate.getMonth() + 1;
            var yyyy = afterDate.getFullYear();
            afterDate = dd + '-' + mm + '-' + yyyy;
    
            $("#" + datepickerId).datepicker({
                format: "dd-mm-yyyy",
                startDate:admissionDate,
                endDate: afterDate,
                orientation:"bottom",
            }).on('changeDate', function () {
                $('.datepicker').hide();
            });
        }
    }

    var rowCounter = 1;
 
    function AddNewRowFirst() {
        var removeButtons = document.querySelectorAll(".firstRemove");

        rowCounter++;

        if (removeButtons.length >= 28) {
            $("#add_row").attr('disabled', true);
        }

        var newRowHtml = `<div class="row">
            <div class="col-xl-1">
                <div class="mb-3">
                    <input type="text" class="form-control" name="sr_no_${rowCounter}" id="sr_no_${rowCounter}" readonly value="${rowCounter}">
                </div>
            </div>
            <div class="col-xl-5">
                <div class="mb-3">
                    <input type="text" class="form-control" name="query_details_${rowCounter}" id="query_details_${rowCounter}" placeholder="Enter query detail" value="" autocomplete="off" required maxlength="160">
                </div>
            </div>
            <div class="col-xl-2">
                <div class="mb-3">
                    <input type="text" class="form-control isNumber query-amt" name="amount_rs_${rowCounter}" id="amount_rs_${rowCounter}" placeholder="Enter amount" maxlength="7" value="" autocomplete="off">
                </div>
            </div>
            <div class="col-xl-2">
                <div class="mb-3">
                    <button type="button" class="btn btn-danger firstRemove form-control" data-bs-dismiss="row" aria-label="Remove" onclick="removeRow(this)" id="remove_btn_${rowCounter}" value="Remove" >Remove</button>
                </div>
            </div>
        </div>`;
        
        $("#add_new_row_first").append(newRowHtml);

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

    var rowCounterDocument= 1;

    // function AddNewRowDocument() {
    //     var removeButtons = document.querySelectorAll(".documentRemove");
        
    //     rowCounterDocument++;

    //     if (removeButtons.length >= 28) {
    //         $("#add_row_document").attr('disabled', true);
    //     }

    //     var newRowHtml = `<div class="row row-item-document">
    //         <div class="col-xxl-3 col-xl-6">
    //             <div class="mb-3">
    //                 <label for="claim_document_type_${rowCounterDocument}" class="form-label">Claim Document Type<span class="text-danger">*</span></label>
    //                 <select class="form-control select2-ajax" id="claim_document_type_${rowCounterDocument}" name="claim_document_type_${rowCounterDocument}" required></select>
    //                 <div class="invalid-feedback">This value is required.</div>
    //             </div>
    //         </div>
    //         <div class="col-xxl-3 col-xl-6">
    //             <div class="mb-3">
    //                 <label for="claim_document_name_${rowCounterDocument}" class="form-label">Claim Document Name<span class="text-danger">*</span></label>
    //                 <select class="form-control select2-ajax" id="claim_document_name_${rowCounterDocument}" name="claim_document_name_${rowCounterDocument}" required></select>
    //                 <div class="invalid-feedback">This value is required.</div>
    //             </div>
    //         </div>
    //         <div class="col-xxl-3 col-xl-6">
    //             <div class="mb-3">
    //                 <label for="document_name_${rowCounterDocument}" class="form-label">Upload Document<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span><span class="text-danger">*</span></label>
    //                 <input type="file" class="form-control" name="document_name_${rowCounterDocument}[]" multiple id="document_name_${rowCounterDocument}" required accept="image/jpeg,image/png,application/pdf">
    //             </div>
    //         </div>
    //         <div class="col-xxl-2 col-xl-6">
    //             <div class="mb-3">
    //                 <label for="nos_${rowCounterDocument}" class="form-label">Nos</label>
    //                 <input class="form-control" id="nos_${rowCounterDocument}" name="nos_${rowCounterDocument}" placeholder="Enter nos" maxlength="4">                       
    //             </div>
    //         </div>
    //         <div class="col-xxl-1 justify-content-md-end mt-4">
    //             <div class="mb-3">
    //                 <button type="button" class="btn btn-danger documentRemove form-control" data-bs-dismiss="row" aria-label="Remove" onclick="removeRow(this)" id="remove_btn_${rowCounterDocument}" value="Remove" >Remove</button>
    //             </div>
    //         </div>
    //     </div>`;
        
    //     $("#add_new_row_document").append(newRowHtml);

    //     claimDocumentSelect2(rowCounterDocument);        

    //     $("#claim_document_name_"+ rowCounterDocument).on("select2:open", function(e) {
    //         if (!$("#claim_document_type_" +rowCounterDocument).val()) {
    //             toastr.error("Please select a document type first.");
    //         }
    //     });

    //     $('#nos_' + rowCounterDocument).on('input', function() {
    //         var inputValue = $(this).val();
    //         var capitalizedValue = capitalizeString(inputValue);
    //         $(this).val(capitalizedValue);
    //     });
    // }
   
    function removeRow(button) {
        $(button).closest(".row").remove();

        var removeButtons_first = document.querySelectorAll(".firstRemove");
      
        if(removeButtons_first.length <= 12){
            $("#add_row").attr('disabled',false);
        }

        if (!removeButtons_first.length > 0) {            
            rowCounter = 1 ;
        }

        var removeButtons_document = document.querySelectorAll(".documentRemove");
     
        if(removeButtons_document.length <= 10){
            $("#add_row_document").attr('disabled',false);
        }

        if (!removeButtons_document.length > 0) {            
            rowCounterDocument = 1 ;
        }
    }

    function disabledFinish(){
        $('#btnSave , #send_email').remove();
        $('.actions li:last-child').show();
        $('.actions li:last-child a').remove();
        
        var html ='';
        html+="<div class='d-flex'>";
        html+="<button type='submit' class='btn btn-primary form-control' role='menuitem' id='btnSave'>Save</button>";
        // html+="<button type='button' class='btn btn-primary form-control' role='menuitem' id='send_email' onClick='return sendMail();'>Send Email</button>";
        html+="</div>";

        $(".actions li:last-child").append(html);
    }

    // function claimDocumentSelect2(id){
    //     $("#claim_document_type_" + id).select2({
    //         ajax: {
    //             url: searchClaimDocsTypeAjax,
    //             dataType: 'json',
    //             delay: 0,
    //             data: function(params) {
    //                 return {
    //                     "claim_type": function(){return  "{{$data['data']['claim_intimation_type']}}"},
    //                     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 claim document type',
    //     });

    //     $("#claim_document_name_" + id).select2({
    //         ajax: {
    //             url: searchClaimDocsNameAjax,
    //             dataType: 'json',
    //             delay: 0,
    //             data: function(params) {
    //                 return {
    //                     "document_type_id": function(){return  $("#claim_document_type_" + id).val();},
    //                     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 claim document name',
    //     });

    //     $("#claim_document_type_" + id).on("change", function() {
    //         $("#claim_document_name_" + id).val("").trigger("change");
    //     });

    //     $("#document_name_" + id).on("click", function(e) {
        
    //         if (!$("#claim_document_name_" + id + " option:selected").length) {
    //             toastr.error("Please select a claim document name.");
    //             e.preventDefault();
    //         }
    //     });
    //     $("#claim_document_name_"+id).on("select2:open", function(e) {
    //         console.log('i works');
    //         if (!$("#claim_document_type_" + id + " option:selected").length) {
    //             toastr.error("Please select a claim document type.");
    //         }
    //     });
    // }

    $(document).ready(function(){

        var serverDocuments = @json($data['document_detail'] ?? []);
    
        // Separate client and claim documents
        clientDocuments = serverDocuments.filter(doc => doc.type === 'client_doc');
        // Load all documents
        loadExistingDocuments(serverDocuments);
        
            });

    $('#addquery').on('change', 'input[type="file"]', function() {
        const fileInput = $(this);
        const files = fileInput[0].files;

        const maxFiles = 5;
        const allowedTypes = [
            'image/jpeg',
            'image/png',
            'application/pdf'
        ];
        const allowedExtensions = ['jpg', 'jpeg', 'png', 'pdf'];

        if (files.length > maxFiles) {
            toastr["error"](`Maximum ${maxFiles} files allowed.`);
            fileInput.val(''); // reset the file input
            return;
        }

            // Type + extension validation
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            const ext = file.name.split('.').pop().toLowerCase();

            if (
                !allowedTypes.includes(file.type) ||
                !allowedExtensions.includes(ext)
            ) {
                toastr.error('Please select a valid file.');
                fileInput.val('');
                return;
            }
        }
    });

    // Add a single delegated event handler for all download buttons
    $(document).on('click', '.download-client-document-btn', function(event) {
        event.preventDefault();
            
        var documentName = $(this).data('document-name');
        var clientId = $(this).data('client-id');
        var claimId = $(this).data('claim-id');
        var type = $(this).data('doc-type');
        var documentNum = $(this).data('download-doc-num');
        var department = $(this).data('doc-department');


        if(type == "client_doc"){
            downloadClientDocument(documentName, clientId);
        } else {
            downloadClaimDocument(documentName, documentNum, department);
        }
        

    });

    function downloadClaimDocument(documentName, documentNum, department){
        showLoader();

        var params = new URLSearchParams();
        var ajaxURL = "{{ route('download.claim.document') }}";

        params.append('document', documentName);
        params.append('document_number', documentNum);
        params.append('department', department);

        // Create hidden iframe (download target)
        var iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        document.body.appendChild(iframe);

        $.ajax({
            url: ajaxURL + "?" + params.toString(),
            dataType: 'json',
            success: function(result) {
                hideLoader();

                if (result.status == 1) {
                    // Trigger download
                    iframe.src = result.download_url;

                    // Remove iframe after some seconds
                    setTimeout(() => {
                        iframe.remove();
                    }, 8000);
                } else {
                    toastr.error(result.msg || "File not found");
                }
            },
            error: function(xhr) {
                hideLoader();
                toastr.error(xhr.responseJSON?.message || "Error downloading file");
            }
        });
    }

</script>
@endsection