@extends('layout.app')
    @php
        $seccionActual = null;
        $numPregunta = 0;
        $conTitulo = false;
    @endphp
    <form action="{{ route('guardar.respuestas') }}" method="POST">
        @csrf
        @foreach ($preguntas as $pregunta) <!-- se puede poner ($preguntas->take(3) as $pregunta) para tomar un # de preguntas y no tener que llenar todo al probar-->
        <!--<h4 style="color: red;">DEBUG IdPregunta: {{ $pregunta->pregunta_id }}</h4>-->
            @if ($loop->first)  {{-- Solo en la primera pregunta --}}
                <h1 style="color: rgba(51,58,153,255);">{{ $pregunta->cuestionario }}</h1>
            @endif

        @if ($seccionActual != $pregunta->seccion->titulo)
            @php
                $seccionActual = $pregunta->seccion->titulo;
                $numPregunta = 1;
            @endphp

            <h2>{{ $pregunta->seccion->titulo }}</h2>
            <p id="temporizador" data-tiempo="{{ $pregunta->tiempoRestante }}">
                Tiempo restante: {{ $pregunta->tiempoRestante }}
            </p>
        @endif
            <div class="pregunta">
                <div class="card shadow rounded p-3 m-4">
                @csrf
                    <div class="card-body">
                        <h4 style="color: rgba(51,58,153,255);" >
                            @if($pregunta->required)
                                <span style="color: red;">*</span>
                            @endif
                            <span name="preguntaId" value="{{ $pregunta->pregunta_id }}"> {{$numPregunta}}</span>
                            <span>. {{ $pregunta->pregunta ?? 'Texto de la pregunta' }}</span></h4>
                        <div class="d-flex" id="Respuestas">
                            <div class="form-check d-block">
                                @if (!empty($pregunta->respuestas) && is_iterable($pregunta->respuestas))
                                    @foreach ($pregunta->respuestas as $respuesta)
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" 
                                                name="respuestas[{{$pregunta->pregunta_id}}]" 
                                                value="{{ $respuesta->respuesta_id }}"
                                                @if($pregunta->required)
                                                    required
                                                @endif
                                                @if($respuesta->opcion == "x")
                                                    style="display: none;"
                                                @endif
                                                >
                                            <!--<p style="color: blue;">DEBUG Name input: respuestas[{{ $pregunta->pregunta_id }}]</p>-->

                                            <label class="form-check-label" 
                                                @if($respuesta->opcion == "x")
                                                    style="display: none;"
                                                @endif>
                                                {{ $respuesta->opcion }}&#41; {{ $respuesta->respuesta }}
                                            </label>
                                        </div>
                                    @endforeach
                                @elseif($pregunta->required)
                                    <div class="alert alert-danger">
                                        Esta pregunta es requerida.
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @php
                $numPregunta++;
            @endphp
        @endforeach

        <!--obtener última pregunta-->
        @php
            $ultimaPregunta = $preguntas->last();
        @endphp
        <!--estos nos lo ve el usuario-->
        <input type="hidden" name="rango_inicio" value="{{ request('rango_inicio', 1) }}">
        <input type="hidden" name="rango_fin" value="{{ request('rango_fin', 35) }}">
        <input type="hidden" name="tiempo_agotado" id="tiempo_agotado" value="0">

        <!-- Botones -->
        @if ($ultimaPregunta && $ultimaPregunta->pregunta_id == 265)
            <button type="submit">Enviar</button>
        @else
            <button type="submit" name="action">Siguiente</button>
        @endif
    </form>

<script src="{{ asset('js/temporizador.js') }}"></script>