@extends('layouts.app')
@section('title','شحن الرصيد')
@section('content')
<div class="min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50 dark:from-gray-900 dark:via-purple-900/20 dark:to-blue-900/20">
    <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8" dir="rtl">
        <!-- Enhanced Header -->
        <header class="mb-10 relative overflow-hidden bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 rounded-3xl p-8 shadow-2xl">
            <div class="absolute inset-0 bg-black opacity-10"></div>
            <div class="relative z-10 text-center">
                <h1 class="text-5xl font-black text-white mb-4 animate-fade-in">💰 شحن الرصيد</h1>
                <p class="text-xl text-white/90">أضف نقاط إلى رصيدك لاستخدام الميزات المميزة</p>
            </div>
        </header>

        <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-8 border border-gray-100 dark:border-gray-700">
            <!-- Current Balance -->
            <div class="mb-8 text-center">
                <div class="w-24 h-24 mx-auto mb-4 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full flex items-center justify-center shadow-lg">
                    <span class="text-3xl">🪙</span>
                </div>
                <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">رصيدك الحالي</h3>
                <p class="text-4xl font-black text-yellow-600 dark:text-yellow-400">{{ (int)(auth()->user()->coins ?? 0) }} نقطة</p>
            </div>

            <!-- Top-up Form -->
            <form method="post" action="{{ route('wallet.topup') }}" class="space-y-6">
                @csrf
                
                <div>
                    <label class="block text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">المبلغ (نقاط)</label>
                    <div class="relative">
                        <input type="number" name="amount" min="10" step="10" 
                               class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-2xl px-6 py-4 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 text-center text-2xl font-bold" 
                               placeholder="100" required>
                        <div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
                            <span class="text-2xl">🪙</span>
                        </div>
                    </div>
                    @error('amount')
                        <div class="mt-2 text-red-600 dark:text-red-400 text-sm flex items-center gap-2">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                            </svg>
                            {{ $message }}
                        </div>
                    @enderror
                </div>

                <!-- Quick Amount Buttons -->
                <div class="grid grid-cols-2 gap-3">
                    <button type="button" onclick="setAmount(50)" class="px-4 py-3 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-2 border-blue-200 dark:border-blue-700 rounded-xl hover:from-blue-100 hover:to-indigo-100 dark:hover:from-blue-800/30 dark:hover:to-indigo-800/30 transition-all duration-300 text-blue-700 dark:text-blue-300 font-semibold">
                        50 نقطة
                    </button>
                    <button type="button" onclick="setAmount(100)" class="px-4 py-3 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 border-2 border-green-200 dark:border-green-700 rounded-xl hover:from-green-100 hover:to-emerald-100 dark:hover:from-green-800/30 dark:hover:to-emerald-800/30 transition-all duration-300 text-green-700 dark:text-green-300 font-semibold">
                        100 نقطة
                    </button>
                    <button type="button" onclick="setAmount(200)" class="px-4 py-3 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 border-2 border-purple-200 dark:border-purple-700 rounded-xl hover:from-purple-100 hover:to-pink-100 dark:hover:from-purple-800/30 dark:hover:to-pink-800/30 transition-all duration-300 text-purple-700 dark:text-purple-300 font-semibold">
                        200 نقطة
                    </button>
                    <button type="button" onclick="setAmount(500)" class="px-4 py-3 bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-900/20 dark:to-yellow-900/20 border-2 border-amber-200 dark:border-amber-700 rounded-xl hover:from-amber-100 hover:to-yellow-100 dark:hover:from-amber-800/30 dark:hover:to-yellow-800/30 transition-all duration-300 text-amber-700 dark:text-amber-300 font-semibold">
                        500 نقطة
                    </button>
                </div>

                <button type="submit" class="w-full px-8 py-4 bg-gradient-to-r from-emerald-600 to-teal-600 text-white font-bold rounded-2xl hover:from-emerald-700 hover:to-teal-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">
                    💳 تأكيد الشحن
                </button>
            </form>

            <!-- Info Section -->
            <div class="mt-8 p-6 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 rounded-2xl border border-gray-200 dark:border-gray-600">
                <h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-3 flex items-center gap-2">
                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    معلومات مهمة
                </h4>
                <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
                    <li class="flex items-start gap-2">
                        <span class="text-emerald-500 mt-1">•</span>
                        <span>للاختبار: يتم إضافة المبلغ مباشرة إلى رصيدك</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <span class="text-emerald-500 mt-1">•</span>
                        <span>الحد الأدنى للشحن: 10 نقاط</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <span class="text-emerald-500 mt-1">•</span>
                        <span>النقاط صالحة للاستخدام في جميع الميزات</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <span class="text-emerald-500 mt-1">•</span>
                        <span>لا يمكن استرداد النقاط بعد الشحن</span>
                    </li>
                </ul>
            </div>

            <!-- Back to Dashboard -->
            <div class="mt-8 text-center">
                <a href="{{ route('dashboard') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold rounded-xl hover:from-purple-700 hover:to-pink-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                    </svg>
                    العودة للرئيسية
                </a>
            </div>
        </div>
    </div>
</div>

<script>
function setAmount(amount) {
    document.querySelector('input[name="amount"]').value = amount;
}
</script>
@endsection