@extends('front.layouts.app')

@section('title', 'تأكيد الدفع | MedExchange')

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/payment.css') }}">
    <style>
        .method-card { cursor: pointer; transition: all 0.3s ease; }
        .method-card:hover { transform: translateY(-5px); border-color: var(--primary-color); }
        .method-card.active { border: 2px solid var(--primary-color); background: #f0f7ff; }
        .upload-area { border: 2px dashed #ddd; border-radius: 10px; padding: 20px; text-align: center; cursor: pointer; position: relative; }
        .upload-area:hover { border-color: var(--primary-color); }
        .file-preview img { max-width: 100%; border-radius: 8px; margin-top: 10px; }
        .loader { display: none; width: 20px; height: 20px; border: 3px solid #f3f3f3; border-top: 3px solid #3498db; border-radius: 50%; animation: spin 2s linear infinite; margin: 0 auto; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    </style>
@endsection

@section('content')
<main class="payment-page" style="padding: 50px 0; background: #f8f9fa;">
    <div class="container">
        <div class="payment-wrapper" style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start;">
            <!-- Right Side: Payment Methods -->
            <div class="payment-methods bg-white p-8 rounded-xl shadow-sm">
                <div class="section-title mb-8">
                    <i class="fas fa-wallet text-3xl text-blue-600 mb-2"></i>
                    <h2 class="text-2xl font-bold mb-2">طرق الدفع المتاحة</h2>
                    <p class="text-gray-600">يرجى التحويل إلى أحد الحسابات التالية ثم رفع إيصال الدفع</p>
                </div>

                <div class="method-cards space-y-4">
                    <!-- Vodafone Cash -->
                    <div class="method-card active p-4 rounded-lg flex items-center gap-4 bg-gray-50 border-2 border-transparent" data-method="vodafone">
                        <div class="method-icon w-12 h-12 flex items-center justify-center bg-red-100 rounded-full">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/a/af/Vodafone_Logo.png" alt="Vodafone Cash" class="w-8">
                        </div>
                        <div class="method-info flex-1">
                            <h3 class="font-bold">فودافون كاش</h3>
                            <p class="account-num font-mono text-lg">{{ $settings['payment_vodafone_number'] ?? '01012345678' }}</p>
                        </div>
                        <button class="copy-btn p-2 text-gray-400 hover:text-blue-600" onclick="copyText('{{ $settings['payment_vodafone_number'] ?? '01012345678' }}')">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>

                    <!-- InstaPay -->
                    <div class="method-card p-4 rounded-lg flex items-center gap-4 bg-gray-50 border-2 border-transparent" data-method="instapay">
                        <div class="method-icon w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full text-blue-600">
                            <i class="fas fa-bolt text-xl"></i>
                        </div>
                        <div class="method-info flex-1">
                            <h3 class="font-bold">InstaPay</h3>
                            <p class="account-num font-mono text-lg">{{ $settings['payment_instapay_id'] ?? 'medexchange@instapay' }}</p>
                        </div>
                        <button type="button" class="copy-btn p-2 text-gray-400 hover:text-blue-600" onclick="copyText('{{ $settings['payment_instapay_id'] ?? 'medexchange@instapay' }}')">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>

                    <!-- Fawry -->
                    <div class="method-card p-4 rounded-lg flex items-center gap-4 bg-gray-50 border-2 border-transparent" data-method="fawry">
                        <div class="method-icon w-12 h-12 flex items-center justify-center bg-yellow-100 rounded-full text-yellow-600">
                            <i class="fas fa-university text-xl"></i>
                        </div>
                        <div class="method-info flex-1">
                            <h3 class="font-bold">فوري (Fawry)</h3>
                            <p class="account-num font-mono text-lg">{{ $settings['payment_fawry_number'] ?? '12345' }}</p>
                        </div>
                        <button type="button" class="copy-btn p-2 text-gray-400 hover:text-blue-600" onclick="copyText('{{ $settings['payment_fawry_number'] ?? '12345' }}')">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Left Side: Upload Proof Form -->
            <div class="payment-form-container">
                <div class="form-card bg-white p-8 rounded-xl shadow-lg border-t-4 border-blue-600">
                    <h2 class="text-2xl font-bold mb-6 text-center">تأكيد عملية الدفع</h2>
                    <form id="paymentForm" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="method" id="selectedMethod" value="vodafone">
                        
                        <div class="form-group mb-4">
                            <label class="block font-bold mb-2 text-gray-700">رقم الطلب / المرجع</label>
                            <div class="input-wrapper relative">
                                <i class="fas fa-hashtag absolute left-3 top-3 text-gray-400"></i>
                                <input type="text" name="transaction_id" placeholder="أدخل رقم الطلب الخاص بك" class="w-full border p-2 pr-4 pl-10 rounded focus:border-blue-500 outline-none" required>
                            </div>
                        </div>

                        <div class="form-group mb-4">
                            <label class="block font-bold mb-2 text-gray-700">القيمة المحولة (ج.م)</label>
                            <div class="input-wrapper relative">
                                <i class="fas fa-money-bill-wave absolute left-3 top-3 text-gray-400"></i>
                                <input type="number" name="amount" placeholder="المبلغ الذي قمت بتحويله" class="w-full border p-2 pr-4 pl-10 rounded focus:border-blue-500 outline-none" required>
                            </div>
                        </div>

                        <div class="form-group mb-4">
                            <label class="block font-bold mb-2 text-gray-700">صورة إيصال التحويل</label>
                            <div class="upload-area" id="uploadArea">
                                <input type="file" name="proof_image" id="receiptFile" hidden accept="image/*" required>
                                <div class="upload-placeholder" id="uploadPlaceholder">
                                    <i class="fas fa-cloud-upload-alt text-4xl text-blue-400 mb-2"></i>
                                    <p class="text-gray-600">اضغط أو اسحب صورة الإيصال هنا</p>
                                    <span class="text-xs text-gray-400">يدعم JPG, PNG</span>
                                </div>
                                <div id="filePreview" class="file-preview mt-2"></div>
                            </div>
                        </div>

                        <div class="form-group mb-6">
                            <label class="block font-bold mb-2 text-gray-700">ملاحظات إضافية (اختياري)</label>
                            <textarea name="notes" placeholder="مثال: رقم المحفظة المحول منها" class="w-full border p-2 rounded focus:border-blue-500 outline-none h-24"></textarea>
                        </div>

                        <button type="submit" class="btn-submit w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition shadow-md flex items-center justify-center gap-2" id="submitBtn">
                            <span class="btn-text">إرسال للتأكيد</span>
                            <div class="loader" id="submitLoader"></div>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- Success Modal -->
<div id="successModal" class="fixed inset-0 bg-black/50 hidden flex items-center justify-center z-50">
    <div class="bg-white p-8 rounded-2xl shadow-2xl max-w-sm w-full text-center transform scale-95 transition-transform">
        <i class="fas fa-check-circle text-6xl text-green-500 mb-4 animate-bounce"></i>
        <h3 class="text-2xl font-bold mb-2">تم استلام بياناتك بنجاح</h3>
        <p class="text-gray-600 mb-6">سوف يقوم فريق المراجعة بالتأكد من عملية الدفع وتفعيل طلبك خلال 24 ساعة كحد أقصى.</p>
        <button class="w-full bg-gray-800 text-white font-bold py-3 rounded-xl hover:bg-black transition" onclick="window.location.href='{{ route('home') }}'">العودة للرئيسية</button>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Copy Text Function
    function copyText(text) {
        navigator.clipboard.writeText(text).then(() => {
            alert('تم نسخ الرقم بنجاح');
        });
    }

    // Method Selection
    document.querySelectorAll('.method-card').forEach(card => {
        card.addEventListener('click', () => {
            document.querySelectorAll('.method-card').forEach(c => c.classList.remove('active'));
            card.classList.add('active');
            document.getElementById('selectedMethod').value = card.dataset.method;
        });
    });

    // File Upload Preview
    const uploadArea = document.getElementById('uploadArea');
    const fileInput = document.getElementById('receiptFile');
    const filePreview = document.getElementById('filePreview');
    const uploadPlaceholder = document.getElementById('uploadPlaceholder');

    uploadArea.addEventListener('click', () => fileInput.click());

    fileInput.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                filePreview.innerHTML = `<img src="${e.target.result}" class="rounded-lg shadow-sm border">`;
                uploadPlaceholder.style.display = 'none';
            };
            reader.readAsDataURL(this.files[0]);
        }
    });

    // Form Submission
    document.getElementById('paymentForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const btn = document.getElementById('submitBtn');
        const loader = document.getElementById('submitLoader');
        const btnText = btn.querySelector('.btn-text');
        
        btn.disabled = true;
        btnText.style.opacity = '0.5';
        loader.style.display = 'block';

        const formData = new FormData(this);

        fetch('{{ route("payment.submit") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('successModal').classList.remove('hidden');
            } else {
                alert('حدث خطأ أثناء الإرسال. يرجى المحاولة مرة أخرى.');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('حدث خطأ في الاتصال بالسيرفر.');
        })
        .finally(() => {
            btn.disabled = false;
            btnText.style.opacity = '1';
            loader.style.display = 'none';
        });
    });
</script>
@endsection