<div id="completar_compra" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" >
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Completar Compra</h4>
            </div>
            <div class="modal-body ">
                <pre style="font-size:24px;text-align:center"><strong class="text-danger">$<?php echo number_format(round($total_compra),0);?></strong></pre>

                <div class="middle" >
                    <label>
                        <input type="radio" name="forma_pago" id="radio_contado" value="Contado" checked onchange="pagoOnChange()" />
                        <div class="front-end box"><span>CONTADO</span></div>
                    </label>
                    <label>
                        <input type="radio" name="forma_pago" id="radio_credito" value="Credito" onchange="pagoOnChange()" />
                        <div class="back-end box"><span>CREDITO</span></div>
                    </label>
                </div>


                <div id="div_contado" style="display:block;">
                    <label>Descontar de:</label>
                    <select name="select_caja" id="select_caja" class="form-control name_list" required  onChange="CajaOnChange(this)" >
                        <option value="Caja_Mayor">Caja mayor</option>
                        <?php
                        $sql=mysqli_query($con, "SELECT count(*) as aper_num, mca_id,cajas_caja_id, apertura, mca_estado from movimiento_caja where mca_usuario='$usu_id' and empresa='$empresa' and sucursal='$sucursal' and mca_estado='1'");
                        $row= mysqli_fetch_array($sql);
                        $cajas_caja_id=$row['cajas_caja_id'];

                        $datos=mysqli_query($con,"SELECT * FROM cajas where caja_id ='$cajas_caja_id'");
                        if($fila = mysqli_fetch_array( $datos ))
                        {
                            echo' <option value="'.$fila['caja_id'].'">'.$fila['caja_nombre'].'</option>';
                        }

                        ?>
                    </select>

                    <div id="div_caja_mayor" style="display:block;" class="div_caja_mayor">
                        <form method="post" action="" id="form_compra_caja_mayor">
                            <input type="hidden" name="formapagoo" id="formapagoo" class="form-control input-sm" readonly value="Contado">
                            <input type="hidden" name="dias" id="dias" value="0" class="form-control input-sm">
                            <input type="hidden" name="caja_descontar" id="caja_descontar" value="Caja_Mayor" required>
                            <input type="hidden" name="valor" id="valor" value="<?php echo round($total_compra);?>" class="form-control input-sm" required>
                            <label>Medio de Pago</label>
                            <select name="medio_pago" class="form-control input-sm medio_pago_select" required>
                                <option value="" disabled selected>Seleccione...</option>
                                <option value="Efectivo">Efectivo</option>
                                <?php
                                    $datos = mysqli_query($con, "SELECT * FROM banco WHERE empresa='$empresa' ORDER BY ban_nombre ASC");
                                    while ($fila = mysqli_fetch_array($datos)) {
                                        echo '<option value="'.$fila['ban_nombre'].'">'.$fila['ban_nombre'].'</option>';
                                    }
                                ?>
                            </select>
                            </br>
                            <label for="factura" style="width:100%">Adjuntar Factura del proveedor ( PDF )</label>
                            <input type="file"  name="factura" id="factura">

                            <div class="modal-footer" >
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                                <button type="submit" class="btn btn-success" name="btn_compra_caja_mayor" value="btn_compra_caja_mayor" id="btn_compra_caja_mayor">Registrar</button>
                            </div>
                        </form>
                    </div>


                    <div id="div_caja_menor" style="display:none;">
                        </br>
                        <button type="button" id="agregar_pago" class="btn btn-primary btn-sm mt-2">+ Agregar otro método</button>
                        <form method="post" action="" id="form_compra_caja_menor">
                            <div id="pagos_container">
                                <div class="metodo_pago_row"> 
                                    <div class="col-md-5"> 
                                        <input type="hidden" name="formapagoo"id="formapagoo" class="form-control input-sm" readonly value="Contado">
                                        <input type="hidden" name="dias" id="dias" value="0" class="form-control input-sm">
                                        <input type="hidden" name="caja_descontar" id="caja_descontar" value="Caja_Menor" class="form-control input-sm">
                                        <input type="hidden" name="valor" id="valor" value="<?php echo round($total_compra);?>" class="form-control input-sm" required>
                                        <input type="hidden" id="total_venta" value="<?php echo round($total_compra);?>">
                                        <label>Medio de Pago</label>
                                        <select name="medio_pago[]" class="form-control input-sm medio_pago_select" required>
                                            <option value="" disabled selected>Seleccione...</option>
                                            <option value="Efectivo">Efectivo</option>
                                            <?php
                                                $datos = mysqli_query($con, "SELECT * FROM banco WHERE empresa='$empresa' ORDER BY ban_nombre ASC");
                                                while ($fila = mysqli_fetch_array($datos)) {
                                                    echo '<option value="'.$fila['ban_nombre'].'">'.$fila['ban_nombre'].'</option>';
                                                }
                                            ?> 
                                        </select> 
                                    </div> 
                                    <div class="col-md-3"> 
                                        <label>Saldo Disponible</label> 
                                        <input type="text" class="form-control input-sm saldo_disponible" readonly> 
                                    </div> 
                                    <div class="col-md-3"> 
                                        <label>Valor</label> 
                                        <input type="number" name="valor_pago[]" class="form-control input-sm valor_pago_input" required> 
                                    </div> 
                                    <div class="col-md-1"> 
                                        <label>&nbsp;</label> 
                                        <a type="button" class="btn btn-xs btn-danger btn-block eliminar_pago"> 
                                            <i class="btn-icon-only icon-remove"></i>
                                        </a> 
                                    </div> 
                                </div>
                            </div>
                            </br>

                            <label>Total ingresado</label>
                            <input type="text" class="form-control input-sm" id="suma_metodos_input" readonly required>
                            <div id="alerta_saldo" class="text-danger" style="display:none;">
                                ⚠️¡El valor excede el saldo disponible!
                            </div>
                            <div id="alerta_total" class="text-danger" style="display:none;">
                                ⚠️ La suma de los métodos de pago no coincide con el total de la venta.
                            </div>
                            </br>
                            <label for="factura2" style="width:100%">Adjuntar Factura del proveedor ( PDF )</label>
                            <input type="file"  name="factura" id="factura2">
                            <div class="modal-footer" >
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                                <button type="submit" class="btn btn-success" name="btn_compra_caja_menor" value="btn_compra_caja_menor" id="btn_compra_caja_menor">Registrar</button>
                            </div>
                        </form>
                    </div>
                </div>



                <div id="div_credito" style="display:none;">
                    <form method="post" action="" id="form_compra_credito" name="form_compra_credito" enctype="multipart/form-data">
                        <div class="form-group">
                            <label> Plazo dias</label>
                            <input type="hidden" name="formapagoo" id="formapagoo" class="form-control input-sm" readonly value="Credito">
                            <input type="number" name="dias" id="dias" value="15" class="form-control input-sm" required>
                        </div> <!-- /.form-group -->
                        </br>
                        <label for="factura1" style="width:100%">Adjuntar Factura del proveedor ( PDF )</label>
                        <input type="file"  name="factura" id="factura1">
                        <div class="modal-footer" >
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                            <button type="button" class="btn btn-success" name="btn_compra_credito" value="btn_compra_credito" id="btn_compra_credito">Registrar</button>
                        </div>
                    </form>
                </div>


            </div> <!-- /.widget stacked -->
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<style type="text/css">
    .input-error {
    border: 1px solid red;
    background-color: #ffe5e5;
}
</style>


<script type="text/javascript">
//FORMA DE PAGO    
function pagoOnChange() 
{
    const contado = document.getElementById("radio_contado");
    const credito = document.getElementById("radio_credito");
    const divContado = document.getElementById("div_contado");
    const divCredito = document.getElementById("div_credito");

    if (contado.checked) 
    {
        divContado.style.display = "block";
        divCredito.style.display = "none";
    } 
    else if (credito.checked) 
    {
        divContado.style.display = "none";
        divCredito.style.display = "block";
    }
}


//DESCONTAR DE CAJA
$('#select_caja').change(function() {
  var valorSeleccionado = $(this).val();
  $('#caja_descontar').val(valorSeleccionado);
});

//CAMBIO DE CAJA
function CajaOnChange(sel) {
      if (sel.value=="Caja_Mayor"){
           div_caja_mayor = document.getElementById("div_caja_mayor");
           div_caja_mayor.style.display = "";
           div_caja_menor = document.getElementById("div_caja_menor");
           div_caja_menor.style.display = "none";
      }else  {
           div_caja_mayor = document.getElementById("div_caja_mayor");
           div_caja_mayor.style.display="none";

           div_caja_menor = document.getElementById("div_caja_menor");
           div_caja_menor.style.display = "";
      }
}

//DINERO DISPONIBLE
function miFuncion(medio_pago) {
    $.get("./php_compras/dinero_disponible.php", { medio_pago: medio_pago }, function(data) {
        $("#saldo").val(data.saldo);
        $("#div_transferrencia").html(data.referencia_html);
    }, "json");
}


$(function () 
{
    $("#btn_compra_credito").click(function (event) 
    {
        event.preventDefault(); // Prevenir envío por defecto (muy importante)
        // VALIDACIÓN de inputs vacíos en #form_compra_credito
        var isValid = true;
        // Opcional: limpiar errores anteriores
        $("#form_compra_credito input").each(function () {
            $(this).removeClass("input-error");
            $(this).removeAttr("title"); // Limpiamos title anterior
        });

        $("#form_compra_credito input").each(function () {
            if ($(this).is(':visible') && !$(this).is(':disabled') && $(this).val().trim() === "") {
            $(this).addClass("input-error");
            $(this).attr("title", "Este campo es obligatorio"); // 🔔 Mensaje personalizado
            isValid = false;
            }
        });
        if (!isValid) {
            return; // No continúa si hay campos vacíos
        }

        // DESDE AQUÍ TU CÓDIGO ORIGINAL
        $('#btn_compra_credito').attr("disabled", true);

        var parametros = new FormData();
        $("#form_compra, #form_compra_credito").serializeArray().forEach(function (field) {
            parametros.append(field.name, field.value);
        });

        $("#form_compra input[type='file'], #form_compra_credito input[type='file']").each(function () {
            for (var i = 0; i < this.files.length; i++) {
                parametros.append(this.name, this.files[i]);
            }
        });

        $.ajax({
            type: "POST",
            url: "php_compras/registrar_compra.php",
            data: parametros,
            contentType: false,
            processData: false,
            beforeSend: function () {
                $('#resultados').html('<center><img src="./img/ajax-loader.gif"> CARGANDO...</center>');
            },
            success: function (datos) {
                $("#resultados").html(datos);
                $('#btn_compra_credito').attr("disabled", false);
                $('#completar_compra').modal('hide');
                $('body').removeClass('modal-open');
                $('.modal-backdrop').remove();
                document.getElementById("form_compra").reset();
                document.getElementById("form_compra_credito").reset();
                loadTabla();
            },
            error: function (xhr, status, error) {
                console.error("Error en la petición AJAX:", error);
                $('#btn_compra_credito').attr("disabled", false);
                $('#resultados').html('<div class="alert alert-danger">Error al enviar los datos.</div>');
            }
        });
    });
});




$(function () 
{
    $("#btn_compra_caja_mayor").click(function (event) 
    {
        event.preventDefault(); // Prevenir envío por defecto (muy importante)
        // VALIDACIÓN de inputs vacíos en #form_compra_credito
       var isValid = true;

        // Limpiar errores anteriores en select
        $("#div_caja_mayor select").each(function () {
            $(this).removeClass("input-error");
            $(this).removeAttr("title");
        });

       

        // Validar que todos los métodos de pago estén completos
        $(".div_caja_mayor").each(function () {
            let medio = $(this).find(".medio_pago_select").val();

            if (!medio || medio === "") {
                alert("Debe seleccionar un Medio de pago.");
                isValid = false;
            }
        });




        if (!isValid) {
            return; // Detiene ejecución si hay campos vacíos
        }

        // DESDE AQUÍ TU CÓDIGO ORIGINAL
        $('#btn_compra_caja_mayor').attr("disabled", true);
        var parametros = new FormData();
        $("#form_compra, #form_compra_caja_mayor").serializeArray().forEach(function (field) {
            parametros.append(field.name, field.value);
        });

        $("#form_compra input[type='file'], #form_compra_caja_mayor input[type='file']").each(function () {
            for (var i = 0; i < this.files.length; i++) {
                parametros.append(this.name, this.files[i]);
            }
        });

        $.ajax({
            type: "POST",
            url: "php_compras/registrar_compra.php",
            data: parametros,
            contentType: false,
            processData: false,
            beforeSend: function () {
                $('#resultados').html('<center><img src="./img/ajax-loader.gif"> CARGANDO...</center>');
            },
            success: function (datos) {
                $("#resultados").html(datos);
                $('#btn_compra_caja_mayor').attr("disabled", false);
                $('#completar_compra').modal('hide');
                $('body').removeClass('modal-open');
                $('.modal-backdrop').remove();
                document.getElementById("form_compra").reset();
                document.getElementById("form_compra_caja_mayor").reset();
                loadTabla();
            },
            error: function (xhr, status, error) {
                console.error("Error en la petición AJAX:", error);
                $('#btn_compra_caja_mayor').attr("disabled", false);
                $('#resultados').html('<div class="alert alert-danger">Error al enviar los datos.</div>');
            }
        });
    });
});






$(function () {
    $("#btn_compra_caja_menor").click(function (event) {
        event.preventDefault(); // Prevenir envío por defecto
        // Obtener total esperado
        let totalEsperado = parseFloat($("#valor").val()) || 0;
        // Calcular suma de los métodos de pago
        let sumaPagos = 0;
        $(".valor_pago_input").each(function () {
            sumaPagos += parseFloat($(this).val()) || 0;
        });
        // Comparar suma
        if (sumaPagos !== totalEsperado) {
            alert("La suma de los métodos de pago (" + sumaPagos.toLocaleString("es-CO") + ") debe ser igual al total de la compra (" + totalEsperado.toLocaleString("es-CO") + ").");
            return;
        }
        // Validar que todos los métodos de pago estén completos
        let camposValidos = true;
        $(".metodo_pago_row").each(function () {
            let medio = $(this).find(".medio_pago_select").val();
            let valor = $(this).find(".valor_pago_input").val();

            if (!medio || medio === "") {
                alert("Por favor selecciona un método de pago en todas las filas.");
                camposValidos = false;
                return false; // Rompe el each
            }

            if (!valor || isNaN(parseFloat(valor)) || parseFloat(valor) <= 0) {
                alert("Por favor ingresa un valor válido para cada método de pago.");
                camposValidos = false;
                return false;
            }
        });

        if (!camposValidos) {
            return;
        }

        // Proceder con envío AJAX
        $('#btn_compra_caja_menor').attr("disabled", true);
        var parametros = new FormData();
        $("#form_compra, #form_compra_caja_menor").serializeArray().forEach(function (field) {
            parametros.append(field.name, field.value);
        });

        $("#form_compra input[type='file'], #form_compra_caja_menor input[type='file']").each(function () {
            for (var i = 0; i < this.files.length; i++) {
                parametros.append(this.name, this.files[i]);
            }
        });

        $.ajax({
            type: "POST",
            url: "php_compras/registrar_compra.php",
            data: parametros,
            contentType: false,
            processData: false,
            beforeSend: function () {
                $('#resultados').html('<center><img src="./img/ajax-loader.gif"> CARGANDO...</center>');
            },
            success: function (datos) {
                $("#resultados").html(datos);
                $('#btn_compra_caja_menor').attr("disabled", false);
                $('#completar_compra').modal('hide');
                $('body').removeClass('modal-open');
                $('.modal-backdrop').remove();
                document.getElementById("form_compra").reset();
                document.getElementById("form_compra_caja_menor").reset();
                loadTabla();
            },
            error: function (xhr, status, error) {
                console.error("Error en la petición AJAX:", error);
                $('#btn_compra_caja_menor').attr("disabled", false);
                $('#resultados').html('<div class="alert alert-danger">Error al enviar los datos.</div>');
            }
        });
    });
});








$(document).ready(function() {
    // Agregar nueva fila
    $(document).on('click', '#agregar_pago', function () {
    var nuevoMetodo = `
        <div class="metodo_pago_row">
            <div class="col-md-5">
                <label>Medio de Pago</label>
                <select name="medio_pago[]" class="form-control input-sm medio_pago_select" required>
                    <option value="" disabled selected>Seleccione...</option>
                    <option value="Efectivo">Efectivo</option>
                    <?php
                        $datos = mysqli_query($con, "SELECT * FROM banco WHERE empresa='$empresa' ORDER BY ban_nombre ASC");
                        while ($fila = mysqli_fetch_array($datos)) {
                            echo '<option value="'.$fila['ban_nombre'].'">'.$fila['ban_nombre'].'</option>';
                        }
                    ?>
                </select>
            </div>
            <div class="col-md-3">
                <label>Saldo Disponible</label>
                <input type="text" class="form-control input-sm saldo_disponible" readonly>
            </div>
            <div class="col-md-3">
                <label>Valor</label>
                <input type="number" name="valor_pago[]" class="form-control input-sm valor_pago_input" required>
            </div>
            <div class="col-md-1">
                <label>&nbsp;</label>
                <a type="button" class="btn btn-xs btn-danger btn-block eliminar_pago">
                    <i class="btn-icon-only icon-remove"></i>
                </a>
            </div>
        </div>`;
    $('#pagos_container').append(nuevoMetodo);
    actualizarOpcionesDisponibles();
    });


    // Eliminar fila
    $('#pagos_container').on('click', '.eliminar_pago', function() {
        if ($('.metodo_pago_row').length > 1) {
            $(this).closest('.metodo_pago_row').remove();
            actualizarOpcionesDisponibles();
        }
    });

    // Consultar saldo
    $('#pagos_container').on('change', '.medio_pago_select', function() {
        var medio_pago = $(this).val();
        var fila = $(this).closest('.metodo_pago_row');
        var inputSaldo = fila.find('.saldo_disponible');

        $.getJSON('./php_compras/dinero_disponible.php', { medio_pago: medio_pago }, function(data) {
            inputSaldo.val(data.saldo || 0);
        });

    });

    // Validación individual por medio de pago
    $('#pagos_container').on('input', '.valor_pago_input', function () {
    let fila = $(this).closest('.metodo_pago_row');
    let medioSeleccionado = fila.find('.medio_pago_select').val();

    if (!medioSeleccionado) {
        alert('Primero seleccione el método de pago.');
        $(this).val('');
        return;
    }
    validarFila($(this));
    validarSumaTotal();
    mostrarSumaTotal();
    });

    function validarFila(input) {
        var fila = input.closest('.metodo_pago_row');
        var valorIngresado = parseFloat(input.val()) || 0;
        var saldoDisponible = parseFloat(fila.find('.saldo_disponible').val()) || 0;

        if (valorIngresado > saldoDisponible) {
            $('#alerta_saldo').show();
            input.addClass('is-invalid');
        } else {
            $('#alerta_saldo').hide();
            input.removeClass('is-invalid');
        }
    }

    function validarSumaTotal() {
        var totalVenta = parseFloat($('#total_venta').val()) || 0;
        var suma = 0;

        $('.valor_pago_input').each(function() {
            suma += parseFloat($(this).val()) || 0;
        });

        if (suma !== totalVenta) {
            $('#alerta_total').show();
            return false;
        } else {
            $('#alerta_total').hide();
            return true;
        }
    }

    // Validar antes de enviar
    $('#formulario_pago').on('submit', function(e) {
        if (!validarSumaTotal()) {
            e.preventDefault();
            alert('La suma total de los métodos de pago debe ser igual al total de la venta.');
        }
    });
});

function actualizarOpcionesDisponibles() {
    let seleccionados = [];

    // Recoger valores seleccionados
    $('.medio_pago_select').each(function() {
        let val = $(this).val();
        if (val) {
            seleccionados.push(val);
        }
    });

    // Para cada select, ocultar opciones seleccionadas en otros
    $('.medio_pago_select').each(function() {
        let actual = $(this).val();
        $(this).find('option').each(function() {
            let val = $(this).val();

            if (val === '' || val === actual) {
                // Dejar visible la opción seleccionada actual y el placeholder
                $(this).show();
            } else if (seleccionados.includes(val)) {
                // Ocultar opciones ya usadas en otros selects
                $(this).hide();
            } else {
                $(this).show();
            }
        });
    });
}
$('#pagos_container').on('change', '.medio_pago_select', function() {
    actualizarOpcionesDisponibles();
});

function mostrarSumaTotal() {
    let suma = 0;
    $('.valor_pago_input').each(function() {
        suma += parseFloat($(this).val()) || 0;
    });

    // Actualiza el input con el valor total formateado
    $('#suma_metodos_input').val(suma.toLocaleString('es-CO'));
    
    // (Opcional) Actualiza el span si lo sigues usando
    $('#suma_metodos').text(suma.toLocaleString('es-CO'));
    $('#total_venta_texto').text(parseFloat($('#total_venta').val()).toLocaleString('es-CO'));
}
</script> 



<style type="text/css">
input[type="file"]#factura {
 width: 0.1px;
 height: 0.1px;
 opacity: 0;
 overflow: hidden;
 position: absolute;
 z-index: -1;
 }

label[for="factura"] {
 font-size: 14px;
 font-weight: 600;
 color: #fff;
 background-color: #106BA0;
 display: inline-block;
 cursor: pointer;
 padding: 5px 40px ;
 width: fit-content;
 text-align: center;
 }

 input[type="file"]#factura1 {
 width: 0.1px;
 height: 0.1px;
 opacity: 0;
 overflow: hidden;
 position: absolute;
 z-index: -1;
 }

label[for="factura1"] {
 font-size: 14px;
 font-weight: 600;
 color: #fff;
 background-color: #106BA0;
 display: inline-block;
 cursor: pointer;
 padding: 5px 40px ;
 width: fit-content;
 text-align: center;
 }


 input[type="file"]#factura2 {
 width: 0.1px;
 height: 0.1px;
 opacity: 0;
 overflow: hidden;
 position: absolute;
 z-index: -1;
 }

label[for="factura2"] {
 font-size: 14px;
 font-weight: 600;
 color: #fff;
 background-color: #106BA0;
 display: inline-block;
 cursor: pointer;
 padding: 5px 40px ;
 width: fit-content;
 text-align: center;
 }
</style>
<style>
.middle {
  width: 100%;
  text-align: center;
  /* Made by */
}
.middle h1 {
  font-family: "Dax", sans-serif;
  color: #ccc;
}
.middle input[type="radio"] {
  display: none;
}
.middle input[type="radio"]:checked + .box {
  background-color: #009e90;
}
.middle input[type="radio"]:checked + .box span {
  color: white;
  transform: translateY(70px);
}
.middle input[type="radio"]:checked + .box span:before {
  transform: translateY(0px);
  opacity: 1;
}
.middle .box {
  width: 131px;
  height: 60px;
  background-color: #ccc;
  transition: all 250ms ease;
  will-change: transition;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  position: relative;
  font-family: "Dax", sans-serif;
  font-weight: 900;
  padding-top: 19px;
}
.middle .box span {
  left: 0;
  right: 0;
}
</style>