

<div
    x-data="{
        method: 'mobile',
        rawCard: '',
        displayCard: '',
        luhnWarning: false,

        formatCard(event) {
            // Strip all non-digits
            let digits = event.target.value.replace(/\D/g, '').substring(0, 19);
            this.rawCard = digits;
            // Format with spaces every 4 digits for display
            this.displayCard = digits.replace(/(.{4})/g, '$1 ').trim();
            event.target.value = this.displayCard;
            // Luhn check (non-blocking warning)
            this.luhnWarning = digits.length >= 13 && !this.luhnCheck(digits);
        },

        luhnCheck(num) {
            let sum = 0;
            let alt = false;
            for (let i = num.length - 1; i >= 0; i--) {
                let n = parseInt(num[i], 10);
                if (alt) {
                    n *= 2;
                    if (n > 9) n -= 9;
                }
                sum += n;
                alt = !alt;
            }
            return sum % 10 === 0;
        },

        stripCardSpaces(form) {
            // Before submit, copy raw digits into the hidden card_number input
            const hidden = form.querySelector('input[name=card_number]');
            if (hidden) hidden.value = this.rawCard;
        }
    }"
    @submit.prevent="stripCardSpaces($el.closest('form')); $el.closest('form').submit()"
    class="payment-method-toggle"
>
    
    <input type="hidden" name="payment_method" :value="method">

    
    <div class="flex rounded-xl overflow-hidden border border-gray-200 mb-4">
        <button
            type="button"
            @click="method = 'mobile'"
            :class="method === 'mobile'
                ? 'bg-indigo-600 text-white shadow-inner'
                : 'bg-white text-gray-600 hover:bg-gray-50'"
            class="flex-1 flex items-center justify-center gap-2 py-3 text-sm font-semibold transition-all duration-150"
        >
            <i class="fas fa-mobile-alt"></i>
            Mobile Money
        </button>
        <button
            type="button"
            @click="method = 'card'"
            :class="method === 'card'
                ? 'bg-indigo-600 text-white shadow-inner'
                : 'bg-white text-gray-600 hover:bg-gray-50'"
            class="flex-1 flex items-center justify-center gap-2 py-3 text-sm font-semibold transition-all duration-150"
        >
            <i class="fas fa-credit-card"></i>
            Bank Card
        </button>
    </div>

    
    <div x-show="method === 'mobile'" x-transition>
        <label class="block text-xs font-semibold text-gray-600 mb-1.5">
            <i class="fas fa-phone text-indigo-400 mr-1"></i>
            MTN MoMo Phone Number <span class="text-red-500">*</span>
        </label>
        <input
            type="tel"
            name="phone_number"
            value="<?php echo e(old('phone_number')); ?>"
            placeholder="+211 9XX XXX XXX"
            :required="method === 'mobile'"
            class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300 <?php echo e($errors->has('phone_number') ? 'border-red-400 bg-red-50' : ''); ?>"
        >
        <?php $__errorArgs = ['phone_number'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
            <p class="text-xs text-red-500 mt-1"><?php echo e($message); ?></p>
        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
        <p class="text-xs text-gray-400 mt-1">Enter the MTN MoMo number to receive the payment prompt.</p>
    </div>

    
    <div x-show="method === 'card'" x-cloak x-transition class="space-y-3">

        
        <div>
            <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                <i class="fas fa-credit-card text-indigo-400 mr-1"></i>
                Card Number <span class="text-red-500">*</span>
            </label>
            
            <input
                type="text"
                inputmode="numeric"
                autocomplete="cc-number"
                placeholder="1234 5678 9012 3456"
                maxlength="23"
                @input="formatCard($event)"
                :required="method === 'card'"
                class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm font-mono tracking-widest focus:outline-none focus:ring-2 focus:ring-indigo-300 <?php echo e($errors->has('card_number') ? 'border-red-400 bg-red-50' : ''); ?>"
            >
            
            <input type="hidden" name="card_number" :value="rawCard">
            <?php $__errorArgs = ['card_number'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                <p class="text-xs text-red-500 mt-1"><?php echo e($message); ?></p>
            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
            
            <p x-show="luhnWarning" x-cloak class="text-xs text-amber-600 mt-1 flex items-center gap-1">
                <i class="fas fa-exclamation-triangle"></i>
                Card number may be invalid — please double-check.
            </p>
        </div>

        
        <div class="grid grid-cols-2 gap-3">
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                    <i class="fas fa-calendar-alt text-indigo-400 mr-1"></i>
                    Expiry (MM/YY) <span class="text-red-500">*</span>
                </label>
                <input
                    type="text"
                    name="card_expiry"
                    value="<?php echo e(old('card_expiry')); ?>"
                    placeholder="MM/YY"
                    maxlength="5"
                    autocomplete="cc-exp"
                    :required="method === 'card'"
                    @input="
                        let v = $event.target.value.replace(/[^0-9]/g, '');
                        if (v.length >= 3) v = v.substring(0,2) + '/' + v.substring(2,4);
                        $event.target.value = v;
                    "
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300 <?php echo e($errors->has('card_expiry') ? 'border-red-400 bg-red-50' : ''); ?>"
                >
                <?php $__errorArgs = ['card_expiry'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                    <p class="text-xs text-red-500 mt-1"><?php echo e($message); ?></p>
                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                    <i class="fas fa-lock text-indigo-400 mr-1"></i>
                    CVV <span class="text-red-500">*</span>
                </label>
                <input
                    type="text"
                    name="card_cvv"
                    value="<?php echo e(old('card_cvv')); ?>"
                    placeholder="123"
                    maxlength="4"
                    inputmode="numeric"
                    autocomplete="cc-csc"
                    :required="method === 'card'"
                    class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300 <?php echo e($errors->has('card_cvv') ? 'border-red-400 bg-red-50' : ''); ?>"
                >
                <?php $__errorArgs = ['card_cvv'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                    <p class="text-xs text-red-500 mt-1"><?php echo e($message); ?></p>
                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
            </div>
        </div>

        <p class="text-xs text-gray-400 flex items-center gap-1">
            <i class="fas fa-shield-alt text-green-500"></i>
            Your card details are transmitted securely and never stored.
        </p>
    </div>
</div>
<?php /**PATH /home/www/sshia.org/sshia/resources/views/components/payment-method-toggle.blade.php ENDPATH**/ ?>