<!-- Credit Card Payment Form -->
<form id="creditCardForm" action="{{ route('store.payment.process', $invoice->id) }}" method="POST">
    @csrf
    <input type="hidden" name="payment_type" value="{{ $paymentType }}">

    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-credit-card me-2"></i>{{ __('store.payment_credit_card_information') }}
                        @if($paymentType === 'credit_card_3d')
                        <span class="badge bg-success ms-2">3D {{ __('store.payment_secure') }}</span>
                        @endif
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="card_number" class="form-label">{{ __('store.payment_card_number') }} <span class="text-danger">*</span></label>
                            <input type="text" name="card_number" id="card_number"
                                   class="form-control @error('card_number') is-invalid @enderror"
                                   placeholder="1234 5678 9012 3456"
                                   maxlength="19"
                                   autocomplete="cc-number"
                                   required>
                            @error('card_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-12 mb-3">
                            <label for="card_holder" class="form-label">{{ __('store.payment_card_holder_name') }} <span class="text-danger">*</span></label>
                            <input type="text" name="card_holder" id="card_holder"
                                   class="form-control @error('card_holder') is-invalid @enderror"
                                   placeholder="{{ __('store.payment_card_holder_placeholder') }}"
                                   autocomplete="cc-name"
                                   required>
                            @error('card_holder')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="expiry_month" class="form-label">{{ __('store.payment_expiry_month') }} <span class="text-danger">*</span></label>
                            <select name="expiry_month" id="expiry_month" class="form-select @error('expiry_month') is-invalid @enderror" required>
                                <option value="">{{ __('store.payment_select_month') }}</option>
                                @for($i = 1; $i <= 12; $i++)
                                    <option value="{{ $i }}">{{ sprintf('%02d', $i) }}</option>
                                @endfor
                            </select>
                            @error('expiry_month')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="expiry_year" class="form-label">{{ __('store.payment_expiry_year') }} <span class="text-danger">*</span></label>
                            <select name="expiry_year" id="expiry_year" class="form-select @error('expiry_year') is-invalid @enderror" required>
                                <option value="">{{ __('store.payment_select_year') }}</option>
                                @for($i = date('Y'); $i <= date('Y') + 10; $i++)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endfor
                            </select>
                            @error('expiry_year')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="cvv" class="form-label">{{ __('store.payment_cvv') }} <span class="text-danger">*</span></label>
                            <input type="text" name="cvv" id="cvv"
                                   class="form-control @error('cvv') is-invalid @enderror"
                                   placeholder="123"
                                   maxlength="4"
                                   autocomplete="cc-csc"
                                   required>
                            @error('cvv')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    @if(($settings['allow_save_card'] ?? false) && auth('client')->check())
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" name="save_card" id="save_card" value="1">
                        <label class="form-check-label" for="save_card">
                            {{ __('store.payment_save_card_for_future') }}
                        </label>
                        <small class="form-text text-muted d-block">{{ __('store.payment_save_card_note') }}</small>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">{{ __('store.payment_payment_summary') }}</h6>
                </div>
                <div class="card-body">
                    <div class="payment-summary">
                        <div class="d-flex justify-content-between mb-2">
                            <span>{{ __('store.payment_subtotal') }}:</span>
                            <span>{{ number_format($invoice->subtotal, 2) }} {{ $invoice->currency->code }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>{{ __('store.payment_tax') }}:</span>
                            <span>{{ number_format($invoice->tax_total, 2) }} {{ $invoice->currency->code }}</span>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between fw-bold fs-5">
                            <span>{{ __('store.payment_total') }}:</span>
                            <span class="text-success">{{ number_format($invoice->total_amount, 2) }} {{ $invoice->currency->code }}</span>
                        </div>
                    </div>

                    <div class="security-info mt-3">
                        <div class="text-center mb-3">
                            <i class="fas fa-shield-alt text-success fa-2x"></i>
                        </div>
                        <small class="text-muted d-block text-center">
                            {{ __('store.payment_ssl_secured') }}<br>
                            {{ __('store.payment_safe_payment_note') }}
                        </small>
                    </div>

                    <button type="submit" class="btn btn-success btn-lg w-100 mt-3" id="payButton">
                        <i class="fas fa-credit-card me-2"></i>
                        {{ __('store.payment_pay_now') }}
                        <span class="ms-2">{{ number_format($invoice->total_amount, 2) }} {{ $invoice->currency->code }}</span>
                    </button>

                    <div class="accepted-cards mt-3 text-center">
                        <small class="text-muted d-block mb-2">{{ __('store.payment_accepted_cards') }}</small>
                        <div class="card-icons">
                            <i class="fab fa-cc-visa fa-2x me-2 text-primary"></i>
                            <i class="fab fa-cc-mastercard fa-2x me-2 text-warning"></i>
                            <i class="fab fa-cc-amex fa-2x me-2 text-info"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('creditCardForm');
    const payButton = document.getElementById('payButton');
    const cardNumberInput = document.getElementById('card_number');

    // Format card number input
    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;
        e.target.value = formattedValue;
    });

    // CVV input validation
    document.getElementById('cvv').addEventListener('input', function(e) {
        e.target.value = e.target.value.replace(/[^0-9]/gi, '');
    });

    // Form submission
    form.addEventListener('submit', function(e) {
        payButton.disabled = true;
        payButton.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>{{ __("store.payment_processing") }}...';
    });
});
</script>