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

<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()" title="Learning Video" class="btn-youtube-pulse btn-youtube-pulse-border">
                <i class="mdi mdi-youtube"></i>
            </a>
        </div>

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

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <div class="tab-content" id="myTabContent">
                        <!-- mediclaim -->
                        <div class="tab-pane fade show active" id="mediClaim" role="tabpanel" aria-labelledby="medi-claim">
                            <div class="row">
                                <div class="col-xxl-2">
                                    <div class="mb-3">
                                        <label for="filter_status" class="form-label">Record Status</label>
                                        <select class="form-control select2-ajax" name="filter_status" id="filter_status">
                                            <option value="-1">All</option>
                                            <option value="0">Reopen</option>
                                            <option value="1">Settlement Complete</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-xxl-2 col-xl-3">
                                    <div class="mb-3">
                                        <label for="from_date" class="form-label">Settlement From Date</label>
                                        <input type="text" name="from_date" id="from_date" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                    </div>
                                </div>

                                <div class="col-xxl-2 col-xl-3">
                                    <div class="mb-3">
                                        <label for="end_date" class="form-label">Settlement End Date</label>
                                        <input type="text" name="end_date" id="end_date" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                    </div>
                                </div>

                                <div class="col-xl-2">
                                    <div class="mb-3">
                                    <label  class="form-label extra_space" for="btnClear">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                    <button type="button" onclick="return clearSearch();" class="form-control btn btn-primary" id="btnClear">Clear</button>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3 search-value">
                                <div class="text-center">
                                <span class="alert-warning alert-animation px-3 py-1 rounded-3">Filter is applied...</span>              
                                </div>
                            </div>

                            <br>

                            <div class="table-responsive">
                                <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Action</th>
                                            <th>Status</th>
                                            <th>Form Fill Continue</th>
                                            <th>Policy Number<br><input type="text" class="form-control" name="policy_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>                        
                                            <th>Policy Holder Name<br><input type="text" class="form-control" name="policy_holder_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                            <th>Insurance Comp. Name<br><input type="text" class="form-control" name="ins_comp_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                            <th>Transaction Date<br><input type="text" class="form-control" name="transaction_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Claim Type<br><input type="text" class="form-control" name="claim_type" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Claim Lodged Type<br><input type="text" class="form-control" name="claim_lodged_type" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Settlement Details<br><input type="text" class="form-control" name="settlement_details" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Settlement Date<br><input type="text" class="form-control" name="settlement_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Settlement Amt.<br><input type="text" class="form-control" name="settlement_amt" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Differance Amt.<br><input type="text" class="form-control" name="diffance_amt" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Total Settle Amt.<br><input type="text" class="form-control" name="settle_amt" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Deduction Reason<br><input type="text" class="form-control" name="deduction_reason" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Amt Paid Date<br><input type="text" class="form-control" name="amt_paid_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                @csrf
                            </div>

                            <div class="col-md-12 mt-5">
                                <div class="row">
                                    <div class="col-md">
                                        <div class="card text-white bg-secondary mb-3">
                                            <div class="card-header text-center font-size-13">Settled Amount<br>
                                                <div id="settled_amt"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md">
                                        <div class="card text-white bg-dark mb-3">
                                            <div class="card-header text-center font-size-13">Differance Amount<br>
                                                <div id="differance_amt"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- vehicle claim -->
                        <div class="tab-pane fade show" id="vehicleClaim" role="tabpanel" aria-labelledby="vehicle-claim">
                            <div class="row">
                                <div class="col-xxl-2">
                                    <div class="mb-3">
                                        <label for="filter_status_1" class="form-label">Record Status</label>
                                        <select class="form-control select2-ajax" name="filter_status" id="filter_status_1">
                                            <option value="-1">All</option>
                                            <option value="0">Reopen</option>
                                            <option value="1">Settlement Complete</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-xxl-2 col-xl-3">
                                    <div class="mb-3">
                                        <label for="from_date_1" class="form-label">Settlement From Date</label>
                                        <input type="text" name="from_date" id="from_date_1" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                    </div>
                                </div>

                                <div class="col-xxl-2 col-xl-3">
                                    <div class="mb-3">
                                        <label for="end_date_1" class="form-label">Settlement End Date</label>
                                        <input type="text" name="end_date" id="end_date_1" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                    </div>
                                </div>

                                <div class="col-xl-2">
                                    <div class="mb-3">
                                    <label  class="form-label extra_space" for="btnClear_1">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                    <button type="button" onclick="return clearSearch_1();" class="form-control btn btn-primary" id="btnClear_1">Clear</button>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3 search-value-1">
                                <div class="text-center">
                                <span class="alert-warning alert-animation px-3 py-1 rounded-3">Filter is applied...</span>              
                                </div>
                            </div>

                            <br>

                            <div class="table-responsive">
                                <table id="datatable_1" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Action</th>
                                            <th>Status</th>
                                            <th>Form Fill Continue</th>
                                            <th>Policy Number<br><input type="text" class="form-control" name="policy_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>                        
                                            <th>Policy Holder Name<br><input type="text" class="form-control" name="policy_holder_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                            <th>Insurance Comp. Name<br><input type="text" class="form-control" name="ins_comp_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                            <th>Transaction Date<br><input type="text" class="form-control" name="transaction_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Claim Type<br><input type="text" class="form-control" name="claim_type" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Claim Lodged Type<br><input type="text" class="form-control" name="claim_lodged_type" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Settlement Details<br><input type="text" class="form-control" name="settlement_details" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Settlement Date<br><input type="text" class="form-control" name="settlement_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Settlement Amt.<br><input type="text" class="form-control" name="settlement_amt" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Differance Amt.<br><input type="text" class="form-control" name="diffance_amt" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Total Settle Amt.<br><input type="text" class="form-control" name="settle_amt" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Deduction Reason<br><input type="text" class="form-control" name="deduction_reason" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Amt Paid Date<br><input type="text" class="form-control" name="amt_paid_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                @csrf
                            </div>

                            <div class="col-md-12 mt-5">
                                <div class="row">
                                    <div class="col-md">
                                        <div class="card text-white bg-secondary mb-3">
                                            <div class="card-header text-center font-size-13">Settled Amount<br>
                                                <div id="settled_amt_1"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md">
                                        <div class="card text-white bg-dark mb-3">
                                            <div class="card-header text-center font-size-13">Differance Amount<br>
                                                <div id="differance_amt_1"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                         <!-- death claim -->
                         <div class="tab-pane fade show" id="deathClaim" role="tabpanel" aria-labelledby="death-claim">
                            <div class="row">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="text-center">
                                            <div class="row justify-content-center mt-1">
                                                <div class="col-sm-3">
                                                    <div class="maintenance-img">
                                                        <img src="{{ asset('assets/images/coming-soon.svg') }}" alt="" class="img-fluid mx-auto d-block">
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="row justify-content-center">
                                                <div class="col-md-8">
                                                    <h4>Coming Soon...!</h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- disability claim -->
                        <div class="tab-pane fade show" id="disabilityClaim" role="tabpanel" aria-labelledby="disability-claim">
                            <div class="row">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="text-center">
                                            <div class="row justify-content-center mt-1">
                                                <div class="col-sm-3">
                                                    <div class="maintenance-img">
                                                        <img src="{{ asset('assets/images/coming-soon.svg') }}" alt="" class="img-fluid mx-auto d-block">
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="row justify-content-center">
                                                <div class="col-md-8">
                                                    <h4>Coming Soon...!</h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- other claim -->
                        <div class="tab-pane fade show" id="otherClaim" role="tabpanel" aria-labelledby="other-claim">
                            <div class="row">
                                <div class="col-xxl-2">
                                    <div class="mb-3">
                                        <label for="filter_status_5" class="form-label">Record Status</label>
                                        <select class="form-control select2-ajax" name="filter_status" id="filter_status_5">
                                            <option value="-1">All</option>
                                            <option value="0">Reopen</option>
                                            <option value="1">Settlement Complete</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-xxl-2 col-xl-3">
                                    <div class="mb-3">
                                        <label for="from_date_5" class="form-label">Settlement From Date</label>
                                        <input type="text" name="from_date" id="from_date_5" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                    </div>
                                </div>

                                <div class="col-xxl-2 col-xl-3">
                                    <div class="mb-3">
                                        <label for="end_date_5" class="form-label">Settlement End Date</label>
                                        <input type="text" name="end_date" id="end_date_5" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                    </div>
                                </div>

                                <div class="col-xl-2">
                                    <div class="mb-3">
                                    <label  class="form-label extra_space" for="btnClear_5">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                    <button type="button" onclick="return clearSearch_5();" class="form-control btn btn-primary" id="btnClear_5">Clear</button>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3 search-value-5">
                                <div class="text-center">
                                <span class="alert-warning alert-animation px-3 py-1 rounded-3">Filter is applied...</span>              
                                </div>
                            </div>

                            <br>

                            <div class="table-responsive">
                                <table id="datatable_5" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Action</th>
                                            <th>Status</th>
                                            <th>Form Fill Continue</th>
                                            <th>Policy Number<br><input type="text" class="form-control" name="policy_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>                        
                                            <th>Policy Holder Name<br><input type="text" class="form-control" name="policy_holder_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                            <th>Insurance Comp. Name<br><input type="text" class="form-control" name="ins_comp_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                            <th>Transaction Date<br><input type="text" class="form-control" name="transaction_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Claim Type<br><input type="text" class="form-control" name="claim_type" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Claim Lodged Type<br><input type="text" class="form-control" name="claim_lodged_type" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Settlement Details<br><input type="text" class="form-control" name="settlement_details" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Settlement Date<br><input type="text" class="form-control" name="settlement_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Settlement Amt.<br><input type="text" class="form-control" name="settlement_amt" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Differance Amt.<br><input type="text" class="form-control" name="diffance_amt" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Total Settle Amt.<br><input type="text" class="form-control" name="settle_amt" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Deduction Reason<br><input type="text" class="form-control" name="deduction_reason" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Amt Paid Date<br><input type="text" class="form-control" name="amt_paid_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                @csrf
                            </div>

                            <div class="col-md-12 mt-5">
                                <div class="row">
                                    <div class="col-md">
                                        <div class="card text-white bg-secondary mb-3">
                                            <div class="card-header text-center font-size-13">Settled Amount<br>
                                                <div id="settled_amt_5"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md">
                                        <div class="card text-white bg-dark mb-3">
                                            <div class="card-header text-center font-size-13">Differance Amount<br>
                                                <div id="differance_amt_5"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

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

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

                <hr>

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

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

@endsection

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

<script type="text/javascript">
    var csrfToken = $("[name=_token").val();
    var ajaxURLGetClaimSettlementData = "{{route('claim.settlement.data.ajax')}}";
    var deleteSettlementClaim = "{{route('delete.claim.settlement')}}";
    var changeClaimSettlementStatusURL = "{{route('change.claim.settlement.status')}}";

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

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

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

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

    dateValidations($('#from_date, #end_date, #from_date_1, #end_date_1, #from_date_5, #end_date_5'));  

    // soft delete
    function settlementDelete(id){
        swal.fire({
            title: "Are you sure want to delete this?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                remove(id);
            }
        });
    }

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

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

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

    function reOpenClaim(id){
        swal.fire({
            title: "Are you sure want to Reopen this?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, Reopen it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                addClaimLodged(id);
            }
        });
    }   

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

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

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

    function complete(id){
        swal.fire({
            title: "Are you sure want to complete this?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, Complete it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                doneSettlement(id);
            }
        });
    }

    function doneSettlement(id){
        var finalSettlement = "{{route('final.claim.settlement')}}";

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

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

    function completeSettlemet(id){
        if(id == 0){
            toastr['info']("Due to settlement completed can't reopen this claim again.");
        }else if(id == 1){
            toastr['success']('Claim already completed');
        }
    }
</script>

<!-- for mediclaim -->
<script type="text/javascript">

    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]}],
        "order": [[0, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 300},
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLGetClaimSettlementData,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "status": function(){return $("#filter_status").val()},
                "from_date": function(){return $("#from_date").val()},
                "end_date": function(){return $("#end_date").val()},
                "claim_type": "Mediclaim",
            }         
        },
        "aoColumns": [
            {"mData": "action","bSortable": false,},
            {"mData": "status"},
            {"mData": "form_fill_continue","bSortable": false,},
            {"mData": "policy_number","bSortable": false,
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 20) {
                            return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "policy_holder_name","bSortable": false,
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 20) {
                            return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "insurance_company_name","bSortable": false,},
            {"mData": "transaction_date"},
            {"mData": "claim_type",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 10) {
                            return '<span title="' + data + '">' + data.substr(0, 10) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "claim_lodged_type",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 15) {
                            return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "settelement_details",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 25) {
                        return '<span title="' + data + '">' + data.substr(0, 25) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "settelement_date"},
            {"mData": "settelement_amt"},
            {"mData": "differance_amt"},
            {"mData": "total_claim_settle_amt"},
            {"mData": "dedcution_reason",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 30) {
                        return '<span title="' + data + '">' + data.substr(0, 30) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "amt_paid_date"},           
        ]
    });

    table.on('xhr', function() {
        var responseData = table.ajax.json();

        $("#settled_amt").html(responseData['settledAmt']);
        $("#differance_amt").html(responseData['diffAmt']);
    });

    var columnsMapping = [
        'transaction_date', 'claim_type', 'claim_lodged_type', 'settlement_details', 'settlement_date', 'settlement_amt', 'diffance_amt', 'settle_amt', 'deduction_reason', 'amt_paid_date',
    ];

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

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

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

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

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

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

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

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

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

        const jsonPageData = JSON.stringify(pageData);
        localStorage.setItem(currentPage, jsonPageData);
    }   

    const storedData = localStorage.getItem(currentPage);
    const parsedData = JSON.parse(storedData);

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

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

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

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

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

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

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

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

        // for filter_status, from_date, end_date

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

        localStorage.removeItem(currentPage);

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

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

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

        handleInputChange();
    }

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

<!-- for vehicle claim -->
<script type="text/javascript">
  var table_1 = $('#datatable_1').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]}],
        "order": [[0, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 300},
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLGetClaimSettlementData,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "status": function(){return $("#filter_status").val()},
                "from_date":function(){return $("#from_date").val()},
                "end_date":function(){return $("#end_date").val()},
                "claim_type": "Vehicle Claim",
            }         
        },
        "aoColumns": [
            {"mData": "action","bSortable": false,},
            {"mData": "status"},
            {"mData": "form_fill_continue","bSortable": false,},
            {"mData": "policy_number","bSortable": false,
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 20) {
                            return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "policy_holder_name","bSortable": false,
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 20) {
                            return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "insurance_company_name","bSortable": false,},
            {"mData": "transaction_date"},
            {"mData": "claim_type",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 10) {
                            return '<span title="' + data + '">' + data.substr(0, 10) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "claim_lodged_type",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 15) {
                            return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "settelement_details",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 25) {
                        return '<span title="' + data + '">' + data.substr(0, 25) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "settelement_date"},
            {"mData": "settelement_amt"},
            {"mData": "differance_amt"},
            {"mData": "total_claim_settle_amt"},
            {"mData": "dedcution_reason",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 30) {
                        return '<span title="' + data + '">' + data.substr(0, 30) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "amt_paid_date"},           
        ]
    });

    table_1.on('xhr', function() {
        var responseData = table.ajax.json();

        $("#settled_amt_1").html(responseData['settledAmt']);
        $("#differance_amt_1").html(responseData['diffAmt']);
    });

    var columnsMapping_1 = [
       'transaction_date', 'claim_type', 'claim_lodged_type', 'settlement_details', 'settlement_date', 'settlement_amt', 'diffance_amt', 'settle_amt', 'deduction_reason', 'amt_paid_date',
    ];

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

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

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

    const currentPage_1 = window.location.pathname + "?vehicle-claim";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        // for filter_status, from_date, end_date

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

        localStorage.removeItem(currentPage_1);

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

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

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

        handleInputChange_1();
    }

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

<!-- for other claim -->
<script type="text/javascript">
    var table_5 = $('#datatable_5').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]}],
        "order": [[0, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 300},
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLGetClaimSettlementData,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "status": function(){return $("#filter_status").val()},
                "from_date": function(){return $("#from_date").val()},
                "end_date": function(){return $("#end_date").val()},
                "claim_type": "Mediclaim",
            }         
        },
        "aoColumns": [
            {"mData": "action","bSortable": false,},
            {"mData": "status"},
            {"mData": "form_fill_continue","bSortable": false,},
            {"mData": "policy_number","bSortable": false,
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 20) {
                            return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "policy_holder_name","bSortable": false,
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 20) {
                            return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "insurance_company_name","bSortable": false,},
            {"mData": "transaction_date"},
            {"mData": "claim_type",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 10) {
                            return '<span title="' + data + '">' + data.substr(0, 10) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "claim_lodged_type",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 15) {
                            return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "settelement_details",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 25) {
                        return '<span title="' + data + '">' + data.substr(0, 25) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "settelement_date"},
            {"mData": "settelement_amt"},
            {"mData": "differance_amt"},
            {"mData": "total_claim_settle_amt"},
            {"mData": "dedcution_reason",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 30) {
                        return '<span title="' + data + '">' + data.substr(0, 30) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData": "amt_paid_date"},           
        ]
    });

    table_5.on('xhr', function() {
        var responseData = table.ajax.json();

        $("#settled_amt_5").html(responseData['settledAmt']);
        $("#differance_amt_5").html(responseData['diffAmt']);
    });

    var columnsMapping_5 = [
        'transaction_date', 'claim_type', 'claim_lodged_type', 'settlement_details', 'settlement_date', 'settlement_amt', 'diffance_amt', 'settle_amt', 'deduction_reason', 'amt_paid_date',
    ];

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        // for filter_status, from_date, end_date

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

        localStorage.removeItem(currentPage_5);

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

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

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

        handleInputChange_5();
    }

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

<!-- for tab selection -->
<script type="text/javascript">
    $(document).ready(function () {
        updateURLWithActiveTabId();
 
        $('#medi-claim').click(function() {
            handleTabClick('#medi-claim', '#mediClaim', 'mediclaim');
        });
 
        $('#vehicle-claim').click(function() {
            handleTabClick('#vehicle-claim', '#vehicleClaim', 'vehicle-claim');
        });
 
        $('#death-claim').click(function() {
            handleTabClick('#death-claim', '#deathClaim', 'death-claim');
        });
 
        $('#disability-claim').click(function() {
            handleTabClick('#disability-claim', '#disabilityClaim', 'disability-claim');
        });
 
        $('#other-claim').click(function() {
            handleTabClick('#other-claim', '#otherClaim', 'other-claim');
        });
    });
 
    function clearActiveTabClass(){
        $('.nav-link.waves-effect').removeClass('active');
        $('.tab-pane').removeClass('active show');
    }
 
    function updateURLWithActiveTabId() {
        const currentUrl = window.location.href;
        const url = new URL(currentUrl);
        var typeValue = url.searchParams.get('type');
        
        if(typeValue == null || typeValue == "mediclaim"){
            handleTabClick('#medi-claim', '#mediClaim', 'mediclaim');
            $(".amount_hide").show();
        }else if(typeValue == "vehicle-claim"){
            handleTabClick('#vehicle-claim', '#vehicleClaim', 'vehicle-claim');
            $(".amount_hide").show();
        }else if(typeValue == "death-claim"){
            handleTabClick('#death-claim', '#deathClaim', 'death-claim');
            $(".amount_hide").hide();
        }else if(typeValue == "disability-claim"){
            handleTabClick('#disability-claim', '#disabilityClaim', 'disability-claim');
            $(".amount_hide").hide();
        }else if(typeValue == "other-claim"){
            handleTabClick('#other-claim', '#otherClaim', 'other-claim');
            $(".amount_hide").hide();
        }
    }
 
    function handleTabClick(tabId, contentId, urlType) {
        clearActiveTabClass();
        $(tabId).addClass('active');
        $(contentId).addClass('active show');
        const currentUrl = window.location.href;
        const url = new URL(currentUrl);
        url.searchParams.set('type', urlType);
        history.replaceState(null, null, url.toString());
    }
</script>
@endsection