{{-- Sección de Métodos de Pago --}}
<div class="bg-white shadow-md rounded-lg p-6">
    <h2 class="text-xl font-medium mb-4">Método de Pago</h2>
    @if (!empty($availablePaymentMethods))
        <div class="space-y-4">
            @foreach ($availablePaymentMethods as $index => $paymentMethod)
                <label for="payment_method_{{ $index }}" wire:key="payment-method-option-{{ $index }}"
                    class="block border rounded-lg p-4 cursor-pointer hover:bg-gray-50 {{ $selectedPaymentMethod == $paymentMethod['value'] ? 'border-indigo-500 ring-2 ring-indigo-500' : 'border-gray-300' }}">
                    <input type="radio" name="selected_payment_method_option" {{-- Cambiado el name para evitar conflicto con shippment --}}
                        id="payment_method_{{ $index }}" value="{{ $paymentMethod['value'] }}"
                        wire:model.live="selectedPaymentMethod" class="sr-only">
                    <div class="flex justify-between items-center">
                        <div>
                            <span class="font-semibold">{{ $paymentMethod['label'] }}</span>
                            {{-- Aquí podría ir una descripción si se añade al array $paymentMethod --}}
                        </div>
                        {{-- Aquí podría ir un icono o logo del método de pago --}}
                    </div>
                </label>
            @endforeach
        </div>
    @else
        <p class="text-gray-600">No hay métodos de pago disponibles en este momento.</p>
    @endif
</div>