@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,
    #datatable_3_wrapper .row:first-child .col-sm-12,
    #datatable_3_wrapper .row:last-child .col-sm-12,
    #datatable_4_wrapper .row:first-child .col-sm-12,
    #datatable_4_wrapper .row:last-child .col-sm-12 {        
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%;
    }

    th.reason-for-hospitalise,
    td.reason-for-hospitalise {
        width: 10px;
        max-width: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #datatable_1 tbody tr td:nth-child(11) {
        white-space: normal;
        word-wrap: break-word;
        max-width: 350px;
    }   
</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">
                @if(Auth::user()->type == 1)
                    <a href="{{route('add.investment')}}" class="btn btn-primary px-4 w-md"><i class="bx bx-plus font-size-16 align-middle me-2"></i>Add</a>
                @else
                    @php
                        $privileges = getPrivileges();
                    @endphp

                    @if(!empty($privileges && array_key_exists(10,$privileges)))
                        @if(array_key_exists(11,$privileges[10]))
                            <a href="{{route('add.investment')}}" class="btn btn-primary px-4 w-md"><i class="bx bx-plus font-size-16 align-middle me-2"></i>Add</a>
                        @endif
                    @endif
                @endif
            </div>
        </div>
        <!-- end page title -->

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

        <!-- 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="all-data-show" data-bs-toggle="tab" data-bs-target="#all" type="button" role="tab" aria-controls="profile" aria-selected="false">All</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link waves-effect" id="mutual-fund" data-bs-toggle="tab" data-bs-target="#mutualFund" type="button" role="tab" aria-controls="contact" aria-selected="false">Mutual Fund</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link waves-effect" id="bank" data-bs-toggle="tab" data-bs-target="#bank-data" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">Bank</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link waves-effect" id="post-office" data-bs-toggle="tab" data-bs-target="#post-office-data" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">Post Office</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link waves-effect" id="bonds" data-bs-toggle="tab" data-bs-target="#bonds-data" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">Bonds</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link waves-effect" id="other-investment" data-bs-toggle="tab" data-bs-target="#other-investment-data" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">Other Investment</button>
                    </li>
                </ul>
            </div>                        
        </div>

        <div class="row">
            <div class="card">
                <div class="card-body">                                       
                    <div class="tab-content" id="myTabContent">
                        <!-- all -->
                        <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-data-show">
                            <div class="row">
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="filter_status" class="form-label">Select date type</label>
                                        <select class="form-control select2-ajax" name="filter_status" id="filter_status">
                                            <option value="Transaction Date">Transaction Date</option>
                                            <option value="Risk From Date">Risk From Date</option>
                                            <option value="Risk To Date">Risk To Date</option>
                                            <option value="Maturity Date">Maturity Date</option>
                                            <option value="Created Date">Created Date</option>
                                            <option value="Modified Date">Modified Date</option>
                                        </select>
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="from_date" class="form-label">From Date</label>
                                        <input type="text" name="from_date" id="from_date" class="form-control" placeholder="dd-mm-yyyy" value="{{ date('d-m-Y') }}" autocomplete="off">
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="end_date" class="form-label">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>Transaction Date</th>
                                            <th>Group<br><input type="text" class="form-control" name="group" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>                        
                                            <th>Investment Holder Name<br><input type="text" class="form-control" name="investment_holder_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" ></th>
                                            <th>Mobile No.<br><input type="text" class="form-control" name="mobile_no" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Whatsapp No.<br><input type="text" class="form-control" name="whatsapp_no" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Email<br><input type="text" class="form-control" name="email" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Investment Date<br><input type="text" class="form-control" name="investment_date" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Investment Amt<br><input type="text" class="form-control" name="investment_amt" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Mature Date<br><input type="text" class="form-control" name="mature_date" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                            <th>Mature Amt.<br><input type="text" class="form-control" name="mature_amt" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Nominee<br><input type="text" class="form-control" name="nominee" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Remark<br><input type="text" class="form-control" name="remark" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                             <th>Interest %<br><input type="text" class="form-control" name="rate_of_interst" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Paid By Client<br><input type="text" class="form-control" name="paid_by_client" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Paid By Agent<br><input type="text" class="form-control" name="paid_by_agent" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Created By<br><input type="text" class="form-control" name="created_by" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Created On<br><input type="text" class="form-control" name="created_on" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Modified By<br><input type="text" class="form-control" name="modified_by" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Modified On<br><input type="text" class="form-control" name="modified_on" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                @csrf
                            </div>
                        </div>

                        <!-- mutual fund -->
                        <div class="tab-pane fade show" id="mutualFund" role="tabpanel" aria-labelledby="mutual-fund">
                            <div class="row">
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="filter_status_1" class="form-label">Select date type</label>
                                        <select class="form-control select2-ajax" name="filter_status" id="filter_status_1">
                                            <option value="Transaction Date">Transaction Date</option>
                                            {{-- <option value="Risk From Date">Risk From Date</option>
                                            <option value="Risk To Date">Risk To Date</option>
                                            <option value="Maturity Date">Maturity Date</option> --}}
                                            <option value="Created Date">Created Date</option>
                                            <option value="Modified Date">Modified Date</option>
                                        </select>
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="from_date_1" class="form-label"> From Date</label>
                                        <input type="text" name="from_date" id="from_date_1" class="form-control" placeholder="dd-mm-yyyy" value="{{ date('d-m-Y') }}" autocomplete="off">
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="end_date_1" class="form-label"> 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</th>
                                            <th>Group<br><input type="text" class="form-control" name="group1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>                        
                                            <th>Investment Holder Name<br><input type="text" class="form-control" name="investment_holder_name1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Mobile No.<br><input type="text" class="form-control" name="mobile_no1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" ></th>
                                            <th>Whatsapp No.<br><input type="text" class="form-control" name="whatsapp_no1" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Email<br><input type="text" class="form-control" name="email1" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Transaction Type <br><input type="text" class="form-control" name="transaction_type1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Investment Type<br><input type="text" class="form-control" name="investment_type1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Fund Name<br><input type="text" class="form-control" name="fund_name1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" ></th>
                                            <th>Fund Type(Scheme Type)<br><input type="text" class="form-control" name="fund_type1" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Folio Number<br><input type="text" class="form-control" name="folio_number1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Broker<br><input type="text" class="form-control" name="broker1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                             <th>Investment Amount<br><input type="text" class="form-control" name="invest_amount1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Select Mode<br><input type="text" class="form-control" name="select_mode1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Start Date<br><input type="text" class="form-control" name="start_date1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Number of Unit Purchase<br><input type="text" class="form-control" name="number_of_unit_purchase1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Unit Price<br><input type="text" class="form-control" name="unit_price1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Total Unit<br><input type="text" class="form-control" name="total_unit1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Fund Value<br><input type="text" class="form-control" name="fund_value1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Total Count<br><input type="text" class="form-control" name="total_count1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Total invest Amount<br><input type="text" class="form-control" name="total_invest_amount1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Payment Bank  <br><input type="text" class="form-control" name="payment_bank1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Count<br><input type="text" class="form-control" name="count1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Remark<br><input type="text" class="form-control" name="remark1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Paid By Client<br><input type="text" class="form-control" name="paid_by_client1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Paid By Agent<br><input type="text" class="form-control" name="paid_by_agent1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Created By<br><input type="text" class="form-control" name="created_by1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Created On<br><input type="text" class="form-control" name="created_on1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Modified By<br><input type="text" class="form-control" name="modified_by1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Modified On<br><input type="text" class="form-control" name="modified_on1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Document Number<br><input type="text" class="form-control" name="document_number1" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                @csrf
                            </div>
                        </div>

                        <!-- bank -->
                        <div class="tab-pane fade show" id="bank-data" role="tabpanel" aria-labelledby="bank">
                            <div class="row">
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="filter_status_2" class="form-label">Select date type</label>
                                        <select class="form-control select2-ajax" name="filter_status" id="filter_status_2">
                                            <option value="Transaction Date">Transaction Date</option>
                                            <option value="Risk From Date">Risk From Date</option>
                                            <option value="Risk To Date">Risk To Date</option>
                                            <option value="Maturity Date">Maturity Date</option>
                                            <option value="Created Date">Created Date</option>
                                            <option value="Modified Date">Modified Date</option>
                                        </select>
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="from_date_2" class="form-label">From Date</label>
                                        <input type="text" name="from_date" id="from_date_2" class="form-control" placeholder="dd-mm-yyyy" value="{{ date('d-m-Y') }}" autocomplete="off">
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="end_date_2" class="form-label">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</th>
                                            <th>Group<br><input type="text" class="form-control" name="group2" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" ></th>                        
                                            <th>Investment Holder Name<br><input type="text" class="form-control" name="investment_holder_name2" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" ></th>
                                            <th>Mobile No.<br><input type="text" class="form-control" name="mobile_no2" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" ></th>
                                            <th>Whatsapp No.<br><input type="text" class="form-control" name="whatsapp_no2" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Email<br><input type="text" class="form-control" name="email2" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Account Type <br><input type="text" class="form-control" name="account_type2" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Bank Name<br><input type="text" class="form-control" name="bank_name2" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Investment Product<br><input type="text" class="form-control" name="investment_product2" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" ></th>
                                            <th>Customer No<br><input type="text" class="form-control" name="customer_no2" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Certificate No<br><input type="text" class="form-control" name="certificate_no2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Investment Amount<br><input type="text" class="form-control" name="investment_amount2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                             <th>Total invested Amount<br><input type="text" class="form-control" name="total_invested_amount2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Deposit Tenure<br><input type="text" class="form-control" name="deposit_tenure2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Select Mode<br><input type="text" class="form-control" name="select_mode2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Deposit Date<br><input type="text" class="form-control" name="deposit_date2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Maturity date<br><input type="text" class="form-control" name="maturity_date2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Interest %<br><input type="text" class="form-control" name="intrest2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Interest Amount<br><input type="text" class="form-control" name="intrest_amount2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Interest Amount Frequency<br><input type="text" class="form-control" name="interest_amount_frequency2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Count<br><input type="text" class="form-control" name="count2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Nominee  <br><input type="text" class="form-control" name="nominee2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Remark<br><input type="text" class="form-control" name="remark2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Paid By Client<br><input type="text" class="form-control" name="paid_by_client2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Paid By Agent<br><input type="text" class="form-control" name="paid_by_agent2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Created By<br><input type="text" class="form-control" name="created_by2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Created On<br><input type="text" class="form-control" name="created_on2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Modified By<br><input type="text" class="form-control" name="modified_by2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Modified On<br><input type="text" class="form-control" name="modified_on2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Document Number<br><input type="text" class="form-control" name="document_number2" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                       
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                @csrf
                            </div>
                        </div>
                        
                        <!-- post office-->
                        <div class="tab-pane fade show" id="post-office-data" role="tabpanel" aria-labelledby="post-office">
                            <div class="row">
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="filter_status_3" class="form-label">Select date type</label>
                                        <select class="form-control select2-ajax" name="filter_status" id="filter_status_3">
                                            <option value="Transaction Date">Transaction Date</option>
                                            <option value="Risk From Date">Risk From Date</option>
                                            <option value="Risk To Date">Risk To Date</option>
                                            <option value="Maturity Date">Maturity Date</option>
                                            <option value="Created Date">Created Date</option>
                                            <option value="Modified Date">Modified Date</option>
                                        </select>
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="from_date_3" class="form-label"> From Date</label>
                                        <input type="text" name="from_date" id="from_date_3" class="form-control" placeholder="dd-mm-yyyy" value="{{ date('d-m-Y') }}" autocomplete="off">
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="end_date_3" class="form-label"> End Date</label>
                                        <input type="text" name="end_date" id="end_date_3" 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_3">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                        <button type="button" onclick="return clearSearch_3();" class="form-control btn btn-primary" id="btnClear_3">Clear</button>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3 search-value-3">
                                <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_3" 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</th>
                                            <th>Group<br><input type="text" class="form-control" name="group3" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>                        
                                            <th>Investment Holder Name<br><input type="text" class="form-control" name="investment_holder_name3" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Mobile No.<br><input type="text" class="form-control" name="mobile_no3" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Whatsapp No.<br><input type="text" class="form-control" name="whatsapp_no3" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Email<br><input type="text" class="form-control" name="email3" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Account Type <br><input type="text" class="form-control" name="account_type3" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Post Office Name<br><input type="text" class="form-control" name="post_office_name3" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Investment Product<br><input type="text" class="form-control" name="investment_product3" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Customer No<br><input type="text" class="form-control" name="customer_no3" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Certificate No<br><input type="text" class="form-control" name="certificate_no3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Investment Amount<br><input type="text" class="form-control" name="investment_amount3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                             <th>Total invested Amount<br><input type="text" class="form-control" name="total_invested_amount3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Deposit Tenure<br><input type="text" class="form-control" name="deposit_tenure3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Select Mode<br><input type="text" class="form-control" name="select_mode3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Deposit Date<br><input type="text" class="form-control" name="deposit_date3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Maturity date<br><input type="text" class="form-control" name="maturity_date3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Interest %<br><input type="text" class="form-control" name="intrest3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Interest Amount<br><input type="text" class="form-control" name="intrest_amount3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Interest Amount Frequency<br><input type="text" class="form-control" name="interest_amount_frequency3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Count<br><input type="text" class="form-control" name="count3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Nominee <br><input type="text" class="form-control" name="nominee3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Remark<br><input type="text" class="form-control" name="remark3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Paid By Client<br><input type="text" class="form-control" name="paid_by_client3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Paid By Agent<br><input type="text" class="form-control" name="paid_by_agent3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Created By<br><input type="text" class="form-control" name="created_by3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Created On<br><input type="text" class="form-control" name="created_on3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Modified By<br><input type="text" class="form-control" name="modified_by3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Modified On<br><input type="text" class="form-control" name="modified_on3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Document Number<br><input type="text" class="form-control" name="document_number3" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                @csrf
                            </div>
                        </div>
                        
                        <!-- Bond -->
                        <div class="tab-pane fade show" id="bonds-data" role="tabpanel" aria-labelledby="bonds">
                            <div class="row">
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="filter_status_4" class="form-label">Select date type</label>
                                        <select class="form-control select2-ajax" name="filter_status" id="filter_status_4">
                                            <option value="Transaction Date">Transaction Date</option>
                                            <option value="Risk From Date">Risk From Date</option>
                                            <option value="Risk To Date">Risk To Date</option>
                                            <option value="Maturity Date">Maturity Date</option>
                                            <option value="Created Date">Created Date</option>
                                            <option value="Modified Date">Modified Date</option>
                                        </select>
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="from_date_4" class="form-label"> From Date</label>
                                        <input type="text" name="from_date" id="from_date_4" class="form-control" placeholder="dd-mm-yyyy" value="{{ date('d-m-Y') }}" autocomplete="off">
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="end_date_4" class="form-label"> End Date</label>
                                        <input type="text" name="end_date" id="end_date_4" 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_4">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                        <button type="button" onclick="return clearSearch_4();" class="form-control btn btn-primary" id="btnClear_4">Clear</button>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3 search-value-4">
                                <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_4" 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</th>
                                            <th>Group<br><input type="text" class="form-control" name="group4" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" ></th>                        
                                            <th>Investment Holder Name<br><input type="text" class="form-control" name="investment_holder_name4" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" ></th>
                                            <th>Mobile No.<br><input type="text" class="form-control" name="mobile_no4" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" ></th>
                                            <th>Whatsapp No.<br><input type="text" class="form-control" name="whatsapp_no4" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Email<br><input type="text" class="form-control" name="email4" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Bond ID/ISIN <br><input type="text" class="form-control" name="bond_id4" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Bond Name<br><input type="text" class="form-control" name="bond_name4" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Bond Issuer<br><input type="text" class="form-control" name="bond_issuer4" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" ></th>
                                            <th>Bond Type<br><input type="text" class="form-control" name="bond_type4" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Sub Bond Type<br><input type="text" class="form-control" name="sub_bond_type4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Issue Date<br><input type="text" class="form-control" name="issue_date4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                             <th>Face Value<br><input type="text" class="form-control" name="face_value4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Purchase Date<br><input type="text" class="form-control" name="purchase_date4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Purchase Price<br><input type="text" class="form-control" name="purchas_price4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Quantity<br><input type="text" class="form-control" name="quantity4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Tax Status<br><input type="text" class="form-control" name="tax_status4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Callable or Non-Callable<br><input type="text" class="form-control" name="callable4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Maturity Date<br><input type="text" class="form-control" name="maturity_date4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Total Return<br><input type="text" class="form-control" name="total_return4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Yield to Maturity<br><input type="text" class="form-control" name="yield_to_maturity4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Coupon Rate  <br><input type="text" class="form-control" name="coupon_rate4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Coupon Frequency<br><input type="text" class="form-control" name="coupon_frequency4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Credit Rating<br><input type="text" class="form-control" name="credit_rating4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Paid By Client<br><input type="text" class="form-control" name="paid_by_client4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Paid By Agent<br><input type="text" class="form-control" name="paid_by_agent4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Created By<br><input type="text" class="form-control" name="created_by4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Created On<br><input type="text" class="form-control" name="created_on4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Modified By<br><input type="text" class="form-control" name="modified_by4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Modified On<br><input type="text" class="form-control" name="modified_on4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Document Number<br><input type="text" class="form-control" name="document_number4" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                @csrf
                            </div>
                        </div>

                        <!-- other investment -->
                        <div class="tab-pane fade show" id="other-investment-data" role="tabpanel" aria-labelledby="other-investment">
                            <div class="row">
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="filter_status_5" class="form-label">Select date type</label>
                                        <select class="form-control select2-ajax" name="filter_status" id="filter_status_5">
                                            <option value="Transaction Date">Transaction Date</option>
                                            <option value="Risk From Date">Risk From Date</option>
                                            <option value="Risk To Date">Risk To Date</option>
                                            <option value="Maturity Date">Maturity Date</option>
                                            <option value="Created Date">Created Date</option>
                                            <option value="Modified Date">Modified Date</option>
                                        </select>
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="from_date_5" class="form-label"> From Date</label>
                                        <input type="text" name="from_date" id="from_date_5" class="form-control" placeholder="dd-mm-yyyy" value="{{ date('d-m-Y') }}" autocomplete="off">
                                    </div>
                                </div>
        
                                <div class="col-xl-2">
                                    <div class="mb-3">
                                        <label for="end_date_5" class="form-label"> 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>Transaction Date</th>
                                            <th>Group<br><input type="text" class="form-control" name="group5" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>                        
                                            <th>Investment Holder Name<br><input type="text" class="form-control" name="investment_holder_name5" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Mobile No.<br><input type="text" class="form-control" name="mobile_no5" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" ></th>
                                            <th>Whatsapp No.<br><input type="text" class="form-control" name="whatsapp_no5" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Email<br><input type="text" class="form-control" name="email5" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Select Investment to place<br><input type="text" class="form-control" name="insurance_company_name5" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Investment Type<br><input type="text" class="form-control" name="investment_type5" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Invested Party Name<br><input type="text" class="form-control" name="investment_party_name5" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            <th>Investment Document Number<br><input type="text" class="form-control" name="investment_document_number5" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            {{-- <th>Document Date<br><input type="text" class="form-control" name="document_date5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>nominee<br><input type="text" class="form-control" name="nominee5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                             --}}
                                             <th>Investment Amount<br><input type="text" class="form-control" name="investment_amount5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Rate Of Interest<br><input type="text" class="form-control" name="rate_of_interest5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            {{-- <th>Growth Rate(Apx)<br><input type="text" class="form-control" name="growth_rate5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                             --}}
                                            <th>Deposit Tenure mode<br><input type="text" class="form-control" name="deposte_tenure_mode" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>                                            
                                            <th>Mode<br><input type="text" class="form-control" name="mode5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Deposit Tenure<br><input type="text" class="form-control" name="term5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Mature Value<br><input type="text" class="form-control" name="mature_value5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Deposit Date<br><input type="text" class="form-control" name="payment_start_date5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            {{-- <th>Payment End Date<br><input type="text" class="form-control" name="payment_end_date5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th> --}}
                                            <th>Mature Date<br><input type="text" class="form-control" name="mature_date5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Next Premium Due Date <br><input type="text" class="form-control" name="next_premium_due_date5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Paid By Client<br><input type="text" class="form-control" name="paid_by_client5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Paid By Agent<br><input type="text" class="form-control" name="paid_by_agent5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Created By<br><input type="text" class="form-control" name="created_by5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Created On<br><input type="text" class="form-control" name="created_on5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Modified By<br><input type="text" class="form-control" name="modified_by5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Modified On<br><input type="text" class="form-control" name="modified_on5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                            <th>Document Number<br><input type="text" class="form-control" name="document_number5" placeholder="Search" autocomplete="off"style="width: 100px; height: 25px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                @csrf
                            </div>
                        </div>                        
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->
    </div>
</div>

<div class="modal fade" id="modalViewPolicy" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalViewPolicyLabel" 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="modalViewPolicyLabel">Death Claim Life Insurance Policies</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body pb-1">
                <div id="add_new_row_death"></div>

                <div class="row mt-3">
                    <div class="col-xl">
                        <div class="card text-white bg-secondary mb-3">
                            <div class="card-header text-center font-size-14">Sum Assured<br>
                                <div id="sum_assu_amt_1"></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl">
                        <div class="card text-white bg-secondary mb-3">
                            <div class="card-header text-center font-size-14">Term Rider Sum Assured<br>
                                <div id="term_sum_assu_amt_1"></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl">
                        <div class="card text-white bg-dark mb-3">
                            <div class="card-header text-center font-size-14">Accident Sum Assured<br>
                                <div id="acci_sum_asuu_amt_1"></div>
                            </div>
                        </div>
                    </div>
                        
                    <div class="col-xl">
                        <div class="card text-white bg-dark mb-3">
                            <div class="card-header text-center font-size-14">Double Accident Sum Assured<br>
                                <div id="double_acci_sum_assu_amt_1"></div>
                            </div>
                        </div>
                    </div>
                </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 ajaxURLGetall = "{{route('investment.all.data.ajax')}}";
    var ajaxURLGetmutualFund = "{{route('investment.mutual.fund.data.ajax')}}";
    var ajaxURLGetBank = "{{route('investment.bank.data.ajax')}}";
    var ajaxURLGetBondData = "{{route('investment.bond.data.ajax')}}";
    var ajaxURLGetOtherInvestmentData = "{{route('investment.other.investment.data.ajax')}}";
    var ajaxURLGetPostOfficeData = "{{route('investment.post.office.data.ajax')}}";
    var changeInvestmentStatusURL = "{{route('change.investment.status')}}";
    var deleteInvestment = "{{route('delete.investment')}}";
    var restoreInvestment ="{{route('restore.investment')}}";
    var isDeleted = '{{$data["is_deleted"]}}';
    var csrfToken = $("[name=_token").val();
    
    $("#filter_status, #filter_status_1, #filter_status_2, #filter_status_3, #filter_status_4, #filter_status_5").select2();
    $(".search-value, .search-value-1, .search-value-2,.search-value-3, .search-value-4,.search-value-5").fadeOut();

    function investmentDelete(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: deleteInvestment + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable, #datatable_1, #datatable_2, #datatable_3, #datatable_4, #datatable_5').DataTable().ajax.reload(null, false);
                }  
            }
        });
    }
   
    function changeStatus(id) {
        var investment_status_element = document.getElementById("investment_status" + id);  

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

    function renderPolicyNumber(data) {
        if (data != null) {
            var isHtml = /<\/?[a-z][\s\S]*>/i.test(data); // Check if data contains HTML tags

            if (isHtml) {
                var policyNumberHtml = data;

                if (policyNumberHtml.length > 20) {
                    // Create a temporary div to extract text content from HTML
                    var tempDiv = document.createElement('div');
                    tempDiv.innerHTML = policyNumberHtml;
                    var textContent = tempDiv.textContent || tempDiv.innerText || '';

                    var truncatedText = textContent.length > 20 ? textContent.substr(0, 20) + '...' : textContent;

                    // Replace the inner HTML of the link with the truncated text
                    tempDiv.innerHTML = policyNumberHtml;
                    var linkElement = tempDiv.querySelector('a');

                    if (linkElement) {
                        linkElement.innerHTML = truncatedText;
                        policyNumberHtml = tempDiv.innerHTML;
                    }

                    return '<span title="' + textContent + '">' + policyNumberHtml + '</span>';
                } else {
                    return policyNumberHtml;
                }
            } else {
                if (data.length > 20) {
                    return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                } else {
                    return data;
                }
            }
        } else {
            return data;
        }
    }

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

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

    function downloadDoc(id,document_number) {
        var ajaxURL = "{{ route('download.investment.document') }}";

        $.ajax({
            url: ajaxURL + "?id=" + id + "&document_number=" + document_number,
            dataType: 'json',
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    var downloadLink = document.createElement('a');
                    downloadLink.href = resultData['download_url'];
                    downloadLink.download = resultData['file_name'];
                    downloadLink.click();
                } else {
                    toastr["error"](resultData['msg']);
                }
            },
            error: function(xhr, status, error) {
                toastr["error"](xhr.responseJSON['message']);
            }
        });
    } 

    function viewDownloadDoc(id) {
        var ajaxURL = "{{ route('view.download.investment.document') }}";

        $.ajax({
            url: ajaxURL + "?id=" + id,
            dataType: 'json',
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    resultData['document_links'].forEach(function(url) {
                        window.open(url, '_blank');
                    });
                }else{
                    toastr["error"](resultData['msg']);
                }
            },
            error: function(xhr, status, error) {
                toastr["error"](xhr.responseJSON['message']);
            }
        });
    }

    initDatePicker('#from_date', '#end_date');
    initDatePicker('#from_date_1', '#end_date_1');
    initDatePicker('#from_date_2', '#end_date_2');
    initDatePicker('#from_date_3', '#end_date_3');
    initDatePicker('#from_date_4', '#end_date_4');
    initDatePicker('#from_date_5', '#end_date_5');

    function initDatePicker(fromDateId, endDateId) {
        $(fromDateId).datepicker({
            format: "dd-mm-yyyy",
            orientation: "bottom auto"
        }).on('changeDate', function() {
            $('.datepicker').hide();
            var fromDate = $(fromDateId).datepicker('getDate');
            $(endDateId).datepicker('setStartDate', fromDate);
        });
    }
    
    dateValidations($('#from_date,#from_date,#from_date_1,#end_date_1,#from_date_2,#from_date_3,#end_date_2,#end_date_3,#from_date_4,#from_date_5,#end_date_4,#end_date_5'));      
</script>

<!-- for all -->
<script type="text/javascript">
    var table = $('#datatable').DataTable({
        buttons: [{extend: 'csvHtml5'}, {  extend: 'excelHtml5' },{extend: 'pdfHtml5',  orientation: 'landscape',  pageSize: 'A2'},{extend: 'print', orientation: 'landscape',pageSize: 'A2' },],
        "aoColumnDefs": [{"bSortable": false,"aTargets": []}],
        "order": [[0, 'desc']],
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 320;},
        "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": ajaxURLGetall,
            "type": "GET",
            "data": {
                "_token": csrfToken,
                "is_deleted" : isDeleted,
                "date_type": function() {return $("#filter_status").val();},
                "end_date": function() {return $("#from_date").val();},
                "start_date": function() {return $("#end_date").val();},
            }
        },
        "aoColumns": [
            { "mData": "action","bSortable": false,},
            { "mData": "status","bSortable": false,},
            { "mData": "transaction_date" },
            { "mData": "group" },
            { "mData": "investment_holder" },
            { "mData": "mobile_number" },
            { "mData": "whatsapp_number" },
            { "mData": "email" },
            { "mData": "investment_date" },
            { "mData": "invested_amount" },
            { "mData": "mature_date" },
            { "mData": "mature_amt" },
            { "mData": "nominee" },
            {"mData": "remark",
                "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": "rate_of_interest" },
            { "mData": "paid_by_client" },
            { "mData": "paid_by_agent" },
            { "mData": "created_by"},
            { "mData": "created_at"},
            { "mData": "modified_by"},
            { "mData": "updated_at"},          
        ]
    });

    var columnsMapping = [
       'group', 'investment_holder_name', 'mobile_no', 'whatsapp_no', 'email', 'investment_date', 'investment_amt', 'mature_date',
        'mature_amt', 'nominee', 'remark', 'rate_of_interst', 'paid_by_client','paid_by_agent','created_by','created_on','modified_by','modified_on'
    ];

    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 + "?all";
    const selectFilterStatus = $('#filter_status');
    selectFilterStatus.on('change', handleInputChange);

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

    const endInputDates = $('#from_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/investment/manage?type=all"){
            if(parsedData.record != ''){
                $('#filter_status').val(parsedData.record).change();
                if(parsedData.record != 'Transaction Date'){
                    $(".search-value").fadeIn();
                }
            }else{
                $('#filter_status').val("Transaction Date").change();
            }

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

            if(parsedData.end_date != ''){
                $('#from_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 !== 'Transaction Date') {
            $(".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();
        $('#filter_status').val("Transaction Date").change();
        $('#datatable').DataTable().ajax.reload(null, false);
        handleInputChange();
    }
</script>

<!-- for mutual fund  -->
<script type="text/javascript">
    var table_1 = $('#datatable_1').DataTable({
        buttons: [{extend: 'csvHtml5'}, {  extend: 'excelHtml5' },{extend: 'pdfHtml5',  orientation: 'landscape',  pageSize: 'A2'},{extend: 'print', orientation: 'landscape',pageSize: 'A2' },],
        "aoColumnDefs": [{"bSortable": false,"aTargets": []}],
        "order": [[0, 'desc']],
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 320;},
        "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": ajaxURLGetmutualFund,
            "type": "GET",
            "data": {
                "_token": csrfToken,
                "is_deleted" : isDeleted,
                "date_type": function() {return $("#filter_status_1").val();},
                "start_date": function() {return $("#from_date_1").val();},
                "end_date": function() {return $("#end_date_1").val();},
            }
        },
        "aoColumns": [
            { "mData": "action","bSortable": false,},
            { "mData": "status","bSortable": false,},
            { "mData": "transaction_date" },
            { "mData": "group" },
            { "mData": "investment_holder" },
            { "mData": "mobile_number" },
            { "mData": "whatsapp_number" },
            { "mData": "email" },
            { "mData": "transaction_type" },
            { "mData": "investment_type" },
            {"mData": "fund_name",
                "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": "fund_type" },
            { "mData": "folio_number" },
            { "mData": "broker" },
            { "mData": "investment_amount" },
            { "mData": "mode" },
            { "mData": "start_date" },
            { "mData": "number_of_unit_purchase" },
            { "mData": "unit_price" },
            { "mData": "total_unit" },
            { "mData": "fund_value" },
            { "mData": "total_count" },
            { "mData": "total_investment_amount" },
            { "mData": "payment_bank" },
            { "mData": "count" },
            //{ "mData": "remark"},
            {"mData": "remark",
                "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": "paid_by_client" },
            { "mData": "paid_by_agent" },
            { "mData": "created_by"},
            { "mData": "created_at"},
            { "mData": "modified_by"},
            { "mData": "updated_at"},
            { "mData": "document_number","bSortable": false,},
        ]
    });

    // column search
    var columnsMapping_1 = [
        'group1','investment_holder_name1','mobile_no1','whatsapp_no1','email1','transaction_type1','investment_type1','fund_name1','fund_type1','folio_number1',
        'broker1','invest_amount1','select_mode1','start_date1','number_of_unit_purchase1','unit_price1','total_unit1','fund_value1','total_count1','total_invest_amount1','payment_bank1','count1','remark1','paid_by_client1','paid_by_agent1','created_by1','created_on1','modified_by1','modified_on1','document_number1'
    ];

    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 + "?mutual-fund";

    const selectFilterStatus_1 = $('#filter_status_1');
    selectFilterStatus_1.on('change', 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/investment/manage?type=mutual-fund"){
            if(parsedData_1.record_1 != ''){
                $('#filter_status_1').val(parsedData_1.record_1).change();
                if(parsedData_1.record_1 != "Transaction Date"){
                    $(".search-value-1").fadeIn();
                }
            }else{
                $('#filter_status_1').val("Transaction Date").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_1').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 !== "Transaction Date") {
            $(".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("Transaction Date").change();
        $('#datatable_1').DataTable().ajax.reload(null, false);

        handleInputChange_1();
    }
</script>

<!-- for Bank -->
<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, 15, 16, 17, 18 ,19 ,20 ,21 ,22]}],
        "order": [[0, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 350;},
        "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": ajaxURLGetBank,
            "type": "GET",
            "data": {
                "_token": csrfToken,
                "is_deleted" : isDeleted,
                "date_type": function() { return $("#filter_status_2").val()},
                "start_date":function(){return $("#from_date_2").val();},
                "end_date":function(){return $("#end_date_2").val();},
            }         
        },
        "aoColumns": [
            { "mData": "action","bSortable": false,},
            { "mData": "status","bSortable": false,},
            { "mData": "transaction_date" },
            { "mData": "group" },
            { "mData": "investment_holder" },
            { "mData": "mobile_number" },
            { "mData": "whatsapp_number" },
            { "mData": "email" },
            { "mData": "account_type" },
            { "mData": "bank_name" },
            { "mData": "investment_type" },
            { "mData": "customer_no" },
            { "mData": "certificate_no" },
            { "mData": "investment_amount" },
            { "mData": "total_investment_amount" },
            { "mData": "term" },
            { "mData": "mode" },
            { "mData": "deposit_date" },
            { "mData": "mature_date" },
            { "mData": "rate_of_interest" },
            { "mData": "interest_amount" },
            { "mData": "investment_amount_frequency"},
            { "mData": "count"},
            { "mData": "nominee"},
            {"mData": "remark",
                "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": "paid_by_client" },
            { "mData": "paid_by_agent" },
            { "mData": "created_by"},
            { "mData": "created_at"},
            { "mData": "modified_by"},
            { "mData": "updated_at"},
            { "mData": "document_number","bSortable": false,},
        ]
    });

    var resultData ; 
   
    $("#from_date_2").on('change', function() {
        var startDate = $('#from_date_2').val();
        var endDate = $(this).val();

        if (startDate >= endDate) {
            $("#end_date_2").datepicker("destroy").val("");
        }

        $("#end_date_2").attr("disabled", !startDate).datepicker("destroy").datepicker({
            format: "dd-mm-yyyy",
            startDate: startDate,
        }).on('changeDate', function() {
            $('.datepicker').hide();
        });
    });
  
    // column search   
    var columnsMapping_2 = [
        'group2','investment_holder_name2','mobile_no2','whatsapp_no2','email2','account_type2','bank_name2','investment_product2','customer_no2','certificate_no2',
        'investment_amount2','total_invested_amount2','deposit_tenure2','select_mode2','deposit_date2','maturity_date2','intrest2','intrest_amount2','interest_amount_frequency2','count2','nominee2','remark2',
        'paid_by_client2','paid_by_agent2','created_by2','created_on2','modified_by2','modified_on2','document_number2'
    ];

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

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

            table_2.columns(columnIndex_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 + "?bank";

    const selectFilterStatus_2 = $('#filter_status_2');
    selectFilterStatus_2.on('change', handleInputChange_2);

    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 FilterStatus_2 = selectFilterStatus_2.val();
        const startInputDate_2 = startInputDates_2.val();
        const endInputDate_2 = endInputDates_2.val();

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

        columnsMapping_2.forEach(function(columnName_2, columnIndex_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/investment/manage?type=bank"){
            if(parsedData_2.record_2 != ''){
                $('#filter_status_2').val(parsedData_2.record_2).change();
                if(parsedData_2.record_2 != "Transaction Date"){
                    $(".search-value-2").fadeIn();
                }
            }else{
                $('#filter_status_2').val("Transaction Date").change();
            }

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

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

            columnsMapping_2.forEach(function(columnName_2, columnIndex_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(columnIndex_2).search(parsedData_2[columnName_2]);
                    handleInputChange_2();

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

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

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

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

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

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

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

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

        $('#filter_status_2').val("Transaction Date").change();
        $('#datatable_2').DataTable().ajax.reload(null, false);

        handleInputChange_2();
    }
</script>

<!-- for post-office -->
<script type="text/javascript">
    var table_3 = $('#datatable_3').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ,19]}],
        "order": [[0, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 350;},
        "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": ajaxURLGetPostOfficeData,
            "type": "GET",
            "data": {
                "_token": csrfToken,
                "is_deleted" : isDeleted,
                "date_type": function() { return $("#filter_status_3").val()},
                "start_date":function(){return $("#from_date_3").val();},
                "end_date":function(){return $("#end_date_3").val();},
            }         
        },
        "aoColumns": [
            { "mData": "action","bSortable": false,},
            { "mData": "status","bSortable": false,},
            { "mData": "transaction_date" },
            { "mData": "group" },
            { "mData": "investment_holder" },
            { "mData": "mobile_number" },
            { "mData": "whatsapp_number" },
            { "mData": "email" },
            { "mData": "account_type" },
            { "mData": "post_office_name_id" },
            { "mData": "investment_type" },
            { "mData": "customer_no" },
            { "mData": "certificate_no" },
            { "mData": "investment_amount" },
            { "mData": "total_investment_amount" },
            { "mData": "term" },
            { "mData": "mode" },
            { "mData": "deposit_date" },
            { "mData": "mature_date" },
            { "mData": "rate_of_interest" },
            { "mData": "interest_amount" },
            { "mData": "investment_amount_frequency"},
            { "mData": "count"},
            { "mData": "nominee"},
            // { "mData": "remark" },
            {"mData": "remark",
                "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": "paid_by_client" },
            { "mData": "paid_by_agent" },
            { "mData": "created_by"},
            { "mData": "created_at"},
            { "mData": "modified_by"},
            { "mData": "updated_at"},
            { "mData": "document_number"},
        ]
    });

    // column search   
    var columnsMapping_3 = [
        'group3','investment_holder_name3','mobile_no3','whatsapp_no3','email3','account_type3','post_office_name3','investment_product3','customer_no3','certificate_no3',
        'investment_amount3','total_invested_amount3','deposit_tenure3','select_mode3','deposit_date3','maturity_date3','intrest3','intrest_amount3','interest_amount_frequency3','count3','nominee3','remark3',
        'paid_by_client3','paid_by_agent3','created_by3','created_on3','modified_by3','modified_on3','document_number3'
    ];

    columnsMapping_3.forEach(function(columnName_3, columnIndex_3) {
        $('input[name="' + columnName_3 + '"]').click(function (event) {
            event.stopPropagation();
        });

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

            table_3.columns(columnIndex_3).search($('input[name="' + columnName_3 + '"]').val()).draw();
            handleInputChange_3();
                    
            if($('input[name="' + columnName_3 + '"]').val() != ''){
                $(".search-value-3").fadeIn();
            }else{
                $(".search-value-3").fadeOut();
            }
        }, 500));
    });

    const currentPage_3 = window.location.pathname + "?post-office";
   
    const selectFilterStatus_3 = $('#filter_status_3');
    selectFilterStatus_3.on('change', handleInputChange_3);

    const startInputDates_3 = $('#from_date_3');
    startInputDates_3.on('change', handleInputChange_3);

    const endInputDates_3 = $('#end_date_3');
    endInputDates_3.on('change', handleInputChange_3);

    function handleInputChange_3(){
        const FilterStatus_3 = selectFilterStatus_3.val();
        const startInputDate_3 = startInputDates_3.val();
        const endInputDate_3 = endInputDates_3.val();

        const pageData_3 = {
            record_3: FilterStatus_3,
            from_date_3: startInputDate_3,
            end_date_3: endInputDate_3,
        };

        columnsMapping_3.forEach(function(columnName_3, columnIndex_3) {
            const inputValue_3 = $('input[name="' + columnName_3 + '"]').val();
            pageData_3[columnName_3] = inputValue_3;
        });

        const jsonPageData_3 = JSON.stringify(pageData_3);
        localStorage.setItem(currentPage_3, jsonPageData_3);
    }

    const storedData_3 = localStorage.getItem(currentPage_3);
    const parsedData_3 = JSON.parse(storedData_3);

    if(parsedData_3 != null){
        //  for other claim
        if(currentPage_3 == "/admin/investment/manage?type=post-office"){
            if(parsedData_3.record_3 != ''){
                $('#filter_status_3').val(parsedData_3.record_3).change();
                if(parsedData_3.record_3 != "Transaction Date"){
                    $(".search-value-3").fadeIn();
                }
            }else{
                $('#filter_status_3').val("Transaction Date").change();
            }

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

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

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

    $("#filter_status_3, #from_date_3, #end_date_3").on('change',function(){
        var fromDateVal = $("#from_date_3").val();
        var endDateVal = $("#end_date_3").val();
        var filterStatusVal = $("#filter_status_3").val();
        
        if ((fromDateVal !== '' || endDateVal !== '') || filterStatusVal !== "Transaction Date") {
            $(".search-value-3").fadeIn();
        } else {
            $(".search-value-3").fadeOut();
        }

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

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

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

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

       // for filter_status, from_date, end_date

       $('#from_date_3, #end_date_3').datepicker("destroy").val("");

       localStorage.removeItem(currentPage_4);

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

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

       $('#filter_status_3').val("Transaction Date").change();
       $('#datatable_3').DataTable().ajax.reload(null, false);

       handleInputChange_3();
    }
</script>

<!-- for bond -->
<script type="text/javascript">
    var table_4 = $('#datatable_4').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ,19,20,21,22,23,24,25,26,27,28,29,30]}],
        "order": [[0, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 350;},
        "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": ajaxURLGetBondData,
            "type": "GET",
            "data": {
                "_token": csrfToken,
                "is_deleted" : isDeleted,
                "date_type": function() { return $("#filter_status_4").val()},
                "start_date":function(){return $("#from_date_4").val();},
                "end_date":function(){return $("#end_date_4").val();},
            }         
        },
        "aoColumns": [
            { "mData": "action","bSortable": false,},
            { "mData": "status","bSortable": false,},
            { "mData": "transaction_date" },
            { "mData": "group" },
            { "mData": "investment_holder" },
            { "mData": "mobile_number" },
            { "mData": "whatsapp_number" },
            { "mData": "email" },
            { "mData": "bond_id" },
            { "mData": "bond_name" },
            { "mData": "bond_issuer" },
            { "mData": "bond_type" },
            { "mData": "sub_bond_type" },
            { "mData": "issue_date" },
            { "mData": "face_value" },
            { "mData": "purchase_date" },
            { "mData": "purchase_price" },
            { "mData": "quantity" },
            { "mData": "tax_status" },
            { "mData": "callable_or_non_callable" },
            { "mData": "mature_date" },
            { "mData": "total_return" },
            { "mData": "yield_to_maturity"},
            { "mData": "coupon_rate"},
            { "mData": "coupon_frequency"},
            { "mData": "credit_rating" },
            { "mData": "paid_by_client" },
            { "mData": "paid_by_agent" },
            { "mData": "created_by"},
            { "mData": "created_at"},
            { "mData": "modified_by"},
            { "mData": "updated_at"},
            { "mData": "document_number"},
        ]
    });

    // column search
    var columnsMapping_4 = [
        'group4', 'investment_holder_name4', 'mobile_no4', 'whatsapp_no4', 'email4', 'bond_id4', 'bond_name4', 'bond_issuer4', 'bond_type4',
        'sub_bond_type4', 'issue_date4','face_value4','purchase_date4','purchas_price4', 'quantity4', 'tax_status4', 'callable4', 'maturity_date4','total_return4','yield_to_maturity4','coupon_rate4','coupon_frequency4','credit_rating4','paid_by_client4','paid_by_agent4','created_by4','created_on4','modified_by4','modified_on4','document_number4'
    ];

    columnsMapping_4.forEach(function(columnName_4, columnIndex_4) {
        $('input[name="' + columnName_4 + '"]').click(function (event) {
            event.stopPropagation();
        });

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

            table_4.columns(columnIndex_4).search($('input[name="' + columnName_4 + '"]').val()).draw();
            handleInputChange_4();
                    
            if($('input[name="' + columnName_4 + '"]').val() != ''){
                $(".search-value-4").fadeIn();
            }else{
                $(".search-value-4").fadeOut();
            }
        }, 500));
    });

    const currentPage_4 = window.location.pathname + "?bonds";

    const selectFilterStatus_4 = $('#filter_status_4');
    selectFilterStatus_4.on('change', handleInputChange_4);

    const startInputDates_4 = $('#from_date_4');
    startInputDates_4.on('change', handleInputChange_4);

    const endInputDates_4 = $('#end_date_4');
    endInputDates_4.on('change', handleInputChange_4);

    function handleInputChange_4(){
        const FilterStatus_4 = selectFilterStatus_4.val();
        const startInputDate_4 = startInputDates_4.val();
        const endInputDate_4 = endInputDates_4.val();

        const pageData_4 = {
            record_4: FilterStatus_4,
            from_date_4: startInputDate_4,
            end_date_4: endInputDate_4,
        };

        columnsMapping_4.forEach(function(columnName_4, columnIndex_4) {
            const inputValue_4 = $('input[name="' + columnName_4 + '"]').val();
            pageData_4[columnName_4] = inputValue_4;
        });

        const jsonPageData_4 = JSON.stringify(pageData_4);
        localStorage.setItem(currentPage_4, jsonPageData_4);
    }

    const storedData_4 = localStorage.getItem(currentPage_4);
    const parsedData_4 = JSON.parse(storedData_4);

    if(parsedData_4 != null){
        //  for other claim
        if(currentPage_4 == "/admin/investment/manage?type=bonds"){
            if(parsedData_4.record_4 != ''){
                $('#filter_status_4').val(parsedData_4.record_4).change();
                if(parsedData_4.record_4 != "Transaction Date"){
                    $(".search-value-4").fadeIn();
                }
            }else{
                $('#filter_status_4').val("Transaction Date").change();
            }

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

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

            columnsMapping_4.forEach(function(columnName_4, columnIndex_4) {
                if (parsedData_4 && parsedData_4.hasOwnProperty(columnName_4)) {
                    $('input[name="' + columnName_4 + '"]').val(parsedData_4[columnName_4]); // Set the value of the input field
                    table_4.columns(columnIndex_4).search(parsedData_4[columnName_4]);
                    handleInputChange_4();

                    if(parsedData_4[columnName_4] != ''){
                        $(".search-value-4").fadeIn();
                    }
                }
            });
        }

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

    $("#filter_status_4, #from_date_4, #end_date_4").on('change',function(){
        var fromDateVal = $("#from_date_4").val();
        var endDateVal = $("#end_date_4").val();
        var filterStatusVal = $("#filter_status_4").val();
        
        if ((fromDateVal !== '' || endDateVal !== '') || filterStatusVal !== "Transaction Date") {
            $(".search-value-4").fadeIn();
        } else {
            $(".search-value-4").fadeOut();
        }

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

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

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

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

       // for filter_status, from_date, end_date

       $('#from_date_4, #end_date_4').datepicker("destroy").val("");

       localStorage.removeItem(currentPage_4);

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

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

       $('#filter_status_4').val("Transaction Date").change();
       $('#datatable_4').DataTable().ajax.reload(null, false);

       handleInputChange_4();
    }
</script>

<!-- other investment -->
<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, 16, 17, 18 ,19, 20, 21, 22, 23, 24, 25, 26, 27]}],
        "order": [[0, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 350;},
        "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": ajaxURLGetOtherInvestmentData,
            "type": "GET",
            "data": {
                "_token": csrfToken,
                "is_deleted" : isDeleted,
                "date_type": function() { return $("#filter_status_5").val()},
                "start_date":function(){return $("#from_date_5").val();},
                "end_date":function(){return $("#end_date_5").val();},
            }         
        },
        "aoColumns": [
            { "mData": "action","bSortable": false,},
            { "mData": "status","bSortable": false,},
            { "mData": "transaction_date" },
            { "mData": "group" },
            { "mData": "investment_holder" },
            { "mData": "mobile_number" },
            { "mData": "whatsapp_number" },
            { "mData": "email" },
            { "mData": "insurance_company_id" },
            { "mData": "investment_type_id" },
            { "mData": "invested_party_id" },
            { "mData": "investment_document_number" },
            // { "mData": "nominee" },
            { "mData": "invested_amount" },
            { "mData": "rate_of_interest" },
            // { "mData": "growth_rate" },
            { "mData": "deposit_tenure_mode_id" },
            { "mData": "mode_id" },
            { "mData": "term" },
            { "mData": "mature_value" },
            { "mData": "deposit_date"},
            // { "mData": "to_date" },
            { "mData": "mature_date"},
            { "mData": "next_due_date"},
            { "mData": "paid_by_client" },
            { "mData": "paid_by_agent" },
            { "mData": "created_by" },
            { "mData": "created_at"},
            { "mData": "modified_by"},
            { "mData": "updated_at"},
            { "mData": "document_number"},
        ]
    });

    // column search
    var columnsMapping_5 = [
        'group5', 'investment_holder_name5', 'mobile_no5', 'whatsapp_no5', 'email5', 'insurance_company_name5', 'investment_type5', 'investment_party_name5', 'investment_document_number5',
        'document_date5', 'nominee5','investment_amount5','rate_of_interest5','deposit_tenure_mode', 'mode5', 'term5', 'payment_start_date5', 'payment_end_date5','mature_date5','next_premium_due_date5','paid_by_client5','paid_by_agent5','created_by5','created_on5','modified_by5','modified_on5','document_number5'
    ];

    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_4.columns(columnIndex_4).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-investment";

    const selectFilterStatus_5 = $('#filter_status_5');
    selectFilterStatus_5.on('change', 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 investment
        if(currentPage_5 == "/admin/investment/manage?type=other-investment"){
            if(parsedData_5.record_5 != ''){
                $('#filter_status_5').val(parsedData_5.record_5).change();
                if(parsedData_5.record_5 != "Transaction Date"){
                    $(".search-value-5").fadeIn();
                }
            }else{
                $('#filter_status_5').val("Transaction Date").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 !== "Transaction Date") {
            $(".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_4);

       $('#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("Transaction Date").change();
       $('#datatable_5').DataTable().ajax.reload(null, false);

       handleInputChange_5();
    }
</script>

<!-- for tab selection  -->
<script type="text/javascript">
    $(document).ready(function () {
        updateURLWithActiveTabId();

        $('#all-data-show').click(function() {
            handleTabClick('#all-data-show', '#all', 'all');

            $('#datatable').DataTable().draw();
            /*setTimeout(function() {
                table.columns.adjust().draw();
            }, 200);*/
        });

        $('#mutual-fund').click(function() {
            handleTabClick('#mutual-fund', '#mutualFund', 'mutual-fund');
            
            $('#datatable_1').DataTable().draw();
            /* setTimeout(function() {
                table_1.columns.adjust().draw();
            }, 200); */
        });

        $('#bank').click(function() {
            handleTabClick('#bank', '#bank-data', 'bank');
            
            $('#datatable_2').DataTable().draw();
            /*  setTimeout(function() {
                table_2.columns.adjust().draw();
            }, 200); */
        });

        $('#post-office').click(function() {
            handleTabClick('#post-office', '#post-office-data', 'post-office');
            $('#datatable_3').DataTable().draw();
        });

        $('#bonds').click(function() {
            handleTabClick('#bonds', '#bonds-data', 'bonds');
                
            $('#datatable_4').DataTable().draw();
            /*  setTimeout(function() {
                table_4.columns.adjust().draw();
            }, 200); */
        });

        $('#other-investment').click(function() {
            handleTabClick('#other-investment', '#other-investment-data', 'other-investment');
                
            $('#datatable_5').DataTable().draw();
            /*  setTimeout(function() {
                table_4.columns.adjust().draw();
            }, 200); */
        });
    });

    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 == "all"){
            handleTabClick('#all-data-show', '#all', 'all');
        }else if(typeValue == "mutual-fund"){
            handleTabClick('#mutual-fund', '#mutualFund', 'mutual-fund');
        }else if(typeValue == "bank"){
            handleTabClick('#bank', '#bank-data', 'bank');
        }else if(typeValue == "post-office"){
            handleTabClick('#post-office', '#post-office-data', 'post-office');
        }else if(typeValue == "bonds"){
            handleTabClick('#bonds', '#bonds-data', 'bonds');
        }else if(typeValue == "other-investment"){
            handleTabClick('#other-investment', '#other-investment-data', 'other-investment');
        }
    }

    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