@section('hierarchy-script')
<script>
    var edit_agency_type_id = "{{ isset($draft_data, $draft_data[0]->agency_type_id) ? $draft_data[0]->agency_type_id : null}}";
    var edit_agency_id = "{{ isset($draft_data, $draft_data[0]->agency_id) ? $draft_data[0]->agency_id : null}}";

    var edit_dept_dzo_id = "{{ isset($draft_data, $draft_data[0]->dept_dzo_id) ? $draft_data[0]->dept_dzo_id : null}}";
    var edit_division_id = "{{ isset($draft_data, $draft_data[0]->division_id) ? $draft_data[0]->division_id : null}}";
    var edit_field_regional_id = "{{ isset($draft_data, $draft_data[0]->field_regional_id) ? $draft_data[0]->field_regional_id : null}}";

    edit_agency_id = parseInt(edit_agency_id);
    edit_dept_dzo_id = parseInt(edit_dept_dzo_id);
    edit_division_id = parseInt(edit_division_id);
    edit_field_regional_id = parseInt(edit_field_regional_id);

        $('#agency_type_id').change(function(){
            var html_agency = "<option value='' disabled selected>--Select Any one--</option>";
            $('#agency_id').html(html_agency);
            $('#dept_dzo_id').html(html_agency);
            $('#division_id').html(html_agency);
            $('#field_regional_id').html(html_agency);

            var agency_type_id = $(this).val();
            $.ajax({
                url: "{{ route('get-assigned-agency') }}",    // api url
                type: "post",
                // headers: {
                //     "Authorization": "Bearer "+token
                // },
                data: {
                    _token: "{{ csrf_token() }}",
                    agency_type_id: agency_type_id 
                },
                success: function(response){
                    if(typeof(response) != "object"){
                        response = JSON.parse(response);
                    }

                    if(response.status){
                        $.each(response.data, function(key, value){

                            html_agency += '<option value="'+value.agency_id+'" ';
                            if(edit_agency_id != null && edit_agency_id == value.agency_id){
                                html_agency += " selected ";
                            }
                            html_agency += '>'+value['agency_info'].agency_name+"</option>";
                        });

                    }
                    $('#agency_id').html(html_agency);
                }
            });
        });

        $('#agency_id').change(function(){
            var agency_id = (edit_agency_id) ? edit_agency_id : $(this).val();
            
            var html_agency = "<option value='' disabled selected>--Select Any one--</option>";
            
            
            
            $('#dept_dzo_id').html(html_agency);
            $('#division_id').html(html_agency);
            $('#field_regional_id').html(html_agency);

            $.ajax({
                url: "{{ route('get-assigned-department') }}",    // api url
                type: "post",
                data: {
                    _token: "{{ csrf_token() }}",
                    agency_id: agency_id 
                },
                success: function(response){
                    if(typeof(response) != "object"){
                        response = JSON.parse(response);
                    }

                    var html_agency = "<option value='' disabled selected>--Select Any one--</option>";
                    
                    if(response.status){
                        $.each(response.data, function(key, value){
                            html_agency += '<option value="'+value.id+'"';
                            if(edit_dept_dzo_id != null && edit_dept_dzo_id == value.id){
                                html_agency += " selected ";
                            }
                            html_agency += '>'+value.dept_dzo_name+"</option>";
                        });

                    }
                    $('#dept_dzo_id').html(html_agency);
                }
            });
        });

        $('#dept_dzo_id').change(function(){
            
            var dept_dzo_id = edit_dept_dzo_id ? edit_dept_dzo_id : $(this).val();
            var agency_type_id = edit_agency_type_id ? edit_agency_type_id : $(this).val();
            var agency_id = edit_agency_id ? edit_agency_id : $(this).val();
            
            var html_agency = "<option value='' disabled selected>--Select Any one--</option>";
            $('#division_id').html(html_agency);
            $('#field_regional_id').html(html_agency);

            $.ajax({
                url: "{{ route('get-assigned-division') }}",    // api url
                type: "post",
                data: {
                    _token: "{{ csrf_token() }}",
                    agency_type_id: agency_type_id,
                    agency_id: agency_id,
                    dept_dzo_id: dept_dzo_id 
                },
                success: function(response){
                    if(typeof(response) != "object"){
                        response = JSON.parse(response);
                    }

                    var html_agency = "<option value='' disabled selected>--Select Any one--</option>";
                    
                    if(response.status){
                        $.each(response.data, function(key, value){
                            html_agency += '<option value="'+value.id+'"';

                            if(edit_division_id != null && edit_division_id == value.id){
                                html_agency += " selected ";
                            }
                            
                            html_agency += '>'+value.division_name+"</option>";
                        });

                    }
                    $('#division_id').html(html_agency);
                }
            });
        });

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

            var dept_dzo_id = $('#dept_dzo_id').val();
            var agency_type_id = $('#agency_type_id').val();
            var agency_id = $('#agency_id').val();

            var dept_dzo_id = edit_dept_dzo_id ? edit_dept_dzo_id : $(this).val();
            var agency_type_id = edit_agency_type_id  ? edit_agency_type_id : $(this).val();
            var agency_id = edit_agency_id ? edit_agency_id : $(this).val();
            var division_id = edit_division_id ? edit_division_id : $(this).val();
            

            var html_agency = "<option value='' disabled selected>--Select Any one--</option>";
            $('#field_regional_id').html(html_agency);
            
            $.ajax({
                url: "{{ route('get-assigned-fields') }}",    // api url
                type: "post",
                data: {
                    _token: "{{ csrf_token() }}",
                    agency_type_id: agency_type_id,
                    agency_id: agency_id,
                    dept_dzo_id: dept_dzo_id,
                    division_id: division_id
                },
                success: function(response){
                    if(typeof(response) != "object"){
                        response = JSON.parse(response);
                    }

                    var html_field_regional = "<option value='' disabled selected>--Select Any one--</option>";
                    
                    if(response.status){
                        $.each(response.data, function(key, value){
                            html_field_regional += '<option value="'+value.id+'"';

                            if(edit_field_regional_id != null && edit_field_regional_id == value.id){
                                html_field_regional += " selected ";
                            }
                            html_field_regional += '>'+value.field_regional_name+"</option>";
                        });

                    }
                    $('#field_regional_id').html(html_field_regional);
                }
            });
        });


        if(edit_agency_type_id){
            $('#agency_type_id').change();
        }
        if(edit_agency_id){
            $('#agency_id').change();
        }
        if(edit_dept_dzo_id){
            $('#dept_dzo_id').change();
        }
        if(edit_division_id){
            $('#division_id').change();
        }

    </script>
@endsection
<div class="row">
    <div class="col-6">
        <div class="form-group row">
            <label for="" class="col-sm-3">Agency Type: </label>
            <div class="col-9">
                <select name="agency_type_id" id="agency_type_id" class="form-control form-control-sm">
                    <option value="" disabled selected>--Select Any one--</option>
                    @if($agency_type_data)
                    @foreach($agency_type_data as $value)
                        <option value="{{ $value->agency_type_info['id'] }}" {{ isset($draft_data, $draft_data[0]->agency_type_id) && $draft_data[0]->agency_type_id == $value->agency_type_info['id'] ? 'selected' : ''}} >{{ $value->agency_type_info['agency_type'] }}</option>
                    @endforeach
                    @endif
                </select>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="form-group row">
            <label for="" class="col-sm-3">Agency: </label>
            <div class="col-9">
                <select name="agency_id" id="agency_id" class="form-control form-control-sm">
                    <option value="" disabled selected>--Select Any One--</option>
                </select>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-6">
        <div class="form-group row">
            <label for="" class="col-sm-3">Department: </label>
            <div class="col-9">
                <select name="dept_dzo_id" id="dept_dzo_id" class="form-control form-control-sm">
                    <option value="" disabled selected>--Select Any one--</option>

                </select>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="form-group row">
            <label for="" class="col-sm-3">Division: </label>
            <div class="col-9">
                <select name="division_id" id="division_id" class="form-control form-control-sm">
                    <option value="" disabled selected>--Select Any One--</option>
                </select>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-6">
        <div class="form-group row">
            <label for="" class="col-sm-3">Field Regional: </label>
            <div class="col-9">
                <select name="field_regional_id" id="field_regional_id" class="form-control form-control-sm">
                    <option value="" disabled selected>--Select Any one--</option>

                </select>
            </div>
        </div>
    </div>
</div>
<hr>