<?php 
    //QUERY PARA LOS USUARIOS RUT DATALIST.
    $sql_usuarios_rut = "SELECT * FROM usuario WHERE estado = 'Activo'";
    $queryusuarios_rut = mysqli_query($con, $sql_usuarios_rut);

    //ALUMNOS DATALIST INPUT
    $sql_alumnos = "SELECT * FROM alumnos WHERE estado = 'Activo'";
    $queryalumnos = mysqli_query($con, $sql_alumnos);
    $sql_apoderados = "SELECT * FROM apoderados WHERE estado = 'Activo'";
    $queryapoderados = mysqli_query($con, $sql_apoderados);

    //SQL PARA DATALIST HIDDEN CON INFO DE APODERADOS.
    $sql_alumnos2 = "SELECT * FROM alumnos WHERE estado = 'Activo'";
    $queryalumnos2 = mysqli_query($con, $sql_alumnos2);
    date_default_timezone_set('America/Santiago');
    //QUERY PARA LOS USUARIOS CORREO DATALIST.
    /*$sql_usuarios_correo = "SELECT * FROM usuario WHERE id_sucursal = '$id_sucursal_usuario' AND estado <> 'Eliminado'";
    $queryusuarios_correo = mysqli_query($con, $sql_usuarios_correo);

    //LISTADO DE SUCURSALES
    $sql_sucursal = "SELECT * FROM sucursal";
    $querysucursal = mysqli_query($con, $sql_sucursal);*/
?>

<script type="text/javascript">
        
        
        function completarcampos() {
            const alumnosInput = document.getElementById("alumnos");
            const apoderado = document.getElementById("apoderado");            
            var datalistalumnos = document.getElementById("list_alumnos").options;
            var datalistAlumnos2 = document.getElementById("list_alumnos2").options;
            const datalistAlumnos3 = document.getElementById('list_alumnos2');
            const checkboxContainer = document.getElementById('checkbox_container');
            const abonoInput = document.getElementById('abono');
            
            var arraydatalistalumno; 
            var arrayalumno; 

            for (var i = 0; i < datalistAlumnos2.length; i++) {    
                arraydatalistalumno = datalistAlumnos2[i].value.split(' | '); //el 0 es el rut
                arrayalumno = alumnosInput.value.split(' | '); //el 2 es el rut
                //arraytextprods = datalistalumnos[i].textContent.split(' | ');
                if (arraydatalistalumno[0] == arrayalumno[2]) {
                    apoderado.value = arraydatalistalumno[1] + " | "+arraydatalistalumno[2];                     
                }  
            }

            // Obtener el valor seleccionado del input (contiene el rut al final)
            const seleccionado = alumnosInput.value;
            const datosSeleccionado = seleccionado.split(' | ');
            const rutSeleccionado = datosSeleccionado[2];

            checkboxContainer.innerHTML = '';

            const opcionesDatalist = datalistAlumnos3.options;
            let encontrado = false;

            for (let i = 0; i < opcionesDatalist.length; i++) {
                const opcionDatos = opcionesDatalist[i].value.split(' | ');
                const rutOpcion = opcionDatos[0];

                if (rutOpcion === rutSeleccionado) {
                    encontrado = true;
                    const cantidadMensualidad = parseInt(opcionDatos[5]);
                    const mensualidadesPagadas = parseInt(opcionDatos[6]);
                    montoMensualidadOriginal = opcionDatos[4].replace(/\./g, ''); // Convertir a entero sin separadores de miles
                    montoMensualidadActual = parseInt(montoMensualidadOriginal);

                    if (!isNaN(cantidadMensualidad) && cantidadMensualidad > 0) {
                        checkboxContainer.innerHTML = '<p>Cantidad de Mensualidades:</p>';
                        for (let j = 1; j <= cantidadMensualidad; j++) {
                            const checkbox = document.createElement('input');
                            checkbox.type = 'checkbox';
                            checkbox.id = `mensualidad_${j}`;
                            checkbox.name = `mensualidad_${j}`;
                            checkbox.value = montoMensualidadActual;

                            const label = document.createElement('label');
                            label.htmlFor = `mensualidad_${j}`;
                            label.innerText = `Mensualidad ${j}`;

                            if (j <= mensualidadesPagadas) {
                                checkbox.checked = true;
                                checkbox.disabled = true;
                            }

                            checkbox.addEventListener('change', calcularAbono);

                            checkboxContainer.appendChild(checkbox);
                            checkboxContainer.appendChild(label);
                            checkboxContainer.appendChild(document.createElement('br'));
                        }
                    } else {
                        checkboxContainer.innerHTML = '<p>No hay mensualidades para este alumno.</p>';
                    }

                    break;
                }
            }
            if (!encontrado) {
                checkboxContainer.innerHTML = '<p>Alumno no encontrado en el listado de mensualidades.</p>';
            }
            abonoInput.value = '';
        }
        // Mostrar el input para cambiar el monto de la mensualidad
        function mostrarInputMonto() {
            document.getElementById('input_nuevo_monto_container').style.display = 'block';
        }
        // Cambiar el monto de mensualidad al ingresar un nuevo valor
        function cambiarMontoMensualidad() {
            const nuevoMonto = parseInt(document.getElementById('nuevo_monto_mensualidad').value);

            if (!isNaN(nuevoMonto) && nuevoMonto > 0) {
                montoMensualidadActual = nuevoMonto; // Actualizar el valor global del monto de mensualidad
                actualizarCheckboxes(); // Actualizar los checkboxes con el nuevo valor
                calcularAbono(); // Recalcular el abono con el nuevo monto
            } else {
                alert('Por favor, ingrese un monto válido.');
            }
        }
        // Actualizar los checkboxes con el nuevo monto de mensualidad
        function actualizarCheckboxes() {
            const checkboxContainer = document.getElementById('checkbox_container');
            const checkboxes = checkboxContainer.querySelectorAll('input[type="checkbox"]');

            checkboxes.forEach(checkbox => {
                if (!checkbox.disabled) {
                    checkbox.value = montoMensualidadActual; // Asignar el nuevo monto a los checkboxes
                }
            });
        }
        function calcularAbono() {
            const checkboxContainer = document.getElementById('checkbox_container');
            const abonoInput = document.getElementById('abono');
            let totalAbono = 0;
            const checkboxes = checkboxContainer.querySelectorAll('input[type="checkbox"]');

            checkboxes.forEach(checkbox => {
                if (checkbox.checked && !checkbox.disabled) {
                    totalAbono += parseInt(checkbox.value);
                }
            });

            abonoInput.value = totalAbono.toLocaleString('es-CL');
        }
</script>
<datalist name="list_ruts" id="list_ruts" class="col-12 bg-white list_ruts" hidden>
                                            <?php while ($row_usuario = mysqli_fetch_assoc($queryusuarios_rut)) {
                                            ?><option value="<?php echo $row_usuario['rut'];?>"></option>
                                            <?php }mysqli_free_result($queryusuarios_rut); ?>
                                            </datalist>
                                            <datalist name="list_alumnos" id="list_alumnos" class="col-12 bg-white list_alumnos" hidden>
                                            <?php while ($row_alumno = mysqli_fetch_assoc($queryalumnos)) {
                                            ?><option value="<?php echo $row_alumno['nombres'] ." ".$row_alumno['apellidos']." | ".$row_alumno['nivel_estudio'] ." | ".$row_alumno['rut'];?>"></option>
                                            <?php }mysqli_free_result($queryalumnos); ?>
                                            </datalist>

                                            <datalist name="list_alumnos2" id="list_alumnos2" class="col-12 bg-white list_alumnos2" hidden>
                                            <?php while ($row_alumno = mysqli_fetch_assoc($queryalumnos2)) {
                                            ?><option value="<?php echo $row_alumno['rut'] ." | ".$row_alumno['nombre_apoderado']." ".$row_alumno['apellido_apoderado'] ." | ".$row_alumno['rut_apoderado']." | ".$row_alumno['monto_matricula']." | ".$row_alumno['monto_mensualidad']." | ".$row_alumno['cantidad_mensualidad']." | ".$row_alumno['mensualidades_pagadas'];?>"></option>
                                            <?php }mysqli_free_result($queryalumnos2); ?>
                                            </datalist>
                                            <datalist name="list_apoderados" id="list_apoderados" class="col-12 bg-white list_apoderados" hidden>
                                            <?php while ($row_apoderado = mysqli_fetch_assoc($queryapoderados)) {
                                            ?><option value="<?php echo $row_apoderado['rut'];?>"></option>
                                            <?php }mysqli_free_result($queryapoderados); ?>
                                            </datalist>
<!-- SUB FORMULARIO PARA REGISTRAR CLIENTE DENTRO DEL FORMULARIO RECEPCION  -->
<div class="modal fade" id="registroUsuario" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <!-- Agregamos modal-lg para hacerlo más grande -->
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Registrar Pago de Mensualidad</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body ">
        <!-- Formulario -->
        <form class="user" id="registroForm">
          <!-- Cliente (datos relevantes) -->
            <div class="form-group row div-container">  
                                                <div class="col-sm-6 form-floating form-label-inside input-div" >
                                                    <input type="text" class="form-control" oninput="completarcampos()" list="list_alumnos" id="alumnos" name="alumnos" placeholder=" ">
                                                    <label for="alumnos" class="col-sm-12">Seleccionar Alumno</label>   
                                                </div>
                                                <div class="col-sm-6 form-floating form-label-inside input-div">
                                                    <input type="text" class="form-control" readonly id="apoderado" name="apoderado" placeholder=" ">
                                                    <label for="apoderado" class="col-sm-12">Apoderado</label>
                                                </div>
                                                
                                                <div class="col-sm-6 input-div"><br>
                                                   
                                                    <div class="col-sm-12" id="checkbox_container"><br>
                                                        

                                                    </div>
                                                </div> 
                                                <div class="col-sm-3 form-floating form-label-inside input-div">
                                                    <input type="text" class="form-control" readonly id="abono" name="abono" placeholder=" ">
                                                    <label for="abono" class="col-sm-12">Total Abonado</label>
                                                </div>                                                
                                                <div class="col-sm-3 form-floating form-label-inside input-div">  
                                                    <input type="date" class="form-control" id="fecha_pago" name="fecha_pago" value="<?php echo date('Y-m-d'); ?>" placeholder="">
                                                    <label for="fecha_pago" class="col-sm-9">Fecha de Pago</label>
                                                </div>  
                                                <!-- Botón para cambiar el monto de la mensualidad -->
                                                <div class="col-sm-3 form-floating form-label-inside input-div">
                                                    <button type="button" class="btn btn-primary" id="btn_cambiar_monto" onclick="mostrarInputMonto()">Cambiar Monto Mensualidad</button>
                                                </div>              
                                                <!-- Input oculto para ingresar el nuevo monto de mensualidad -->
                                                <div class="col-sm-3 form-floating form-label-inside input-div" id="input_nuevo_monto_container" style="display: none;">
                                                    <input type="number" class="form-control" id="nuevo_monto_mensualidad" name="nuevo_monto_mensualidad" placeholder="Ingrese nuevo monto">
                                                    <label for="nuevo_monto_mensualidad" class="col-sm-9">Nuevo Monto</label>
                                                    <button type="button" class="btn btn-success mt-2" onclick="cambiarMontoMensualidad()">Aplicar Nuevo Monto</button>
                                                </div>                              
                                                
            </div>      <br>      
          <!-- Botones para guardar y cerrar el formulario 
            QUITÉ EL ONCLICK, PARA FUNCIONAMIENTO, AGREGAR ONCLICK FUNCTION.-->
          <div class="form-group d-flex justify-content-center align-items-center"><br>
            <button type="button" class="btn btn-primary form-control" id="guardarBtn" onclick="registrarMensualidad()" style="margin: 5px;" >Registrar Mensualidad</button>
            <button type="button" class="btn btn-secondary form-control" style="margin: 5px;" data-bs-dismiss="modal">Cerrar</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script>
function registrarMensualidad() {
    document.getElementById("guardarBtn").disabled = true;
  //var nombre_tecnico = document.getElementById("nombre").value;
  var alumnos = $('#alumnos').val();
  var apoderado = $('#apoderado').val();
  var abono = $('#abono').val();
  var fecha_pago = $('#fecha_pago').val();
  var nuevo_monto_mensualidad = $('#nuevo_monto_mensualidad').val();
  var checkboxes = $('#checkboxes').val();
            var datalist_rut = document.getElementById("list_alumnos").options;
            var n_repetido = 0;
            for (var i = 0; i < datalist_rut.length; i++) {   
                    if (datalist_rut[i].value == alumnos) { 
                        n_repetido = n_repetido + 1;                        
                    }                      
            }
            if (alumnos === "" || n_repetido == 0) {
                Swal.fire({
                  title: "Error",
                  text: "Favor verificar el alumno Seleccionado, debe ser del listado.",
                  icon: "warning",
                  confirmButtonColor: "#2a3042",
                  confirmButtonText: "Aceptar"                  
                });
                document.getElementById("guardarBtn").disabled = false;
                return false; //para cortar o simmplemente detener el recorrido del script.                
            }
            if (fecha_pago == "") {
                Swal.fire({
                  title: "Error",
                  text: "Por favor seleccione una Fecha de Pago.",
                  icon: "warning",
                  confirmButtonColor: "#2a3042",
                  confirmButtonText: "Aceptar"                  
                });
                return false;
                document.getElementById("guardarBtn").disabled = false;
            }  
            // Obtener todos los checkboxes seleccionados
            var checkboxesSeleccionados = [];
            $('#checkbox_container input[type="checkbox"]:checked').each(function() {
                checkboxesSeleccionados.push($(this).val());
            });          
  $.ajax({
    type: 'POST',
    url: 'registro_mensualidad.php', // Nombre del archivo PHP para procesar el formulario
    data: {
        alumnos: alumnos,
        apoderado: apoderado,
        abono: abono,
        fecha_pago: fecha_pago,
        nuevo_monto_mensualidad: nuevo_monto_mensualidad,
        mensualidades: checkboxesSeleccionados
    },
    success: function(response) {
      // Procesar la respuesta del servidor, por ejemplo, mostrar un mensaje de éxito o error.
      //alert(response);
      var responseData = response.split("success");
      // Obtener el ID del usuario
      //var id_usuario = responseData[0];

      if (responseData.length > 1) {
        // Si la respuesta es "success", el registro fue exitoso
        Swal.fire({
            title: "Registro exitoso",
            text: "Las mensualidades se han registrado correctamente.",
            icon: "success",
            confirmButtonColor: "#2a3042",
            confirmButtonText: "Aceptar"
        }).then((result) => {
            if (result.isConfirmed) {

                $('#registroUsuario').modal('hide');
                $('#alumnos').val('');
                $('#apoderado').val('');
                $('#abono').val('');
                $('#fecha_pago').val('');
                $('#nuevo_monto_mensualidad').val('');
                document.getElementById("guardarBtn").disabled = false;
                location.reload();
            }
        });
      } else {
        // Si la respuesta no es "success", el registro falló
        Swal.fire({
            title: "Error",
            text: response,
            icon: "error",
            confirmButtonColor: "#2a3042",
            confirmButtonText: "Aceptar"
        });
        location.reload();
      }
      // Cerrar el modal después de guardar la marca.
      //$('#registroCliente').modal('close');
    }
  });
}
</script>