@extends('layout.layout')

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

<div class="container chapter-container">
    <div id="errors-chapters"></div>
    @if($errors->any())
        <div class="alert alert-danger  text-white text-center" role="alert" style="color:#fff !important;font-weight:bold;background: red !important;">
        <p>{{$errors->first()}}</p>
        <button type="button" class="btn-close btn-alerta" data-bs-dismiss="alert" aria-label="Close" style="background: none !important;border:none !important;float:right;font-weight:bold;color:#fff;margin-top:-37px;">x</button>
        </div>
    @endif
    <form action="" id="chapters_form">
        @csrf
        <div class="form-group">
            <input type="text" class="form-control mt-2 mb-2" name='name' id='name' value=""
                placeholder="Introduceti nume">
            <textarea name="description" id="" cols="30" rows="10" id="description" placeholder="Introduceti descriere" class="textarea-chapters">
                </textarea>
            <div class="form-group mt-1">
                <label for="">Introduceti document</label>
                <input id="selectFileForChapter" type="file" style="display: none;" name="file"/>
                    <button type="button" class="btn btn-secondary btn-on-chaper-first-answer"id='btnFirstAnswer' onclick="document.getElementById('selectFileForChapter').click();">Introduceti document<i class="fas fa-plus"
                        style="margin-left: 5px;"></i></button>
                    <p id="showFileName" class="mt-2 fw-bold"></p>
                <!-- <label for="">Introduceti numarul capitolul</label>
                <input type="text" class="form-control mt-2 mb-2" name='chapter_order' id='chapter_order' value='1'
                    placeholder="Introduceti numarul capitolul"> -->
                <div class="form-check form-switch">
                    <label class="form-check-label" for="checkboxChapterTest">Capitolul va avea test?</label>
                    <input class="form-check-input" type="checkbox" id="checkboxChapterTest" name="checkboxChapterTest"
                        value="1">
                </div>
                <select class="form-control will-be-none hidded" name="test" id="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>
            </div>
        <div class="form-check form-switch will-be-none hidded">
            <label class="form-check-label fw-bold" for="addChapterTest">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="addChapterTest" name="addChapterTest" 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 type="submit" class="add-chapter mt-2 mb-4 w-100">Salveaza <i class="fas fa-plus"
                    style="margin-left: 5px;"></i></button>
        </div>
    </form>
</div>

@push('js')
<script>
    $('#selectFileForChapter').on('change', function(){
        if($('#selectFileForChapter').val() != ''){
            $('#showFileName').text('PDF-ul pe care l-ati ales este: '+$('#selectFileForChapter').val().substring(12));
        }
        else{
            $('#showFileName').text(' ');
        }
    });

    $(document).ready(function () {
        $('#checkboxChapterTest').click(function () {
            if ($(this).prop("checked") == true) {
                this.value = (Number(1));
                $('.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');
                $('#addChapterTest').prop("checked",false);
            }
        });

        $('#addChapterTest').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 () {
        $("#chapters_form").on('submit', function (e) {
            e.preventDefault();
            $.ajax({
                url: '/chapters',
                method: 'POST',
                data: new FormData(this),
                processData: false,
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                contentType: false,
                success: function (response) {
                        $('#chapters_form')[0].reset();
                        $('#errors-chapters').html(response.mesaj);
                        $("#errors-chapters").fadeTo(8000, 500).slideUp(500);
                        $("#errors-chapters").slideUp(500);
                        $(".hidded").addClass('will-be-none');
                        $('.divs-togheter').addClass('will-be-none');
                        $('#addChapterTest').prop("checked",false);
                        $('#showFileName').text(' ');
                },
                error: function (error) {
                    $("#errors-chapters").html(error.responseJSON.message);
                    $("#errors-chapters").fadeTo(8000, 500).slideUp(500);
                    $("#errors-chapters").slideUp(500);
                },
            });
        });
});


        $('input[type="checkbox"]').click(function () {
            if ($(this).prop("checked") == true) {
                this.value = (Number(1));
            } else if ($(this).prop("checked") == false) {
                this.value = (Number(0));
            }
        });
    });

</script>
@endpush
@endsection