@php
    

$installment_repeats = [
    'Monthly',
    'Bi Monthly',
    'Quarterly',
    'Half Yearly',
    'Annually',
    'Balloon Payment Annually',
];

@endphp
   
   <input type="checkbox" id="edit_multi_installment"  />
       <label for="edit_multi_installment"><b>{{__('lang.edit_multi_installments')}}</b></label>
        <div id="edit_multi_installment_values_div" style="display: none">
            <table class="table  table-bordered" style="margin-bottom: 0px !important">
            
                <tr>
                    <th>{{__('lang.installment_type')}}</th>
                    <th>
                        <input type="checkbox" id="edit_start_date_check"  />
                        <label for="edit_start_date_check"><b>{{__('lang.starting_date')}}</b></label>
                    </th>
                    <th>
                        <input type="checkbox" id="edit_official_amount_check"  />
                        <label for="edit_official_amount_check"><b> @if($is_unofficial == 1){{__('lang.official')}} @endif {{__('lang.amount')}}  {{$transaction->systemSettingCurrency()}}</b></label>
                    </th>
                    @if ($is_unofficial == 1)
                        <th>
                            <input type="checkbox" id="edit_unofficial_amount_check"  />
                            <label for="edit_unofficial_amount_check"><b>{{__('lang.unofficial')}} {{$transaction->systemSettingCurrency()}}</b></label>
                        </th>
                    @endif
                </tr>
                <tr>
                    <td> 
                        <select data-live-search="true" class="form-control show-tick" id="edit_installment_repeats" name="edit_installment_repeats">
                            <option value="none">{{__('lang.select_installment_type')}}</option>
                            @foreach( $installment_repeats as $installment_type_name )
                                <option   value="{{ $installment_type_name }}">{{ $installment_type_name }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td>
                        <div id="bs_datepicker_container_table">
                            <input  value=""  name="edit_installment_date" type="text" class="form-control date-picker" placeholder=" {{__('lang.select_starting_installment_date')}}" >
                        </div>
                    </td>
                    <td>
                        <input  value=""  name="edit_official_amount" type="number" step="1" class="form-control " placeholder="@if($is_unofficial == 1){{__('lang.official')}} @endif {{__('lang.amount')}}" >
                    </td>

                    @if ($is_unofficial == 1)
                        <td>
                            <input  value=""  name="edit_unofficial_amount" type="number" step="1" class="form-control " placeholder="{{__('lang.unofficial_amount')}}" >
                        </td>
                    @endif
                </tr>
                <tr>
                    <td colspan="100%">
                        <button type="button" onclick="applyNewValues()" class="btn btn-primary">{{__('lang.apply_changes')}}</button>
                    </td>
                </tr>

            </table>
        </div>
    

@push('include-js')
<script>
    $('select[name=edit_installment_repeats]').on('change' ,function(){
    selectedEditInstallmentType();
});

$('#edit_multi_installment').change(function(){

    let target_div = $('#edit_multi_installment_values_div');

    if($('#edit_multi_installment').prop('checked') == true){

        target_div.fadeIn('slow');
    }else{
        target_div.fadeOut('slow');
        $('#installment_schedule').find('tr').removeClass('selected_installment');
        $('select[name=edit_installment_repeats]').val("");
        $('#edit_multi_installment_values_div :input').val('');
        $('select[name=edit_installment_repeats]').selectpicker('refresh');
        totalSale();
    }

})
function selectedEditInstallmentType(){

    let installment_type_name           = $('select[name=edit_installment_repeats]').val();
    let installment_schedule_tbody      = $('#installment_schedule');

    installment_schedule_tbody.find('tr').removeClass('selected_installment');
    let selected_installment_trs = installment_schedule_tbody.find(`tr:has(td input[value="${installment_type_name}"]):has(td input[name="schedule_check_box[]"])`);


    selected_installment_trs.addClass('selected_installment');
}

function applyNewValues(){

    animate();
    
    let installment_type_name           = $('select[name=edit_installment_repeats]').val();
    let installment_date_val            = $('input[name=edit_installment_date]').val();
    let official_amount_val             = $('input[name=edit_official_amount]').val();
        official_amount_val             = (official_amount_val) ? official_amount_val :0;
    let unofficial_amount_val           = $('input[name=edit_unofficial_amount]').val();
        unofficial_amount_val             = (unofficial_amount_val) ? unofficial_amount_val :0;

    let installment_schedule_tbody      = $('#installment_schedule');

    installment_schedule_tbody.find('tr').removeClass('selected_installment');

    let selected_installment_trs = installment_schedule_tbody.find(`tr:has(td input[value="${installment_type_name}"]):has(td input[name="schedule_check_box[]"])`);

    selected_installment_trs.addClass('selected_installment');


    // Sorting By Installment No
    selected_installment_trs.sort(function(a, b) {

        let installment_name_a = $(a).find('.installment_name').val();
        let installment_name_b = $(b).find('.installment_name').val();

        let digitA = parseInt(installment_name_a.match(/\d+$/)[0]);
        let digitB = parseInt(installment_name_b.match(/\d+$/)[0]);
      
        return digitA - digitB;
      });
      

      let repeat_frequency                = repeat_object[installment_type_name];
      let starting_date                   = installment_date_val.split("/").reverse().join("-");
      let current_date                    = new Date(starting_date);

    $.each(selected_installment_trs ,function(index,selected_tr){

        let installment_date    = $(selected_tr).find('input[name*="[schedule_date]"]');
        let official_amount     = $(selected_tr).find('input[name*="[payable_amount]"]');
        let unofficial_amount   = $(selected_tr).find('input[name*="[unofficial_payable_amount]"]');

    
        if(index > 0){
            current_date.setMonth(current_date.getMonth() + repeat_frequency);
        }

        next_date = getFormattedDate(current_date);

        let  edit_start_date_check = ($('#edit_start_date_check').prop('checked') == true)
        let  edit_official_amount_check = ($('#edit_official_amount_check').prop('checked') == true)
        let  edit_unofficial_amount_check = ($('#edit_unofficial_amount_check').prop('checked') == true)


        if(edit_start_date_check  &&  installment_date_val != "" && installment_date_val != null){
            installment_date.val(next_date);
        }

        if(edit_official_amount_check){
            official_amount.val(official_amount_val);
        }

        if(is_unofficial && edit_unofficial_amount_check){
            unofficial_amount.val(unofficial_amount_val);
        }
    })
    setTimeout(() => {
        animateStop();
    }, 500);
    totalSale();
}


</script>

@endpush