@csrf
{{-- root checkbox --}}
<div class="form-check form-switch form-check-custom form-check-danger form-check-solid me-10 mb-5">
    <input class="form-check-input h-30px w-50px" type="checkbox" value="" name="is_root" id="is_root"/>
    <label class="form-check-label" for="is_root">
        IsRoot
    </label>
</div>

<div id="course_container" style="display: none">
    <label class="required fw-semibold fs-6 mb-2" for="course">Course Name</label>
    <!--end::Label-->
    {{-- Select Course --}}
    <select name="course" id="course" class="form-select" data-allow-clear="true" data-control="select2" data-placeholder="Select a course">
        <option>{{old('course_id')}}</option>
        @foreach ($courses as $course)
           <option value="{{$course->cid}}" {{ $course->cid == $question_category->course_id || old('course_id') == $course->cid? 'selected' : '' }}>{{$course->acyname.'_'.$course->cname.' ( '.$course->lshort_name.' )'}}</option>
        @endforeach
    </select>
</div>
{{-- end course selection --}}

<div id="root_category_container" class="mt-5">
    <div class="mb-5" id="root_category">
        <label class="required fw-semibold fs-6 mb-2" for="parent_id">Parent Category</label>
        <select class="form-select" data-control="select2" id="parent_id" required name="parent_id" data-placeholder="Select a root category">
            <option></option>
            @foreach ($categories as $category)    
            <optgroup label="{{$category->category_name}}">
                <option value="{{$category->id}}">
                    {{$category->category_name}} 
                    @foreach ($category->children as $subcategory)    
                        <option value="{{$subcategory->id}}">
                        &nbsp;&nbsp;&nbsp;{{$subcategory->category_name}}
                        @foreach ($subcategory->children as $child)    
                            <option value="{{$child->id}}">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$child->category_name}}
                            </option>
                        @endforeach
                        </option>
                    @endforeach
                </option>
            </optgroup>    
            @endforeach
        </select>
    </div>
</div>


<!--begin::Label-->
<label class="required fw-semibold fs-6 mb-2" for="category_name">Category Name</label>
<!--end::Label-->
{{-- Category name --}}
@if(old('category_name') != null)
<input type="text" name="category_name" id="category_name" value="{{old('category_name')}}" class="form-control" required>
@elseif (isset($question_category))
<input type="text" name="category_name" id="category_name" value="{{$question_category->category_name}}" class="form-control" required>
@else
<input type="text" name="category_name" id="category_name" class="form-control" required>
@endif

@section('js')
<script>
    $('#is_root').on('change',function(){
        if($(this).is(':checked')){
            $('#root_category').css('display','none')
            $('#parent_id').removeAttr('required')
            $('#course_container').css('display','block')
            $('#course').attr('required',true)

        }else{
            $('#root_category').css('display','block')
            $('#course_container').css('display','none')
            $('#parent_id').attr('required',true)
            $('#course').removeAttr('required')
        }
    })
</script>
@endsection