@extends('backend.admin.index')
@section('body')

    <!-- Main Container -->
    <main id="main-container">

        <!-- Hero -->
        <div class="bg-body-light">
            <div class="content content-full">
                <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                    <h1 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2">Add New Level</h1>
                    <a href="{{url('admin/course-faculty/course')}}" style="float: right;" class="btn btn-danger push pull-right"><i class="fa fa-backward"></i> Back</a>
                </div>
            </div>
        </div>
        <!-- END Hero -->
        <!-- Page Content -->
        <div class="content">
{{--        @include('layouts.message')--}}

        <!-- Full Table -->
            <div class="block block-rounded block-bordered">
                <div class="block-content">
                    <form action="" method="post" id="client_course_section" enctype="multipart/form-data">
                        {{csrf_field()}}
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Choose Academic<span class="text-danger">*</span></strong>
                                                                </span>
                                        </div>
                                        <select name="faculty_id" class="form-control faculty_id" id="faculty_id" >
                                            <option value="">--Choose--</option>
                                            @foreach($client_faculties  as $faculty)
                                                <option value="{{$faculty->faculty_id}}">{{$faculty->faculty->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Choose Level<span class="text-danger">*</span></strong>
                                                                </span>
                                        </div>
                                        <select name="course_id" class="form-control course_id" id="course_id" >
                                        </select>
                                    </div>
                                    <small>Not Found? <a href="javascript:void(0)"  onclick="myFunction()">Request new</a></small>
                                </div>
                            </div>
{{--                            <div class="col-sm-6">--}}
{{--                                <div class="form-group">--}}
{{--                                    <div class="input-group">--}}
{{--                                        <div class="input-group-prepend">--}}
{{--                                            <span class="input-group-text">--}}
{{--                                                <strong>Affiliation</strong>--}}
{{--                                            </span>--}}
{{--                                        </div>--}}
{{--                                        <input type="text" name="affiliation" class="affilation_name form-control">--}}
{{--                                    </div>--}}
{{--                                    <div class="p-1 border affilation_list"></div>--}}
{{--                                </div>--}}
{{--                            </div>--}}

                            {{--<div class="col-sm-6">--}}
                                {{--<div class="form-group">--}}
                                    {{--<div class="input-group">--}}
                                        {{--<div class="input-group-prepend">--}}
                                                                {{--<span class="input-group-text">--}}
                                                                    {{--<strong>Program Type<span class="text-danger">*</span></strong>--}}
                                                                {{--</span>--}}
                                        {{--</div>--}}
                                        {{--<input type="number" name="course_duration" class="form-control" >--}}
                                        {{--<select name="program_type" id="program_type" class="form-control">--}}
                                            {{--<option value="">Choose</option>--}}
                                            {{--<option value="Full Time" @if(old('program_type')=='Full Time') selected @endif>Full Time</option>--}}
                                            {{--<option value="Part Time" @if(old('program_type')=='Part Time') selected @endif>Part Time</option>--}}
                                            {{--<option value="CORRESPONDENCE" @if(old('program_type')=='CORRESPONDENCE') selected @endif>Correspondence</option>--}}
                                        {{--</select>--}}
                                    {{--</div>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                            {{--<div class="col-sm-6">--}}
                                {{--<div class="form-group">--}}
                                    {{--<div class="input-group">--}}
                                        {{--<div class="input-group-prepend">--}}
                                                                {{--<span class="input-group-text">--}}
                                                                    {{--<strong>Duration<span class="text-danger">*</span></strong>--}}
                                                                {{--</span>--}}
                                        {{--</div>--}}
                                        {{--<input type="number" name="course_duration" class="form-control" >--}}
                                        {{--<select name="duration_type" id="" class="form-control">--}}
                                            {{--@foreach($durations as $duration)--}}
                                                {{--<option value="{{$duration->id}}">{{$duration->name}}</option>--}}
                                            {{--@endforeach--}}
                                        {{--</select>--}}
                                    {{--</div>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                            {{--<div class="col-sm-6">--}}
                                {{--<div class="form-group">--}}
                                    {{--<div class="input-group">--}}
                                        {{--<div class="input-group-prepend">--}}
                                                                {{--<span class="input-group-text">--}}
                                                                    {{--<strong>Fees</strong>--}}
                                                                {{--</span>--}}
                                        {{--</div>--}}
                                        {{--<input type="number" name="course_fees" class="form-control">--}}
                                    {{--</div>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                            {{--<div class="col-sm-6">--}}
                                {{--<div class="form-group">--}}
                                    {{--<div class="input-group">--}}
                                        {{--<div class="input-group-prepend">--}}
                                                                {{--<span class="input-group-text">--}}
                                                                    {{--<strong>Certification<span class="text-danger">*</span></strong>--}}
                                                                {{--</span>--}}
                                        {{--</div>--}}
                                        {{--<input type="number" name="course_duration" class="form-control" >--}}
                                        {{--<select name="course_type" id="" class="form-control">--}}
                                            {{--<option value="">Choose</option>--}}
                                            {{--<option value="Degree" @if(old('course_type')=='Degree') selected @endif>Degree</option>--}}
                                            {{--<option value="Diploma" @if(old('course_type')=='Diploma') selected @endif>Diploma</option>--}}
                                            {{--<option value="Certification" @if(old('course_type')=='Certification') selected @endif>Certification</option>--}}
                                        {{--</select>--}}
                                    {{--</div>--}}
                                {{--</div>--}}
                            {{--</div>--}}

                            <div class="col-sm-12" style="text-align: left; height: 209px; overflow: hidden;">
                                <label for="">Description</label><br>
                                <textarea class="editor" name="description" style="height: 100px;">{!! old('description') !!}</textarea>
                            </div>
                            {{--<div class="col-sm-12" style="text-align: left; height: 209px; overflow: hidden;">--}}
                                {{--<label for="">Syllabus</label><br>--}}
                                {{--<textarea class="editor" name="syllabus" style="height: 150px;">{!! old('syllabus') !!}</textarea>--}}
                            {{--</div>--}}

                            {{--<div class="col-sm-12">--}}
                                {{--<label for="">Upload Brochure</label>--}}
                                {{--<input type="file" name="brochure" class="form-control">--}}
                            {{--</div>--}}
                            <div class="col-sm-12 mt-3">
                                <button type="submit" class="btn btn-primary"><i class="fa fa-plus-circle"></i> Save</button>
                            </div>
                        </div>
                    </form>
                    <div id="myDIV" style="display: none;">
                        <div class="block block-themed block-transparent mb-0">
                            <div class="block-content">
                                <form action="{{url('admin/course-faculty/course/request_course')}}" method="post">
                                    {{csrf_field()}}
                                    <div class="row">
                                        <div class="col-sm-5">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                            <span class="input-group-text">
                                                                <strong>Level Name<span class="text-danger">*</span></strong>
                                                            </span>
                                                    </div>
                                                    <input type="text" name="course_name" value="{{old('course_name')}}" class="form-control" >
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-5">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                            <span class="input-group-text">
                                                                <strong>Academic<span class="text-danger">*</span></strong>
                                                            </span>
                                                    </div>
                                                    <select name="faculty_id" id="faculty_id" class="form-control" >
                                                        <option value="">--Choose--</option>
                                                        @foreach($faculties as $faculty)
                                                            <option value="{{$faculty->id}}" @if(old('faculty_id')==$faculty->id) selected @endif>{{$faculty->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-2">
                                            <div class="form-group">
                                                <button type="submit" class="btn btn-primary btn-sm">Request</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- END Full Table -->
        </div>
        <!-- END Page Content -->

    </main>
    <!-- END Main Container -->


@endsection
@section('script')
    <script>
        $('.faculty_id').on('change', function(e){
            console.log(e);
            var faculty_id = e.target.value;
            $.get('get_course?faculty_id=' + faculty_id,function(data) {
                console.log(data);
                $('.course_id').empty();
                $('.course_id').append('<option value="" disable="true" selected="true">--Choose--</option>');

                $.each(data, function(index, courseObj){
                    $('.course_id').append('<option value="'+ courseObj.id +'">'+ courseObj.name +'</option>');
                })
            });
        });
    </script>
    <script>
        function myFunction() {
            var x = document.getElementById("myDIV");
            var y = document.getElementById("client_course_section");
            if (x.style.display === "none") {
                x.style.display = "block";
                y.style.display = "none";
            } else {
                x.style.display = "none";
            }
        }
    </script>

    <script type="text/javascript">
        // jQuery wait till the page is fullt loaded
        $(document).ready(function () {
            // keyup function looks at the keys typed on the search box
            $('.affilation_name').on('keyup',function() {
                // the text typed in the input field is assigned to a variable
                var query = $(this).val();
                // call to an ajax function
                if ( ! this.value == '')
                {
                    $(".affilation_list").show();

                    $.ajax({
                        // assign a controller function to perform search action - route name is search
                        url:"{{ url('admin/course-faculty/course').'/getAffiliation' }}",
                        // since we are getting data methos is assigned as GET
                        type:"GET",
                        // data are sent the server
                        data:{'keyword':query},
                        // if search is succcessfully done, this callback function is called
                        success:function (data) {
                            // print the search results in the div called country_list(id)
                            $('.affilation_list').html(data);
                        }
                    })
                }else{
                    $(".affilation_list").hide();
                }

                // end of ajax call
            });

            // initiate a click function on each search result
            $(document).on('click', 'li', function(){
                // declare the value in the input field to a variable
                var value = $(this).text();
                // assign the value to the search box
                $('.affilation_name').val(value);
                // after click is done, search results segment is made empty
                $('.affilation_list').html("");
            });
        });
    </script>
@endsection