<?php
/**
 * Banner de Métodos de Pago PagoPar
 * Componente reutilizable para mostrar los métodos de pago disponibles
 */
?>

<div class="payment-methods-banner">
    <div class="payment-methods-container">
        <h5 class="payment-methods-title">Métodos de Pago Disponibles</h5>
        <div class="payment-methods-grid" style="display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 15px !important;">
            <!-- Tarjetas de Crédito -->
            <div class="payment-method" style="flex: 0 0 auto !important; width: calc(12.5% - 15px) !important; min-width: 80px !important; max-width: 120px !important;">
                <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/visa.png" 
                     alt="Visa" 
                     loading="lazy">
            </div>
            <div class="payment-method" style="flex: 0 0 auto !important; width: calc(12.5% - 15px) !important; min-width: 80px !important; max-width: 120px !important;">
                <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/mastercard.png" 
                     alt="Mastercard" 
                     loading="lazy">
            </div>
            <div class="payment-method">
                <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/aex.png" 
                     alt="American Express" 
                     loading="lazy">
            </div>
            <div class="payment-method">
                <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/diners.png" 
                     alt="Diners Club" 
                     loading="lazy">
            </div>
            
            <!-- Tarjetas Locales -->
            <div class="payment-method">
                <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/credifielco.png" 
                     alt="Credifielco" 
                     loading="lazy">
            </div>
            <div class="payment-method">
                <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/unica.png" 
                     alt="Única" 
                     loading="lazy">
            </div>
            <div class="payment-method">
                <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/credicard.png" 
                     alt="Credicard" 
                     loading="lazy">
            </div>
            <div class="payment-method">
                <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/cabal.png" 
                     alt="Cabal" 
                     loading="lazy">
            </div>
            
            <!-- Medios de Pago Digitales -->
            <div class="payment-method">
                <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/panal.png" 
                     alt="Panal" 
                     loading="lazy">
            </div>
            <div class="payment-method">
                <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/pagoexpress.png" 
                     alt="Pago Express" 
                     loading="lazy">
            </div>
            <div class="payment-method">
                <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/aquipago.png" 
                     alt="Aquí Pago" 
                     loading="lazy">
            </div>
            <div class="payment-method">
                <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/practipago.png" 
                     alt="Practi Pago" 
                     loading="lazy">
            </div>
            
            <!-- Billeteras Digitales -->
            <div class="payment-method">
                <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/tigo-money.png" 
                     alt="Tigo Money" 
                     loading="lazy">
            </div>
            <div class="payment-method">
                <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/billetera-personal.png" 
                     alt="Billetera Personal" 
                     loading="lazy">
            </div>
            
            <!-- Logos de PagoPar -->
            <div class="payment-method">
                <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/pagopar.png" 
                     alt="PagoPar" 
                     loading="lazy">
            </div>
            <div class="payment-method powered-by">
                <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/procesado-por-pagopar.png" 
                     alt="Procesado por PagoPar" 
                     loading="lazy">
            </div>
        </div>
        <p class="payment-methods-security">
            <i class="fas fa-shield-alt"></i>
            Pagos seguros y protegidos
        </p>
    </div>
</div>

<script>
// Forzar layout horizontal después de cargar la página
document.addEventListener('DOMContentLoaded', function() {
    // Buscar todos los grids de métodos de pago
    const grids = document.querySelectorAll('.payment-methods-grid');
    
    grids.forEach(function(grid) {
        // Forzar flexbox en el contenedor
        grid.style.display = 'flex';
        grid.style.flexWrap = 'wrap';
        grid.style.justifyContent = 'center';
        grid.style.gap = '15px';
        grid.style.width = '100%';
        
        // Forzar flexbox en cada método de pago
        const methods = grid.querySelectorAll('.payment-method');
        methods.forEach(function(method) {
            method.style.flex = '0 0 auto';
            method.style.width = 'calc(12.5% - 15px)';
            method.style.minWidth = '80px';
            method.style.maxWidth = '120px';
            method.style.display = 'flex';
            method.style.alignItems = 'center';
            method.style.justifyContent = 'center';
        });
    });
});
</script>