<div id="abrircaja" class="modal fade" tabindex="-1" role="dialog" onsubmit="return checkSubmit();">
    <div class="modal-dialog">
    	<div class="modal-content">
    		<div class="modal-body">
    			<form name="form1" method="post" action="php_caja/abrir.php">
    			    <div class="alert alert-info alert-dismissable">
    					<strong>Desea abrir caja para entrar en el registro de ventas</strong> <a href="#" class="alert-link"></a>
    			    </div>
                   
                    <div class="col-md-12">
                        <label>Caja</label>
                        <select name="caja"  class="form-control name_list" required >
                            <?php
                           /* if($rol_id=='1')
                            { */
                                $datos=mysqli_query($con,"SELECT * FROM cajas where empresa='$empresa' and sucursal='$sucursal' and caja_estado='0'");
                           /* }
                            else 
                            {
                                $datos=mysqli_query($con,"SELECT * FROM cajas where empresa='$empresa' and sucursal='$sucursal' and caja_estado='0' and usuario='$usu_id'");
                            } */

                            while( $fila = mysqli_fetch_array( $datos ) )
                            {
                            echo' <option value="'.$fila['caja_id'].'">'.$fila['caja_nombre'].'</option>';
                            }
                            ?>
                        </select>
                    </div>
                    <div class="col-md-6" style="padding-right: 0px">
                        <label>Efectivo</label>
                       <input type="text" class="form-control input-sm" autocomplete="off" value="Efectivo" readonly >
                    </div>
                    <div class="col-md-6" >
                        <label>Valor</label>
                        <input type="number" class="form-control input-sm" name="mca_base" id="mca_base" autocomplete="off" value="0" min="0">
                    </div>

                    <div class="col-md-11.5">
                        <div id="campos-container">
                            <!-- 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 class="modal-footer">
				        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
				        <button name="registrar" value="registrar" type="submit" class="btn btn-success"><i class="icon-ok"></i> <strong>Aceptar</strong></button>
				    </div>
                </form>
            </div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</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>Dese cerrar la caja</strong> <a href="#" class="alert-link"></a>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">NO</button>
                <button name="si" value="si" type="submit" class="btn btn-success"><i class="icon-ok"></i> <strong>SI</strong></button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div> 

<div id="sinpermiso" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="alert alert-danger alert-dismissable">
                    <strong>No tienes permiso para abrir la caja</strong> <a href="#" class="alert-link"></a>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">Aceptar</button>
                 </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>






<!-- Plantilla oculta para clonar -->

    <div id="plantilla-campo" style="display: none;">
        <div class="campo-pago">
            <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>
                    <?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 min="0">
                <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-campo').innerHTML;
    const contenedor = document.getElementById('campos-container');
    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-pago').length > 1) {
        $(this).closest('.campo-pago').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-container').on('change', '.medio-pago-select', function() {
    actualizarOpcionesDisponibles();

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

   
    actualizarOpcionesDisponibles();
});
</script>
