@extends('layouts.admin')

@section('title', 'مدیریت رزرو کلاس‌ها')

@section('content')
<div x-data="{ activeTab: 'bookings', editingClass: null }">
    <!-- Tabs Header -->
    <div class="flex gap-4 border-b border-gray-200 mb-6">
        <button @click="activeTab = 'bookings'" :class="activeTab === 'bookings' ? 'border-b-2 border-blue-600 text-blue-600 font-bold' : 'text-gray-500'" class="pb-3 px-2 text-lg transition">
            📋 لیست رزروها
        </button>
        <button @click="activeTab = 'classes'" :class="activeTab === 'classes' ? 'border-b-2 border-blue-600 text-blue-600 font-bold' : 'text-gray-500'" class="pb-3 px-2 text-lg transition">
            🏫 کلاس‌های آموزشی
        </button>
    </div>

    <!-- TAB 1: BOOKINGS LIST -->
    <div x-show="activeTab === 'bookings'">
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50">
                <h2 class="text-xl font-bold text-gray-800">تاریخچه رزروهای کاربران</h2>
            </div>
            
            <div class="overflow-x-auto">
                <table class="w-full text-right border-collapse">
                    <thead>
                        <tr class="bg-gray-100 border-b border-gray-200 text-gray-600 font-bold text-sm">
                            <th class="p-4">شناسه</th>
                            <th class="p-4">کاربر</th>
                            <th class="p-4">کلاس</th>
                            <th class="p-4">تعداد جلسات</th>
                            <th class="p-4">هزینه پرداختی</th>
                            <th class="p-4">وضعیت پرداخت</th>
                            <th class="p-4">تاریخ رزرو</th>
                            <th class="p-4">عملیات</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 text-gray-700 text-sm">
                        @forelse ($bookings as $b)
                            <tr class="hover:bg-gray-50">
                                <td class="p-4 font-mono">#{{ $b->id }}</td>
                                <td class="p-4">
                                    <div class="font-bold">{{ $b->first_name }} {{ $b->last_name }}</div>
                                    <div class="text-xs text-gray-400 font-mono">@if($b->username) {{ '@'.$b->username }} @else Chat ID: {{ $b->chat_id }} @endif</div>
                                </td>
                                <td class="p-4 font-bold">{{ $b->class_name }}</td>
                                <td class="p-4">{{ $b->session_count }} جلسه</td>
                                <td class="p-4">
                                    <div>{{ number_format($b->toman) }} تومان</div>
                                    <div class="text-xs text-gray-400">{{ $b->stars }} استار</div>
                                </td>
                                <td class="p-4">
                                    <form action="{{ route('admin.bookings.bookings.status', $b->id) }}" method="POST" class="inline-block">
                                        @csrf
                                        <select name="payment_status" onchange="this.form.submit()" class="px-2 py-1 rounded text-xs font-bold border border-gray-300 focus:outline-none focus:ring-1 focus:ring-blue-500 
                                            @if($b->payment_status === 'paid' || $b->payment_status === 'completed') bg-green-50 text-green-700 border-green-200 
                                            @elseif($b->payment_status === 'failed') bg-red-50 text-red-700 border-red-200 
                                            @else bg-gray-50 text-gray-700 @endif">
                                            <option value="pending" {{ $b->payment_status === 'pending' ? 'selected' : '' }}>⏳ در انتظار پرداخت</option>
                                            <option value="paid" {{ $b->payment_status === 'paid' ? 'selected' : '' }}>✅ پرداخت شده</option>
                                            <option value="completed" {{ $b->payment_status === 'completed' ? 'selected' : '' }}>🚀 تکمیل شده</option>
                                            <option value="failed" {{ $b->payment_status === 'failed' ? 'selected' : '' }}>⛔ ناموفق</option>
                                        </select>
                                    </form>
                                </td>
                                <td class="p-4 font-mono text-xs text-gray-500">{{ $b->created_at }}</td>
                                <td class="p-4">
                                    <form action="{{ route('admin.bookings.bookings.delete', $b->id) }}" method="POST" onsubmit="return confirm('آیا از حذف این رزرو مطمئن هستید؟');" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-red-500 hover:text-red-700 font-bold text-xs bg-red-50 hover:bg-red-100 px-2 py-1 rounded border border-red-100 transition">
                                            حذف
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center p-8 text-gray-400">هیچ رزروی یافت نشد.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- TAB 2: CLASSES MANAGEMENT -->
    <div x-show="activeTab === 'classes'">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Add New Class Form -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h3 class="text-lg font-bold text-gray-800 border-b border-gray-100 pb-3 mb-4">🏫 افزودن کلاس جدید</h3>
                <form action="{{ route('admin.bookings.classes.store') }}" method="POST" class="flex flex-col gap-4">
                    @csrf
                    <div>
                        <label class="block text-sm text-gray-600 mb-1 font-bold">نام کلاس</label>
                        <input type="text" name="class_name" required class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500" placeholder="مثال: دوره آموزش Revit">
                    </div>
                    
                    <div>
                        <label class="block text-sm text-gray-600 mb-1 font-bold">توضیحات کوتاه</label>
                        <textarea name="description" rows="2" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500" placeholder="توضیحات کلاس..."></textarea>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm text-gray-600 mb-1 font-bold">قیمت تک جلسه (تومان)</label>
                            <input type="number" name="toman" required class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500" placeholder="150000">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-600 mb-1 font-bold">تعداد جلسات پکیج</label>
                            <input type="number" name="pack_sessions_count" required class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500" placeholder="10">
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm text-gray-600 mb-1 font-bold">قیمت کل پکیج (تومان)</label>
                            <input type="number" name="pack_toman" required class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500" placeholder="1200000">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-600 mb-1 font-bold">قیمت تخفیف پکیج (تومان)</label>
                            <input type="number" name="pack_toman_off" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500" placeholder="980000">
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm text-gray-600 mb-1 font-bold">هزینه پکیج (استار)</label>
                            <input type="number" name="pack_stars" required class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500" placeholder="500">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-600 mb-1 font-bold">تخفیف پکیج (استار)</label>
                            <input type="number" name="pack_stars_off" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500" placeholder="400">
                        </div>
                    </div>

                    <div class="flex items-center gap-2">
                        <input type="checkbox" name="is_active" value="1" checked id="isActiveCheck" class="rounded text-blue-600 focus:ring-blue-500">
                        <label for="isActiveCheck" class="text-sm text-gray-700 font-bold select-none cursor-pointer">کلاس فعال باشد و نمایش داده شود</label>
                    </div>

                    <button type="submit" class="bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition font-bold text-sm mt-2 shadow-md">
                        ➕ ثبت کلاس
                    </button>
                </form>
            </div>

            <!-- Active Classes List -->
            <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6">
                <h3 class="text-lg font-bold text-gray-800 border-b border-gray-100 pb-3 mb-4">🏫 لیست کلاس‌های تعریف شده</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    @forelse ($classes as $class)
                        <div class="border border-gray-200 rounded-xl p-4 flex flex-col justify-between hover:shadow-md transition">
                            <div>
                                <div class="flex justify-between items-center mb-2">
                                    <span class="font-bold text-gray-800 text-base">{{ $class->class_name }}</span>
                                    <span class="px-2 py-0.5 rounded text-xs font-bold {{ $class->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                                        {{ $class->is_active ? 'فعال' : 'غیرفعال' }}
                                    </span>
                                </div>
                                <p class="text-gray-500 text-xs mb-4 line-clamp-2">{{ $class->description ?? 'بدون توضیحات' }}</p>
                                
                                <div class="text-xs text-gray-600 space-y-1 mb-4 border-t border-gray-100 pt-2">
                                    <div> جلسه منفرد: <span class="font-bold text-gray-900">{{ number_format($class->toman) }} تومان</span></div>
                                    <div>پکیج ({{ $class->pack_sessions_count }} جلسه): <span class="font-bold text-gray-900">{{ number_format($class->pack_toman) }} تومان</span></div>
                                    @if($class->pack_toman_off > 0)
                                        <div class="text-red-500">قیمت پکیج با تخفیف: <b>{{ number_format($class->pack_toman_off) }} تومان</b></div>
                                    @endif
                                </div>
                            </div>

                            <div class="flex gap-2 border-t border-gray-100 pt-3">
                                <button @click="editingClass = {{ json_encode($class) }}" class="flex-1 bg-yellow-50 text-yellow-700 text-xs font-bold py-1.5 rounded-lg border border-yellow-200 hover:bg-yellow-100 transition">
                                    ✏️ ویرایش
                                </button>
                                <form action="{{ route('admin.bookings.classes.delete', $class->id) }}" method="POST" onsubmit="return confirm('آیا از حذف این کلاس مطمئن هستید؟ با حذف این کلاس تمام رزروهای مرتبط با آن حذف خواهند شد.');" class="flex-1">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="w-full bg-red-50 text-red-700 text-xs font-bold py-1.5 rounded-lg border border-red-200 hover:bg-red-100 transition">
                                        🗑️ حذف
                                    </button>
                                </form>
                            </div>
                        </div>
                    @empty
                        <div class="col-span-2 text-center py-8 text-gray-400">هیچ کلاسی ثبت نشده است.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Class Modal -->
    <div x-show="editingClass !== null" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4" x-cloak>
        <div class="bg-white rounded-xl shadow-lg w-full max-w-lg p-6 relative" @click.away="editingClass = null">
            <button @click="editingClass = null" class="absolute top-4 left-4 text-gray-400 hover:text-gray-600 text-2xl font-bold">&times;</button>
            <h3 class="text-xl font-bold text-gray-800 border-b border-gray-100 pb-3 mb-4">✏️ ویرایش کلاس</h3>
            
            <form :action="'{{ url('/admin/bookings/class/update') }}/' + (editingClass ? editingClass.id : '')" method="POST" class="flex flex-col gap-4">
                @csrf
                @method('PUT')
                <div>
                    <label class="block text-sm text-gray-600 mb-1 font-bold">نام کلاس</label>
                    <input type="text" name="class_name" required :value="editingClass ? editingClass.class_name : ''" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500">
                </div>
                
                <div>
                    <label class="block text-sm text-gray-600 mb-1 font-bold">توضیحات کوتاه</label>
                    <textarea name="description" rows="2" :value="editingClass ? editingClass.description : ''" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500"></textarea>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-gray-600 mb-1 font-bold">قیمت تک جلسه (تومان)</label>
                        <input type="number" name="toman" required :value="editingClass ? editingClass.toman : ''" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-600 mb-1 font-bold">تعداد جلسات پکیج</label>
                        <input type="number" name="pack_sessions_count" required :value="editingClass ? editingClass.pack_sessions_count : ''" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500">
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-gray-600 mb-1 font-bold">قیمت کل پکیج (تومان)</label>
                        <input type="number" name="pack_toman" required :value="editingClass ? editingClass.pack_toman : ''" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-600 mb-1 font-bold">قیمت تخفیف پکیج (تومان)</label>
                        <input type="number" name="pack_toman_off" :value="editingClass ? editingClass.pack_toman_off : ''" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500">
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-gray-600 mb-1 font-bold">هزینه پکیج (استار)</label>
                        <input type="number" name="pack_stars" required :value="editingClass ? editingClass.pack_stars : ''" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm text-gray-600 mb-1 font-bold">تخفیف پکیج (استار)</label>
                        <input type="number" name="pack_stars_off" :value="editingClass ? editingClass.pack_stars_off : ''" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-blue-500">
                    </div>
                </div>

                <div class="flex items-center gap-2">
                    <input type="checkbox" name="is_active" value="1" :checked="editingClass && editingClass.is_active" id="editIsActiveCheck" class="rounded text-blue-600 focus:ring-blue-500">
                    <label for="editIsActiveCheck" class="text-sm text-gray-700 font-bold select-none cursor-pointer">کلاس فعال باشد و نمایش داده شود</label>
                </div>

                <div class="flex gap-2 justify-end mt-4">
                    <button type="button" @click="editingClass = null" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg font-bold text-sm transition">
                        انصراف
                    </button>
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-bold text-sm transition shadow-md">
                        💾 ذخیره تغییرات
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection