@php
    $income_expense_groups = \App\Models\IncomeExpenseGroup::get();
@endphp
@foreach ($financial_fields as $heading => $sub_setting_types )
<legend class="fieldset-label">{{$heading}}</legend>
    @foreach($sub_setting_types as  $sub_setting)

                @php 
                    $sub_setting_type               = $sub_setting[0];

                    $sub_setting_name               = $sub_setting[2] ?? '-';
                    $sub_setting_id                 = null;
                    $sub_setting_sub_group_id       = null;


                    if($sub_setting_type == 'coa_group'){

                        $code_name                              = $sub_setting[1] ?? null;

                        $sub_setting_id                         = $code_name.'_group_id';
                        $sub_setting_sub_group_id               = $code_name.'_sub_group_id';
                        $sub_setting_id_val                     = $financial_data->{$sub_setting_id};
                        $sub_setting_sub_group_id_val           = $financial_data->{$sub_setting_sub_group_id};

                    }else if($sub_setting_type == 'head_id'){
                        $head_id_name                           = $sub_setting[1] ?? null;       
                        $head_value                             = $financial_data->{$head_id_name};
                        $head_value                             = ($head_value)? $head_value : '';
                    }
                @endphp

                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-4" style="margin-top: 11px;">
                        <label class="form-label">{{$sub_setting_name}}</label>
                    </div> 

                @if($sub_setting_type == 'coa_group')
                    <div class="coa_group_div">
                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-4 group_div">
                            <div class="form-group form-float">
                                <div class="form-line focused">
                                    <select data-size="5" name="{{ $sub_setting_id }}" data-live-search="true" class="form-control show-tick" onChange="getSubGroup(this)">
                                        <option value="0" selected="">{{__('lang.select_group')}}</option>
                                        @foreach ($income_expense_groups as $income_expense_group)
                                            
                                            <option value="{{$income_expense_group->id}}" 
                                                @if ($sub_setting_id_val == $income_expense_group->id) selected  @endif >
                                                    {{$income_expense_group->code}}.{{$income_expense_group->name}}
                                            </option>

                                        @endforeach
                                    </select>
                                    <label class="form-label">{{__('lang.group')}}</label>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-4 sub_group_div">
                            <div class="form-group form-float">
                                <div class="form-line focused">
                                    <select  data-val="{{ $sub_setting_sub_group_id_val }}" data-size="5"  name="{{ $sub_setting_sub_group_id }}" data-live-search="true" class="form-control show-tick">
                                    </select>
                                    <label class="form-label">{{__('lang.sub_group')}}</label>
                                </div>
                            </div>
                        </div>
                    </div>

                @elseif($sub_setting_type == 'head_id')

                    <div class="col-lg-8 col-md-8 col-sm-6 col-xs-4">
                        <div class="form-group form-float">
                            <div class="form-line focused">
                                <select name="{{$head_id_name }}" data-value="{{ $head_value }}" class="incomeExpenseHeadsOptions"></select>
                            </div>
                        </div>
                    </div>
                @endif

                </div>

    @endforeach
@endforeach

@push('include-js')

<script>

    $(document).ready(function(){
        setAllSubGroups();
    })


    function setAllSubGroups(){
        let coa_group_divs = $('.coa_group_div');
    
        $.each(coa_group_divs,function(index,coa_group_div){
            getSubGroup($(coa_group_div).find('.group_div select'));
        })
    }

    function getSubGroup(e){

        let coa_group_div = $(e).closest('.coa_group_div');

        let group_id_val            =   $(coa_group_div).find('.group_div select').val();
        let subgroup_select         =   $(coa_group_div).find('.sub_group_div select');
        let default_subgroup_id     =   subgroup_select.data('val');

        let sub_group_options_html  = '<option value="0">Select Sub Group</option>';
        subgroup_select.html(sub_group_options_html).selectpicker('refresh');

        let post_object             = new Object();
        post_object.group_id        = group_id_val;
        post_object._token          = $('meta[name="csrf-token"]').attr('content');

        $.ajax({
            type     : 'POST',
            data     :  post_object,
            url      :  "{{ route('searchlist.subgroup') }}",
            dataType : 'json',
            success: function(response){
                if(response?.type=='SUCCESS'){
                    let sub_groups =  response?.data;

                    $.each(sub_groups,function(index,value){
                        let selected            = default_subgroup_id == value.id ? 'selected' : '';
                        sub_group_options_html += `<option ${selected} value="${value.id}">${value.group_code}.${value.code}.${value.name}</option>`;
                    })
                }else{
                    console.log('error',response);
                    setTimeout(function() { location.reload();}, 1000);
                }
                subgroup_select.html(sub_group_options_html).selectpicker('refresh');

            },
            error: function(error) {
                    console.log('Income Expense GROUP AJAX request failed.');
                    setTimeout(function() { location.reload();}, 1000);
                },
        });

        // setTimeout(function() {}, 10);

    }

</script>


@endpush