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

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

<style>
    div#myTabContent {
        background-color: #f1f5fe;
      
    }   
</style>

<div class="page-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 page-title-box">
                <div class="row justify-content-between">
                    <h4 class="mb-sm-0 font-size-18 w-auto"><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>
                    <button type="button" class="btn waves-effect font-size-14 text-center float-end text-white bg-dark waves-effect waves-light" id="MakePaymentModal" style="width: max-content;">Make New Payment</button>
                </div>
            </div>
        </div>

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

        <!-- start row -->
        <div class="row" id="card">
            <div class="card p-3">
                <div class="col-md-12">
                    <div class="tab-content" id="myTabContent">
                        @csrf
                        <div class="row">
                            <div class="col-md-4">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="filter_from_date" class="form-label">From Date<span class="text-danger">*</span></label>
                                            <input class="form-control" type="text" name="filter_from_date" id="filter_from_date" value="" placeholder="dd-mm-yyyy" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="filter_end_date" class="form-label">To Date<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="filter_end_date" id="filter_end_date" value="" placeholder="dd-mm-yyyy" required autocomplete="off">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="filter_sub_agent_id" class="form-label">Sub Agent<span class="text-danger">*</span></label>
                                    <select class="form-control select2-ajax" id="filter_sub_agent_id" name="filter_sub_agent_id" required></select>
                                </div>
                            </div>
                            <div class="col-md-4 mt-4">
                                <div class="downloadReport generalDownloadBtn" style="display: contents; position: relative;">
                                    <button class="btn dropdown-toggle dropdownMenuButton3 tooltipMsg btn-primary" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-expanded="false">Download Report</button>
                                    <div class="dropdown-menu custom-dropdown-toggle-top" aria-labelledby="dropdownMenuButton3">
                                        <a href="#" class="dropdown-item general-export-btn" data-type="view">Current Page</a>
                                        <a href="#" class="dropdown-item general-export-btn" data-type="all">All Records</a>
                                    </div>
                                </div>
                            </div>    
                        </div>


                        <div class="table-responsive">
                            <div class="G_Datatable">
                                <table id="G_Datatable" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                    <thead>
                                        <tr>
                                            <th>Action</th>
                                            <th>Department</th>
                                            <th>Start Date</th>
                                            <th>End Date</th>
                                            <th>Sub Agent</th>
                                            <th>Payable Commission</th>
                                            <th>Total Paid</th>
                                            <th>Remain to Pay</th>
                                            <th>Transaction Date</th>
                                            <th>Payment Mode</th>
                                            <th>Remark</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                            @csrf
                        </div>

                        <div class="col-md-12 mt-5 d-none">
                            <div class="row">
                                <div class="col">
                                    <div class="card text-white bg-secondary mb-3">
                                        <div class="card-header text-center font-size-13">Total Policy Amount<br><div id="general_total_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">Target Amount<br><div id="general_total_target_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">Target Commission<br><div id="general_target_commmission"></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">Lum Sum<br><div id="general_lum_sum"></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">Receivable Commission<br><div id="general_recei_comm"></div></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 mt-3">
                            <div class="row">
                                <div class="col-xl-3 col-sm-3">
                                    <div class="card text-white bg-secondary mb-0">
                                        <div class="card-header text-center font-size-14">Payable Commission<br>
                                            <div id="total_payable_commission"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-sm-3">
                                    <div class="card text-white bg-secondary mb-0">
                                        <div class="card-header text-center font-size-14">Total Paid<br>
                                            <div id="paid_total"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-sm-3">
                                    <div class="card text-white bg-secondary mb-0">
                                        <div class="card-header text-center font-size-14">Remain To Pay<br>
                                            <div id="remain_to_pay_total"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="make-payment-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <form id="savePaymentHistoryData" class="needs-validation" novalidate>
                @csrf
                <input type="hidden" name="record_id" id="record_id" value="">
                <div class="modal-header">
                    <h5 class="modal-title" id="myExtraLargeModalLabel">Make Payment History</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xl-3">
                            <div class="mb-6">
                                <label for="department" class="form-label">Department<span class="text-danger">*</span></label>
                                <select class='form-control select2-ajax amt' name="department" id="department">
                                    <option value="General" selected>General</option>
                                    <option value="Life">Life</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-xl-4">
                            <div class="mb-3">
                                <label for="sub_agent_id" class="form-label">Sub Agent<span class="text-danger">*</span></label>
                                <select class="form-control select2-ajax" name="sub_agent_id" id="sub_agent_id" required></select>
                                <div class="invalid-feedback">This value is required.</div>
                            </div>
                        </div>
                        <div class="col-xl-5">
                            <div class="row">
                                <div class="col-6">
                                    <div class="mb-3">
                                        <label for="from_date" class="form-label">From Date<span class="text-danger">*</span></label>
                                        <input class="form-control" type="text" name="from_date" id="from_date" value="" placeholder="dd-mm-yyyy" required autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-3">
                                        <label for="end_date" class="form-label">To Date<span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="end_date" id="end_date" value="" placeholder="dd-mm-yyyy" required autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-xl-4">
                            <div class="mb-3">
                                <label for="payable_commission" class="form-label">Payable Commission<span class="text-danger">*</span></label>
                                <input type="text" class="form-control amount" name="payable_commission" id="payable_commission" value="" placeholder="Payable Commission" required autocomplete="off" readonly>
                            </div>
                        </div>
                        <div class="col-xl-4">
                            <div class="mb-3">
                                <label for="total_paid" class="form-label">Total Paid</label>
                                <input type="text" class="form-control amount" name="total_paid" id="total_paid" value="" placeholder="Total Paid" required autocomplete="off" readonly>
                            </div>
                        </div>
                        <div class="col-xl-4">
                            <div class="mb-3">
                                <label for="remain_to_pay" class="form-label">Remain To Pay</label>
                                <input type="text" class="form-control amount" name="remain_to_pay" id="remain_to_pay" value="" placeholder="Remain To Pay" required autocomplete="off" readonly>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xl-3">
                            <div class="mb-3">
                                <label for="paid_transaction_date" class="form-label">Paid Transaction Date<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="paid_transaction_date" id="paid_transaction_date" value="" placeholder="dd-mm-yyyy" required autocomplete="off">
                            </div>
                        </div>
                        <div class="col-xl-3">
                            <div class="mb-3">
                                <label for="payment_mode" class="form-label">Payment Mode<span class="text-danger">*</span></label>
                                <select class='form-control select2-ajax amt' name="payment_mode" id="payment_mode">
                                    <option value="">Select payment mode</option>
                                    <option value="Cash">Cash</option>
                                    <option value="Cheque">Cheque</option>
                                    <option value="Online">Online</option>
                                    <option value="Deductible Adjust">Deductible Adjust</option>
                                    <option value="Payables Adjust">Payables Adjust</option>
                                    <option value="Other Payment">Other Payment</option>
                                </select>    
                            </div>
                        </div>
                        <div class="col-xl-3">
                            <div class="mb-3">
                                <label for="make_a_payment" class="form-label">Make A Payment<span class="text-danger">*</span></label>
                                <input type="text" class="form-control amount" name="make_a_payment" id="make_a_payment" value="" placeholder="Enter Payment Amount" required autocomplete="off">
                            </div>
                        </div>
                        <div class="col-xl-3">
                            <div class="mb-3">
                                <label for="remark" class="form-label">remark</label>
                                <input type="text" class="form-control" name="remark" id="remark" value="" placeholder="Enter remark" autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary waves-effect" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary waves-effect waves-light" id="savePaymentHistory">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="paymentHistoryView" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Payment History <i class="text-primary font-size-14" id="paymentHistorylabel"></i></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table id="payment-history-table" class="table mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>ID</th>
                                <th>Transaction Date</th>
                                <th>Paid Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </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/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') }}"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    var errorMessageShown = false;
    let debounceTimeout;
    let isProcessing = false;
    var actualTotalPaidAmount = 0;
    var actualRemainToPayAmount = 0;
    // $(document).ready(function () {
    var isDeleted = "{{$data['is_deleted']}}";
    var csrfToken = $('meta[name="csrf-token"]').attr('content');
    var downloadPaymentHistoryPdf = "{{ route('download.payment.history.pdf') }}";

        var table = $('#G_Datatable').DataTable({
            "order":[[ 1, 'desc' ]],
            "ordering": true,
            "processing": true,
            "serverSide": true,
            "scrollX": true,
            "scrollY": function() {return $(window).height() - 515;},
            "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('ajax.subagent.payment.history') }}",
                "type": "POST",
                "data": {
                    "_token": csrfToken,
                    "from_date": function() {return $('#filter_from_date').val();},
                    "end_date": function() {return $('#filter_end_date').val();},
                    "sub_agent_id": function() {return $('#filter_sub_agent_id').val();},   
                },
            },
            "aoColumns": [
                {"mData": "action", sortable: false},
                {"mData": "department"},
                {"mData": "from_date"},
                {"mData": "end_date"},
                {"mData": "sub_agent"},
                {"mData": "payable_commission"},
                {"mData": "total_paid"},
                {"mData": "remain_to_pay"},
                {"mData": "paid_transaction_date"},
                {"mData": "payment_mode"},
                {"mData": "remark"},
            ],
        });

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

            var total_payable_commission = responseData['totalAmounts']['total_payable_commission'];
            $("#total_payable_commission").html(total_payable_commission.toFixed(2));
            
            var paid_total = responseData['totalAmounts']['paid_total'];
            $("#paid_total").html(paid_total.toFixed(2));
            
            var remain_to_pay_total = responseData['totalAmounts']['remain_to_pay_total'];
            $("#remain_to_pay_total").html(remain_to_pay_total.toFixed(2));
        });

        

        assignDatePicker();

        var newOption = new Option("All Sub Agent", '-1', false, false);
        $('#filter_sub_agent_id').append(newOption).trigger('change');
        
        $("#department").select2({dropdownParent: $("#make-payment-modal .modal-body")});

        setupDatePair($('#from_date'), $('#end_date'), $('#filter_from_date'), $('#filter_end_date'), $('#paid_transaction_date'));

        var fromDate = new Date();
        fromDate.setDate(1);
        var endDate = new Date(fromDate.getFullYear(), fromDate.getMonth() + 1, 0);
        
        var fromDateFormatted = formatDate(fromDate);
        var endDateFormatted = formatDate(endDate);
        
        const datepickerIds = [
            "filter_from_date",
            "filter_end_date",
            "from_date",
            "end_date",
            "endo_from_date",
            "endo_end_date",
            "paid_transaction_date",
        ];
    
        datepickerIds.forEach(function(id) {
            dateValidations($("#" + id));
    
            $("#" + id).datepicker({
                format: "dd-mm-yyyy",
                autoclose: true,
                orientation: 'bottom',
            }).on('changeDate', function() {
                $('.datepicker').hide();
            });
        });
        
        $("#filter_from_date").val(fromDateFormatted).datepicker("setDate", fromDateFormatted);
        $("#filter_end_date").val(endDateFormatted).datepicker("setDate", endDateFormatted);

        $('#sub_agent_id').select2({
            ajax: {
                url: "{{ route('search.sub.agent') }}",
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search For Sub Agent',
            dropdownParent: $("#make-payment-modal .modal-body")
        });

        $('#filter_sub_agent_id').select2({
            ajax: {
                url: "{{ route('search.sub.agent') }}",
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    
                    var addOption = { id: -1, text: "All Sub Agent"};
                    data.results.unshift(addOption);
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search For Sub Agent',
        });

        $('#MakePaymentModal').on('click', function (e) {
            $('#make-payment-modal').modal('show');
            resetAllData();
        });

        $('#savePaymentHistory').on('click', function(e) {
            e.preventDefault();
            var generalFormData = new FormData($('#savePaymentHistoryData')[0]);

            $.ajax({
                type: 'POST',
                url: "{{ route('save.subagent.payment.history') }}",
                data: generalFormData,
                processData: false,
                contentType: false,
                beforeSend: function(){
                    showLoader();
                },
                success: function(resultData) {
                    hideLoader();
                    if (resultData['status'] == 1){
                        table.columns.adjust().draw();
                        
                        resetAllData();
                        toastr["success"](resultData['msg']);

                        $("#savePaymentHistoryData").removeClass('was-validated');
                        $('#make-payment-modal').modal('hide');

                    } else if (resultData['status'] == 0) {

                        if (typeof resultData['data'] !== "undefined") {
                            var size = Object.keys(resultData['data']).length;
                            if (size > 0) {
                                for (var [key, value] of Object.entries(resultData['data'])) {
                                    toastr["error"](value);
                                }
                            }
                        } else {
                            toastr["error"](resultData['msg']);
                        }
                        $("#savePaymentHistoryData").addClass('was-validated');
                    }
                }
            });
        });
        
        $('#department, #sub_agent_id, #from_date, #end_date').on('change input blur', function(event) {

            var changedElement = $(event.target).attr('id');
    
            var fromDate = $('#from_date').val();
            var endDate = $('#end_date').val();
            var department = $('#department').val();
            var subAgentId = $('#sub_agent_id').val();
            var recordId = $('#record_id').val();
        
            function isValidDate(dateString) {
                var regex = /^(\d{2})-(\d{2})-(\d{4})$/;
                if(!regex.test(dateString)) {
                    return false;
                }
    
                var parts = dateString.split('-');
                var day = parseInt(parts[0], 10);
                var month = parseInt(parts[1], 10) - 1;
                var year = parseInt(parts[2], 10);
    
                var date = new Date(year, month, day);
                return date.getFullYear() === year && date.getMonth() === month && date.getDate() === day;
            }
    
            if(subAgentId != '' && subAgentId != undefined && isValidDate(fromDate) && isValidDate(endDate)){
    
                $.ajax({
                    type: 'GET',
                    url: "{{ route('get.commission.subagent.payment.history') }}",
                    data : {
                        from_date : fromDate,
                        end_date : endDate,
                        department : department,
                        sub_agent_id : subAgentId,
                        record_id : recordId,
                    },
                    success: function(resultData) {
                        if (resultData['status'] == 1) {
    
                            var payableComm = resultData['payable_commission'];
                            if(payableComm > 0){
                                $('#payable_commission').val(payableComm.toFixed(2));
                                
                                if(resultData['record'] != null){
    
                                    actualTotalPaidAmount = 0;
                                    actualRemainToPayAmount = 0;
    
                                    actualTotalPaidAmount = resultData['record']['total_paid'];
                                    actualRemainToPayAmount = payableComm - actualTotalPaidAmount; 
                                        
                                    if(resultData['record'].length != 0){
                                        $('#total_paid').val(actualTotalPaidAmount.toFixed(2));
                                        $('#remain_to_pay').val(actualRemainToPayAmount.toFixed(2));
                                    }
                                }
                            }else{
                                $('#payable_commission').val(0);
                            }
                        }  
                    }
                });
            }else{
                $('#payable_commission').val(0.00);
            }
        });

        $('#make_a_payment').on('input blur', function(event) {
            var changedElement = $(event.target).attr('id');
            var payableCommission = parseFloat($('#payable_commission').val());
            var paymentAmt = parseFloat($('#make_a_payment').val());

            var setNewAmountInTotalPaidField = isNaN(actualTotalPaidAmount + paymentAmt) ? 0.00 : actualTotalPaidAmount + paymentAmt; 
            var setNewAmountInRemainToPayField = isNaN(actualRemainToPayAmount - paymentAmt) ? 0.00 : actualRemainToPayAmount - paymentAmt; 

            if(actualRemainToPayAmount == 0){
                setNewAmountInRemainToPayField = payableCommission - paymentAmt;
            }
         
            if(payableCommission > 0){
                if(payableCommission < paymentAmt){
                    toastr["error"]("Payment amount can not be greater than payable commission");
                    // $('#make_a_payment').val('');
                }
            }
            
            if(paymentAmt >= 0){                
                $('#total_paid').val(setNewAmountInTotalPaidField.toFixed(2));
                $('#remain_to_pay').val(setNewAmountInRemainToPayField.toFixed(2));
            }

            if(paymentAmt == NaN || $('#make_a_payment').val() == ''){
                $('#total_paid').val(isNaN(actualTotalPaidAmount) ? 0.00 : actualTotalPaidAmount.toFixed(2));
                $('#remain_to_pay').val(isNaN(actualRemainToPayAmount) ? 0.00 : actualRemainToPayAmount.toFixed(2));
            }
        });
    // });

    $(document).ready(function () {
        errorMessageShown = false;
        
        $('#filter_from_date, #filter_end_date, #filter_sub_agent_id').on('change keyup input', function() {
            clearTimeout(debounceTimeout); // Clear any previous timeout
            debounceTimeout = setTimeout(() => {
                if(checkPaymentHistoryValidation() == true) {
                    makeGeneralEntryAjaxRequest();
                }
            }, 300);
        });
    });
    
    makeGeneralEntryAjaxRequest();
    
    function makeGeneralEntryAjaxRequest() {
        if (isProcessing) {
            console.log("Request already in progress. Skipping...");
            return; // Skip if a request is in progress
        }
        isProcessing = true; // Set the flag
        $('#G_Datatable').DataTable().draw().on('draw', function() {
            isProcessing = false; // Reset the flag after redraw
        });
    }

    $(document).on("input paste", ".amount", function() {
        formatAmountInput($(this));
    });

    function checkPaymentHistoryValidation(){

        var fromDate = $('#filter_from_date').val();
        var endDate = $('#filter_end_date').val();
        var lifeAgency = $('#filter_sub_agent_id').val();

        var fromDateValid = isValidDateFormat(fromDate);
        var endDateValid = isValidDateFormat(endDate);

        if(fromDate && fromDateValid && endDate && endDateValid && lifeAgency) {
            return true;
        }else{
            return false;
        }
    }

    function isValidDateFormat(dateString) {
        var dateFormatRegex = /^\d{2}-\d{2}-\d{4}$/;
        return dateFormatRegex.test(dateString);
    }

    function recordHistory(id){
        $('#paymentHistoryView').modal('show');

        $.ajax({
            type: "GET",
            url: "{{ route('subagent.payment.history.detail') }}" + "?id=" +id,
            success: function(resultData) {

                var data = resultData['data'];
                var tableBody = $('#payment-history-table tbody');
                tableBody.empty();

                $('#paymentHistorylabel').text(resultData['sub_agent']);

                if (data.length === 0) {
                    var messageRow = $('<tr>').append($('<td colspan="3" class="text-center">').text('No data found'));
                    tableBody.append(messageRow);
                } else {
                    
                    $.each(data, function(index, item) {
                        var row = $('<tr>');
                        row.append($('<td>').text(index + 1));
                        row.append($('<td>').text(item.transaction_date));
                        row.append($('<td>').text(item.paid_amount));
                        tableBody.append(row);
                    });
                }
            }
        });
    }

    function editRecord(id) {
        $('#make-payment-modal').modal('show');

        $.ajax({
            type: 'GET',
            url: "{{ route('detail.subagent.payment.history') }}" + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {

                    actualTotalPaidAmount = 0;
                    actualRemainToPayAmount = 0;

                    $("#department").val(resultData['data']['department']).trigger('change');

                    var newOption = new Option(resultData['data']['sub_agent'], resultData['data']['sub_agent_id'], false, false);
                    $('#sub_agent_id').append(newOption).trigger('change');

                    $("#record_id").val(resultData['data']['id']);
                    $("#payable_commission").val(resultData['data']['payable_commission']);

                    var totalPaid = resultData['data']['total_paid'];
                    var remainToPay = resultData['data']['remain_to_pay'];
                    actualTotalPaidAmount = totalPaid;
                    actualRemainToPayAmount = remainToPay;
                    $("#total_paid").val(totalPaid.toFixed(2));
                    $("#remain_to_pay").val(remainToPay.toFixed(2));
                    $("#remark").val(resultData['data']['remark']);

                    $("#from_date").val(resultData['data']['from_date']).datepicker("setDate", resultData['data']['from_date']);

                    $("#end_date").val(resultData['data']['end_date']).datepicker("setDate", resultData['data']['end_date']);
                }
            }
        });
    }

    function resetAllData() {

        $("#savePaymentHistoryData").removeClass('was-validated');

        $('#sub_agent_id').empty();
        $('#department').val("General").trigger('change');
        $('#from_date, #end_date, #transaction_date, #paid_transaction_date').datepicker('destroy');
        $('#record_id, #payable_commission, #total_paid, #remain_to_pay, #make_a_payment, #payment_mode, #payment_mode, #remark').val('');
        actualTotalPaidAmount = 0;
        actualRemainToPayAmount = 0;

        assignDatePicker();
    }

    function assignDatePicker(){
        var datepickerIds = [
            "transaction_date",
            "from_date",
            "end_date",
            "paid_transaction_date",
        ];
    
        datepickerIds.forEach(function(id) {
            $("#" + id).val("");
            $("#" + id).datepicker({
                format: "dd-mm-yyyy",
                autoclose: true,
                orientation: 'bottom',
                container: '#make-payment-modal'
            }).on('changeDate', function() {
                $('.datepicker').hide();
            });
        });
    }

    $(function() {
        setupDatePair($('#from_date'), $('#end_date'));
        setupDatePair($('#filter_from_date'), $('#filter_end_date'));
        
        function setupDatePair(startDateInput, endDateInput) {
            var datepickerConfig = {
                format: 'dd-mm-yyyy',
                autoclose: true
            };

            startDateInput.datepicker(datepickerConfig).on('changeDate', function(e) {
                var endDate = endDateInput.datepicker('getDate');
                if (e.date > endDate) {
                    endDateInput.datepicker('setDate', null);
                    endDateInput.val("");
                }
            });

            endDateInput.datepicker(datepickerConfig).on('changeDate', function(e) {
                var startDate = startDateInput.datepicker('getDate');
                if (e.date < startDate) {
                    startDateInput.datepicker('setDate', null);
                    startDateInput.val("");
                }
            });
        }
    });

    function recordDelete(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) {
                $.ajax({
                    type: 'GET',
                    url: "{{ route('delete.subagent.payment.history') }}" + "?id=" + id,
                    success: function(resultData) {
                        if (resultData['status'] == 1) {
                            toastr["success"](resultData['msg']);

                            var table = $('#G_Datatable').DataTable();
                            table.columns.adjust().draw();
                        }
                    }
                });
            }
        });
    }

    $(".general-export-btn").on("click", function(event) {
        event.preventDefault();

        var type = $(this).data("type"); // "view" or "all"

        downloadPDF(type);
    });

    function downloadPDF(option) {
        $('#G_Datatable').DataTable().draw();
        
        var length = 0;
        var sDate = $("#filter_from_date").val();
        var eDate = $("#filter_end_date").val();

        if(sDate != "" && eDate != "" && option != "all"){

            var objectS = table.ajax.json();

            var objectSS = table.ajax.json().data;

            // for (var i = 0; i < objectSS.length; i++) {
            //     ids.push(objectSS[i]['id']);
            // }

            length = objectSS.length;
        }else if(option == "all"){
            var objectS = table.ajax.json();
            length = objectS.recordsFiltered;
        } else {

            var objectS = table.ajax.json().data;
            
            // for (var i = 0; i < objectS.length; i++) {
            //     ids.push(objectS[i]['id']);
            // }

            length = objectS.length;
        }

        var totalRecords = table.ajax.json().totalAmounts;

        if (length != 0) {
            $.ajax({
                type: 'POST',
                url: downloadPaymentHistoryPdf,
                "data": {
                    "_token": csrfToken,
                    // "ids": ids,
                    "from_date": function() { return $("#filter_from_date").val(); },
                    "end_date": function() { return $("#filter_end_date").val(); },
                    "sub_agent_id": function() { return $("#filter_sub_agent_id").val(); },
                },
                beforeSend: function() {
                    showLoader();
                },
                success: function(resultData) {
                    hideLoader();
                    path = resultData['path'];
                    window.open(path, '_blank');
                }
            });
        } else {
            toastr["error"]("There are no policy yet.");
        }
    }

</script>
@endsection