<div id="modificar<?php echo $reg['mca_id']; ?>" 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-hidden="true">×</button>
            <h4 class="modal-title"> Modificar Base de Apertura</h4>
            </div>
            <div class="modal-body">
                <form method="post" action="" id="form_apertura" name="form_apertura">
                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="col-md-11.5">
                                <div id="campos-container1">
                                    <!-- Los campos se agregarán dinámicamente aquí -->
                                </div>
                                <div>&nbsp;</div>
                                <!-- Botón para agregar campos -->
                                <div style="margin-top: 10px;">
                                    <div class="col-md-12">
                                        <button type="button" class="btn btn-warning btn-sm" onclick="agregarCampos()">+ Agregar Banco</button>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <label>&nbsp;</label>
                            </div>
                        </div>
                        <label style="color:red">*Las cantidades ingresadas seran sumadas a la apertura de caja</label>
                    </div> <!-- /.form-group -->
                    <input type="hidden" name="id" value="<?php echo $reg['mca_id']; ?>" >
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-info" name="btn_modificar" id="btn_modificar">Modificar</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div> 
</div>

<form name="Miformularionombre" method="post" action="" id="form_cerrar" name="form_cerrar">
<div id="cerrar<?php echo $reg['mca_id']; ?>" class="modal fade" tabindex="-1" role="dialog"  data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <h4 class="modal-title"> Cerrar caja</h4>
            </div>
            <div class="modal-body">
                <div id="resultados_cerrar"></div>
                <div id="div1">
                    <?php include('form_totales_caja.php'); ?>
                    <div class="col-md-12">
                        <div class="col-md-6" style="padding-left:0px">
                            <pre style="font-size:18px;text-align:center"><strong class="text-success">Efectivo</strong></pre>
                        </div>
                        <div class="col-md-6" style="padding-right:0px">
                            <pre style="font-size:18px;text-align:center"><strong class="text-danger">$<?php echo number_format($saldoencaja,0); ?></strong></pre>
                        </div>
                        </br>

                        <label>Efectivo en Caja:</label>
                        <input type="number" class="form-control input-sm" onKeyUp="Totales()" type="text" name="valor_cierre"  style="text-align:right"  autocomplete="off"  value="0" >
                        <input type="hidden" class="form-control input-sm" onKeyUp="Totales()" type="text" name="saldoencaja" value="<?php echo $saldoencaja; ?>"   style="text-align:right" autocomplete="off" readonly >
                        <label style="right;color:red">Diferencia:</label>
                        <input type="number" class="form-control input-sm" name="total" style="text-align:right;color:red" autocomplete="off"  value="-<?php echo $saldoencaja; ?>" readonly>
                    </div> <!-- /.form-group -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        <a class="btn btn-danger " data-toggle="modal" href="#cerrarcaja">Cerrar Caja</a>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div> 
</div>

<div id="cerrarcaja" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="alert alert-info alert-dismissable">
                    <strong>Desea cerrar la caja?</strong> <a href="#" class="alert-link"></a>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">NO</button>
                    <button type="submit" class="btn btn-danger" name="btn_cerrar" id="btn_cerrar">SI</button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
</form>



<script>
$("#form_apertura").submit(function( event ) {
$('#btn_modificar').attr("disabled", true);
var parametros = $(this).serialize();
   $.ajax({
      type: "POST",
      url: "php_caja/editar_apertura.php",
      data: parametros,
        beforeSend: function(objeto){
         $('#resultados').html('<center><img src="./img/ajax-loader.gif"> CARGANDO...</center>');
        },
        success: function(datos){
        $("#resultados").html(datos);
        $('#btn_modificar').attr("disabled", false);

        $('#modificar<?php echo $reg['mca_id']; ?>').modal('hide');
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
        load(1);
      }
  });
  event.preventDefault();
})


$("#form_cerrar").submit(function( event ) {
$('#btn_cerrar').attr("disabled", true);
$('#div1').hide(); 

var parametros = $(this).serialize();
   $.ajax({
      type: "POST",
      url: "php_caja/caja_cerrar.php",
      data: parametros,
        beforeSend: function(objeto){
         $('#resultados_cerrar').html('<center><img src="./img/ajax-loader.gif"> CARGANDO...</center>');
        },
        success: function(datos){
        $("#resultados_cerrar").html(datos);
        $('#btn_cerrar').attr("disabled", false);

        $('#cerrarcaja').modal('hide');
       // $('body').removeClass('modal-open');
       // $('.modal-backdrop').remove();
       // load(1);
      }
  });
  event.preventDefault();
})


</script>
<script language="javascript">
function Totales() 
{
    with (document.forms["Miformularionombre"]) 
        { 
            var totalResult = Number( valor_cierre.value ) - Number( saldoencaja.value );
            total.value = roundTo( totalResult, 2 );
        }
}

function roundTo(num,pow){
if( isNaN( num ) ){
num = 0;
}
num *= Math.pow(10,pow);
num = (Math.round(num)/Math.pow(10,pow))+ "" ;
if(num.indexOf(".") == -1)
num += "." ;
while(num.length - num.indexOf(".") - 1 < pow)
num += "0" ;

return num;
}
</script>







<!-- Plantilla oculta para clonar -->

    <div id="plantilla-campo1" style="display: none;">
        <div class="campo-pago1">
            <div class="col-md-6" style="padding-right: 0px">
                <label>Banco</label>
                <select name="banco[]" class="form-control medio-pago-select input-sm" 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-5">
                <label>Valor</label>
                <input type="number" name="valor[]" class="form-control input-sm" required>
                <small class="text-danger mensaje-error" style="display: none;">Valor excede el total disponible</small>
            </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>
<script type="text/javascript">
function agregarCampos() {
    const plantilla = document.getElementById('plantilla-campo1').innerHTML;
    const contenedor = document.getElementById('campos-container1');
    contenedor.insertAdjacentHTML('beforeend', plantilla);

    const nuevoCampo = contenedor.lastElementChild;
    nuevoCampo.querySelectorAll('input').forEach(input => input.value = '');
    nuevoCampo.querySelectorAll('select').forEach(select => select.value = '');

    actualizarOpcionesDisponibles();
}

// eliminar grupo de campos
$(document).on('click', '.eliminar_pago', function () {
    if ($('.campo-pago1').length > 1) {
        $(this).closest('.campo-pago1').remove();
    }
    
    actualizarOpcionesDisponibles();
});

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 (seleccionados.includes(val) && val !== actual) {
                $(this).hide();
            } else {
                $(this).show();
            }
        });
    });
}

// manejar cambios en los selects
$('#campos-container1').on('change', '.medio-pago-select', function() {
    actualizarOpcionesDisponibles();

    let campoPago = $(this).closest('.campo-pago1');
    let inputValor = campoPago.find('input[name="valores[]"]');

   
    actualizarOpcionesDisponibles();
});
</script>

