@php
    if(is_array($data)){
        $data = (object) $data;
    }

    $mode_of_payment_array = array_filter([
        $data->made_of_payment,
        old('mode_of_payment'),
        request()->get('mode_of_payment')
    ]);

    $mode_of_payment = collect($mode_of_payment_array)->first();
@endphp
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <div class="form-group form-float">
        <div class="form-line">
            <select class="form-control show-tick" name="made_of_payment" data-live-search="true">
                <option value="0">{{__('lang.select_mode_of_payment')}}</option>
                @foreach(App\Models\ModeOfPayment::get() as $payment_mode)
                    <option @if(strtolower($mode_of_payment) == strtolower($payment_mode->name)) selected @endif 
                        value="{{$payment_mode->name}}" data-type="{{$payment_mode->type}}">
                        {{ $payment_mode->name }}
                    </option>
                @endforeach
            </select>
            <label class="form-label required-field">{{__('lang.mode_of_payment')}}</label>
        </div>
    </div>
</div>

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" id="container_bank">
    <div class="form-group form-float">
        <div class="form-line">
            <select class="form-control show-tick" name="bank_id" id="bank_id" data-live-search="true">
            </select>
            <label class="form-label required-field">{{__('lang.account')}}</label>

        </div>
    </div>
</div>



@push('include-js')
    <script>

        let previous_bank_id = '{{ $data->bank_id ?? '' }}';
        let mode_of_payment = "{{ request()->get('mode_of_payment') ?: ($data->made_of_payment ?? null) }}";


        function getHeads() {
            var mode = $('select[name=made_of_payment]').val();
            var is_official = $('[name=is_official]:checked').val();
            
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: "{{ route('actual_received.mode.change') }}",
                data: {
                    mode: mode,
                    is_official: is_official

                },
                success: function(data) {
                    if (data) {
                        $("#bank_id").empty();
                        let SelectItem = 'Bank';

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

                        if (data && Object.keys(data).length > 0) {
                            $.each(data, function(value, index) {
                                let optionSelected = '';
                            
                                if (previous_bank_id && index.id == previous_bank_id) {
                                    optionSelected = 'selected';
                                }

                                option += `<option value="` + index.id + `" ` +
                                    optionSelected + ` >` +
                                    index.name + ` (`+index.reference_type.charAt(0).toUpperCase() + index.reference_type.slice(1)+`)`+ `</option>`;
                            });
                        } else {
                            option += `<option value="" >No Head Found</option>`;
                        }
                        $("#bank_id").html(option);
                        $("#bank_id").selectpicker('refresh');
                    }
                }
            });
        }
    
        $("select[name=made_of_payment]").change(function() {
            getHeads();
        });

        animate();  
        
        $(document).ready(function(){

            if(previous_bank_id || mode_of_payment){
                getHeads();
            }
            animateStop();

        })
    </script>
@endpush