@extends('components.web.main')

@section('content')
    {{-- لنفترض أن الخلفية الزرقاء الداكنة مطبقة هنا من القالب الرئيسي --}}
    <div class="min-h-screen text-white font-sans" dir="rtl">
        <div class="container mx-auto max-w-6xl px-4 py-16">

            {{-- العنوان الرئيسي --}}
            <div class="text-center mb-12">
                <h1 class="text-4xl sm:text-5xl tracking-tight drop-shadow-lg">إتمام عملية الدفع</h1>
                <p class="mt-4 text-lg text-gray-300">خطوة أخيرة تفصلك عن تجربة تعليمية فريدة</p>
            </div>

            {{-- حاوية الصفحة الرئيسية (مقسمة لعمودين) --}}
            <div class="grid grid-cols-1 lg:grid-cols-5 gap-12">

                {{-- العمود الأيسر: ملخص الطلب وكود الخصم --}}
                <div class="lg:col-span-2">
                    <div class="sticky top-10">
                        <div class="p-8 rounded-2xl border border-white/20 backdrop-blur-sm bg-white/5">
                            <h2 class="text-2xl font-bold mb-6 text-cyan-300">ملخص الطلب</h2>

                            {{-- تفاصيل المنتج --}}
                            <div class="flex items-center justify-between gap-4 pb-6 border-b border-white/10">
                                <div class="flex items-center gap-4">
                                    <div class="bg-blue-900/50 p-3 rounded-lg">
                                        {{-- أيقونة المنتج --}}
                                        <svg class="w-8 h-8 text-cyan-400" xmlns="http://www.w3.org/2000/svg" fill="none"
                                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h3 class="font-semibold">اشتراك فوتبول لايف</h3>
                                        <p class="text-sm text-gray-300">باقة سنوية</p>
                                    </div>
                                </div>
                                <p class="font-bold text-lg">50.00 ريال</p>
                            </div>

                            {{-- كود الخصم --}}
                            <div class="py-6 border-b border-white/10">
                                <label for="discount_code" class="block text-sm font-medium text-gray-300 mb-2">لديك كود
                                    خصم؟</label>
                                <div class="flex gap-2">
                                    <input type="text" id="discount_code" placeholder="مثال: PRO10"
                                        class="flex-grow bg-white/5 border border-white/20 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all">
                                    <button
                                        class="bg-cyan-500 hover:bg-cyan-400 text-black font-bold py-2 px-5 rounded-lg transition-colors">
                                        تطبيق
                                    </button>
                                </div>
                            </div>

                            {{-- ملخص السعر النهائي --}}
                            <div class="pt-6 space-y-3">
                                <div class="flex justify-between text-gray-300">
                                    <p>المبلغ الأساسي</p>
                                    <p>50.00 ريال</p>
                                </div>
                                <div class="flex justify-between text-green-400">
                                    <p>الخصم</p>
                                    <p>- 0.00 ريال</p>
                                </div>
                                <div
                                    class="pt-3 mt-3 border-t border-white/20 flex justify-between items-center text-2xl font-bold">
                                    <p>الإجمالي</p>
                                    <p>50.00 ريال</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- العمود الأيمن: طرق الدفع --}}
                <div class="lg:col-span-3">
                    <div class="p-8 rounded-2xl border border-white/20 backdrop-blur-sm bg-white/5">
                        <h2 class="text-2xl font-bold mb-6 text-cyan-300">اختر طريقة الدفع</h2>

                        {{-- خيارات الدفع --}}
                        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
                            {{-- بطاقة مدى --}}
                            <div class="p-4 rounded-lg border-2 border-cyan-400 bg-white/10 text-center cursor-pointer">
                                <img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Mada_logo.svg" alt="مدى"
                                    class="h-8 mx-auto grayscale-0">
                                <p class="text-xs font-bold mt-2">مدى</p>
                            </div>
                            {{-- بطاقة فيزا/ماستر كارد --}}
                            <div
                                class="p-4 rounded-lg border border-white/20 hover:border-cyan-400/50 text-center cursor-pointer grayscale hover:grayscale-0 transition-all">
                                <img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Mastercard_2019_logo.svg"
                                    alt="ماستر كارد" class="h-8 mx-auto">
                                <p class="text-xs font-bold mt-2">البطاقة</p>
                            </div>
                            {{-- Apple Pay --}}
                            <div
                                class="p-4 rounded-lg border border-white/20 hover:border-cyan-400/50 text-center cursor-pointer grayscale hover:grayscale-0 transition-all">
                                <img src="https://upload.wikimedia.org/wikipedia/commons/b/b0/Apple_Pay_logo.svg"
                                    alt="Apple Pay" class="h-8 mx-auto">
                                <p class="text-xs font-bold mt-2">Apple Pay</p>
                            </div>
                            {{-- STC Pay --}}
                            <div
                                class="p-4 rounded-lg border border-white/20 hover:border-cyan-400/50 text-center cursor-pointer grayscale hover:grayscale-0 transition-all">
                                <img src="https://www.stc.com.sa/content/dam/corporatesite/common/stc-pay-logo-english-rgb.svg"
                                    alt="STC Pay" class="h-8 mx-auto">
                                <p class="text-xs font-bold mt-2">STC Pay</p>
                            </div>
                        </div>

                        {{-- فورم البطاقة (إجراء وهمي) --}}
                        <div class="space-y-5">
                            <div>
                                <label for="card_number" class="block text-sm font-medium text-gray-300 mb-2">رقم
                                    البطاقة</label>
                                <input type="text" id="card_number" placeholder="**** **** **** 1234"
                                    class="w-full bg-white/5 border border-white/20 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all">
                            </div>
                            <div>
                                <label for="card_holder" class="block text-sm font-medium text-gray-300 mb-2">اسم صاحب
                                    البطاقة</label>
                                <input type="text" id="card_holder" placeholder="محمد أحمد"
                                    class="w-full bg-white/5 border border-white/20 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all">
                            </div>
                            <div class="flex gap-4">
                                <div class="w-1/2">
                                    <label for="expiry_date" class="block text-sm font-medium text-gray-300 mb-2">تاريخ
                                        الانتهاء</label>
                                    <input type="text" id="expiry_date" placeholder="MM/YY"
                                        class="w-full bg-white/5 border border-white/20 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all">
                                </div>
                                <div class="w-1/2">
                                    <label for="cvv" class="block text-sm font-medium text-gray-300 mb-2">رمز الحماية
                                        (CVV)</label>
                                    <input type="text" id="cvv" placeholder="123"
                                        class="w-full bg-white/5 border border-white/20 rounded-lg px-4 py-3 text-white placeholder-gray-400 focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all">
                                </div>
                            </div>
                        </div>

                        {{-- زر الدفع --}}
                        <div class="mt-8">
                            <button
                                class="w-full bg-cyan-500 text-black text-lg py-4 rounded-lg shadow-lg shadow-cyan-500/20 hover:bg-cyan-400 hover:shadow-cyan-400/40 transition-all duration-300">
                                ادفع الآن (50.00 ريال)
                            </button>
                        </div>

                        {{-- رسالة الأمان --}}
                        <div class="flex items-center justify-center gap-2 mt-6 text-sm text-gray-400">
                            <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span>دفع آمن ومشفّر بنسبة 100%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection