@extends('layout.layout')
@section('content')
<h1 class="text-warning text-center mt-3">Creeaza  cursuri</h1>

<div class="container course-container-add">
    <a class="btn btn-back fw-bold" href="/dashboard" role="button"><i class="fas fa-arrow-left"></i>&nbsp;&nbsp;&nbsp;Vezi cursuri create</a>
    <h5>Introduceti un curs nou &#127881;</h5>
    <div id="errors-course-admin"></div>
    <form id="course_form">
        @csrf
        <input type="text" class="form-control create-course-input" name="name" placeholder="Nume" value="">

        <label for="">Introduceti capitole</label>
        <select name="chapters[]" id="chapter" class="form-control js-example-basic-multiple create-course-input" multiple="multiple">
            @foreach ($chapters as $chapter)
            <option value="{{ $chapter->id }}">{{ $chapter->name }}</option>
            @endforeach
        </select>

        <label for="">Introduceti categoria cursului</label>
        <select name="category[]" id="category" class="form-control js-example-basic-multiple create-course-input" multiple="multiple">
            @foreach ($categories as $category)
            @if($category->activ === 1)
            <option value="{{ $category->id }}">{{ $category->name }}</option>
            @endif
            @endforeach
        </select>
        <input type="text" class="form-control ml-2 mt-2 create-course-input" name="days" placeholder="Introduceti zile valabile curs">
        <div class="form-check form-switch">
            <input class="form-check-input" name="activ" type="checkbox" id="flexSwitchCheckDefault" value="0">
            <label class="form-check-label" for="flexSwitchCheckDefault">Curs activ</label>
        </div>
        <div class="form-check form-switch">
            <input class="form-check-input" name="public_course" type="checkbox" id="publicCourse" value="0">
            <label class="form-check-label" for="publicCourse">Bifeaza daca cursul va fi public</label>
        </div>
        <textarea name="description" id="" cols="30" rows="10" id="description" class="description"
            placeholder="Introduceti descriere">
              </textarea>
        <!-- <div class="form-check form-switch">
            <label class="form-check-label" for="checkboxCourseTest">Cursul va avea test?</label>
            <input class="form-check-input" type="checkbox" id="checkboxCourseTest" name="checkboxCourseTest" value="0">
        </div>
        @if(count($tests) <= 0)
             <p class="text-danger fw-bold will-be-none hidded" hidden>Nu exista niciun test valabil pentru a fi asignat unui curs</p>
        @else
        <select class="form-control will-be-none hidded" name="test">
            <option value="" selected>Alege Test</option>
            @foreach ($tests as $test)
            @if($test->activ === 1)
            <option value="{{ $test->id }}">{{ $test->name }}</option>
            @endif
            @endforeach
        </select>
        @endif
        <div class="form-check form-switch will-be-none hidded">
            <label class="form-check-label fw-bold" for="checkboxCourseTest">Daca nu regasesti testul pe care vrei sa il introduci, bifeaza si creeaza unul nou chiar acum</label>
            <input class="form-check-input" type="checkbox" id="addCourseTest" name="addCourseTest" value="0">
        </div>
        <div class="divs-togheter will-be-none">
        <input type="text" class="form-control" id="test" name="test_name" placeholder="Introduceti nume test" value="">
        <input type="text" class="form-control mt-2" id="test" name="min_questions" placeholder="Introduceti minimul de intrebari corecte" >
        <input type="text" class="form-control mt-2" id="test" name="questions" placeholder="Introduceti minim de intrebari afisate per test" >
        </div> -->
        <button class="add-course">Salveaza</button>
    </form>
</div>

@push('js')
<script>
    $(document).ready(function () {
        $('.js-example-basic-multiple').select2();
    });

    $(document).ready(function () {
        $('#checkboxCourseTest').click(function () {
            if ($(this).prop("checked") == true) {
                this.value = (Number(1));
                $("#mydiv").load(location.href + " #mydiv");
                $('.hidded').removeClass('will-be-none');
            } else if ($(this).prop("checked") == false) {
                this.value = (Number(0));
                $(".hidded").addClass('will-be-none');
                $('.divs-togheter').addClass('will-be-none');
                $('#addCourseTest').prop("checked",false);
            }
        });

        $('#flexSwitchCheckDefault').click(function () {
            if ($(this).prop("checked") == true) {
                this.value = (Number(1));
            } else if ($(this).prop("checked") == false) {
                this.value = (Number(0));
            }
        });

        $('#publicCourse').click(function () {
            if ($(this).prop("checked") == true) {
                this.value = (Number(1));
            } else if ($(this).prop("checked") == false) {
                this.value = (Number(0));
            }
        });

        $('#addCourseTest').click(function () {
            if ($(this).prop("checked") == true) {
                this.value = (Number(1));
                $('.divs-togheter').removeClass('will-be-none');
            } else if ($(this).prop("checked") == false) {
                this.value = (Number(0));
                $('.divs-togheter').addClass('will-be-none');

            }
        });
    });

    $(function () {
        $("#course_form").on('submit', function (e) {
            e.preventDefault();
            $.ajax({
                method: 'POST',
                url: "{{ route('courses.store') }}",
                data: new FormData(this),
                processData: false,
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                contentType: false,
                success: function (data) {
                        $('#course_form')[0].reset();
                        $("#errors-course-admin").html(data.mesaj);
                        $("#errors-course-admin").fadeTo(2000, 500).slideUp(500);
                        $("#errors-course-admin").slideUp(500);
                        $(".js-example-basic-multiple").empty().trigger('change');
                },
                error: function(error) {
                        $("#errors-course-admin").html(error.responseJSON.fail);
                        $("#errors-course-admin").fadeTo(2000, 500).slideUp(500);
                        $("#errors-course-admin").slideUp(500);
                }
            });
        });
    });

</script>
@endpush
@endsection