@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">
                                                <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 id="add_new_row_document"></div>
                                </section>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@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 }}";

    $(document).ready(function() {
        var options = {
            beforeSubmit: showRequest, 
            success: showResponse
        };

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

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

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

        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 searchClaimDocsTypeAjax = "{{route('search.document.type')}}";
    var searchClaimDocsNameAjax = "{{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']}}");
        }
        
        $("#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']}}");
            $("#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(){
            });

    $('#addquery').on('change', 'input[type="file"]', function() {
        const fileInput = $(this);
        
        const maxFiles = 5; // default 1 if not listed

        if (fileInput[0].files.length > maxFiles) {
            toastr["error"](`You can only upload ${maxFiles} files.`);
            fileInput.val(''); // reset the file input
        }
    });

</script>
@endsection