@extends('layouts.app')
@section('title','الدفع بالبطاقة الائتمانية')
@section('content')
<div class="max-w-4xl mx-auto px-6 py-10" dir="rtl">
    <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full mb-4">
            <i class="fas fa-credit-card text-white text-2xl"></i>
        </div>
        <h1 class="text-3xl font-bold text-gray-900 mb-2">الدفع بالبطاقة الائتمانية</h1>
        <p class="text-gray-600">الخطة: <span class="font-semibold text-blue-600">{{ $name }}</span> — السعر: <span class="font-bold text-green-600">${{ $price }}</span></p>
    </div>

    <!-- Loading Overlay -->
    <div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-2xl p-8 text-center">
            <div class="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">جاري معالجة الدفع...</h3>
            <p class="text-gray-600">يرجى الانتظار ولا تغلق هذه النافذة</p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Payment Form -->
        <div class="bg-white rounded-2xl shadow-lg p-6">
            <h2 class="text-xl font-bold text-gray-900 mb-6">معلومات البطاقة</h2>

            <form id="paymentForm" class="space-y-6">
                @csrf

                <!-- Card Number -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">رقم البطاقة</label>
                    <div class="relative">
                        <input type="text" id="cardNumber" name="card_number"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                               placeholder="1234 5678 9012 3456" maxlength="19" required>
                        <div class="absolute left-3 top-3 flex space-x-2">
                            <div id="visaIcon" class="w-8 h-5 bg-blue-600 rounded text-white text-xs flex items-center justify-center hidden">VISA</div>
                            <div id="mastercardIcon" class="w-8 h-5 bg-red-600 rounded text-white text-xs flex items-center justify-center hidden">MC</div>
                            <div id="amexIcon" class="w-8 h-5 bg-green-600 rounded text-white text-xs flex items-center justify-center hidden">AMEX</div>
                        </div>
                    </div>
                </div>

                <!-- Card Holder Name -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">اسم حامل البطاقة</label>
                    <input type="text" id="cardHolder" name="card_holder"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="الاسم كما هو مكتوب على البطاقة" required>
                </div>

                <!-- Expiry Date and CVV -->
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">تاريخ الانتهاء</label>
                        <input type="text" id="expiryDate" name="expiry_date"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                               placeholder="MM/YY" maxlength="5" required>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">رمز الأمان (CVV)</label>
                        <input type="text" id="cvv" name="cvv"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                               placeholder="123" maxlength="4" required>
                    </div>
                </div>

                <!-- Email -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">البريد الإلكتروني</label>
                    <input type="email" id="email" name="email"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="example@email.com" required>
                </div>

                <!-- Submit Button -->
                <button type="submit" id="payButton"
                        class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 px-6 rounded-xl font-semibold text-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg">
                    <i class="fas fa-lock mr-2"></i>
                    دفع ${{ $price }} الآن
                </button>
            </form>
        </div>

        <!-- Payment Summary -->
        <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl shadow-lg p-6">
            <h2 class="text-xl font-bold text-gray-900 mb-6">ملخص الدفع</h2>

            <div class="space-y-4">
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">الخطة المختارة:</span>
                    <span class="font-semibold text-gray-900">{{ $name }}</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">المدة:</span>
                    <span class="font-semibold text-gray-900">{{ $duration ?? '1' }} شهر</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">السعر:</span>
                    <span class="font-semibold text-gray-900">${{ $price }}</span>
                </div>
                <hr class="border-gray-300">
                <div class="flex justify-between items-center text-lg">
                    <span class="font-bold text-gray-900">المجموع:</span>
                    <span class="font-bold text-green-600">${{ $price }}</span>
                </div>
            </div>

            <!-- Security Features -->
            <div class="mt-8 p-4 bg-green-50 border border-green-200 rounded-lg">
                <div class="flex items-center mb-2">
                    <i class="fas fa-shield-alt text-green-600 ml-2"></i>
                    <span class="font-semibold text-green-800">ضمانات الأمان</span>
                </div>
                <ul class="text-sm text-green-700 space-y-1">
                    <li>• تشفير SSL 256-bit</li>
                    <li>• لا نحفظ بيانات البطاقة</li>
                    <li>• معالجة آمنة ومحمية</li>
                    <li>• حماية من الاحتيال</li>
                </ul>
            </div>

            <!-- Alternative Payment Methods -->
            <div class="mt-6">
                <p class="text-sm text-gray-600 mb-3">أو استخدم:</p>
                <div class="grid grid-cols-2 gap-3">
                    <a href="{{ route('membership.paypal', ['plan' => $plan]) }}"
                       class="bg-gradient-to-r from-blue-500 to-blue-600 text-white py-2 px-4 rounded-lg font-medium hover:from-blue-600 hover:to-blue-700 transition-all duration-300 text-center text-sm">
                        <i class="fab fa-paypal mr-1"></i>
                        PayPal
                    </a>
                    <a href="{{ route('membership.skrill', ['plan' => $plan]) }}"
                       class="bg-gradient-to-r from-green-500 to-emerald-600 text-white py-2 px-4 rounded-lg font-medium hover:from-green-600 hover:to-emerald-700 transition-all duration-300 text-center text-sm">
                        <i class="fas fa-credit-card mr-1"></i>
                        Skrill
                    </a>
                </div>
                <a href="{{ route('membership.plans') }}"
                   class="block mt-3 text-center text-gray-500 hover:text-gray-700 transition-colors text-sm">
                    <i class="fas fa-arrow-right mr-1"></i>
                    الرجوع للخطط
                </a>
            </div>
        </div>
    </div>
</div>

<style>
/* Card Number Formatting */
#cardNumber {
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

/* Card Type Detection */
.card-type-detected {
    animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Form Validation */
.error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.success {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const cardNumberInput = document.getElementById('cardNumber');
    const expiryDateInput = document.getElementById('expiryDate');
    const cvvInput = document.getElementById('cvv');
    const paymentForm = document.getElementById('paymentForm');
    const payButton = document.getElementById('payButton');
    const loadingOverlay = document.getElementById('loadingOverlay');

    // Card Number Formatting and Detection
    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) {
            formattedValue = formattedValue.substring(0, 19);
        }

        e.target.value = formattedValue;

        // Detect card type
        detectCardType(value);
    });

    // Expiry Date Formatting
    expiryDateInput.addEventListener('input', function(e) {
        let value = e.target.value.replace(/\D/g, '');
        if (value.length >= 2) {
            value = value.substring(0, 2) + '/' + value.substring(2, 4);
        }
        e.target.value = value;
    });

    // CVV Validation
    cvvInput.addEventListener('input', function(e) {
        e.target.value = e.target.value.replace(/[^0-9]/g, '');
    });

    // Card Type Detection
    function detectCardType(cardNumber) {
        const visaIcon = document.getElementById('visaIcon');
        const mastercardIcon = document.getElementById('mastercardIcon');
        const amexIcon = document.getElementById('amexIcon');

        // Hide all icons first
        [visaIcon, mastercardIcon, amexIcon].forEach(icon => {
            icon.classList.add('hidden');
            icon.classList.remove('card-type-detected');
        });

        if (cardNumber.length < 4) return;

        if (cardNumber.startsWith('4')) {
            visaIcon.classList.remove('hidden');
            visaIcon.classList.add('card-type-detected');
        } else if (cardNumber.startsWith('5') || cardNumber.startsWith('2')) {
            mastercardIcon.classList.remove('hidden');
            mastercardIcon.classList.add('card-type-detected');
        } else if (cardNumber.startsWith('3')) {
            amexIcon.classList.remove('hidden');
            amexIcon.classList.add('card-type-detected');
        }
    }

    // Form Validation
    function validateForm() {
        const cardNumber = cardNumberInput.value.replace(/\s/g, '');
        const expiryDate = expiryDateInput.value;
        const cvv = cvvInput.value;
        const cardHolder = document.getElementById('cardHolder').value;
        const email = document.getElementById('email').value;

        let isValid = true;

        // Validate card number (Luhn algorithm)
        if (!validateCardNumber(cardNumber)) {
            cardNumberInput.classList.add('error');
            isValid = false;
        } else {
            cardNumberInput.classList.remove('error');
            cardNumberInput.classList.add('success');
        }

        // Validate expiry date
        if (!validateExpiryDate(expiryDate)) {
            expiryDateInput.classList.add('error');
            isValid = false;
        } else {
            expiryDateInput.classList.remove('error');
            expiryDateInput.classList.add('success');
        }

        // Validate CVV
        if (!validateCVV(cvv, cardNumber)) {
            cvvInput.classList.add('error');
            isValid = false;
        } else {
            cvvInput.classList.remove('error');
            cvvInput.classList.add('success');
        }

        // Validate card holder name
        if (cardHolder.length < 2) {
            document.getElementById('cardHolder').classList.add('error');
            isValid = false;
        } else {
            document.getElementById('cardHolder').classList.remove('error');
            document.getElementById('cardHolder').classList.add('success');
        }

        // Validate email
        if (!validateEmail(email)) {
            document.getElementById('email').classList.add('error');
            isValid = false;
        } else {
            document.getElementById('email').classList.remove('error');
            document.getElementById('email').classList.add('success');
        }

        return isValid;
    }

    // Luhn Algorithm for card validation
    function validateCardNumber(cardNumber) {
        if (cardNumber.length < 13 || cardNumber.length > 19) return false;

        let sum = 0;
        let isEven = false;

        for (let i = cardNumber.length - 1; i >= 0; i--) {
            let digit = parseInt(cardNumber.charAt(i));

            if (isEven) {
                digit *= 2;
                if (digit > 9) {
                    digit -= 9;
                }
            }

            sum += digit;
            isEven = !isEven;
        }

        return sum % 10 === 0;
    }

    // Validate expiry date
    function validateExpiryDate(expiryDate) {
        const regex = /^(0[1-9]|1[0-2])\/\d{2}$/;
        if (!regex.test(expiryDate)) return false;

        const [month, year] = expiryDate.split('/');
        const currentDate = new Date();
        const currentYear = currentDate.getFullYear() % 100;
        const currentMonth = currentDate.getMonth() + 1;

        if (parseInt(year) < currentYear) return false;
        if (parseInt(year) === currentYear && parseInt(month) < currentMonth) return false;

        return true;
    }

    // Validate CVV
    function validateCVV(cvv, cardNumber) {
        if (cardNumber.startsWith('3')) {
            return cvv.length === 4; // Amex
        }
        return cvv.length === 3; // Visa, Mastercard
    }

    // Validate email
    function validateEmail(email) {
        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return regex.test(email);
    }

    // Form Submission
    paymentForm.addEventListener('submit', async function(e) {
        e.preventDefault();

        if (!validateForm()) {
            alert('يرجى تصحيح الأخطاء في النموذج');
            return;
        }

        // Show loading
        loadingOverlay.classList.remove('hidden');
        payButton.disabled = true;
        payButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>جاري المعالجة...';

        try {
            const formData = new FormData(paymentForm);
            formData.append('plan', '{{ $plan }}');
            formData.append('amount', '{{ $price }}');

            const response = await fetch('{{ route("membership.credit-card.process", ["plan" => $plan]) }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            });

            const data = await response.json();

            if (data.success) {
                // Success - redirect to success page
                window.location.href = data.redirect || '{{ route("membership.success", ["plan" => $plan]) }}';
            } else {
                // Error
                alert(data.error || 'حدث خطأ أثناء معالجة الدفع');
                loadingOverlay.classList.add('hidden');
                payButton.disabled = false;
                payButton.innerHTML = '<i class="fas fa-lock mr-2"></i>دفع ${{ $price }} الآن';
            }
        } catch (error) {
            console.error('Payment error:', error);
            alert('حدث خطأ في الاتصال. يرجى المحاولة مرة أخرى.');
            loadingOverlay.classList.add('hidden');
            payButton.disabled = false;
            payButton.innerHTML = '<i class="fas fa-lock mr-2"></i>دفع ${{ $price }} الآن';
        }
    });

    // Real-time validation
    [cardNumberInput, expiryDateInput, cvvInput, document.getElementById('cardHolder'), document.getElementById('email')].forEach(input => {
        input.addEventListener('blur', validateForm);
    });
});
</script>
@endsection