@extends('layouts.splash')

@section('content')


<link href="{{ asset('css/main.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/header.png') }}" class="images-fluid" alt="Responsive image">
        

            <div class="row justify-content-center">
                <div class="col-10">
                    <div class="card">
                        <div class="card-body">
                             <form method="POST" id="formInput" action="/repondre" enctype="multipart/form-data">
                        
                        @csrf
                        <input type="hidden" name="url" value="{{ $url }}">
                     
                        <div id="carouselExample" class="carousel slide">
                                    <div class="carousel-inner mg-bottom-100">
                                        @foreach ($questions as $key => $item)
                                            <div class="carousel-item @if($key === 0) active @endif text-center">
                                                <div class="row justify-content-center p-2  mg-top-40">
                                                    <div class="col-11 mg-top-5">
                                                        <div class="myquestion">{{ $item->title }}</div>
                                                    </div>
                                                </div>
                                                @foreach (App\Models\QuizAnswer::where('quiz_question_id', $item->id)->orderby('title','asc')->get() as $ans)
                                                <div class="row justify-content-center p-2  mg-top-10 ">
                                                    <div class="col-10 mg-top-5 text-center">
                                                        <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>
                                    <button class="carousel-control-prev quizprev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                                        <img src="{{ asset('images/btn_precedent.png') }}" class="carousel-control-prev-icon" aria-hidden="true" alt="Left"/>
                                        <span class="visually-hidden">Previous</span>
                                    </button>
                                    <button class="carousel-control-next quiznext" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                                        <img src="{{ asset('images/btn_suivant.png') }}" class="carousel-control-next-icon" aria-hidden="true" alt="Right"/>
                                        <span class="visually-hidden">Next</span>
                                    </button>
                            </div>
                            <div class="row p-2 justify-content-center">
                                        <div class="col-5 col-sm-4 mg-top-5 mg-bottom-40 text-center" id="btn_blockBtn">
                                        <input type="image" src="{{ asset('images/btn_valider.png') }}" id="btn_validQuiz"  class="img-fluid " alt="Envoyer"/>
                                        </div>
                                    </div>
                        </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function(){
    
 

    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');
        }
        
        // Désactiver le bouton suivant si on est sur le dernier slide
        if (activeIndex === totalItems - 1) {
            $('.quiznext').prop('disabled', true).css('display', 'none');
        } else {
            $('.quiznext').prop('disabled', false).css('display', 'block');
        }
    }

    function checkRadios() {
        // 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');
        } else {
            $('#btn_blockBtn').css('display', 'none');
        }
    }

    // É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