@extends('member.layouts.default')

@section('content')

<style>
    /* 1. لو الموقع Light (Default) -> الفورم يبقي Dark */
    .dynamic-form-section {
        background-color: #111827; /* Slate 950 */
        color: #ffffff;
        border: 1px solid rgba(255,255,255,0.05);
    }
    .dynamic-form-section .form-label-text { color: #e5e7eb; }
    .dynamic-form-section .form-control-custom { 
        background-color: rgba(255, 255, 255, 0.05) !important; 
        color: white !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
    }

    /* 2. لو الموقع Dark (html.dark) -> الفورم يبقي Light */
    html.dark .dynamic-form-section {
        background-color: #ffffff;
        color: #111827;
        border: 1px solid #e5e7eb;
    }
    html.dark .dynamic-form-section .form-label-text { color: #374151; }
    html.dark .dynamic-form-section .form-control-custom { 
        background-color: #f9fafb !important; 
        color: #111827 !important;
        border: 1px solid #d1d5db !important;
    }

    .form-control-custom:focus {
        border-color: {{ $request_data->tier_color ?? '#4f46e5' }} !important;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
    }
</style>

<div class="max-w-7xl mx-auto px-4 py-12">
@if(session('success'))
    <div class="mb-6 p-4 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-2xl flex items-center gap-3 animate-fade-in">
        <x-ui.icon icon="check-circle" class="w-5 h-5" />
        <span class="font-bold">{{ session('success') }}</span>
    </div>
@endif

@if(session('error'))
    <div class="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-2xl flex items-center gap-3 animate-fade-in">
        <x-ui.icon icon="alert-circle" class="w-5 h-5" />
        <span class="font-bold">{{ session('error') }}</span>
    </div>
@endif
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        
        {{-- Left Column: The Visual Card (ماشي مع ستايل الموقع) --}}
        <div class="lg:col-span-5 sticky top-8">
            <div class="group animate-slide-in-up">
                <div class="relative h-full bg-white dark:bg-secondary-900 rounded-[2.5rem] shadow-sm hover:shadow-2xl border border-secondary-100 dark:border-secondary-800 transition-all duration-500 overflow-hidden flex flex-col">
                    
                    {{-- Visual Card Header --}}
                    <div class="relative p-8 text-white overflow-hidden" style="background-color: {{ $request_data->tier_color ?? '#4f46e5' }};">
                        <div class="absolute inset-0 opacity-10 pointer-events-none">
                            <svg class="h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                                <path d="M0 100 C 20 0 50 0 100 100 Z" fill="currentColor"></path>
                            </svg>
                        </div>

                        <div class="relative flex justify-between items-start">
                            <div class="space-y-1">
                                <span class="px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-[10px] font-bold uppercase tracking-widest">Available Tier</span>
                                <h2 class="text-2xl font-black uppercase tracking-tight">{{ $request_data->tier_name }}</h2>
                                <p class="text-white/80 text-sm font-medium flex items-center gap-1.5">
                                    <x-ui.icon icon="building" class="w-4 h-4" />
                                    {{ $request_data->tier_club->name ?? 'Premium Club' }}
                                </p>
                            </div>
                            <div class="w-14 h-14 bg-white/20 backdrop-blur-xl rounded-2xl flex items-center justify-center shadow-inner">
                                <x-ui.icon icon="award" class="w-7 h-7 text-white" />
                            </div>
                        </div>
                    </div>

                    {{-- Card Perks Body --}}
                    <div class="p-8 flex-1 flex flex-col">
                        <div class="grid grid-cols-1 gap-4 mb-8">
                            <div class="flex items-center justify-between p-4 rounded-2xl bg-secondary-50 dark:bg-secondary-800/40 border border-secondary-200/50 dark:border-secondary-700/30">
                                <div class="flex items-center gap-3">
                                    <div class="p-2 bg-amber-500/10 rounded-lg">
                                        <x-ui.icon icon="wallet" class="w-4 h-4 text-amber-600" />
                                    </div>
                                    <span class="text-sm text-secondary-600 dark:text-secondary-400 font-semibold">
                                        {{ trans('common.points_threshold') }}
                                    </span>
                                </div>
                                <span class="text-xl font-black text-secondary-900 dark:text-white">
                                    {{ number_format($request_data->tier_points_threshold) }} EGP
                                </span>
                            </div>

                            <div class="flex items-center justify-between p-4 rounded-2xl bg-secondary-50 dark:bg-secondary-800/40 border border-secondary-200/50 dark:border-secondary-700/30">
                                <div class="flex items-center gap-3">
                                    <div class="p-2 bg-emerald-500/10 rounded-lg">
                                        <x-ui.icon icon="tag" class="w-4 h-4 text-emerald-600" />
                                    </div>
                                    <span class="text-sm text-secondary-600 dark:text-secondary-400 font-semibold">
                                        {{ trans('common.redemption_discount') }}
                                    </span>
                                </div>
                                <span class="text-xl font-black text-secondary-900 dark:text-white">
                                    {{ number_format(floatval($request_data->tier_redemption_discount) * 100, 0) }}%
                                </span>
                            </div>

                            <div class="flex items-center justify-between p-4 rounded-2xl bg-primary-100/30 dark:bg-primary-900/10 border border-primary-200/50 dark:border-primary-800/30">
                                <div class="flex items-center gap-3">
                                    <div class="p-2 bg-primary-500/10 rounded-lg">
                                        <x-ui.icon icon="coins" class="w-4 h-4 text-primary-600" />
                                    </div>
                                    <span class="text-sm text-primary-700 dark:text-primary-400 font-bold">
                                        {{ trans('common.card_price') }}
                                    </span>
                                </div>
                                <span class="text-xl font-black text-primary-600">
                                    {{ number_format($request_data->tier_price) }} EGP
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Right Column: The Inverse Form --}}
        <div class="lg:col-span-7">
            <div class="dynamic-form-section p-8 md:p-12 rounded-[2.5rem] shadow-2xl transition-all duration-500">
                <div class="mb-8 text-center">
                    <div class="mb-4 inline-block p-4 rounded-full bg-primary/10">
                        <i class="bi bi-patch-check-fill text-primary" style="font-size: 2rem;"></i>
                    </div>
                    <h4 class="text-xl font-black mb-2">Please provide your payment details</h4>
                    <p class="text-sm opacity-60">Complete the form below to activate your premium service.</p>
                </div>

                <form action="{{ route('card.confirm.submit', ['locale' => $locale]) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                    @csrf
                    <input type="hidden" name="card_id" value="{{ $card_id }}">

                    <div>
                        <label class="form-label mb-2 block">
                            <span class="form-label-text block text-sm font-bold uppercase tracking-wider">Transaction Reference Number</span>
                            <span class="text-xs opacity-50">رقم العملية المرجعي</span>
                        </label>
                        <input type="text" name="transaction_number" class="form-control-custom w-full rounded-2xl py-4 px-5" placeholder="Ex: TXN-00123..." required>
                    </div>

                    <div>
                        <label class="form-label mb-2 block">
                            <span class="form-label-text block text-sm font-bold uppercase tracking-wider">Upload Receipt Photo</span>
                            <span class="text-xs opacity-50">إرفاق صورة الإيصال</span>
                        </label>
                        <input type="file" name="receipt_photo" class="form-control-custom w-full rounded-2xl py-3 px-5 file:mr-4 file:py-1 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-black" accept="image/*" required>
                    </div>

                    <div>
                        <label class="form-label mb-2 block">
                            <span class="form-label-text block text-sm font-bold uppercase tracking-wider">Notes (Optional)</span>
                            <span class="text-xs opacity-50">ملاحظات إضافية</span>
                        </label>
                        <textarea name="note" class="form-control-custom w-full rounded-2xl py-4 px-5" rows="2" placeholder="Write any extra info here..."></textarea>
                    </div>

                    <div class="p-5 rounded-2xl flex gap-4 bg-amber-500/5 border border-amber-500/20">
                        <i class="bi bi-clock-history text-amber-500"></i>
                        <div class="text-xs leading-relaxed opacity-80">
                            <strong>Review Process:</strong> Once submitted, our team will verify your payment and activate your service as soon as possible.
                            <br>
                            <strong>عملية المراجعة:</strong> بمجرد الإرسال، سيقوم فريقنا بالتحقق من الدفعة وتفعيل الخدمة في أسرع وقت ممكن.
                        </div>
                    </div>

                    <button type="submit" class="w-full py-5 rounded-2xl text-white font-black text-lg uppercase tracking-widest transition-all hover:scale-[1.01] active:scale-95 shadow-xl" style="background-color: {{ $request_data->tier_color ?? '#4f46e5' }};">
                        Submit Payment | إرسال الطلب
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection