@extends("profesor.layout.layout")

@section("styles")
    @php
        $titulo = "Asistencia";
        $modulo = "Control";
        $vista = "Pasar 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 */
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type=number] {
            -moz-appearance: textfield;
        }
    </style>
@endsection

@section("contenido")
    <div class="row gx-5 gx-xl-10 align-items-stretch">
        <div class="card">
            <div class="card-body">
                <form action="{{ route("profesor::asistencia.guardar") }}" method="post" id="formularioAsistencia">
                    @csrf
                    <div class="row">
                        <div class="col-md-8">
                            <h5 class="text-primary">{{ $grupo->grupo }} / {{ $mod->modulo }}</h5>
                            <a href="{{route("profesor::modulos.grupo",$grupo->id)}}"><button type="button" class="btn btn-sm btn-secondary">Volver</button></a>
                        </div>
                        <div class="col-md-3">
                            <label for="fecha"><b>Fecha asistencia</b></label>
                            <input type="date" class="form-control form-control-sm form-control-solid-bg" name="fecha" id="fecha" value="{{$fecha}}" readonly required/>
                            <input type="hidden" name="grupo_id" id="grupo_id" value="{{ $grupo->id }}" required/>
                            <input type="hidden" name="modulo_id" id="modulo_id" value="{{ $mod->id }}" required/>
                        </div>

                        <div class="col-md-1">
                            <label for="lecciones"><b>Lecciones</b></label>
                            <input type="number" min="1" max="10" class="form-control form-control-sm " name="lecciones" id="lecciones" value="2" 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($estudiantes as $estudiante)
                                <tr class="lineaEstudiante">
                                    <td title="{{ $estudiante->identificacion }}">{{ $loop->index + 1 }}
                                        <input type="hidden" value="{{$estudiante->id}}" name="asistencia[]" readonly>
                                        <input type="hidden" value="0"  class="lineaLista" readonly>
                                    </td>
                                    <td>{{ $estudiante->primer_apellido }}</td>
                                    <td>{{ $estudiante->segundo_apellido }}</td>
                                    <td>{{ $estudiante->nombre }}</td>
                                    <td align="center" class="text-center">
                                        <div class="d-flex justify-content-center align-items-center gap-2"> <!-- presente-->
                                            <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 checkAsistencia" type="checkbox"/>
                                                <label class="form-check-label"></label>
                                            </div>
                                            <input type="number" class="numero form-control form-control-sm" style="width: 60px;" id="p{{$estudiante->id}}" name="lecciones_presente[{{ $estudiante->id }}]" disabled>
                                        </div>
                                    </td>
                                    <td align="center" class="text-center">
                                        <div class="d-flex justify-content-center align-items-center gap-2"> <!-- tardia-->
                                            <div class="form-check form-check-solid form-check-warning d-flex justify-content-center align-items-center grupo-asistencia">
                                                <input class="form-check-input h-30px w-30px checkAsistencia" type="checkbox"/>
                                                <label class="form-check-label"></label>
                                            </div>
                                            <input type="number" class="numero form-control form-control-sm" style="width: 60px;" id="p{{$estudiante->id}}" name="lecciones_tardia{{ $estudiante->id }}]" disabled>
                                        </div>
                                    </td>
                                    <td align="center" class="text-center">
                                        <div class="d-flex justify-content-center align-items-center gap-2"> <!-- ausente-->
                                            <div class="form-check form-check-solid form-check-danger d-flex justify-content-center align-items-center grupo-asistencia">
                                                <input class="form-check-input h-30px w-30px checkAsistencia" type="checkbox"/>
                                                <label class="form-check-label"></label>
                                            </div>
                                            <input type="number" class="numero form-control form-control-sm" style="width: 60px;" id="p{{$estudiante->id}}" name="lecciones_ausente[{{ $estudiante->id }}]" disabled>
                                        </div>
                                    </td>
                                    <td align="center" class="text-center">
                                        <div class="d-flex justify-content-center align-items-center gap-2"> <!--escapado-->
                                            <div class="form-check form-check-solid form-check-danger d-flex justify-content-center align-items-center grupo-asistencia">
                                                <input class="form-check-input h-30px w-30px checkAsistencia" type="checkbox"/>
                                                <label class="form-check-label"></label>
                                            </div>
                                            <input type="number" class="numero form-control form-control-sm" style="width: 60px;" id="p{{$estudiante->id}}" name="lecciones_escapado[{{ $estudiante->id }}]" disabled>
                                        </div>
                                    </td>
                                    <td align="center" class="text-center">
                                        <div class="d-flex justify-content-center align-items-center gap-2"> <!--justificado-->
                                            <div class="form-check form-check-solid form-check-custom d-flex justify-content-center align-items-center grupo-asistencia">
                                                <input class="form-check-input h-30px w-30px checkAsistencia" type="checkbox"/>
                                                <label class="form-check-label"></label>
                                            </div>
                                            <input type="number" class="numero form-control form-control-sm" style="width: 60px;" id="p{{$estudiante->id}}" name="lecciones_justificado[{{ $estudiante->id }}]" disabled>
                                        </div>
                                    </td>

                                    <td align="center" class="text-center">
                                        <input type="text" class="form-control form-control-sm" name="comentario_{{ $estudiante->id }}"/>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="row">
                        <button type="submit" id="btnSubmit" class="btn btn-success btn-sm"><i class="fas fa-save pe-2"></i>Guardar 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);

                let listo=true
                $('.lineaLista').each(function () {
                    if ($(this).val() == 0) {
                        //buscar la tr y poner borde rojo
                        $(this).closest("tr").addClass("bg-danger");
                        listo = false; // Cambiar a false si encontramos un 0
                        return false; // Salir del loop si encontramos un 0
                    }
                });

                if (!listo) {
                    event.preventDefault();
                    Swal.fire('¡Atención!', 'Todos los estudiantes deben tener al menos una lección asignada.', 'warning');
                    $("#btnSubmit").attr("disabled", false);
                }
            });

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

            let hoy="{{date("Y-m-d")}}";
            let fecha="{{$fecha}}";
            if(hoy!=fecha){
                swal.fire({icon: 'warning', title: 'Cuidado', html: "Estas pasando lista de un dia diferente al presente.",});
            }


            $('.checkAsistencia').on('change', function() {
                var td = $(this).closest('td');
                var inputNumber = td.find('input[type="number"]');
                let lecciones = parseInt($("#lecciones").val()); // Lecciones disponibles
                let total_lecciones_actual = 0;

                // Sumar los valores actuales de los input type number dentro del tr correspondiente
                $(this).closest('tr').find('input[type="number"]').each(function() {
                    if ($(this).val() != "") {
                        total_lecciones_actual += parseInt($(this).val());
                    }
                });

                let saldo = lecciones - total_lecciones_actual;
                if ($(this).is(':checked')) {
                    //remove class bg-danger
                    $(this).closest("tr").removeClass("bg-danger");
                    // Habilitar el input solo si el saldo es mayor a 0
                    if (saldo > 0) {
                        inputNumber.prop('disabled', false);
                        inputNumber.val(saldo); // Poner el saldo restante
                    } else {
                        Swal.fire('¡Atención!', 'No puedes asignar más lecciones, ya has alcanzado el máximo permitido.', 'warning');
                        $(this).prop('checked', false); // Desmarcar el checkbox si no hay saldo
                    }
                } else {
                    // Si se desmarca el checkbox, restar el valor actual del input y deshabilitarlo
                    let valorActual = parseInt(inputNumber.val()) || 0;
                    total_lecciones_actual -= valorActual;
                    inputNumber.prop('disabled', true);
                    inputNumber.val(""); // Limpiar el valor del input
                }

                // Actualizar el valor de lineaLista según el estado de los checkboxes en la fila
                let checkboxes = $(this).closest('tr').find('.checkAsistencia'); // Obtener todos los checkboxes en la fila
                let lineaListaValue = checkboxes.is(':checked') ? 1 : 0; // Si al menos uno está chequeado, asignar 1, si no, 0
                $(this).closest('tr').find('.lineaLista').val(lineaListaValue); // Actualizar el campo oculto


            });

        });
    </script>
@endsection