@extends('layouts.app')

@section('title', 'الدفع بالبطاقة الإلكترونية')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4 sm:px-6 lg:px-8" dir="rtl">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-900 mb-2">الدفع بالبطاقة الإلكترونية</h1>
            <p class="text-gray-600">أدخل بيانات بطاقتك الإلكترونية لإتمام عملية الدفع</p>
        </div>

        <div class="grid md:grid-cols-2 gap-8">
            <!-- Payment Form -->
            <div class="bg-white rounded-2xl shadow-xl p-8">
                <div class="mb-6">
                    <h2 class="text-xl font-semibold text-gray-800 mb-2">بيانات الدفع</h2>
                    <div class="flex items-center text-sm text-gray-600">
                        <svg class="w-4 h-4 ml-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path>
                        </svg>
                        اتصال آمن ومشفر
                    </div>
                </div>

                <form id="creditCardForm" 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 transition-all duration-200"
                                   placeholder="1234 5678 9012 3456" maxlength="19" required>
                            <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                                <div id="cardType" class="w-8 h-5 bg-gray-200 rounded flex items-center justify-center">
                                    <span class="text-xs text-gray-500">?</span>
                                </div>
                            </div>
                        </div>
                        <div id="cardNumberError" class="text-red-500 text-sm mt-1 hidden"></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 transition-all duration-200"
                               placeholder="الاسم كما هو مكتوب على البطاقة" required>
                        <div id="cardHolderError" class="text-red-500 text-sm mt-1 hidden"></div>
                    </div>

                    <!-- Expiry 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 transition-all duration-200"
                                   placeholder="MM/YY" maxlength="5" required>
                            <div id="expiryError" class="text-red-500 text-sm mt-1 hidden"></div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">رمز الأمان (CVV)</label>
                            <div class="relative">
                                <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 transition-all duration-200"
                                       placeholder="123" maxlength="4" required>
                                <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                                    <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                            </div>
                            <div id="cvvError" class="text-red-500 text-sm mt-1 hidden"></div>
                        </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 transition-all duration-200"
                               placeholder="example@email.com" required>
                        <div id="emailError" class="text-red-500 text-sm mt-1 hidden"></div>
                    </div>

                    <!-- Submit Button -->
                    <button type="submit" id="submitBtn"
                            class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-3 px-6 rounded-lg font-semibold hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
                        <span id="submitText">إتمام الدفع - {{ number_format($plan['price'], 2) }} {{ $plan['currency'] }}</span>
                        <div id="loadingSpinner" class="hidden">
                            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            جاري المعالجة...
                        </div>
                    </button>
                </form>
            </div>

            <!-- Order Summary -->
            <div class="bg-white rounded-2xl shadow-xl p-8">
                <h2 class="text-xl font-semibold text-gray-800 mb-6">ملخص الطلب</h2>

                <div class="space-y-4">
                    <!-- Plan Details -->
                    <div class="flex justify-between items-center py-3 border-b border-gray-200">
                        <div>
                            <h3 class="font-medium text-gray-800">{{ $plan['name'] }}</h3>
                            <p class="text-sm text-gray-600">{{ $plan['description'] }}</p>
                        </div>
                        <span class="font-semibold text-gray-800">{{ number_format($plan['price'], 2) }} {{ $plan['currency'] }}</span>
                    </div>

                    <!-- Features -->
                    <div class="space-y-2">
                        <h4 class="font-medium text-gray-700">المميزات المشمولة:</h4>
                        @foreach($plan['features'] as $feature)
                        <div class="flex items-center text-sm text-gray-600">
                            <svg class="w-4 h-4 ml-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            {{ $feature }}
                        </div>
                        @endforeach
                    </div>

                    <!-- Security Info -->
                    <div class="bg-blue-50 rounded-lg p-4 mt-6">
                        <div class="flex items-center mb-2">
                            <svg class="w-5 h-5 ml-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="font-medium text-blue-800">أمان الدفع</span>
                        </div>
                        <ul class="text-sm text-blue-700 space-y-1">
                            <li>• تشفير SSL 256-bit</li>
                            <li>• لا نحفظ بيانات البطاقة</li>
                            <li>• معالجة آمنة ومحمية</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Success Modal -->
<div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-2xl p-8 max-w-md mx-4 text-center">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
        </div>
        <h3 class="text-xl font-semibold text-gray-800 mb-2">تم الدفع بنجاح!</h3>
        <p class="text-gray-600 mb-6">تم تفعيل عضويتك بنجاح. يمكنك الآن الاستمتاع بجميع المميزات.</p>
        <button onclick="redirectToDashboard()" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
            الانتقال إلى لوحة التحكم
        </button>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('creditCardForm');
    const cardNumberInput = document.getElementById('cardNumber');
    const cardTypeDiv = document.getElementById('cardType');
    const expiryInput = document.getElementById('expiryDate');
    const submitBtn = document.getElementById('submitBtn');
    const submitText = document.getElementById('submitText');
    const loadingSpinner = document.getElementById('loadingSpinner');

    // Card number formatting and validation
    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;
        }

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

    // Expiry date formatting
    expiryInput.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;
        validateExpiryDate(value);
    });

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

    // Form submission
    form.addEventListener('submit', function(e) {
        e.preventDefault();

        if (validateForm()) {
            processPayment();
        }
    });

    function detectCardType(cardNumber) {
        const cardTypes = {
            visa: /^4/,
            mastercard: /^5[1-5]/,
            amex: /^3[47]/,
            discover: /^6(?:011|5)/
        };

        for (const [type, pattern] of Object.entries(cardTypes)) {
            if (pattern.test(cardNumber)) {
                cardTypeDiv.innerHTML = `<span class="text-xs font-bold">${type.toUpperCase()}</span>`;
                cardTypeDiv.className = 'w-8 h-5 bg-blue-100 rounded flex items-center justify-center';
                return;
            }
        }

        cardTypeDiv.innerHTML = '<span class="text-xs text-gray-500">?</span>';
        cardTypeDiv.className = 'w-8 h-5 bg-gray-200 rounded flex items-center justify-center';
    }

    function validateCardNumber(cardNumber) {
        const errorDiv = document.getElementById('cardNumberError');

        if (cardNumber.length < 13) {
            showError('cardNumberError', 'رقم البطاقة قصير جداً');
            return false;
        }

        if (!luhnCheck(cardNumber)) {
            showError('cardNumberError', 'رقم البطاقة غير صحيح');
            return false;
        }

        hideError('cardNumberError');
        return true;
    }

    function validateExpiryDate(expiry) {
        const errorDiv = document.getElementById('expiryError');
        const [month, year] = expiry.split('/');

        if (!month || !year) {
            showError('expiryError', 'تاريخ الانتهاء غير صحيح');
            return false;
        }

        const now = new Date();
        const currentYear = now.getFullYear() % 100;
        const currentMonth = now.getMonth() + 1;

        if (parseInt(month) < 1 || parseInt(month) > 12) {
            showError('expiryError', 'الشهر غير صحيح');
            return false;
        }

        if (parseInt(year) < currentYear || (parseInt(year) === currentYear && parseInt(month) < currentMonth)) {
            showError('expiryError', 'البطاقة منتهية الصلاحية');
            return false;
        }

        hideError('expiryError');
        return true;
    }

    function validateCVV(cvv) {
        const errorDiv = document.getElementById('cvvError');

        if (cvv.length < 3) {
            showError('cvvError', 'رمز الأمان قصير جداً');
            return false;
        }

        hideError('cvvError');
        return true;
    }

    function validateForm() {
        const cardNumber = cardNumberInput.value.replace(/\s/g, '');
        const expiry = expiryInput.value;
        const cvv = document.getElementById('cvv').value;
        const holder = document.getElementById('cardHolder').value;
        const email = document.getElementById('email').value;

        let isValid = true;

        if (!validateCardNumber(cardNumber)) isValid = false;
        if (!validateExpiryDate(expiry)) isValid = false;
        if (!validateCVV(cvv)) isValid = false;

        if (!holder.trim()) {
            showError('cardHolderError', 'اسم حامل البطاقة مطلوب');
            isValid = false;
        } else {
            hideError('cardHolderError');
        }

        if (!email.trim() || !isValidEmail(email)) {
            showError('emailError', 'البريد الإلكتروني غير صحيح');
            isValid = false;
        } else {
            hideError('emailError');
        }

        return isValid;
    }

    function luhnCheck(cardNumber) {
        let sum = 0;
        let isEven = false;

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

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

            sum += digit;
            isEven = !isEven;
        }

        return sum % 10 === 0;
    }

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

    function showError(elementId, message) {
        const errorDiv = document.getElementById(elementId);
        errorDiv.textContent = message;
        errorDiv.classList.remove('hidden');
    }

    function hideError(elementId) {
        const errorDiv = document.getElementById(elementId);
        errorDiv.classList.add('hidden');
    }

    function processPayment() {
        submitBtn.disabled = true;
        submitText.classList.add('hidden');
        loadingSpinner.classList.remove('hidden');

        // Simulate payment processing
        setTimeout(() => {
            // In real implementation, send data to server
            const paymentData = {
                card_number: cardNumberInput.value.replace(/\s/g, ''),
                card_holder: document.getElementById('cardHolder').value,
                expiry_date: expiryInput.value,
                cvv: document.getElementById('cvv').value,
                email: document.getElementById('email').value,
                amount: {{ $plan['price'] }},
                currency: '{{ $plan['currency'] }}',
                plan: '{{ $plan['name'] }}'
            };

            // Send to server
            fetch('{{ route("membership.credit-card.process", $plan["name"]) }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify(paymentData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('successModal').classList.remove('hidden');
                } else {
                    alert('فشل في معالجة الدفع: ' + (data.message || 'خطأ غير معروف'));
                    resetForm();
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('حدث خطأ أثناء معالجة الدفع');
                resetForm();
            });
        }, 2000);
    }

    function resetForm() {
        submitBtn.disabled = false;
        submitText.classList.remove('hidden');
        loadingSpinner.classList.add('hidden');
    }

    function redirectToDashboard() {
        window.location.href = '{{ route("dashboard") }}';
    }
});
</script>
@endsection