@php
        $surchargeCheck = $surchargeCheck ?? null;
        $receipt_id     = $receipt_id ?? null;
        $receipt_type   = $receipt_type ?? 'multiple';
@endphp
@push('include-css')

<style>
    .surcharge_mop td{
        font-size: 12px;
        padding:5px !important;

    }
    .readOnlyField input {
        background-color: rgb(248, 244, 244) !important
    }
</style>

@endpush
 
               
<div class="card" id="surcharge_main_div" style="display: none">
    <div class="header">
        <h2>Surcharges</h2>
    </div>
    <br>
    
    <div class="body"  id="surcharge_div">
        
        
    </div>
</div>
 


@push('include-js')


    <script>
        var   systemCurrency        = "{{$transaction->systemSettingCurrency()}}";
        const surchargeCheck        = "{{ $surchargeCheck }}";
        const getSurchargeDataAjax  = "{{ route('schedule_manage.get_surcharge_data') }}";

        const debouncedSurchargeData = debounce(getSurchargeData, 700);
        let user_surcharge_record = {};


        $(document).ready(function() {

            getSurchargeData();
        });

        $('select[name=made_of_payment]').change(function(){

            let value = $(this).val();

            let surcharge_mode_of_payments =  $('.surcharge_table select[name*="[mode_of_payment]"]');

            $.each(surcharge_mode_of_payments,function(index,surcharge_mode_of_payment){

                let current_value = $(surcharge_mode_of_payment).val();


                if(!current_value){
                    $(surcharge_mode_of_payment).val(value).trigger('change');
                }

            })
        })

        $('select[name=bank_id]').change(function(){

            let value = $(this).val();

            let surcharge_bank_ids =  $('.surcharge_table select[name*="[bank_id]"]');

            $.each(surcharge_bank_ids,function(index,surcharge_bank_id){

                let current_value = +$(surcharge_bank_id).val();



                if(!current_value || current_value == 0){
                    $(surcharge_bank_id).attr('data-val',value).trigger('change');
                    $(surcharge_bank_id).closest('tr').find('select[name*="[mode_of_payment]"]').trigger('change');
                }
            })

        })


        function getSurchargeData(){


            // if(!surchargeCheck){
            //     return;
            // }

            let schedules_data = [];
            const receipt_id    = "{{ $receipt_id }}";
            const receipt_type  = "{{ $receipt_type }}";

            if(receipt_type == 'multiple'){
                $.each($('input[name*="schedule_receivable_id"]'),function(index,field){

                    const closest_row   =  $(field).closest('.row');

                    const schedule_id   = closest_row.find('input[name*="schedule_receivable_id"]').val();
                    const amount        = closest_row.find('input[name*="current_amount"]').val();

                    schedules_data.push({
                        receipt_id,
                        schedule_id,
                        amount
                    });

                })
            }
            else if(receipt_type == 'direct'){
              
                $.each($('.schedule_row'), function (index, row) {
                  
                    let schedule_id     = $(row).find('input[name*="schedule_receivable_id"]').val();
                    let amount_fields   = $(row).find('input[name*="current_amount"]');
                    let amount          = 0;

                    $.each(amount_fields, function (index, amount_field) {
                        amount += Number($(amount_field).val());
                    });

                    schedules_data.push({
                        receipt_id,
                        schedule_id,
                        amount,
                    });
                });
            }

            let receiving_date = $('input[name=date_of_collection]').val();

            let post_data = {
                schedules_data,
                receiving_date,
                receipt_id
            }

            $.ajax({
                url         :   getSurchargeDataAjax,
                type        :   'POST',
                data        :   post_data ,
                dataType    :   'json',
                headers     :   { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
                success:function(response){

                if(response.status == true){

                    if(response.schedules_data.length == 0){
                        $('#surcharge_main_div').hide();
                    }
                    else{
                        $('#surcharge_main_div').fadeIn('slow');
                    }

                    let table_html =  buildAfterDueDateTable(response.schedules_data);
                    $('#surcharge_div').html(table_html);
                    setSurchargeWaived();

                    $('.surcharge_tr select').selectpicker({
                        container: 'body'
                    });

                    $('.surcharge_table select[name*="[mode_of_payment]"]').trigger('change');


                    if(surchargeCheck == 1){
                        // $('#surcharge_main_div').fadeIn('slow');

                    }

                }
                }
            })

            function buildAfterDueDateTable(schedules_data){

                let child_tr_html = "";
                $.each(schedules_data,function(index,schedule_data){

                    child_tr_html += dueDateSurchargeTr(schedule_data);
                })

                let surcharge_block_class = schedules_data[0]?.surcharge_type == 'fixed_blocks' ? '' : 'hide';

                let html =`
                    <table class="table table-bordered surcharge_table">
                        <tr>
                            <th>Term</th>    
                            <th>No. Of Late Days</th>    
                            <th class="dis-none">Total Schedule Surcharge ${systemCurrency}</th>    
                            <th class="${surcharge_block_class}">Surcharge Block</th>    
                            <th>Current Surcharge ${systemCurrency}</th>    
                            <th>Discount ${systemCurrency}</th>    
                            <th>Net Surcharge ${systemCurrency}</th>    
                            <th>Surcharge Payment ${systemCurrency}</th>  
                            <th>Waive</th>    
                        </tr>

                        ${child_tr_html}
                    
                    </table>
                `

                return html;
            }
            


            function dueDateSurchargeTr(schedule_data){

                let schedule_surcharge_id  = schedule_data?.schedule_surcharge_id ?? '';
                let schedule            = schedule_data?.schedule;
                let schedule_id         = schedule?.id;
                let term                = schedule?.term;
                let no_of_days          = schedule_data?.no_of_days;
                let total_surcharge     = schedule_data?.total_surcharge;
                let current_surcharge   = schedule_data?.current_amount_surcharge;
                let discount_surcharge  = schedule_data?.discount_amount ?? 0;
                let is_waived           = schedule_data?.is_waived;
                let mode_of_payment     = schedule_data?.mode_of_payment;
                let bank_id             = schedule_data?.bank_id;
                let payment             = schedule_data?.payment
                let surcharge_block_class = schedule_data?.surcharge_type == 'fixed_blocks' ? '' : 'hide';

                let unique_id           = generateUniqueId();
                let name_prefix         = `surcharges[${unique_id}]`;

                let surcharge_blocks    = "";

                let block_names         = [];
                let blocks_inputs       = [];

                $.each(schedule_data.blocks , function(index,block){

                    let block_name    =  block?.description ;
                   
                    block_names.push(block_name);
                    blocks_inputs.push(`<input type="hidden" name="${name_prefix}[blocks][${block.block}][block]"   value="${block.block}" >`)
                    blocks_inputs.push(`<input type="hidden" name="${name_prefix}[blocks][${block.block}][amount]"  value="${block.surcharge}" >`)
                    blocks_inputs.push(`<input type="hidden" name="${name_prefix}[blocks][${block.block}][type]"    value="${block.type}" >`)
                })

                surcharge_blocks = block_names.join('<br>');

                let waived_record_exists = user_surcharge_record[schedule_id] ?? null;
                if(waived_record_exists){
                    is_waived           = waived_record_exists?.is_waived;
                    payment             = waived_record_exists?.payment;
                    discount_surcharge  = waived_record_exists?.discount_amount;
                    mode_of_payment     = waived_record_exists?.mode_of_payment;
                    bank_id             = waived_record_exists?.bank_id;
                }

                let net_surcharge       = current_surcharge - discount_surcharge;
                let modes = [
                    'Bank',
                    'Cash',
                    'Online Transfer',
                    'Cheque In Hand',
                    'Other'
                ];
              
                let mode_options   =   getModeOfPaymentOptions(mode_of_payment);
              

                let surcharge_html = `
                    <tr class="surcharge_tr">
                        <td>
                            ${blocks_inputs.join('')}
                            <input type="hidden" name="${name_prefix}[schedule_surcharge_id]"                  value="${schedule_surcharge_id}" >
                            <input type="hidden" name="${name_prefix}[schedule_id]"     class="schedule_id"     value="${schedule_id}" >
                            <input type="hidden" name="${name_prefix}[no_of_days]"      class="no_of_days"      value="${no_of_days}"> 
                            <input type="hidden" name="${name_prefix}[amount]"          class="amount"          value="${current_surcharge}" >
                            <input type="hidden" name="${name_prefix}[net_surcharge]"   class="net_surcharge"   value="${net_surcharge}"> 

                            <table class="surcharge_mop">

                                <tr>
                                    <td colspan="100%" class="text-center">
                                        <b>${term}</b>
                                    </td>
                                </tr>
                                <tr >
                                    <td><b>Mode Of Payment</b></td>    
                                    <td><b>Bank / Cash</b></td>    
                                </tr>
                                
                                <tr>
                                    <td>
                                        <select class="mode_of_payment" data-live-search="true" name="${name_prefix}[mode_of_payment]" 
                                            onchange="getModeOfPaymentBanks(this)">
                                            ${mode_options}
                                        </select>
                                    </td>
                                    <td>
                                          <select class="bank_id" data-live-search="true" name="${name_prefix}[bank_id]" data-val="${bank_id}" onchange="updateSurchargeRecord(this)">
                                        </select>
                                    </td>
                                </tr>
                                
                            </table>

                            </td>
                        <td>${no_of_days}</td>
                        <td  class="dis-none">${total_surcharge.toLocaleString()}</td>
                        <td class="${surcharge_block_class}" >${surcharge_blocks}</td>
                        <td class="current_surcharge">${current_surcharge.toLocaleString()}</td>
                        <td> <input class="form-control discount_amount" name="${name_prefix}[discount_amount]" type ="number" value="${discount_surcharge}" onkeyup="setNetAmount(this);updateSurchargeRecord();"> </td>
                        <td> 
                            <span class="net_surcharge_text"> ${net_surcharge.toLocaleString()} </span>
                        </td>
                        <td class="payment_td "> 

                            

                            <input class="form-control payment" name="${name_prefix}[payment_amount]" type ="number"
                                            value="${payment}" onkeyup="updateSurchargeRecord()"> 
                        </td>

                        <td> 
                            <div class="switch">
                                <label>
                                    <input name="${name_prefix}[is_waived]" class="waived" type="checkbox" value="1" ${is_waived ? 'checked' :''} onchange="setSurchargeWaived();" ><span
                                    class="lever switch-col-cyan"></span>
                                </label>
                            </div>
                        </td>
                    </tr>
                `;

                return surcharge_html;

            }


        }

        function setNetAmount(e){

            let closestTr           = $(e).closest('tr');
            let surcharge_amount    = parseNumber(closestTr.find('.current_surcharge').text());
            let discount_amount     = closestTr.find('.discount_amount').val();
            let net_surcharge       = surcharge_amount - discount_amount;

            closestTr.find('.net_surcharge').val(net_surcharge);
            closestTr.find('.net_surcharge_text').text(net_surcharge.toLocaleString());
        }


        function setSurchargeWaived(){

            $.each($('.surcharge_tr'),function(index,tr){

                let is_waived       = $(tr).find('.waived:checked').val();
                let schedule_id     = $(tr).find('.schedule_id').val();
                let payment_input   = $(tr).find('.payment');
                let payment_td      = $(tr).find('.payment_td');

                if(is_waived){
                    payment_td.addClass('readOnlyField');
                    payment_input.val(0).trigger('change');
                }else{
                    payment_td.removeClass('readOnlyField');
                }

            })

            updateSurchargeRecord();

        }


        function updateSurchargeRecord(){

            $.each($('.surcharge_tr'),function(index,tr){

                let is_waived           = $(tr).find('.waived:checked').val();
                let schedule_id         = $(tr).find('.schedule_id').val();
                let payment             = $(tr).find('.payment').val();
                let discount_amount     = $(tr).find('.discount_amount').val();
                let mode_of_payment     = $(tr).find('select.mode_of_payment').val();
                let bank_id             = $(tr).find('select.bank_id').val();

                let record = {
                    is_waived       :  is_waived ? true : false,
                    payment         :  payment,
                    discount_amount :  discount_amount,
                    mode_of_payment :  mode_of_payment,
                    bank_id         :  bank_id,

                }
                user_surcharge_record[schedule_id] = record;
            })

        }

        function validateSurchargePayment(){

            let passed = true;

            $.each($('.surcharge_tr'),function(index,surcharge_tr){


                let net_amount           = +$(surcharge_tr).find('.net_surcharge').val();
                let payment              = +$(surcharge_tr).find('.payment').val();
                let mode_of_payment      = $(surcharge_tr).find('select[name*="[mode_of_payment]"]').val();
                let bank_id              = +$(surcharge_tr).find('select[name*="[bank_id]"]').val();

                if(net_amount < 0){
                    passed      = false;
                    toastr.error("Discount Cannot Be Greater Than Total Amount");
                }
                if(payment  > net_amount){
                    passed      = false;
                    toastr.error("Payment Cannot Be Greater Than Surcharge Amount");
                }

                if(payment > 0 && (mode_of_payment == "" || !mode_of_payment)){
                    passed      = false;
                    toastr.error("Select Mode Of Payment");
                }
                if(payment > 0 && !bank_id){
                    passed      = false;
                    toastr.error("Select Bank/Cash");
                }
            })

            return passed;
        }


 
     

        $(`input[name="date_of_collection"]`).on("change",function(e){

            getSurchargeData();
        })

        function getModeOfPaymentBanks(elem){

            let mode_of_payment = $(elem).val();

            let bank_field       = $(elem).closest('tr').find('select.bank_id');
            let previous_bank_id = bank_field.attr('data-val');

            if(!mode_of_payment){
                return;
            }

            $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: "{{ route('actual_received.mode.change') }}",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        mode: mode_of_payment,
                        is_official: 1

                    },
                    success: function(data) {
                        if (data) {
                            bank_field.empty();
                            let SelectItem = 'Bank';

                            if (mode_of_payment == 'Cash') {
                                SelectItem = 'Cash Account';
                            } else if (mode_of_payment == 'Other') {
                                SelectItem = 'Account';
                            }
                            let option = `<option value="0">Select ` + SelectItem + ` </option>`;

                            if (data && Object.keys(data).length > 0) {
                                $.each(data, function(value, account) {
                                    let optionSelected = '';
                                
                                    if (previous_bank_id && account.id == previous_bank_id) {
                                        optionSelected = 'selected';
                                    }
                                    let account_name =  `${account.name} (${account.reference_type})`
                                    option += `<option ${optionSelected} value="${account.id}">${account_name}</option>`
                                });
                            } else {
                                option += `<option value="" >No Head Found</option>`;
                            }
                            bank_field.html(option).selectpicker('refresh');

                            updateSurchargeRecord();
                        }
                    }
                });
        }



    </script>

@endpush