@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-8 px-4 py-4">
                            <h5 class="text-dark">{{ $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>
                            <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="grupo_id" id="grupo_id" value="{{ $grupo->id }}" required/>
                            <input type="hidden" name="modulo_id" id="modulo_id" value="{{ $mod->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 }}
                                        <input type="hidden" value="{{$asistencia->estudiante->id}}" name="asistencia[]" readonly>
                                        <input type="hidden" value="0"  class="lineaLista" readonly>
                                    </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="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"  {{($asistencia->lecciones_presente>0)?"checked":""}} />
                                                <label class="form-check-label"></label>
                                            </div>
                                            <input type="number" class="numero form-control form-control-sm" style="width: 60px;" id="p{{$asistencia->estudiante->id}}" name="lecciones_presente[{{ $asistencia->estudiante->id }}]" value="{{$asistencia->lecciones_presente}}" {{($asistencia->lecciones_presente==0)?"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" {{($asistencia->lecciones_tardia>0)?"checked":""}}  />
                                                <label class="form-check-label"></label>
                                            </div>
                                            <input type="number" class="numero form-control form-control-sm" style="width: 60px;" id="t{{$asistencia->estudiante->id}}" name="lecciones_tardia[{{ $asistencia->estudiante->id }}]" value="{{$asistencia->lecciones_tardia}}"  {{($asistencia->lecciones_tardia==0)?"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-danger d-flex justify-content-center align-items-center grupo-asistencia">
                                                <input class="form-check-input h-30px w-30px checkAsistencia" type="checkbox" {{($asistencia->lecciones_ausente>0)?"checked":""}} />
                                                <label class="form-check-label"></label>
                                            </div>
                                            <input type="number" class="numero form-control form-control-sm" style="width: 60px;" id="a{{$asistencia->estudiante->id}}" name="lecciones_ausente[{{ $asistencia->estudiante->id }}]" value="{{$asistencia->lecciones_ausente}}"  {{($asistencia->lecciones_ausente==0)?"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" {{($asistencia->lecciones_escapado>0)?"checked":""}} />
                                                <label class="form-check-label"></label>
                                            </div>
                                            <input type="number" class="numero form-control form-control-sm" style="width: 60px;" id="e{{$asistencia->estudiante->id}}" name="lecciones_escapado[{{ $asistencia->estudiante->id }}]" value="{{$asistencia->lecciones_escapado}}"  {{($asistencia->lecciones_escapado==0)?"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" {{($asistencia->lecciones_justificado>0)?"checked":""}} />
                                                <label class="form-check-label"></label>
                                            </div>
                                            <input type="number" class="numero form-control form-control-sm" style="width: 60px;" id="e{{$asistencia->estudiante->id}}" name="lecciones_justificado[{{ $asistencia->estudiante->id }}]" value="{{$asistencia->lecciones_justificado}}"  {{($asistencia->lecciones_justificado==0)?"disabled":""}}  >
                                        </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);
                $("#btnSubmit").attr("disabled", false);
            });

            $('.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