@extends("profesor.layout.layout")

@section("styles")
    @php
        $titulo = "Asistencia";
        $modulo = "Control";
        $vista = "Editar lista";
    @endphp
    <title>{{ getenv("APP_NAME") }} | {{ $titulo }}</title>
    <style>
        .custom-table tbody tr:hover {
            background-color: #9cf3d4; /* Cambia este color al que desees */
            transition: background-color 0.3s ease; /* Agrega transición para suavizar el cambio */
        }
    </style>
@endsection

@section("contenido")
    <div class="row gx-5 gx-xl-10 align-items-stretch">
        @if ($errors->any())
            <div class="alert alert-danger">
                <h4>El registro tiene los siguientes errores.</h4>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <strong>{{ session('success') }}</strong>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        <div class="card">
            <div class="card-body">
                <form action="{{ route("profesor::asistencia.actualizar") }}" method="post" id="formularioAsistencia">
                    @csrf
                    <div class="row bg-warning">
                        <div class="col-md-4 px-4 py-4">
                            <h5 class="text-dark">{{ $seccion->seccion }} / {{ $materia->materia }} </h5>
                            <a href="{{route("profesor::materias.seccion",$seccion->id)}}"><button type="button" class="btn btn-sm btn-secondary">Volver</button></a>
                            <span class="text-dark">Fecha y hora que paso lista: <b>{{date("d-m-Y H:i",strtotime($asistencias[0]->created_at))}}</b></span>
                        </div>
                        <div class="col-md-3">
                            <label for="fecha"><b>Fecha asistencia editando </b></label>
                            <input type="date" class="form-control form-control-solid-bg bg-light-warning" value="{{$fecha}}" readonly required/>
                            <input type="hidden" name="seccion_id" id="seccion_id" value="{{ $seccion->id }}" required/>
                            <input type="hidden" name="materia_id" id="materia_id" value="{{ $materia->id }}" required/>
                            <input type="hidden" name="batch" id="batch" value="{{ $asistencias[0]->batch }}" required/>
                            <input type="hidden" name="fecha" id="fecha" value="{{ $asistencias[0]->fecha }}" required/>
                        </div>
                        <div class="col-md-1">
                            <label for="lecciones"><b>Lecciones</b></label>
                            <input type="number" min="1" max="10" class="form-control" name="lecciones" id="lecciones" value="{{$asistencias[0]->lecciones}}" required/>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered custom-table mt-2">
                            <thead>
                            <tr>
                                <td><b>#</b></td>
                                <td><b>Primer apellido</b></td>
                                <td><b>Segundo apellido</b></td>
                                <td><b>Nombres</b></td>
                                <td class="text-center" width="5px"><b>Presente</b></td>
                                <td class="text-center" width="5px"><b>Tardía</b></td>
                                <td class="text-center" width="5px"><b>Ausente</b></td>
                                <td class="text-center" width="5px"><b>Escapado</b></td>
                                <td class="text-center" width="5px"><b>Justificada</b></td>
                                <td class="text-center" width="300px"><b>Comentario</b></td>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($asistencias as $asistencia)
                                <tr>
                                    <td title="{{ $asistencia->estudiante->identificacion }}">{{ $loop->index + 1 }}</td>
                                    <td>{{ $asistencia->estudiante->primer_apellido }}</td>
                                    <td>{{ $asistencia->estudiante->segundo_apellido }}</td>
                                    <td>{{ $asistencia->estudiante->nombre }}</td>
                                    <td align="center" class="text-center">
                                        <div class="form-check form-check-solid form-check-success d-flex justify-content-center align-items-center grupo-asistencia">
                                            <input
                                                class="form-check-input h-30px w-30px"
                                                type="radio"
                                                value="1"
                                                id="p{{$asistencia->estudiante->id}}"
                                                name="asistencia[{{ $asistencia->estudiante->id }}]"
                                                {{ $asistencia->tipo_asistencia == 1 ? 'checked' : '' }}
                                            />
                                            <label class="form-check-label" for="p{{$asistencia->estudiante->id}}"></label>
                                        </div>
                                    </td>
                                    <td align="center" class="text-center">
                                        <div class="form-check form-check-solid form-check-warning form-check-solid d-flex justify-content-center align-items-center grupo-asistencia">
                                            <input
                                                class="form-check-input h-30px w-30px"
                                                type="radio"
                                                value="2"
                                                id="t{{$asistencia->estudiante->id}}"
                                                name="asistencia[{{ $asistencia->estudiante->id }}]"
                                                {{ $asistencia->tipo_asistencia== 2 ? 'checked' : '' }}

                                            />
                                            <label class="form-check-label" for="t{{$asistencia->estudiante->id}}"></label>
                                        </div>
                                    </td>
                                    <td align="center" class="text-center">
                                        <div class="form-check form-check-solid form-check-danger form-check-solid d-flex justify-content-center align-items-center grupo-asistencia">
                                            <input
                                                class="form-check-input h-30px w-30px"
                                                type="radio"
                                                value="3"
                                                id="a{{$asistencia->estudiante->id}}"
                                                name="asistencia[{{ $asistencia->estudiante->id }}]"
                                                {{ $asistencia->tipo_asistencia == 3 ? 'checked' : '' }}

                                            />
                                            <label class="form-check-label" for="a{{$asistencia->estudiante->id}}"></label>
                                        </div>
                                    </td>
                                    <td align="center" class="text-center">
                                        <div class="form-check form-check-solid form-check-danger form-check-solid d-flex justify-content-center align-items-center grupo-asistencia">
                                            <input
                                                class="form-check-input h-30px w-30px"
                                                type="radio"
                                                value="5"
                                                id="e{{$asistencia->estudiante->id}}"
                                                name="asistencia[{{ $asistencia->estudiante->id }}]"
                                                {{ $asistencia->tipo_asistencia== 5 ? 'checked' : '' }}

                                            />
                                            <label class="form-check-label" for="a{{$asistencia->estudiante->id}}"></label>
                                        </div>
                                    </td>
                                    <td align="center" class="text-center">
                                        <div class="form-check form-check-solid form-check-custom form-check-solid d-flex justify-content-center align-items-center grupo-asistencia">
                                            <input
                                                class="form-check-input h-30px w-30px"
                                                type="radio"
                                                value="4"
                                                id="j{{$asistencia->estudiante->id}}"
                                                name="asistencia[{{ $asistencia->estudiante->id }}]"
                                                {{ $asistencia->tipo_asistencia== 4 ? 'checked' : '' }}

                                            />
                                            <label class="form-check-label" for="j{{$asistencia->estudiante->id}}"></label>
                                        </div>
                                    </td>
                                    <td align="center" class="text-center">
                                        <input
                                            type="text"
                                            class="form-control form-control-sm"
                                            name="comentario_{{ $asistencia->estudiante->id }}"
                                            value="{{ $asistencia->comentario }}"
                                        />
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="row">
                        <button type="submit" id="btnSubmit" class="btn btn-warning btn-sm"><i class="fas fa-save pe-2"></i>Editar asistencia</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section("scripts")
    @vite('resources/js/app.js')
    <script>
        $(document).ready(function () {
            $('#formularioAsistencia').submit(function (event) {
                $("#btnSubmit").attr("disabled",true)

                $('tbody tr').each(function () {
                    if (!$(this).find('input[type="radio"]:checked').length) {
                        alert('Por favor, seleccione al menos una opción para cada estudiante.');
                        event.preventDefault();
                        $("#btnSubmit").attr("disabled",false)
                        return false;
                    }
                });
            });

            $(document).on("change", "#fecha", function() {
                let fecha=$(this).val();
                $("#btnSubmit").attr("disabled",true)
                let url="{{route("profesor::asistencia.pasarLista",["seccion"=>$seccion->id,"materia"=>$materia->id,"fecha"=>":fecha"])}}".replace(":fecha",fecha);
                window.location.href = url;
            });


        });
    </script>
@endsection