{{-- Layout --}}
@extends('teacher.layout.layout')
{{-- Page Title --}}
@section('title','GAS LMS | Create New Question Category')
{{-- Breadcrumb section --}}
@section('breadcrumb')
    @include('components._breadcrumb', ['items' => ['Create New Question Category' => route('teacher.questioncategory.create',$cid)]])
@endsection
{{-- Content --}}
@section('content')

@include('components._error')
    <!--begin::Card-->
<div class="card shadow-sm">
    <!--begin::Card header-->
    <div class="card-header border-0 pt-6">
        <!--begin::Card title-->
        <div class="card-title">
            <h4>Create New Question Category</h4>
        </div>
    </div>
    <div class="card-body py-4">
        <form action="{{route('teacher.questioncategory.store',$cid)}}" method="POST">

            @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->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->course->board->bname.'_'.$category->course->cname.' ( '.$category->course->level->lshort_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 --}}
            <input type="text" name="category_name" id="category_name" value="{{old('category_name')}}" class="form-control" required>

            <button type="submit" class="btn btn-primary mx-auto d-block w-45 mt-9">
                <!--begin::Svg Icon | path: icons/duotune/general/gen016.svg-->
                <span class="svg-icon svg-icon-3">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15.43 8.56949L10.744 15.1395C10.6422 15.282 10.5804 15.4492 10.5651 15.6236C10.5498 15.7981 10.5815 15.9734 10.657 16.1315L13.194 21.4425C13.2737 21.6097 13.3991 21.751 13.5557 21.8499C13.7123 21.9488 13.8938 22.0014 14.079 22.0015H14.117C14.3087 21.9941 14.4941 21.9307 14.6502 21.8191C14.8062 21.7075 14.9261 21.5526 14.995 21.3735L21.933 3.33649C22.0011 3.15918 22.0164 2.96594 21.977 2.78013C21.9376 2.59432 21.8452 2.4239 21.711 2.28949L15.43 8.56949Z" fill="currentColor"></path>
                        <path opacity="0.3" d="M20.664 2.06648L2.62602 9.00148C2.44768 9.07085 2.29348 9.19082 2.1824 9.34663C2.07131 9.50244 2.00818 9.68731 2.00074 9.87853C1.99331 10.0697 2.04189 10.259 2.14054 10.4229C2.23919 10.5869 2.38359 10.7185 2.55601 10.8015L7.86601 13.3365C8.02383 13.4126 8.19925 13.4448 8.37382 13.4297C8.54839 13.4145 8.71565 13.3526 8.85801 13.2505L15.43 8.56548L21.711 2.28448C21.5762 2.15096 21.4055 2.05932 21.2198 2.02064C21.034 1.98196 20.8409 1.99788 20.664 2.06648Z" fill="currentColor"></path>
                    </svg>
                </span>
                <!--end::Svg Icon-->Submit</button>
        </form>
    </div>
    </div>
    <!--end::Card-->

@endsection
@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