@extends('layouts.splash')

@section('content')

<link href="{{ asset('css/main2.css') }}" rel="stylesheet">

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 col-xl-5 col-12 main_view">
            <img src="{{ asset('images/espacesud/header.png') }}" class="images-fluid" alt="Responsive image">
        

            <div class="row justify-content-center">
                <div class="col-10">
       
                             <form method="POST" id="formInput" action="/repondre" enctype="multipart/form-data">
                        
                        @csrf
                        <input type="hidden" name="url" value="{{ $url }}">
                     <input type="hidden" name="tabQuestion" value="{{ $tabQuestion }}">
                        <div id="carouselExample" class="carousel slide">
                                    <div class="carousel-inner">
                                        @foreach ($questions as $key => $item)
                                            <div class="carousel-item @if($key === 0) active @endif text-center">
                                          
                                                <div class="row justify-content-center">
                                                    <div class="col-11 mg-top-20 text-center">
                                                        <div class="blockQuestion">
                                                           {{ $item->title }}
                                                        </div>
                                                    </div>
                                                </div>
                                                @foreach (App\Models\QuizAnswer::where('quiz_question_id', $item->id)->orderby('title','asc')->get() as $key => $ans)
                                                <div class="row justify-content-center p-1  ">
                                                    <div class="col-11 text-center @if($key == 0) mg-top-40  @endif">
                                                        <div class="form-check text-center " style="position: relative;">
                                                            <input class="form-check-input customradio-input" value="{{ $ans->id }}" type="radio" name="radioDefault{{ $item->id }}" id="radioDefault{{ $ans->id }}true">
                                                            <label class="form-check-label customRadio" for="radioDefault{{ $ans->id }}true">
                                                                {{ $ans->title }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                        @endforeach
                                    </div>
                                    
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-2 text-end"></div>
                                <div class="col-4 text-end">
                                      <button class="carousel-control-prev quizprev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                                        <img src="{{ asset('images/espacesud/Précédent.png') }}" class="carousel-control-prev-icon" aria-hidden="true" alt="Left"/>
                                        <span class="visually-hidden">Previous</span>
                                    </button>
                                </div>
                                <div class="col-4 text-center">
                                      <button class="carousel-control-next quiznext" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                                        <img src="{{ asset('images/espacesud/Suivant.png') }}" class="carousel-control-next-icon" aria-hidden="true" alt="Right"/>
                                        <span class="visually-hidden">Next</span>
                                    </button>
                                </div>
                                 <div class="col-2 text-end"></div>
                            </div>
                          
                                  
                           <div class="row p-2 justify-content-center">
                                                                        <div class="col-10 col-sm-4   text-center">
                                    <div id="InfoValid" class="mg-top-80" >Veuillez répondre à toutes les questions pour valider.</div>
                            </div>
                            </div>
                            <div class="row p-2 justify-content-center">
                                        <div class="col-5 col-sm-4 mg-top-20 mg-bottom-40 text-center" id="btn_blockBtn">
                                       
                                            <input type="image" src="{{ asset('images/espacesud/Valider.png') }}" id="btn_validQuiz"  class="img-fluid " alt="Envoyer"/>
                                        </div>
                                    </div>
                        </form>
                      
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function(){
    
    $("#btn_validQuiz").on('click', function(e) {
        // Empêche l'envoi du formulaire par défaut
        e.preventDefault();
          let totalQuestions = {{ count($questions) }};
        let checkedGroups = 0;
        @foreach ($questions as $item)
            if ($('input[name="radioDefault{{ $item->id }}"]:checked').length > 0) {
                checkedGroups++;
            }
        @endforeach
        if(checkedGroups < totalQuestions){
            alert("Veuillez répondre à toutes les questions pour valider.");
            return; // Ne pas soumettre le formulaire si toutes les questions ne sont pas répondues
        }
        // Soumettre le formulaire manuellement
        $("#formInput").submit();
    });

    function updateCarouselButtons() {
        const totalItems = $('.carousel-item').length;
        const activeIndex = $('.carousel-item.active').index();
        
        // Désactiver le bouton précédent si on est sur le premier slide
        if (activeIndex === 0) {
            $('.quizprev').prop('disabled', true).css('display', 'none');
        } else {
            $('.quizprev').prop('disabled', false).css('display', 'block');
        }

        let totalQuestions = {{ count($questions) }};
        let checkedGroups = 0;
        @foreach ($questions as $item)
            if ($('input[name="radioDefault{{ $item->id }}"]:checked').length > 0) {
                checkedGroups++;
            }
        @endforeach

        // Désactiver le bouton suivant si on est sur le dernier slide
        if (activeIndex === totalItems - 1) {
            $('.quiznext').prop('disabled', true).css('display', 'none');
           
            if(checkedGroups < totalQuestions){
                //$("#InfoValid").css('display', 'block');
            }else{
                $("#InfoValid").css('display', 'none');
            }

        } else {
            $('.quiznext').prop('disabled', false).css('display', 'block');
            $("#InfoValid").css('display', 'none');
        }
    }

    function checkRadios() {
        const totalItems = $('.carousel-item').length;
        const activeIndex = $('.carousel-item.active').index();

        // Compte le nombre de groupes radio ayant une réponse cochée
        let totalQuestions = {{ count($questions) }};
        let checkedGroups = 0;
        @foreach ($questions as $item)
            if ($('input[name="radioDefault{{ $item->id }}"]:checked').length > 0) {
                checkedGroups++;
            }
        @endforeach

        // Active le bouton si toutes les questions sont cochées
       if(checkedGroups === totalQuestions){
            $("#btn_blockBtn").css('display', 'block');
              $("#InfoValid").css('display', 'none');
       } else {
            $('#btn_blockBtn').css('display', 'none');
        }

         if (activeIndex === totalItems - 1) {
            if(checkedGroups < totalQuestions){
                $("#InfoValid").css('display', 'block');
            }
        }
    }

    // Écouter les événements de changement du carrousel
    $('#carouselExample').on('slid.bs.carousel', function () {
        updateCarouselButtons();
    });

    // Sur changement d'un radio, on vérifie
    $('input[type="radio"]').on('change', checkRadios);

    // Vérification initiale au chargement
    checkRadios();
    updateCarouselButtons();
});
</script>

@endsection