@extends('layouts.estudiante')

@section('styles')
<style>
    body {
        background-color: #ffecce;

    }
</style>
@endsection

@section('content')
<div class="row mt-5">
    <div class="col">
        <form action="{{route('estudiantes.store_game')}}" method="post">
            @csrf

            <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    @foreach ($operacion as $index => $op )
                    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="{{$index}}" class="{{ $index == 0 ? 'active' : '' }}" aria-label="Slide {{$index}}"></button>
                    @endforeach
                </div>
                <div class="carousel-inner">
                    @foreach ($operacion as $index => $op )
                    <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                        <p class="text-center" style="margin-bottom: 5%;">
                            <img src="{{$op->imagenes}}" class="" alt="..." width="100vh">
                        </p>
                        <div style="min-height: 140px;">
                            <div class="carousel-caption d-block">
                                <h5 class="card-title text-uppercase">{{$op->operacion}}</h5>
                                <p>{{$op->descipcion}}</p>
                                <input type="text" hidden value="{{$op->id}}" name="operacion_id[]">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="" class="form-label">VALOR 1</label>
                                            <input type="number" step="0.01" class="form-control" id="valor1{{$index}}" name="valor1[]" />
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="" class="form-label">VALOR 2</label>
                                        <input type="number" step="0.01" class="form-control" id="valor2{{$index}}" name="valor2[]" />
                                    </div>
                                    <div class="col-md-4">
                                        <label for="" class="form-label">RESPUESTA</label>
                                        <input type="number" step="0.01" class="form-control" id="respuesta{{$index}}" name="respuesta[]" />
                                    </div>
                                </div>
                            </div>
                        </div><!-- end of div style min-height: 140px; -->
                    </div>
                    @endforeach
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>

            <!-- Botón de submit deshabilitado inicialmente -->
            <button type="submit" class="btn btn-primary mt-3" id="submitButton" disabled>Enviar</button>
        </form>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const carousel = document.getElementById('carouselExampleDark');
                const submitButton = document.getElementById('submitButton');

                carousel.addEventListener('slid.bs.carousel', function() {
                    const activeIndex = Array.from(carousel.querySelectorAll('.carousel-item')).findIndex(item => item.classList.contains('active'));
                    const totalItems = carousel.querySelectorAll('.carousel-item').length;

                    // Habilitar el botón si estamos en el último slide
                    if (activeIndex === totalItems - 1) {
                        submitButton.disabled = false;
                    } else {
                        submitButton.disabled = true;
                    }
                });
            });
        </script>
    </div>
</div>

@endsection

@section('scripts')

@endsection