@extends('admin/course-management/course-details/index')

@section('main-content-tab')
<form action="{{route('facility.store', ['institute_slug' => $institute_slug, 'course_slug' => $course_slug])}}" name="institute" class="form mb-15" method="POST" id="kt_contact_form" enctype="multipart/form-data">
    @csrf
    <h1 class="fw-bolder text-dark mb-9">Create Facility</h1>
    <!--begin::Input group-->
    <div class="row mb-3">
    <!--begin::Col-->
        <div class="col-md-6 pe-lg-10">
            <!--begin::Form-->
            <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class="required fs-5 fw-bold mb-2">Facilities</label>
                <select multiple id="facilities_id" class="form-select form-select-solid" data-control="select2" data-placeholder="Select Facilities" name="facilities_id[]" required>
                    {{-- <option disabled>Select Facilities</option> --}}
                    @foreach($all_facilities as $facility)
                    <option value="{{$facility->id}}"> {{$facility->title}}</option>
                    @endforeach
                </select>
                @if($errors->has('facilities_id'))
                    <span class="text-danger">{{ $errors->first('facilities_id') }}</span>
                @endif

                {{-- <label class="required fs-5 fw-bold mb-2">Title (EN)</label> --}}
                <!--end::Label-->
                <!--begin::Input-->
                {{-- <input value="{{old('title')}}" type="text" class="form-control form-control-solid" placeholder="Enter Title (EN)" name="title" autocomplete="off"/> --}}
                <!--end::Input-->
            </div>
            {{-- <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class="fs-5 fw-bold mb-2">Title (BN)</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input value="{{old('title_bn')}}" type="text" class="form-control form-control-solid" placeholder="Enter Title (BN)" name="title_bn" autocomplete="off"/>
                @if($errors->has('title_bn'))
                    <span class="text-danger">{{ $errors->first('title_bn') }}</span>
                @endif

                <!--end::Input-->
            </div>
            <div class="d-flex flex-column mb-5 fv-row">
                <label class="required fs-5 fw-bold mb-2">Description (EN)</label>
                <textarea name="description" id="description" class="summernote form-control form-control-solid" placeholder="Enter Description (EN)" autocomplete="off">{{old('description', '')}}</textarea>
                @if($errors->has('description'))
                    <span class="text-danger">{{ $errors->first('description') }}</span>
                @endif
            </div>
            <div class="d-flex flex-column mb-5 fv-row">
                <label class="fs-5 fw-bold mb-2">Description (BN)</label>
                <textarea name="description_bn" id="description_bn" class="summernote form-control form-control-solid" placeholder="Enter Description (BN)" autocomplete="off">{{old('description_bn', '')}}</textarea>
                @if($errors->has('description_bn'))
                    <span class="text-danger">{{ $errors->first('description_bn') }}</span>
                @endif
            </div> --}}
            <div class="d-flex mb-5 fv-row">
                <label class="form-check form-switch form-check-custom form-check-solid">
                    <span class="required form-check-label fw-bold text-muted" style="margin-right: 10px;margin-left: 0px;">Status</span>
                    <input class="form-check-input radio-btn" name="status" type="checkbox" value="1" checked="checked" />
                </label>
                <!--end::Switch-->
            </div>
            <div class="d-flex">
                <a style="margin-right:5px;" href="{{route('facility.index', ['institute_slug' => $institute_slug, 'course_slug' => $course_slug])}}" class="btn btn-secondary">Back</a>
                <button type="submit" class="btn btn-primary" id="kt_contact_submit_button">
                    <!--begin::Indicator-->
                    <span class="indicator-label">Add</span>
                </button>
            </div>
            <!--end::Form-->
        </div>
        {{-- <div class="col-md-6 pe-lg-10">
            <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class="fs-5 fw-bold mb-2">Icon</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input accept="image/*" type="file" id="icon" name="icon" class="form-control dropify" placeholder="Enter Icon">
                <span style="font-size: 12px;color: red;">Suggested Image ratio: 26 x 26 | max-size: 500 KB</span>
                @if($errors->has('icon'))
                    <span class="text-danger">{{ $errors->first('icon') }}</span>
                @endif

                <!--end::Input-->
            </div>
        </div> --}}
    </div>

    <!--end::Submit-->
</form>
@endsection

@section('extra-extra-css')
<link rel="stylesheet" href="{{ asset('summernote/summernote.css') }}">
<link rel="stylesheet" href="{{ asset('css/dropify.min.css') }}">

@endsection


@section('extra-extra-script')
{{--<script src="{{ asset('js/popper.min.js') }}"></script>--}}
<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script src="{{ asset('summernote/summernote.min.js') }}"></script>
<script src="{{ asset('js/dropify.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.summernote').summernote({
        height: 200,
        popover: {
            image: [],
            link: [],
            air: []
        }
        });
    });
</script>
//validate form
<script>
    $(function() {
        $("form[name='institute']").validate({
            ignore: ".note-editable.panel-body",
            rules: {
                title:'required',
                description:'required',
            },
            messages: {
                title: "Title is required.",
                description: "Description is required.",
            },
            submitHandler: function(form) {
            form.submit();
            }
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function(){
        var drEvent = $('#icon').dropify();
        drEvent = drEvent.data('dropify');
        drEvent.resetPreview();
        drEvent.clearElement();
    });
    $('#facilities_id').change(function() {
        var facilities_id = $(this).val();
        if (facilities_id) {
            $.ajax({
                type: "GET",
                url: "{{url('get-teacher-list')}}?facilities_id=" + facilities_id,
                success: function(res) {
                    if (res) {
                        $("#teacher_id").empty();
                        $("#teacher_id").append('<option selected disabled>Select Teacher</option>');
                        $.each(res, function(key, value) {
                            $("#teacher_id").append('<option value="' + key + '">' + value + '</option>');
                        });
                    } else {
                        $("#teacher_id").empty();
                    }
                }
            });
        } else {
            $("#teacher_id").empty();
        }
    });
</script>
@endsection