@php
    $select_all = old('select_all', $data->select_all ?? 0) === 1; 
    $dataMap = getDataMapByClient();
    $campus_ids = json_decode($data->campus_id ?? '', true);
    $campus_ids = is_array($campus_ids) ? $campus_ids : [];

    $degree_ids = json_decode($data->degree_specialization_id ?? '', true);
    $degree_ids = is_array($degree_ids) ? $degree_ids : [];

    $department_ids = json_decode($data->department_mng_id ?? '', true);
    $department_ids = is_array($department_ids) ? $department_ids : [];

    $batch_ids = json_decode($data->batch_id ?? '', true);
    $batch_ids = is_array($batch_ids) ? $batch_ids : [];
    
    $section_ids = json_decode($data->section_id ?? '', true);
    $section_ids = is_array($section_ids) ? $section_ids : [];
@endphp
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <input type="checkbox" id="select_all" name="select_all" value="1" {{ $select_all ? 'checked' : '' }}>
            <label style="margin-left: 5px" for="select_all">Select All</label>
        </div>
    </div>
</div>

<div class="row filter_container" style="display: {{ $select_all ? 'none' : 'flex' }}">
    <div class="col-md-6">
        <div>
            <label for="">Select Campus <span class="text-red">*</span></label>
            <select class="js-example-data-array select2" name="campus_id[]" id="campus_id" multiple="multiple">
                @foreach ($dataMap['campuses'] as $campus)
                    @php
                        $selected = "";
                        if (in_array($campus->id, $campus_ids)) {
                            $selected = "selected";
                        }
                        @endphp
                    <option value="{{$campus->id}}" {{$selected}}>{{$campus->campus_title}} -- {{$campus->campus_location}}</option>
                @endforeach
            </select>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Select Degree <span class="text-red">*</span></label>
            <select class="js-example-data-array" name="degree_specialization_id[]" id="degree_specialization_id" multiple>
            @if(count($campus_ids) > 0 && !empty($dataMap['degreesMap']))
                @foreach($campus_ids as $key => $campus_id)
                    @if(!empty($dataMap['degreesMap'][$campus_id]))
                        @foreach($dataMap['degreesMap'][$campus_id] as $degree)
                            @php
                                $selected = "";
                                if (in_array($degree['id'], $degree_ids)) {
                                    $selected = "selected";
                                }
                            @endphp
                            <option value="{{$degree['id']}}" {{$selected}}>{{$degree['title']}}</option>
                        @endforeach
                    @endif
                @endforeach
            @endif
            </select>
        </div>
    </div>
     <div class="col-md-6">
        <div class="form-group">
            <label for="">Select Department <span class="text-red">*</span></label>
            <select class="js-example-data-array" name="department_mng_id[]" id="department_mng_id" multiple>
                @if(count($degree_ids) > 0 && !empty($dataMap['departmentsMap']))
                    @foreach($degree_ids as $depkey => $depvalue)
                        @if(!empty($dataMap['departmentsMap'][$depvalue]))
                            @foreach($dataMap['departmentsMap'][$depvalue] as $department)
                                @php
                                    $selected = "";
                                    if (in_array($department['id'], $department_ids)) {
                                        $selected = "selected";
                                    }
                                @endphp
                                <option value="{{$department['id']}}" {{$selected}}>{{$department['title']}}</option>
                            @endforeach
                        @endif
                    @endforeach
                @endif
            </select>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Select Batch <span class="text-red">*</span></label>
            <select class="js-example-data-array" class="form-control" name="batch_id[]" id="batch_id" multiple>
                @if(count($department_ids) > 0 && !empty($dataMap['batchesMap']))
                    @foreach ($department_ids as $department_id)
                        @if(!empty($dataMap['batchesMap'][$department_id]))
                            @foreach ($dataMap['batchesMap'][$department_id] as $batch)
                                @php
                                    $selected = "";
                                    if (in_array($batch['id'], $batch_ids)) {
                                        $selected = "selected";
                                    }
                                @endphp
                                <option value="{{$batch['id']}}" {{$selected}}>{{$batch['title']}}</option>
                            @endforeach 
                        @endif
                    @endforeach
                @endif
            </select>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Select Section <span class="text-red">*</span></label>
            <select class="js-example-data-array" name="section_id[]" id="section_id" multiple>
            @if(count($batch_ids) > 0 && !empty($dataMap['sectionsMap']))
                @foreach($batch_ids as $depkey => $batch_id)
                    @if(!empty($dataMap['sectionsMap'][$batch_id]))
                        @foreach($dataMap['sectionsMap'][$batch_id] as $section)
                            @php
                                $selected = "";
                                if (in_array($section['id'], $section_ids)) {
                                    $selected = "selected";
                                }
                            @endphp
                            <option value="{{$section['id']}}" {{$selected}}>{{$section['title']}}</option>
                        @endforeach
                    @endif
                @endforeach
            @endif
            </select>
        </div>
    </div>
</div>
@push('script')
<link href="{{ asset('assets/select2/css/select2.min.css') }}" rel="stylesheet" />
<script src="{{ asset('assets/select2/js/select2.min.js') }}"></script>
<script>
$( document ).ready(function() {
    $(".js-example-data-array").select2({
        data: []
    });
    let degreeMap = JSON.parse(`null`);
    let departmentsMap = JSON.parse(`null`);
    let batchesMap = JSON.parse(`null`);
    let sectionsMap = JSON.parse(`null`);
    changeCampus()
    $('[name="campus_id[]"]').on('change',function (){
        changeCampus()
    });
    function changeCampus(){
        let id = $('[name="campus_id[]"]').val();
        let current_selected = $('[name="degree_specialization_id[]"]').val();
        let html = ``;
        if(id !== ""){
            for (let index = 0; index < id.length; index++) {
                let element = id[index];
                $.each( degreeMap[element], function( key, value ) {
                    let selected = '';
                    if (current_selected.includes(`${value.id}`)) {
                        selected = 'selected';
                    }
                    html += `<option value="${value.id}" ${selected}>${value.title}</option>`;
                });
            }
        }
        $('[name="degree_specialization_id[]"]').html(html).change();
    }
    $('[name="degree_specialization_id[]"]').on('change',function (){
        let id = $('[name="degree_specialization_id[]"]').val();
        let current_selected = $('[name="department_mng_id[]"]').val();
        let html = ``;
        if(id !== ""){
            for (let index = 0; index < id.length; index++) {
                let element = id[index];
                $.each( departmentsMap[element], function( key, value ) {
                    let selected = '';
                    if (current_selected.includes(`${value.id}`)) {
                        selected = 'selected';
                    }
                    html += `<option value="${value.id}" ${selected}>${value.title}</option>`;
                });
            }
        }
        $('[name="department_mng_id[]"]').html(html).change();
    });

    $('[name="department_mng_id[]"]').on('change',function (){
        let id = $('[name="department_mng_id[]"]').val();
        let current_selected = $('[name="batch_id[]"]').val();
        let html = ``;
        if(id !== ""){
            for (let index = 0; index < id.length; index++) {
                let element = id[index];
                $.each( batchesMap[element], function( key, value ) {
                    let selected = '';
                    if (current_selected.includes(`${value.id}`)) {
                        selected = 'selected';
                    }
                    html += `<option value="${value.id}" ${selected}>${value.title}</option>`;
                });
            }
        }
        $('[name="batch_id[]"]').html(html).change();
    });

  
    $('[name="batch_id[]').on('change',function (){
        let id = $('[name="batch_id[]"]').val();
        let current_selected = $('[name="section_id[]"]').val();
        let html = ``;
        if(id !== ""){
            for (let index = 0; index < id.length; index++) {
                let element = id[index];
                $.each( sectionsMap[element], function( key, value ) {
                    let selected = '';
                    if (current_selected.includes(`${value.id}`)) {
                        selected = 'selected';
                    }
                    html += `<option value="${value.id}" ${selected}>${value.title}</option>`;
                });
            }
        }
        $('[name="section_id[]"]').html(html);
    });

    $('#select_all').on('click',function(){
        if($('#select_all').is(':checked')){
            $('.filter_container').css('display','none');
        }else{
            $('.filter_container').css('display','flex');
        }
    });
});
</script>
@endpush