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

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

    @media (max-width: 520px){
        #myTab {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            max-width: 100%;
        }

        .nav-item {
            flex: 0 0 auto; /* Ensures items do not shrink and stay on one line */
        }
    }
</style>

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

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

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

        <div class="row">
            <div class="card">
                <div class="card-body">

                    <div class="tab-content" id="myTabContent">
                        <!-- mediclaim -->
                        <div class="tab-pane fade show active" id="mediClaim" role="tabpanel" aria-labelledby="medi-claim">
                            <div class="row">
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="filter_status" class="form-label">Record Status</label>
                                        <select class="form-control select2-ajax" name="filter_status" id="filter_status">
                                            <option value="-1">All</option>
                                            <option value="0">Pre Post Pending</option>
                                            <option value="1">Pre Posted Claims</option>
                                        </select>
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="from_date" class="form-label">Transaction From Date</label>
                                        <input type="text" name="from_date" id="from_date" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="end_date" class="form-label">Transaction 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>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>Policy Number<br><input type="text" class="form-control" name="policy_number" placeholder="Search" autocomplete="off" disabled style="width: 100px; height: 25px"></th>                        
                                            <th>Policy Holder Name<br><input type="text" class="form-control" name="policy_holder_name" placeholder="Search" autocomplete="off" disabled style="width: 100px; height: 25px"></th>
                                            <th>Name Of Patient<br><input type="text" class="form-control" name="name_of_patient" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Date Of Admission<br><input type="text" class="form-control" name="date_of_admission" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Date Of Discharge<br><input type="text" class="form-control" name="date_of_discharge" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Hospital Name<br><input type="text" class="form-control" name="hospital_name" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Reason Of Hosptalise<br><input type="text" class="form-control" name="reason_for_hospitalise" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Claimed Settled Amt<br><input type="text" class="form-control" name="claim_settled_amt" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Claimed Settlement Details<br><input type="text" class="form-control" name="claim_settled_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" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Amount Paid Date<br><input type="text" class="form-control" name="amt_paid_date" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                @csrf
                            </div>
                        </div>

                        <!-- vehicle claim -->
                        <div class="tab-pane fade show" id="vehicleClaim" role="tabpanel" aria-labelledby="vehicle-claim">
                            <div class="row">
                                {{-- <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="filter_status_1" class="form-label">Record Status</label>
                                        <select class="form-control select2-ajax" name="filter_status" id="filter_status_1">
                                            <option value="-1">All</option>
                                            <option value="0">Lodged Pending</option>
                                            <option value="1">Lodged Complete</option>
                                        </select>
                                    </div>
                                </div> --}}
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="from_date_1" class="form-label">Transaction From Date</label>
                                        <input type="text" name="from_date" id="from_date_1" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="end_date_1" class="form-label">Transaction 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>Transaction Date<br><input type="text" class="form-control" name="transaction_date_1" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Claim Type<br><input type="text" class="form-control" name="claim_type_1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Policy Number<br><input type="text" class="form-control" name="policy_number_1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>                        
                                            <th>Policy Holder Name<br><input type="text" class="form-control" name="policy_holder_name_1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Ins. Company Name<br><input type="text" class="form-control" name="ins_comp_name" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Vehicle Reg. No.<br><input type="text" class="form-control" name="vehicle_reg_no" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Vehicle Name<br><input type="text" class="form-control" name="vehicle_name" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Incident Date<br><input type="text" class="form-control" name="incident_date" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Incident Details<br><input type="text" class="form-control" name="incident_detail" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Claimed Settled Amt<br><input type="text" class="form-control" name="claim_settled_amt_1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Claimed Settlement Details<br><input type="text" class="form-control" name="claim_settled_details_1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Settlement Date<br><input type="text" class="form-control" name="settlement_date_1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Amount Paid Date<br><input type="text" class="form-control" name="amt_paid_date_1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                @csrf
                            </div>
                        </div>

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

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

                            <div class="table-responsive">
                                <table id="datatable_2" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Action</th>
                                            <th>Status</th>
                                            <th>Transaction Date<br><input type="text" class="form-control" name="transaction_date_2" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Claim Type<br><input type="text" class="form-control" name="claim_type_2" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Policy Number<br><input type="text" class="form-control" name="policy_number_2" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>                        
                                            <th>Policy Holder Name<br><input type="text" class="form-control" name="policy_holder_name_2" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Ins. Company Name<br><input type="text" class="form-control" name="ins_comp_name_2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Incident Date<br><input type="text" class="form-control" name="incident_date_2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Incident Details<br><input type="text" class="form-control" name="incident_detail_2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Destination Of Incident<br><input type="text" class="form-control" name="destination_of_incident" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Claimed Amount<br><input type="text" class="form-control" name="claim_amt" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Claimed Settled Amt<br><input type="text" class="form-control" name="claim_settled_amt_2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Claimed Settlement Details<br><input type="text" class="form-control" name="claim_settled_details_2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Settlement Date<br><input type="text" class="form-control" name="settlement_date_2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Amount Paid Date<br><input type="text" class="form-control" name="amt_paid_date_2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                @csrf
                            </div>
                        </div>

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

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/js/pages/sweet-alerts.init.js') }}"></script>
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/kendo.all.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    var ajaxURLCashlessMediClaimData = "{{route('cashless.medi.claim.ajax')}}";
    var ajaxURLCashlessVehicleClaimData = "{{route('cashless.vehicle.claim.ajax')}}";
    var ajaxURLCashlessOtherClaimData = "{{route('cashless.other.claim.ajax')}}";
    var deleteCashlessClaim = "{{route('delete.casheless.claim')}}";
    var changeCashlessClaimStatusURL = "{{route('change.cashless.claim.status')}}";
    var csrfToken = $("[name=_token").val();

    function DeleteClaim(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: deleteCashlessClaim + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

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

        $.ajax({
            type: 'GET',
            url: changeCashlessClaimStatusURL + "?id=" + id + "&status=" + status,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }
    
    $("#filter_status").select2({placeholder:"Select Filter"});
    $(".search-value, .search-value-1, .search-value-2").fadeOut();

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

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

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

</script>

<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": [[2, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() { return $(window).height() - 300; },
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLCashlessMediClaimData,
            "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();},
            }
        },  
        "aoColumns" : [
            {"mData" : "action"},
            {"mData" : "status"},
            {"mData" : "form_fill_continue"},
            {"mData" : "transaction_date"},
            {"mData" : "claim_type",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 15) {
                        return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData" : "policy_number",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 20) {
                            return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData" : "policy_holder_name",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 20) {
                        return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData" : "name_of_patient",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 15) {
                        return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData" : "admission_date"},
            {"mData" : "discharge_date"},
            {"mData" : "hospital_name"},
            {"mData" : "hospitilise_reason",
                "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" : "claimed_settled_amt"},
            {"mData" : "claimed_settled_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" : "settlement_date"},
            {"mData" : "amt_paid_date"},
        ]
    });

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

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

    var cColumns = [
        'transaction_date', 'claim_type', 'policy_number', 'policy_holder_name', 'name_of_patient',
        'date_of_admission', 'date_of_discharge', 'hospital_name', 'reason_for_hospitalise',
        'claim_settled_amt', 'claim_settled_details', 'settlement_date', 'amt_paid_date'
    ];

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

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

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

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

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

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

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

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

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

        cColumns.forEach(function(columnName, index) {
            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-cashless-claim-data?mediclaim"){
            if(parsedData.record != ''){
                $('#filter_status').val(parsedData.record).change();
                if(parsedData.record != -1){
                    $(".search-value").fadeIn();
                }
            }else{
                $('#filter_status').val(-1).change();
            }

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

            if(parsedData.end_date != ''){
                $('#end_date').val(parsedData.end_date).datepicker("setDate", parsedData.end_date);
                $(".search-value").fadeIn();
            }
            
            cColumns.forEach(function(columnName, index) {
                if (parsedData && parsedData.hasOwnProperty(columnName)) {
                    $('input[name="' + columnName + '"]').val(parsedData[columnName]); // Set the value of the input field
                    table.columns(index + 2).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 < cColumns.length; i++) {
            $('[name="' + cColumns[i] + '"]').val('');
        }

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

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

        // for filter_status, from_date, end_date

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

        localStorage.removeItem(currentPage);

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

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

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

        handleInputChange();
    }
</script>

<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]}],
        "order": [[2, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() { return $(window).height() - 300; },
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLCashlessVehicleClaimData,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "from_date":function(){return $("#from_date_1").val();},
                "end_date":function(){return $("#end_date_1").val();},
            }
        },  
        "aoColumns" : [
            {"mData" : "action"},
            {"mData" : "status"},
            {"mData" : "transaction_date"},
            {"mData" : "claim_type",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 15) {
                        return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData" : "policy_number"},
            {"mData" : "policy_holder_name",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 20) {
                        return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData" : "ins_comp_name"},
            {"mData" : "vehicle_reg_no"},
            {"mData" : "vehicle_name"},
            {"mData" : "incident_date"},
            {"mData" : "incident_details",
                "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" : "claimed_settled_amt"},
            {"mData" : "claimed_settled_details",
                "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" : "settlement_date"},
            {"mData" : "amt_paid_date"},
        ]
    });

    var cColumns_1 = [
        'transaction_date_1', 'claim_type_1', 'policy_number_1', 'policy_holder_name_1',
        'ins_comp_name', 'vehicle_reg_no', 'vehicle_name', 'incident_date',
        'incident_detail', 'claim_settled_amt_1', 'claim_settled_details_1',
        'settlement_date_1', 'amt_paid_date_1'
    ];

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

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

            table_1.columns(index_1 + 2).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 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 startInputDate_1 = startInputDates_1.val();
        const endInputDate_1 = endInputDates_1.val();

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

        cColumns_1.forEach(function(columnName_1, index_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-cashless-claim-data?vehicle_claim"){
            if(parsedData_1.from_date_1 != ''){
                $('#from_date_1').val(parsedData_1.from_date_1).datepicker("setDate", parsedData_1.from_date_1);
                $(".search-value-1").fadeIn();
            }

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

            cColumns_1.forEach(function(columnName_1, index_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(index_1 + 2).search(parsedData_1[columnName_1]);
                    handleInputChange_1();

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

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

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

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

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

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

        // for 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();
        });

        $('#datatable_1').DataTable().ajax.reload(null, false);

        handleInputChange_1();
    }
</script>

<script type="text/javascript">
    var table_2 = $("#datatable_2").DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]}],
        "order": [[2, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() { return $(window).height() - 300; },
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLCashlessOtherClaimData,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "from_date":function(){return $("#from_date_2").val();},
                "end_date":function(){return $("#end_date_2").val();},
            }
        },  
        "aoColumns" : [
            {"mData" : "action"},
            {"mData" : "status"},
            {"mData" : "transaction_date"},
            {"mData" : "claim_type",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 15) {
                        return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData" : "policy_number"},
            {"mData" : "policy_holder_name",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 20) {
                        return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData" : "ins_comp_name"},
            {"mData" : "incident_date"},
            {"mData" : "incident_details",
                "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 15) {
                        return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                    } else {
                        return data;
                    }
                }
            },
            {"mData" : "incident_destination"},
            {"mData" : "claimed_amt"},
            {"mData" : "claimed_settled_amt"},
            {"mData" : "claimed_settled_details",
                "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" : "settlement_date"},
            {"mData" : "amt_paid_date"},
        ]
    });

    var cColumns_2 = [
        'transaction_date_2', 'claim_type_2', 'policy_number_2', 'policy_holder_name_2',
        'ins_comp_name_2', 'incident_date_2', 'incident_detail_2', 'destination_of_incident',
        'claim_amt', 'claim_settled_amt_2', 'claim_settled_details_2', 'settlement_date_2',
        'amt_paid_date_2'
    ];

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

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

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

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

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

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

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

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

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

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

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

    if(parsedData_2 != null){
        // for death claim
        if(currentPage_2 == "/admin/manage-cashless-claim-data?other_claim"){
            if(parsedData_2.from_date_2 != ''){
                $('#from_date_2').val(parsedData_2.from_date_2).datepicker("setDate", parsedData_2.from_date_2);
            }

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

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

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

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

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

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

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

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

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

        // for from_date, end_date

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

        localStorage.removeItem(currentPage_2);

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

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

        $('#datatable_2').DataTable().ajax.reload(null, false);

        handleInputChange_2();
    }
</script>

<script type="text/javascript">
    $(document).ready(function () {
       updateURLWithActiveTabId();

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

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

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

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

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

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

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

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

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

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

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

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

    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');
        }else if(typeValue == "vehicle-claim"){
            handleTabClick('#vehicle-claim', '#vehicleClaim', 'vehicle-claim');
        // }else if(typeValue == "death-claim"){
        //     handleTabClick('#death-claim', '#deathClaim', 'death-claim');
        // }else if(typeValue == "disability-claim"){
            // handleTabClick('#disability-claim', '#disabilityClaim', 'disability-claim');
        }else if(typeValue == "other-claim"){
            handleTabClick('#other-claim', '#otherClaim', 'other-claim');
        }
    }

    function handleTabClick(tabId, contentId, urlType) {
        clearActiveTabClass();
        
        $(tabId).addClass('active');
        $(contentId).addClass('active show');

        const currentUrl = window.location.href;
        const url = new URL(currentUrl);
        url.searchParams.set('type', urlType);
        history.replaceState(null, null, url.toString());
    }
</script>
@endsection