<!-- 2D Credit Card Payment Form -->
<form method="POST" action="{{ route('store.payment.process', $invoice->id) }}" data-payment-form="credit-card-2d">
    @csrf

    <div class="row mb-3">
        <div class="col-md-12">
            <label class="form-label">{{ __('store.payment_card_number') }}</label>
            <input type="text" class="form-control" name="card_number" required
                   placeholder="1234 5678 9012 3456" maxlength="19"
                   pattern="[0-9\s]{13,19}" autocomplete="cc-number">
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-12">
            <label class="form-label">{{ __('store.payment_card_holder') }}</label>
            <input type="text" class="form-control" name="card_holder" required
                   placeholder="{{ __('store.payment_card_holder_placeholder') }}" autocomplete="cc-name">
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-6">
            <label class="form-label">{{ __('store.payment_expiry_month') }}</label>
            <select class="form-control" name="expiry_month" required autocomplete="cc-exp-month">
                <option value="">{{ __('store.payment_select_month') }}</option>
                @for($i = 1; $i <= 12; $i++)
                    <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</option>
                @endfor
            </select>
        </div>
        <div class="col-md-6">
            <label class="form-label">{{ __('store.payment_expiry_year') }}</label>
            <select class="form-control" name="expiry_year" required autocomplete="cc-exp-year">
                <option value="">{{ __('store.payment_select_year') }}</option>
                @for($i = date('Y'); $i <= date('Y') + 10; $i++)
                    <option value="{{ $i }}">{{ $i }}</option>
                @endfor
            </select>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-6">
            <label class="form-label">{{ __('store.payment_cvv') }}</label>
            <input type="text" class="form-control" name="cvv" required
                   placeholder="123" maxlength="4" pattern="[0-9]{3,4}" autocomplete="cc-csc">
        </div>
        @if($features['save_card'] ?? false)
        <div class="col-md-6 d-flex align-items-end">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name="save_card" value="1" id="save_card">
                <label class="form-check-label" for="save_card">
                    {{ __('store.payment_save_card') }}
                </label>
            </div>
        </div>
        @endif
    </div>

    <div class="alert alert-info">
        <i class="fas fa-info-circle"></i>
        {{ __('store.payment_2d_payment_info') }}
    </div>

    <button type="submit" class="btn btn-primary btn-lg w-100">
        <i class="fas fa-credit-card me-2"></i>
        {{ __('store.payment_pay_now') }} - {{ $invoice->currency->format($invoice->total_amount) }}
    </button>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Card number formatting
    const cardNumberInput = document.querySelector('input[name="card_number"]');
    if (cardNumberInput) {
        cardNumberInput.addEventListener('input', function(e) {
            let value = e.target.value.replace(/\s/g, '').replace(/[^0-9]/gi, '');
            let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value;

            if (formattedValue.length <= 19) {
                e.target.value = formattedValue;
            }
        });
    }

    // CVV numeric only
    const cvvInput = document.querySelector('input[name="cvv"]');
    if (cvvInput) {
        cvvInput.addEventListener('input', function(e) {
            e.target.value = e.target.value.replace(/[^0-9]/g, '');
        });
    }
});
</script>