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

<meta name="csrf-token" content="{{ csrf_token() }}">

<style>
    @media (max-width: 575px) {
        .col-12.d-flex{
            display: unset !important;
        }
        .d-flex.justify-content {
            justify-content: center;
            margin: 15px 0;
        }
    }

    @media (max-width: 768px) {
        .nav{
            margin: 0 auto;
            display: block !important;
        }
        li.nav-item{
            border-right: unset !important;
        }
        .page-title-box .col-md-6:first-child .page-title-right{
            margin: 15px 0;
        }

        #G_Datatable_wrapper .row:first-child .col-sm-12, #G_Datatable_wrapper .row:last-child .col-sm-12{
            width: 100% !important;
        }

        #L_Datatable_wrapper .row:first-child .col-sm-12, #L_Datatable_wrapper .row:last-child .col-sm-12{
            width: 100% !important;
        }

    }

    @media (max-width: 1362px)   {
        #myTab {
            align-items: stretch;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            overflow-x: auto !important;
        }
    }

    .col-md-2.tab-pane.fade.show.active {
        display: block;
    }

    .col-md-2.tab-pane.fade {
        display: none;
    }

    .col-form-label {
        padding-top: calc(0.375rem + 1px);
        padding-bottom: calc(0.375rem + 1px);
        margin-bottom: 0;
        font-size: inherit;
        line-height: 1.5;
    }

    .f-14 {
        font-size: 14px;
        font-weight: 600;
    }

    input#general_document_number {
        cursor: default;
    }

    div#myTabContent {
        background-color: #f1f5fe;
    }

    button#life-insurance,
    button#general-insurance{
        font-size: 16px;
        color: #000;
    }

</style>

<div class="page-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 page-title-box">
                <div class="row">
                    <div class="col-md-8">
                        <h4 class="mb-sm-0 font-size-18">
                            <a href="javascript:void(0);" onclick="history.back();"class="btn btn-primary px-3 waves-effect waves-light btn-sm backToButton" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
                        </h4>
                    </div>
                </div>
            </div>
        </div>

        <!-- start row -->
        <div class="row" id="card">
            <div class="card p-3">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-xl-6">
                            <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link waves-effect" id="general-insurance" data-bs-toggle="tab" data-bs-target="#generalInsurance" type="button" role="tab" aria-controls="profile" aria-selected="false">General Insurance</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link waves-effect" id="life-insurance" data-bs-toggle="tab" data-bs-target="#lifeInsurance" type="button" role="tab" aria-controls="contact" aria-selected="false">Life Insurance</button>
                                </li>
                            </ul>
                        </div>
                        <div class="col-xl-3">
                            <div class="mb-3">
                                <label for="sub_agent_id" class="form-label">Sub Agent</label>
                                <select class="form-control select2-ajax" id="sub_agent_id" name="sub_agent_id"></select>
                            </div>
                        </div>
                        <div class="col-xl-3">
                            <div class="mb-3">
                                <label for="tr_status" class='form-label'>Transaction Status</label>
                                <select class='form-control select2-ajax' id="tr_status" name="tr_status" required>
                                    <option></option>
                                    <option value="Query">Query</option>
                                    <option value="Confirm">Confirm</option>
                                    <option value="Pending">Pending</option>
                                </select>
                            </div>
                        </div>
                    </div>

                        <div class="tab-content" id="myTabContent">
                            <!-- general insurance commission -->
                            <div class="tab-pane fade" id="generalInsurance" role="tabpanel" aria-labelledby="general-insurance">
                                <div class="table-responsive">
                                    @csrf
                                    <table id="G_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<br>Confirmation</th>
                                                <th>Transaction Date<br><input type="text" class="form-control" name="transaction_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Group<br><input type="text" class="form-control" name="group" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Policy Holder Name<br><input type="text" class="form-control" name="policy_holder_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Mobile No.<br><input type="text" class="form-control" name="mobile_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Whatsapp No.<br><input type="text" class="form-control" name="whatsapp_number" autocomplete="off" placeholder="Search" style="width: 100px; height: 25px"></th>
                                                <th>Type<br><input type="text" class="form-control" name="insurance_type" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Broker<br><input type="text" class="form-control" name="broker" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Agency<br><input type="text" class="form-control" name="agency" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Sub Agent<br><input type="text" class="form-control" name="sub_agent" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Insurance Company<br><input type="text" class="form-control" name="insurance_company" autocomplete="off" placeholder="Search" style="width: 100px; height: 25px"></th>
                                                <th>Risk From<br><input type="text" class="form-control" name="risk_from_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Risk To<br><input type="text" class="form-control" name="risk_to_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>TP Due Date<br><input type="text" class="form-control" name="tp_due_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Division<br><input type="text" class="form-control" name="division" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Bank<br><input type="text" class="form-control" name="bank" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Segment<br><input type="text" class="form-control" name="segment" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Vehicle No.<br><input type="text" class="form-control" name="vehicle_no" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                                <th>Vehicle Name<br><input type="text" class="form-control" name="vehicle_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Sum Assured<br><input type="text" class="form-control" name="sum_assured" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Basic Premium<br><input type="text" class="form-control" name="basic_premium" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>TPA Premium<br><input type="text" class="form-control" name="tpa_premium" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Tax Amt.<br><input type="text" class="form-control" name="tax_amount" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Total Amt.<br><input type="text" class="form-control" name="total_amount" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Net Comm.Amt.<br><input type="text" class="form-control" name="net_comminsionable_amount" autocomplete="off" placeholder="Search" style="width: 100px; height: 25px"></th>
                                                <th>Mode<br><input type="text" class="form-control" name="mode" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Current Policy No.<br><input type="text" class="form-control" name="current_policy_number" autocomplete="off" placeholder="Search" style="width: 100px; height: 25px"></th>
                                                <th>Previous Policy No.<br><input type="text" class="form-control" name="previous_policy_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Paid By Client<br><input type="text" class="form-control" name="party_payment_mode" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Client Paid Amt.<br><input type="text" class="form-control" name="party_payout_amount" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Paid By Agent<br><input type="text" class="form-control" name="byus_payment_mode" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Agent Paid Amt.<br><input type="text" class="form-control" name="byus_payout_amount" 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>Email<br><input type="text" class="form-control" name="email" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Document No.<br><input type="text" class="form-control" name="document_number" 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 date<br><input type="text" class="form-control" name="created_at" placeholder="Search" maxlength="10" 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 date<br><input type="text" class="form-control" name="updated_at" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>

                                <div class="col-md-12 mt-5">
                                    <div class="row">
                                        <div class="col">
                                            <div class="card text-white bg-secondary mb-3">
                                                <div class="card-header text-center font-size-13">Sum Assured<br>
                                                    <div id="general_total_sum_assured"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="card text-white bg-dark mb-3">
                                                <div class="card-header text-center font-size-13">Basic Premium<br>
                                                    <div id="general_total_basic_amount"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="card text-white bg-secondary mb-3">
                                                <div class="card-header text-center font-size-13">TPA Premium<br>
                                                    <div id="general_total_tpa_premium"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="card text-white bg-dark mb-3">
                                                <div class="card-header text-center font-size-13">Tax Amount<br>
                                                    <div id="general_total_tax_amount"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="card text-white bg-dark mb-3">
                                                <div class="card-header text-center font-size-13">Total Premium<br>
                                                    <div id="general_total_total_amount"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="card text-white bg-secondary mb-3">
                                                <div class="card-header text-center font-size-13">Comm-able Amt<br>
                                                    <div id="general_total_net_commisionable_amount"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="card text-white bg-dark mb-3">
                                                <div class="card-header text-center font-size-13">Client Paid Amount<br>
                                                    <div id="general_total_party_payout_amount"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="card text-white bg-secondary mb-3">
                                                <div class="card-header text-center font-size-13">Agent Paid Amount<br>
                                                    <div id="general_total_byus_payout_amount"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                
                            <!-- life insurance commission -->
                            <div class="tab-pane fade" id="lifeInsurance" role="tabpanel" aria-labelledby="life-insurance">
                                <div class="table-responsive">
                                    @csrf
                                    <table id="L_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<br>Confirmation</th>
                                                <th>Transaction Date<br><input type="text" class="form-control" name="transaction_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Group<br><input type="text" class="form-control" name="group" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Policy Holder<br><input type="text" class="form-control" name="policy_holder_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Mobile No.<br><input type="text" class="form-control" name="mobile_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Whatsapp No.<br><input type="text" class="form-control" name="whatsapp_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Insurance Company<br><input type="text" class="form-control" name="insurance_company" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Policy Number<br><input type="text" class="form-control" name="policy_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Mode<br><input type="text" class="form-control" name="mode" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Insurance Plan<br><input type="text" class="form-control" name="insurance_plan" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Risk Term<br><input type="text" class="form-control" name="risk_term" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Premium Term<br><input type="text" class="form-control" name="premium_paying_term" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Risk from<br><input type="text" class="form-control" name="risk_from_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Maturity Date<br><input type="text" class="form-control" name="maturity_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Risk To<br><input type="text" class="form-control" name="risk_to_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Sum Assured<br><input type="text" class="form-control" name="sum_assured" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Accidental Risk Amt.<br><input type="text" class="form-control" name="accident_risk_amount" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Basic Amt.<br><input type="text" class="form-control" name="basic_amount" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Tax Amt.<br><input type="text" class="form-control" name="tax_amount" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Total Amt.<br><input type="text" class="form-control" name="total_amount" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Broker<br><input type="text" class="form-control" name="broker" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Agency<br><input type="text" class="form-control" name="agency" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Sub Agent<br><input type="text" class="form-control" name="sub_agent" 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>Document Number<br><input type="text" class="form-control" name="document_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Paid By Client<br><input type="text" class="form-control" name="party_payment_mode" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Client Paid Amt.<br><input type="text" class="form-control" name="party_payout_amount" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Paid By Agent<br><input type="text" class="form-control" name="byus_payment_mode" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                                <th>Agent Paid  Amt.<br><input type="text" class="form-control" name="byus_payout_amount" 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_at" placeholder="Search" maxlength="10" 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="updated_at" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>

                                <div class="col-md-12 mt-5">
                                    <div class="row">
                                        <div class="col">
                                            <div class="card text-white bg-secondary mb-3">
                                                <div class="card-header text-center font-size-14">Sum Assured<br>
                                                    <div id="life_total_sum_assured"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="card text-white bg-dark mb-3">
                                                <div class="card-header text-center font-size-14">Accident Risk<br>
                                                    <div id="life_total_accident_risk_amount"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="card text-white bg-dark mb-3">
                                                <div class="card-header text-center font-size-14">Basic Premium<br>
                                                    <div id="life_total_basic_amount"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="card text-white bg-secondary mb-3">
                                                <div class="card-header text-center font-size-14">Tax Amount<br>
                                                    <div id="life_total_tax_amount"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="card text-white bg-dark mb-3">
                                                <div class="card-header text-center font-size-14">Total Premium<br>
                                                    <div id="life_total_total_amount"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="card text-white bg-secondary mb-3">
                                                <div class="card-header text-center font-size-14">Client Paid Amount<br>
                                                    <div id="life_total_party_payout_amount"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="card text-white bg-dark mb-3">
                                                <div class="card-header text-center font-size-14">Agent Paid Amount<br>
                                                    <div id="life_total_byus_payout_amount"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="generalQueryModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Sub Agent Query</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <input type="hidden" name="general_policy_id" id="general_policy_id" value="">
            <div class="modal-body">
                <p id="generalQueryContent"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary pe-auto" id="resolveBtn">Resolved it</button>
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="lifeQueryModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Sub Agent Query</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <input type="hidden" name="life_policy_id" id="life_policy_id" value="">
            <div class="modal-body">
                <p id="lifeQueryContent"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary pe-auto" id="resolveBtn">Resolved it</button>
                <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/libs/parsleyjs/parsley.min.js') }}"></script>
<script src = "{{ asset('assets/js/pages/kendo.all.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    var path = "";
    var csrfToken = $("[name=_token").val();
    var isDeleted = '{{$data["is_deleted"]}}';
    var visibleColumns = [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, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40];
    var G_table = $('#G_datatable').DataTable({
        buttons: [
        {extend: 'csvHtml5',exportOptions: {columns: ':visible', exportOptions: {columns: ':visible'}},title: 'General Ins. Manage Report', exportOptions: {columns: visibleColumns}}, 
        {extend: 'excelHtml5',exportOptions: {columns: ':visible'},title: 'General Ins. Manage Report', exportOptions: {columns: visibleColumns}}, 
        {extend: 'pdfHtml5',orientation: 'landscape',pageSize: 'A1',exportOptions: {columns: ':visible'},title: 'General Ins. Manage Report', exportOptions: {columns: visibleColumns}}, 
        {extend: 'print',orientation: 'landscape',exportOptions: {columns: ':visible'},title: 'General Ins. Manage Report', exportOptions: {columns: visibleColumns}}, 
        ],
        "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, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40]}],
        "order": [[2, '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": "{{ route('subagent.general.transaction.ajax') }}",
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "sub_agent_id": function() {return $("#sub_agent_id").val();},
                "tr_status": function() {return $("#tr_status").val();},
            }
        },
        "drawCallback": function() {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            });
        },
        "aoColumns": [
            {"mData": "action", "bSortable": false},
            {"mData": "status", "bSortable": false},
            {"mData": "tr_confirm", "bSortable": false},
            {"mData": "transaction_date"},
            {"mData": "group"},
            {"mData": "policy_holder_name"},
            {"mData": "mobile_number"},
            {"mData": "whatsapp_number"},
            {"mData": "insurance_type"},
            {"mData": "broker"},
            {"mData": "agency"},
            {"mData": "sub_agent"},
            {"mData": "insurance_company"},
            {"mData": "risk_from_date"},
            {"mData": "risk_to_date"},
            {"mData": "tp_due_date"},
            {"mData": "division"},
            {"mData": "bank"},
            {"mData": "segment"},
            {"mData": "vehicle_no"},
            {"mData": "vehicle_name"},
            {"mData": "sum_assured"},
            {"mData": "basic_amount"},
            {"mData": "tpa_premium"},
            {"mData": "tax_amount"},
            {"mData": "total_amount"},
            {"mData": "net_commisionable_amount"},
            {"mData": "mode"},
            {"mData": "current_policy_number"},
            {"mData": "previous_policy_number"},
            {"mData": "party_payment_mode"},
            {"mData": "party_payout_amount"},
            {"mData": "byus_payment_mode"},
            {"mData": "byus_payout_amount"},
            {"mData": "remark"},
            {"mData": "email"},
            {"mData": "document_number"},
            {"mData": "created_by"},
            {"mData": "created_at"},
            {"mData": "modified_by"},
            {"mData": "updated_at"},
        ]
    });

    $("#date_type").select2();

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

        $("#general_total_sum_assured").html(responseData['totalAmounts'].general_total_sum_assured);
        $("#general_total_basic_amount").html(responseData['totalAmounts'].general_total_basic_amount);
        $("#general_total_tax_amount").html(responseData['totalAmounts'].general_total_tax_amount);
        $("#general_total_total_amount").html(responseData['totalAmounts'].general_total_total_amount);
        $("#general_total_net_commisionable_amount").html(responseData['totalAmounts'].general_total_net_commisionable_amount);
        $("#general_total_tpa_premium").html(responseData['totalAmounts'].general_total_tpa_premium);
        $("#general_total_byus_payout_amount").html(responseData['totalAmounts'].general_total_byus_payout_amount);
        $("#general_total_party_payout_amount").html(responseData['totalAmounts'].general_total_party_payout_amount);
    });

    var inputMappings = [
        'transaction_date', 'group', 'policy_holder_name', 'mobile_number', 'whatsapp_number', 'insurance_type', 'broker', 'agency', 'sub_agent', 'insurance_company',
        'risk_from_date', 'risk_to_date', 'tp_due_date', 'division', 'bank', 'segment', 'vehicle_no', 'vehicle_name', 'sum_assured', 'basic_premium',
        'tpa_premium', 'tax_amount', 'total_amount', 'net_comminsionable_amount', 'mode', 'current_policy_number', 'previous_policy_number', 'party_payment_mode',
        'party_payout_amount', 'byus_payment_mode', 'byus_payout_amount', 'remark', 'email', 'document_number', 'created_by', 'created_at', 'modified_by', 'updated_at'
    ];

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

        $('input[name="' + id + '"]').on('keyup input', function() {
        G_table.columns(index + 2).search(this.value).draw();
        });
    });

    $('input.toggle-vis').on('click', function(e) {
        var unHiddenValues = [2, 3, 4, 5];
        var columnIndex = $(this).attr('data-column');

        if (columnIndex === "-1") {
            var checked = $(this).prop('checked');

            if (!checked) {
                G_table.columns().visible(false);

                unHiddenValues.forEach(function(index) {
                G_table.column(index).visible(true);
                });

                $('input.toggle-vis').not('[data-column="-1"]').prop('checked', false).prop('disabled', true);
            } else {
                G_table.columns().visible(true);
                $('input.toggle-vis').not('[data-column="-1"]').prop('disabled', false).prop('checked', true);
            }
        } else {
            var column = G_table.column(columnIndex);
            column.visible($(this).prop('checked'));

            var allUnchecked = true;

            $('input.toggle-vis').not('[data-column="-1"]').each(function() {
                if ($(this).prop('checked')) {
                allUnchecked = false;
                return false;
                }
            });

            if (allUnchecked) {
                var allCheckbox = $('input.toggle-vis[data-column="-1"]');
                allCheckbox.prop('checked', false).prop('disabled', true);
            
                var allColumn = G_table.column("-1");
                allColumn.visible(false);
            } else {
                var allCheckbox = $('input.toggle-vis[data-column="-1"]');
                allCheckbox.prop('disabled', false);
            }
        }
    });

    // ################################

    var lifeVisibleColumns = [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, 31, 32, 33, 34];

    var L_table = $('#L_datatable').DataTable({
        buttons: [
            {extend: 'csvHtml5',exportOptions: {columns: ':visible'},title: 'Life Ins. Manage Report', exportOptions: {columns: lifeVisibleColumns}}, 
            {extend: 'excelHtml5',exportOptions: {columns: ':visible'},title: 'Life Ins. Manage Report', exportOptions: {columns: lifeVisibleColumns}}, 
            {extend: 'pdfHtml5',orientation: 'landscape',pageSize: 'A1',exportOptions: {columns: ':visible'},title: 'Life Ins. Manage Report', exportOptions: {columns: lifeVisibleColumns}}, 
            {extend: 'print',orientation: 'landscape',pageSize: 'A1',exportOptions: {columns: ':visible'},title: 'Life Ins. Manage Report', exportOptions: {columns: lifeVisibleColumns}}, 
        ],
        "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, 31, 32, 33, 34]}],
        "order": [[2, '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": "{{ route('subagent.life.transaction.ajax') }}",
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "sub_agent_id": function() {return $("#sub_agent_id").val();},
                "tr_status": function() {return $("#tr_status").val();},
            }
        },
        "drawCallback": function() {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
            });
        },
        "aoColumns": [
            {"mData": "action", "bSortable": false},
            {"mData": "status", "bSortable": false},
            {"mData": "tr_confirm", "bSortable": false},
            {"mData": "transaction_date"},
            {"mData": "group"},
            {"mData": "policy_holder_name"},
            {"mData": "mobile_number"},
            {"mData": "whatsapp_number"},
            {"mData": "insurance_company"},
            {"mData": "policy_number"},
            {"mData": "mode"},
            {"mData": "insurance_plan"},
            {"mData": "risk_term"},
            {"mData": "premium_paying_term"},
            {"mData": "risk_from_date"},
            {"mData": "maturity_date"},
            {"mData": "risk_to_date"},
            {"mData": "sum_assured"},
            {"mData": "accident_risk_amount"},
            {"mData": "basic_amount"},
            {"mData": "tax_amount"},
            {"mData": "total_amount"},
            {"mData": "broker"},
            {"mData": "agency"},
            {"mData": "sub_agent"},
            {"mData": "remark"},
            {"mData": "document_number"},
            {"mData": "party_payment_mode"},
            {"mData": "party_payout_amount"},
            {"mData": "byus_payment_mode"},
            {"mData": "byus_payout_amount"},
            {"mData": "created_by"},
            {"mData": "created_at"},
            {"mData": "modified_by"},
            {"mData": "updated_at"},
        ]
    });

    var lifeInputMappings = [
        'transaction_date', 'group', 'policy_holder_name', 'mobile_number', 'whatsapp_number', 'insurance_company', 'policy_number', 'mode', 
        'insurance_plan', 'risk_term', 'premium_paying_term', 'risk_from_date', 'maturity_date', 'risk_to_date', 'sum_assured', 'accident_risk_amount', 
        'basic_amount', 'tax_amount', 'total_amount', 'broker', 'agency', 'sub_agent', 'remark', 'document_number', 'party_payment_mode', 
        'party_payout_amount', 'byus_payment_mode', 'byus_payout_amount', 'created_by', 'created_at', 'modified_by', 'updated_at', 
    ];

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

        $('input[name="' + id + '"]').on('keyup input', function() {
            L_table.columns(index + 2).search(this.value).draw();
        });
    });

    L_table.on('xhr', function() {
        var lifeResponseData = L_table.ajax.json();

        $("#life_total_basic_amount").html(lifeResponseData['totalAmounts'].life_total_basic_amount);
        $("#life_total_sum_assured").html(lifeResponseData['totalAmounts'].life_total_sum_assured);
        $("#life_total_tax_amount").html(lifeResponseData['totalAmounts'].life_total_tax_amount);
        $("#life_total_total_amount").html(lifeResponseData['totalAmounts'].life_total_total_amount);
        $("#life_total_accident_risk_amount").html(lifeResponseData['totalAmounts'].life_total_accident_risk_amount);
        $("#life_total_byus_payout_amount").html(lifeResponseData['totalAmounts'].life_total_byus_payout_amount);
        $("#life_total_party_payout_amount").html(lifeResponseData['totalAmounts'].life_total_party_payout_amount);
    });

    
</script>


<script type="text/javascript">
    // ########################## CLEAN CODE

    $(document).ready(function () {
        setTimeout(function() {
            $('.alert').hide();
        }, 3000);

        $("#sub_agent_id, #tr_status").on('change',function(){
            $('#G_datatable').DataTable().draw();
            $('#L_datatable').DataTable().draw();
        });
 
        updateURLWithActiveTabId();

        $('#general-insurance').click(function() {
            handleTabClick('#general-insurance', '#generalInsurance', 'general-insurance');
        });

        $('#life-insurance').click(function() {
            handleTabClick('#life-insurance', '#lifeInsurance', 'life-insurance');
        });

        $('#generalQueryModal .btn-primary').click(function(){
            $('#generalQueryModal').modal('hide');

            var formData = {
                general_policy_id: $('#general_policy_id').val(),
                action: 'resolved',
                _token: $('[name="_token"]').val()
            };

            $.ajax({
                type: 'POST',
                url: "{{ route('subagent.resolve.general.transaction.query') }}",
                data: formData,
                success: function(response) {
                    toastr["success"]("Resolved query successfully");
                }
            });

            G_table.search('').columns().search('').draw();
            $('#generalQueryContent').text('');
        });

        $('#lifeQueryModal .btn-primary').click(function(){
            $('#lifeQueryModal').modal('hide');
    
            var formData = {
                life_policy_id: $('#life_policy_id').val(),
                action: 'resolved',
                _token: $('[name="_token"]').val()
            };
    
            $.ajax({
                type: 'POST',
                url: "{{ route('subagent.resolve.life.transaction.query') }}",
                data: formData,
                success: function(response) {
                    toastr["success"]("Resolved query successfully");
                }
            });
    
            L_table.search('').columns().search('').draw();
            $('#lifeQueryContent').text('');
        });
    });

    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 == "general-insurance"){
            handleTabClick('#general-insurance', '#generalInsurance', 'general-insurance');
        }else if(typeValue == "life-insurance"){
            handleTabClick('#life-insurance', '#lifeInsurance', 'life-insurance');
        }
    }

    function handleTabClick(tabId, contentId, urlType) {

        $('#tr_status').val('').trigger('change');
        $('#sub_agent_id').empty();

        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());

        $('#goToGeneralSetting').css('pointer-events','auto');
        
        if(contentId == '#generalInsurance'){
            $('#goToGeneralSetting').attr("href", "{{ route('commission.add.setting', ['type'=>'general-insurance'])}}");  

            setTimeout(function () {
                var G_Datatables = $('#G_datatable').DataTable();
                G_Datatables.columns.adjust().draw();
            }, 200);

        }else if(contentId == '#lifeInsurance'){       
            $('#goToGeneralSetting').attr("href", "{{ route('commission.add.setting', ['type'=>'life-insurance'])}}");    

            setTimeout(function () {
                var L_Datatables = $('#L_datatable').DataTable();
                L_Datatables.columns.adjust().draw();
            }, 200);
        }
    }

    function handleGeneralQueryProcess(recordID) {
        $('#general_policy_id').val(recordID);

        $.ajax({
            type: 'GET',
            url: "{{ route('subagent.general.get.transaction.query') }}" + "?id=" + recordID,
            success: function(response) {
                if(response['data']['tr_confir'] == 1){

                    $('#generalQueryContent').text('');
                    $('#generalQueryContent').text(response['data']['query']);
                    $('#generalQueryModal').modal('show');
                }
            }
        });
    }

    function handleLifeQueryProcess(recordID) {
        $('#life_policy_id').val(recordID);

        $.ajax({
            type: 'GET',
            url: "{{ route('subagent.life.get.transaction.query') }}" + "?id=" + recordID,
            success: function(response) {
                if(response['data']['tr_confir'] == 1){

                    $('#lifeQueryContent').text('');
                    $('#lifeQueryContent').text(response['data']['query']);

                    $('#lifeQueryModal').modal('show');
                }
            }
        });
    }

    function changeGeneralStatus(id) {
        var general_policy_status = document.getElementById("general_policy_status" + id);
        if (general_policy_status.checked) {
            general_policy_status = 1;
        } else {
            general_policy_status = 0;
        }

        $.ajax({
            type: 'GET',
            url: "{{ route('change.general.policy.status') }}" + "?id=" + id + "&policy_status=" + general_policy_status,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#G_datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

    function changeLifeStatus(id) {
        var life_policy_status = document.getElementById("life_policy_status" + id);
        
        if (life_policy_status.checked) {
            life_policy_status = 1;
        } else {
            life_policy_status = 0;
        }
        
        $.ajax({
            type: 'GET',
            url: "{{ route('change.life.policy.status') }}" + "?id=" + id + "&life_policy_status=" + life_policy_status,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#L_datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

    $('#tr_status').select2({ 
        placeholder: 'Search for transaction status',
        allowClear: true
    });
    $("#sub_agent_id").select2({
        ajax: {
            url: "{{ route('search.sub.agent') }}",
            dataType: 'json',
            delay: 0,
            data: function(params) {
                return {
                    search_value: params.term,
                    page: params.page
                };
            },
            processResults: function(data, params) {
                params.page = params.page || 1;

                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: false
        },
        placeholder: 'Search for sub agent',
        allowClear: true
    });
</script>
@endsection