@extends('layout.layout')
@section('content')
<div class="container-test">
@if ($errors->has('success'))
    <div class="alert alert-success w-100">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    @if ($errors->has('fail'))
    <div class="alert alert-danger w-100">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
<div id="errors-test"></div>
    <div class="test">
        <form enctype="multipart/form-data" action="/store-test" method="POST">
            @csrf
            <input type="hidden" value="{{ $test->id }}" name="test_id">
            @if($chapter->id != null)
            <input type="hidden" value="{{ $chapter->id }}" name="chapter_id">
            @endif
            <input type="hidden" value="{{ $course->id }}" name="course_id">
            @csrf
            <input type="hidden" name="assigned_by" value="{{ $assigned_by }}">
            @forelse ($questions as $question)
            <div class="mySlides mb-2">

                <div class="question-name to-hide-{{ $question->id }}  remove{{ $question->id }} text-white"
                    id="remove{{ $question->id }}">
                    {{ucfirst($question->name)}}
                </div>
                <input type="hidden" value="{{ $question->id }}" name="question_id[]" id="question_id">

                <div class="answers">
                    @forelse($question->answers as $answer)
                    <div class="column">
                        @if(isset($answer->file))
                        <div class="answer-img">
                            <label class="label-answer-image"
                              for="{{ $question->name }}{{ $answer->name }}{{ $answer->id + 1 }}">
                                <svg class="icon-search" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                    class="bi bi-zoom-in" viewBox="0 0 16 16" data-bs-toggle="modal"
                                    data-bs-target="#staticBackdrop{{ $answer->id }}"
                                    style=" width:10%; height:10%;color:#fff;">
                                    <path fill-rule="evenodd"
                                        d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />
                                    <path
                                        d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z" />
                                    <path fill-rule="evenodd"
                                        d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z" />
                                </svg>
                                <img src="{{ URL::to($answer->file) }}" alt="" class="image-as-answer"/>
                                <span>{{$answer->name}}</span>

                                <input name="answer_id[]" type="checkbox" value="{{ $answer->id }}"
                                    id="{{ $question->name }}{{ $answer->name }}{{ $answer->id +1 }}"
                                    data-question="{{ $question->name }}" />

                                <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                    fill="green" class="bi bi-check2" viewBox="0 0 16 16">
                                    <path
                                        d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
                                </svg>
                            </label>
                        </div>
                        <!-- Modal -->
                        <div class="modal fade" id="staticBackdrop{{ $answer->id }}" data-bs-backdrop="static"
                            data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel"
                            aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered modal-xl">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="staticBackdropLabel">{{$answer->name}}</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <img width="100%" src="{{ URL::to($answer->file) }}" />
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                            data-bs-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Modal -->
                        @else
                        <label name="label-answer" class="label-answer"
                            for="{{ $question->name }}{{ $answer->name }}{{ $answer->id + 1 }}">

                            <input name="answer_id[]" type="checkbox" value="{{ $answer->id }}"
                                id="{{ $question->name }}{{ $answer->name }}{{ $answer->id +1 }}"
                                data-question="{{ $question->name }}" />
                            <div class="answer">{{$answer->name}}</div>
                        </label>
                        @endif
                    </div>
                    @empty
                    <p>nu exista raspuns</p>
                    @endforelse
                </div>
            </div>
            @empty
            <p>nu exista intrebari</p>
            @endforelse
    </div>

    <div class="d-flex justify-content-between group-of-buttons">

        <button type="button" class="btn button-60 prev " {{-- style="display:none;" --}} id="prev"
            onclick="plusSlides(-1)">Mergi inapoi </button>
        {{-- <button type="button" class="btn btn-danger prev " id="prev" onclick="plusSlides(-1)">Mergi inapoi </button> --}}
        <button type="button" class="btn button-60 prev " {{-- style="display:none;"  --}} id="next"
            onclick="plusSlides(1)">Mergi inainte</button>
        <button type="submit" class="btn button-60 bg-success text-white " {{-- style="display:none;" --}}
            id="finalTest">Finalizati testul</button>
    </div>

    </form>
</div>

@push('js')
<script>
    $(document).ready(function () {
        $("input:checkbox").on('click', function () {
            var $box = $(this);
            if ($box.is(":checked")) {
                group = "input:checkbox[data-question='" + $box.attr("data-question") + "']";
                $(group).prop("checked", false);
                $box.prop("checked", true);
            } else {
                $box.prop("checked", false);
            }
        });
    });

    var slideIndex = 1;
    showSlides(slideIndex);
    function plusSlides(n) {
        showSlides(slideIndex += n);
    }
    function showSlides(n) {
        var i;
        var prev = document.getElementById("prev");
        var next = document.getElementById("next");
        var final = document.getElementById("finalTest");
        var slides = document.getElementsByClassName("mySlides");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (slideIndex == 1) {
            prev.disabled = true;
        } else {
            prev.disabled = false;
        }
        if (slideIndex >= slides.length) {
            next.classList.add("displayed");
            final.classList.remove("displayed");
        } else {
            next.classList.remove("displayed");
            final.classList.add("displayed");
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slides[slideIndex - 1].style.display = "block";
    }
    // $(function () {
    //     $("#test_store_submit").on('submit', function (e) {
    //         e.preventDefault();
    //         $.ajax({
    //             url: '/store-test',
    //             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) {
    //                         $("#errors-test").html(data.mesaj);
    //                         $("#errors-test").fadeTo(2000, 500).slideUp(500);
    //                         $("#errors-test").slideUp(500);
    //                         setTimeout(function () {
    //                             location.reload(true);
    //                         }, 1000);
    //             },
    //             error: function(error) {
    //                 $("#errors-test").html(error.responseJSON.fail);
    //                 $("#errors-test").fadeTo(2000, 500).slideUp(500);
    //                 $("#errors-test").slideUp(500);
    //             }
    //         });
    //     });
    // });
</script>
@endpush

@endsection