@extends('member.layouts.default')
@section('page_title', 'Payment Request' . config('default.page_title_delimiter') . config('default.app_name'))

@section('content')
<div class="relative py-8 md:py-12 min-h-screen">

    <div class="max-w-4xl mx-auto px-4 md:px-8">
        
        {{-- Main Card --}}
        <div class="bg-white dark:bg-secondary-900 rounded-[2.5rem] shadow-xl overflow-hidden border border-secondary-100 dark:border-secondary-800 transition-all duration-500">
            
            {{-- Header section --}}
            <div class="p-8 text-center bg-secondary-50 dark:bg-secondary-800/50 border-b border-secondary-100 dark:border-secondary-700">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-500/10 mb-4">
                    <x-ui.icon icon="credit-card" class="w-8 h-8 text-primary-600" />
                </div>
                <h1 class="text-2xl font-black text-secondary-900 dark:text-white uppercase tracking-tight">
                    Payment Request | طلب سداد
                </h1>
                <p class="text-secondary-500 dark:text-secondary-400 mt-2 text-sm">
                    Reference / رقم الطلب: <span class="font-mono font-bold text-primary-600">#{{ $request_id }}</span>
                </p>
            </div>

            <div class="p-8 md:p-12">
                {{-- Bilingual Content Grid --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-10">
                    
                    {{-- English Column --}}
                    <div class="space-y-4 text-left border-l-0 md:border-r border-secondary-100 dark:border-secondary-800 pr-0 md:pr-8">
                        <p class="text-secondary-800 dark:text-secondary-200 py-0">To activate, please complete the payment of</p>
						<p class="text-secondary-800 dark:text-secondary-200 ">لتفعيل كارت  الخاص بك، يرجى إتمام سداد مبلغ</p>
                    </div>

                    {{-- Arabic Column --}}
                    <div class="space-y-4 text-right" dir="rtl">
                        <div class="text-3xl font-black text-primary-600 text-center">
                            {{ number_format($amount) }} <span class="text-sm font-normal">{{ $currency }}</span>
                        </div>
                    </div>
                </div>

                {{-- Bank Details Box --}}
                <div class="bg-secondary-50 dark:bg-secondary-800/30 rounded-3xl p-6 md:p-8 border border-secondary-100 dark:border-secondary-700/50 relative overflow-hidden">
                    <div class="grid grid-cols-1 md:grid-cols-1 gap-0 relative z-10 text-center">
                        
                            <h4 class="text-sm font-bold text-secondary-900 dark:text-white mb-2 underline decoration-primary-500">Payment Method / طريقة السداد</h4>
                            <p class="text-secondary-600 dark:text-secondary-400 text-sm leading-relaxed whitespace-pre-line">{{ $bank_details }}</p>
                            @if($admin_note)
                                <p class="mt-4 text-xs italic text-amber-600">Note: {{ $admin_note }}</p>
                            @endif
                </div>

                {{-- Action Button --}}
                <div class="mt-12 text-center space-y-6">
                    <p class="text-sm text-secondary-500 dark:text-secondary-400 max-w-md mx-auto">
                        After payment, click the button below to upload your receipt<br>
                        بعد الدفع، اضغط على الزر أدناه لرفع إيصال السداد
                    </p>
                    
                    <a href="{{ url($confirmation_url) }}" 
                       class="group relative inline-flex items-center justify-center overflow-hidden py-4 px-10 bg-primary-600 text-white font-black rounded-2xl transition-all duration-300 hover:shadow-[0_0_30px_rgba(16,185,129,0.4)] hover:scale-[1.02] active:scale-[0.98]">
                        <span class="relative z-10 flex items-center gap-3">
                            Confirm Payment | تأكيد السداد
                            <x-ui.icon icon="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                        </span>
                    </a>
                </div>
            </div>

            {{-- Card Footer --}}
            <div class="p-6 bg-secondary-50/50 dark:bg-secondary-800/20 text-center border-t border-secondary-100 dark:border-secondary-800">
                <p class="text-[10px] uppercase tracking-widest text-secondary-400 font-bold">
                    {{ config('default.app_name') }} Security Payment System
                </p>
            </div>
        </div>
    </div>
</div>
@endsection