{{--
    Payment Method Toggle Component
    ================================
    Reusable Alpine.js tab switcher for Mobile Money vs Bank Card payment.

    Usage:
        <x-payment-method-toggle />

    Submits:
        payment_method  = "mobile" | "card"
        phone_number    = (when mobile)
        card_number     = raw digits, no spaces (when card)
        card_expiry     = MM/YY (when card)
        card_cvv        = 3–4 digits (when card)

    Requirements: 2.1–2.6, 22.1–22.5
--}}

<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"
>
    {{-- Hidden field — always submitted with the form --}}
    <input type="hidden" name="payment_method" :value="method">

    {{-- Tab switcher --}}
    <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>

    {{-- ── Mobile Money Panel ── --}}
    <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="{{ 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 {{ $errors->has('phone_number') ? 'border-red-400 bg-red-50' : '' }}"
        >
        @error('phone_number')
            <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
        @enderror
        <p class="text-xs text-gray-400 mt-1">Enter the MTN MoMo number to receive the payment prompt.</p>
    </div>

    {{-- ── Bank Card Panel ── --}}
    <div x-show="method === 'card'" x-cloak x-transition class="space-y-3">

        {{-- Card Number --}}
        <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>
            {{-- Display input (formatted with spaces) --}}
            <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 {{ $errors->has('card_number') ? 'border-red-400 bg-red-50' : '' }}"
            >
            {{-- Hidden input carries raw digits to the server --}}
            <input type="hidden" name="card_number" :value="rawCard">
            @error('card_number')
                <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
            @enderror
            {{-- Non-blocking Luhn warning --}}
            <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>

        {{-- Expiry + CVV row --}}
        <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="{{ 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 {{ $errors->has('card_expiry') ? 'border-red-400 bg-red-50' : '' }}"
                >
                @error('card_expiry')
                    <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                @enderror
            </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="{{ 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 {{ $errors->has('card_cvv') ? 'border-red-400 bg-red-50' : '' }}"
                >
                @error('card_cvv')
                    <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                @enderror
            </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>
