@extends('layout.layout')

@section('content')
<form id="submit_form_question" class="questions-container" enctype="multipart/form-data">
    <div id="errors-questions"></div>
    @csrf
    <div class="form-group mb-1">
        <label for="selecteaza_test">Selectează test</label>
        <select name="selecteaza_test" id="selecteaza_test" class="form-control inputs-question-select">
            <option value="" selected>Selectează test</option>
            @foreach ($tests as $test)
            @if($test->activ === 1)
            <option value="{{ $test->id }}">{{ $test->name }}</option>
            @endif
            @endforeach
        </select>
    </div>

    <div class="form-group mb-2 ">

        <label for="exampleInputEmail1">Intrebare</label>
        <div class="input-group mb-3">

            <input type="text" class="form-control inputs-question only-this-reseted" id="question" name="question"
                placeholder="Pune intrebare" value="">

            <div class="input-group-append">
                <input type="file" class="form-control " id="file_question" name="file_question" style="display:none;">
                <button type="button" class="btn btn-secondary btnQuestion-styled only-this-reseted" id='btnQuestion' onclick="document.getElementById('file_question').click();">Selectează filă</button>
            </div>
        </div>
        <p id="first_question_answer" class="fw-bold mt-1"></p>

    </div>


    <div class="d-flex go-column-mobile justify-content-between ">

        <div class="form-group mb-2 question-inputs-with-image">

            <label for="exampleInputPassword1">Primul răspuns</label>

            <div class="input-group ">
                <input type="text" id="first_answer" name="first_answer"
                    class="form-control inputs-answer questionTypeFile only-this-reseted" id="first_answer"
                    placeholder="Aici se va scrie primul răspuns">
                <input id="inputFirstAnswer" type="file" style="display: none;" name="file_answer[first]" class="only-this-reseted"/>
                <div class="input-group-append">
                    <button type="button" class="btn btn-secondary btnQuestion-styled" id='btnFirstAnswer'onclick="document.getElementById('inputFirstAnswer').click();">Selectează filă</button>
                </div>
            </div>

            <div class="form-check">
                <input type="checkbox" name="checkbox[first]" class="form-check-input check_answer only-this-reseted" id="valid"
                    value="0">
                <label class="form-check-label" for="valid">Bifează dacă răspunsul este corect</label>
                <p id="first_file_answer" class="fw-bold mt-1"></p>
            </div>


        </div>

        <div class="form-group mb-2 question-inputs-with-image margin-left-on-desktop">
            <label for="exampleInputPassword1">Al doilea răspuns</label>

            <div class="input-group">
                <input type="text" name="second_answer" class="form-control inputs-answer questionTypeFile only-this-reseted"
                    id="second_answer" placeholder="Aici se va scrie al doilea răspuns">
                <input id="inputSecondAnswer" type="file" class="form-control inputs-answer questionType only-this-reseted"
                    name="file_answer[second]">
                <div class="input-group-append">
                    <button type="button" class="btn btn-secondary btnQuestion-styled" id='btnSecondAnswer' onclick="document.getElementById('inputSecondAnswer').click();">Selectează filă</button>
                </div>
            </div>


            <div class="form-check">
                <input type="checkbox" name="checkbox[second]" class="form-check-input check_answer only-this-reseted" id="second"
                    value="0">
                <label class="form-check-label" for="second">Bifează dacă răspunsul este corect</label>
                <p id="second_file_answer" class="fw-bold mt-1"></p>

            </div>
        </div>


    </div>


    <div class="d-flex go-column-mobile justify-content-between  ">


        <div class="form-group mb-2 question-inputs-with-image">
            <label for="exampleInputPassword1">Al treilea răspuns <span class="font-weight-bold"> nu este
                    obligatoriu</span></label>

            <div class="input-group ">
                <input type="text" name="third_answer" class="form-control inputs-answer questionTypeFile only-this-reseted"
                    placeholder="Aici se va scrie al treilea răspuns">
                <input id="inputThirdAnswer" type="file" class="form-control inputs-answer questionType only-this-reseted"
                    name="file_answer[third]">
                <div class="input-group-append">
                    <button type="button" class="btn btn-secondary btnQuestion-styled" id='btnThirdAnswer' onclick="document.getElementById('inputThirdAnswer').click();">Selectează filă
                    </button>
                </div>
            </div>
            <div class="form-check">
                <input type="checkbox" name="checkbox[third]" class="form-check-input check_answer only-this-reseted " id="third"
                    value="0">
                <label class="form-check-label" for="third">Bifează dacă răspunsul este corect</label>
                <p id="third_file_answer" class="fw-bold mt-1"></p>

            </div>
        </div>
        <div class="form-group margin-left-on-desktop question-inputs-with-image">

            <label for="exampleInputPassword1">Al patrulea răspuns <span class="font-weight-bold"> nu este
                    obligatoriu</span></label></label>
            <div class="input-group ">
                <input type="text" name="fourth_answer" class="form-control inputs-answer questionTypeFile only-this-reseted"
                    id="fourth_answer" placeholder="Aici se va scrie al patrulea răspuns">
                <input id="inputFourthAnswer" type="file" class="form-control inputs-answer questionType only-this-reseted"
                    name="file_answer[fourth]">
                <div class="input-group-append">
                    <button type="button" class="btn btn-secondary btnQuestion-styled" id='btnFourthAnswer' onclick="document.getElementById('inputFourthAnswer').click();">Selectează filă</button>
                </div>
            </div>
            <div class="form-check">
                <input type="checkbox" name="checkbox[fourth]" class="form-check-input check_answer only-this-reseted" id="fourth"
                    value="0">
                <label class="form-check-label" for="fourth">Bifează dacă răspunsul este corect</label>
                <p id="fourth_file_answer" class="fw-bold mt-1"></p>

            </div>
        </div>
    </div>
    <button type="submit" class="button-submit-save-question" >Salveaza</button>
</form>

@push('js')
<script>


$(document).ready(function () {


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

$("input[name='file_question']").change(function() {

if($(this).val() != null) {

    $("#btnQuestion").css("background-color", "green");

}

});

$("input[name='file_answer[first]']").change(function() {

if($(this).val() != null) {

    $("#btnFirstAnswer").css("background-color", "green");

}

});

$("input[name='file_answer[second]']").change(function() {
if($(this).val() != null) {

    $("#btnSecondAnswer").css("background-color", "green");

}
});

$("input[name='file_answer[third]']").change(function() {
if($(this).val() != null) {

    $("#btnThirdAnswer").css("background-color", "green");

}
});

$("input[name='file_answer[fourth]']").change(function() {
if($(this).val() != null) {

    $("#btnFourthAnswer").css("background-color", "green");
}
});

});



    $(function () {
        $("#submit_form_question").on('submit', function (e) {
            if ((($('#first_answer').val().length > 0) || ($('#inputFirstAnswer').val().length > 0)) && (($('#second_answer').val().length > 0) || ($('#inputSecondAnswer').val().length > 0))) {
                e.preventDefault();
                $.ajax({
                    url: '/adauga-question',
                    method: 'POST',
                    data: new FormData(this),
                    processData: false,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    contentType: false,
                    success: function (data) {
                        //resetare background pentru file
                        $("#btnQuestion,#btnFirstAnswer,#btnSecondAnswer,#btnThirdAnswer,#btnFourthAnswer").css("background-color", "");
                            // $('#submit_form_question')[0].reset();
                            $("#errors-questions").html(data.mesaj);
                            $("#errors-questions").fadeTo(2000, 500).slideUp(500);
                            $("#errors-questions").slideUp(500);
                            $('.only-this-reseted').val("");
                            $("input[type='text']").val("");
                            $("input[type='checkbox']").prop("checked",false);
                            $("input[type='file']").val("");
                            $('#first_file_answer').text(' ');
                            $('#second_file_answer').text(' ');
                            $('#third_file_answer').text(' ');
                            $('#fourth_file_answer').text(' ');
                            $('#first_question_answer').text(' ');
                    },
                    error: function(error){
                        $("#errors-questions").html(error.responseJSON.fail);
                            $("#errors-questions").fadeTo(2000, 500).slideUp(500);
                            $("#errors-questions").slideUp(500);
                    }
                });
            }
            else{
                $("#errors-questions").html(
                    '<div class="alert text-center" style="color: #fff; font-weight: bold; background: red !important;" role="alert">Creaza minim doua raspunsuri!</div>'
                    );
                $("#errors-questions").fadeTo(2000, 500).slideUp(500);
                $("#errors-questions").slideUp(500);
                return false;
            }
        });
    });

    $(document).ready(function () {
        $('.check_answer').click(function () {
            $('.check_answer').not(this).prop('checked', false);
        });
    });
    $('#inputFirstAnswer').on('change', function(){
        if($('#inputFirstAnswer').val() != ''){
            $('#first_file_answer').text('Imaginea pe care ati ales-o pentru primul raspuns este: '+$('#inputFirstAnswer').val().substring(12));
        }
        else{
            $('#first_file_answer').text(' ');
        }
    });

    $('#inputSecondAnswer').on('change', function(){
        if($('#inputSecondAnswer').val() != ''){
            $('#second_file_answer').text('Imaginea pe care ati ales-o pentru al doilea raspuns este: '+$('#inputSecondAnswer').val().substring(12));
        }
        else{
            $('#second_file_answer').text(' ');
        }
    });
    $('#inputThirdAnswer').on('change', function(){
        if($('#inputThirdAnswer').val() != ''){
            $('#third_file_answer').text('Imaginea pe care ati ales-o pentru al treilea raspuns este: '+$('#inputThirdAnswer').val().substring(12));
        }
        else{
            $('#third_file_answer').text(' ');
        }
    });
    $('#inputFourthAnswer').on('change', function(){
        if($('#inputFourthAnswer').val() != ''){
            $('#fourth_file_answer').text('Imaginea pe care ati ales-o pentru al patrulea raspuns este: '+$('#inputFourthAnswer').val().substring(12));
        }
        else{
            $('#fourth_file_answer').text(' ');
        }
    });
    $('#file_question').on('change', function(){
        if($('#file_question').val() != ''){
            $('#first_question_answer').text('Imaginea pe care ati ales-o pentru intrebare este: '+$('#file_question').val().substring(12));
        }
        else{
            $('#first_question_answer').text(' ');
        }
    });
</script>
@endpush
@endsection