@extends('layouts.superadmin')

@section('title', 'دعم تيك توك والهدايا')
@section('page-title', '🎁 دعم تيك توك – إدارة الهدايا')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 py-6">

    <div class="max-w-6xl mx-auto px-3 sm:px-6 space-y-6">

        {{-- 🔥 هيدر الصفحة --}}
        <div class="relative overflow-hidden rounded-2xl bg-slate-900/80 backdrop-blur-xl border border-slate-700 shadow-xl p-6">
            <div class="absolute -top-20 -left-10 w-64 h-64 bg-violet-600/20 blur-3xl rounded-full"></div>
            <div class="absolute -bottom-20 -right-10 w-72 h-72 bg-indigo-500/20 blur-3xl rounded-full"></div>

            <h1 class="text-2xl sm:text-3xl font-bold text-white">🎁 نظام دعم تيك توك والهدايا</h1>
            <p class="text-slate-300 mt-2 text-sm sm:text-base">
                إدارة هدايا تيك توك – اختيار الهدايا وإضافة عمليات الدعم، وفحص الميزانية اليومية والشهرية والسنوية.
            </p>
        </div>

        {{-- ⚡ الرسائل --}}
        @if(session('success'))
            <div class="bg-emerald-600/20 text-emerald-300 border border-emerald-500 px-4 py-3 rounded-xl text-sm">
                {{ session('success') }}
            </div>
        @endif

        {{-- 💰 بطاقات الميزانية --}}
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">

            {{-- 🔹 اليوم --}}
            <div class="bg-slate-800/70 rounded-2xl p-4 border border-slate-700 shadow">
                <h3 class="text-slate-300 text-sm">اليوم</h3>
                <p class="text-yellow-300 text-xl font-bold">{{ $budget['day']['coins'] }} Coins</p>
                <p class="text-slate-400 text-xs mt-2">
                    ₪ {{ number_format($budget['day']['currencies']['ILS'], 2) }}  
                </p>
            </div>

            {{-- 🔹 الأسبوع --}}
            <div class="bg-slate-800/70 rounded-2xl p-4 border border-slate-700 shadow">
                <h3 class="text-slate-300 text-sm">هذا الأسبوع</h3>
                <p class="text-yellow-300 text-xl font-bold">{{ $budget['week']['coins'] }} Coins</p>
                <p class="text-slate-400 text-xs mt-2">
                    ₪ {{ number_format($budget['week']['currencies']['ILS'], 2) }}  
                </p>
            </div>

            {{-- 🔹 الشهر --}}
            <div class="bg-slate-800/70 rounded-2xl p-4 border border-slate-700 shadow">
                <h3 class="text-slate-300 text-sm">هذا الشهر</h3>
                <p class="text-yellow-300 text-xl font-bold">{{ $budget['month']['coins'] }} Coins</p>
                <p class="text-slate-400 text-xs mt-2">
                    ₪ {{ number_format($budget['month']['currencies']['ILS'], 2) }}  
                </p>
            </div>

            {{-- 🔹 السنة --}}
            <div class="bg-slate-800/70 rounded-2xl p-4 border border-slate-700 shadow">
                <h3 class="text-slate-300 text-sm">هذه السنة</h3>
                <p class="text-yellow-300 text-xl font-bold">{{ $budget['year']['coins'] }} Coins</p>
                <p class="text-slate-400 text-xs mt-2">
                    ₪ {{ number_format($budget['year']['currencies']['ILS'], 2) }}  
                </p>
            </div>
        </div>

        {{-- ========================= --}}
        {{-- 🔥 فورم إضافة عملية دعم --}}
        {{-- ========================= --}}

        <div class="bg-slate-900/70 rounded-2xl p-6 border border-slate-700 shadow-xl">

            <h2 class="text-xl font-bold text-white mb-4">➕ إضافة عملية دعم جديدة</h2>

            <form method="POST" action="{{ route('superadmin.ministries.tiktok-support') }}">
                @csrf

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                    {{-- اختيار الهدية --}}
                    <div>
                        <label class="text-slate-300 text-sm mb-1 block">اختر الهدية:</label>
                        <select name="gift_id"
                                required
                                class="w-full rounded-xl bg-slate-800 border border-slate-700 text-white p-3">
                            <option value="">-- اختر --</option>
                            @foreach($gifts as $g)
                                <option value="{{ $g->id }}">
                                    {{ $g->name_ar }} — {{ $g->coin_price }} Coins
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- الكمية --}}
                    <div>
                        <label class="text-slate-300 text-sm mb-1 block">الكمية:</label>
                        <input name="quantity" type="number" min="1" required
                               class="w-full rounded-xl bg-slate-800 border border-slate-700 text-white p-3"
                               placeholder="1">
                    </div>

                    {{-- اسم المستخدم في التيك توك --}}
                    <div class="sm:col-span-2">
                        <label class="text-slate-300 text-sm mb-1 block">اسم صاحب البث:</label>
                        <input name="live_username" type="text"
                               class="w-full rounded-xl bg-slate-800 border border-slate-700 text-white p-3"
                               placeholder="tiktok_username">
                    </div>

                    {{-- رابط البث --}}
                    <div class="sm:col-span-2">
                        <label class="text-slate-300 text-sm mb-1 block">رابط البث (اختياري):</label>
                        <input name="live_link" type="text"
                               class="w-full rounded-xl bg-slate-800 border border-slate-700 text-white p-3"
                               placeholder="https://www.tiktok.com/live/...">
                    </div>

                    {{-- تاريخ الإرسال --}}
                    <div class="sm:col-span-2">
                        <label class="text-slate-300 text-sm mb-1 block">تاريخ الإرسال (اختياري):</label>
                        <input name="gifted_at" type="datetime-local"
                               class="w-full rounded-xl bg-slate-800 border border-slate-700 text-white p-3">
                    </div>

                    {{-- ملاحظات --}}
                    <div class="sm:col-span-2">
                        <label class="text-slate-300 text-sm mb-1 block">ملاحظات:</label>
                        <textarea name="notes"
                                  class="w-full rounded-xl bg-slate-800 border border-slate-700 text-white p-3"
                                  placeholder="أي ملاحظة إضافية..."></textarea>
                    </div>
                </div>

                {{-- زر الإرسال --}}
                <div class="mt-5">
                    <button type="submit"
                            class="w-full sm:w-auto bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-6 py-3 rounded-xl shadow">
                        💰 تسجيل عملية الدعم
                    </button>
                </div>

            </form>
        </div>

        {{-- ========================= --}}
        {{-- 🔥 قائمة الهدايا حسب التصنيف --}}
        {{-- ========================= --}}

        <div class="bg-slate-900/60 rounded-2xl p-6 border border-slate-700 shadow-xl">

            <h2 class="text-xl font-bold text-white mb-4">🎁 قائمة الهدايا</h2>

            {{-- Tabs التصنيفات --}}
            <div class="flex gap-2 overflow-x-auto pb-2 mb-4">
                <a href="{{ route('superadmin.ministries.tiktok-support') }}"
                   class="px-4 py-2 rounded-xl text-sm
                        {{ !$selectedCategoryId ? 'bg-emerald-600 text-white' : 'bg-slate-800 text-slate-300' }}">
                    الكل
                </a>

                @foreach($categories as $cat)
                    <a href="?category_id={{ $cat->id }}"
                       class="px-4 py-2 rounded-xl whitespace-nowrap text-sm
                            {{ $selectedCategoryId == $cat->id ? 'bg-emerald-600 text-white' : 'bg-slate-700 text-slate-300' }}">
                        {{ $cat->name_ar }}
                    </a>
                @endforeach
            </div>

            {{-- Grid الهدايا --}}
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">

                @foreach($gifts as $gift)
                    <div class="bg-slate-800/70 rounded-xl p-4 border border-slate-700 shadow hover:-translate-y-1 transition">
                        <h3 class="text-white font-bold text-sm">{{ $gift->name_ar }}</h3>

                        <p class="text-slate-400 text-xs mt-1">
                            {{ $gift->coin_price }} Coins
                        </p>

                        <p class="text-slate-500 text-xs mt-1">
                            ₪ {{ number_format($gift->coin_price * $fx['ILS'] * $coinToUsd, 2) }}
                        </p>

                        <form method="POST" action="{{ route('superadmin.ministries.tiktok-support') }}" class="mt-3">
                            @csrf
                            <input type="hidden" name="gift_id" value="{{ $gift->id }}">
                            <input type="hidden" name="quantity" value="1">

                            <button class="w-full bg-emerald-600 hover:bg-emerald-700 text-white text-sm p-2 rounded-xl">
                                إرسال هدية
                            </button>
                        </form>
                    </div>
                @endforeach

            </div>
        </div>

    </div>
</div>
@endsection