@extends('layouts.app')

@section('title', 'إدارة الحجوزات')

@section('content')


    <!-- Page Header -->
    <header class="p-4  md:px-12">
        <div class=" mx-auto flex flex-col gap-6">
            <div class="flex items-center gap-2 text-sm">
                <a class="text-text-secondary hover:text-primary transition-colors" href="#">الرئيسية</a>
                <span class="text-text-tertiary text-xs material-symbols-outlined rotate-180">chevron_right</span>
                <span class="text-text-secondary hover:text-primary transition-color">إدارة الحجوزات</span>
            </div>
            <div class="flex flex-wrap justify-between items-end gap-4">
                <div class="flex flex-col gap-2">
                    <h2 class="text-text-main text-3xl md:text-4xl font-extrabold tracking-tight">إدارة الحجوزات</h2>
                    <p class="text-text-secondary text-base max-w-2xl font-medium">إدارة الحجوزات الكاملة الخاصة بالمركز.
                    </p>
                </div>
                <div class="flex gap-3">
                    <button
                        class="flex items-center gap-2 px-5 h-12 bg-white border border-border-color rounded-xl font-bold text-sm hover:bg-gray-50 transition">
                        <span class="material-symbols-outlined text-xl">download</span>
                        تصدير
                    </button>

                    <button onclick="openBookingDrawer()" class="bg-primary text-white px-6 py-3 rounded-xl">
                        إضافة حجز جديد
                    </button>
                </div>
            </div>
        </div>
    </header>
    <!-- end page header -->

    <div class="flex-1 overflow-y-auto p-4 md:p-8 md:px-12 scroll-smooth">


        {{-- Filters --}}
        <div class="bg-white p-1 rounded-2xl my-5 border border-border-color shadow-sm flex flex-wrap items-center">
            <div class="flex items-center gap-2 text-sm font-bold pl-4 pr-4 border-l border-border-color h-10">
                <span class="material-symbols-outlined text-primary">filter_list</span>
                تصفية:
            </div>

            <div class="flex flex-1 items-center gap-2 p-2 overflow-x-auto">
                <button
                    class="flex items-center gap-2 h-10 px-4 bg-primary-subtle rounded-xl text-sm hover:bg-primary-light border border-primary/10">
                    <span class="material-symbols-outlined text-lg text-primary/70">calendar_today</span>
                    اليوم: 24 أكتوبر
                </button>

                <button
                    class="flex items-center gap-2 h-10 px-4 bg-white rounded-xl text-sm border border-border-color hover:border-primary">
                    <span class="material-symbols-outlined text-lg text-text-muted">person</span>
                    الموظفة: الكل
                </button>

                <button
                    class="flex items-center gap-2 h-10 px-4 bg-white rounded-xl text-sm border border-border-color hover:border-primary">
                    <span class="material-symbols-outlined text-lg text-text-muted">flag</span>
                    الحالة: الكل
                </button>

                <div class="mr-auto px-2">
                    <button class="text-primary text-sm font-bold hover:text-primary-hover">
                        مسح الكل
                    </button>
                </div>
            </div>
        </div>

        {{-- Table --}}
        <div class="bg-white rounded-2xl border border-border-color shadow overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-right">
                    <thead class="bg-primary-subtle border-b border-border-color">
                        <tr>
                            <th class="px-6 py-5 text-xs font-bold text-text-muted">رقم الحجز</th>
                            <th class="px-6 py-5 text-xs font-bold text-text-muted">العميل</th>
                            <th class="px-6 py-5 text-xs font-bold text-text-muted">الخدمة</th>
                            <th class="px-6 py-5 text-xs font-bold text-text-muted">الموظفة</th>
                            <th class="px-6 py-5 text-xs font-bold text-text-muted">التاريخ والوقت</th>
                            <th class="px-6 py-5 text-xs font-bold text-text-muted">الحالة</th>
                            <th class="px-6 py-5 text-xs font-bold text-text-muted">المدفوع</th>
                            <th class="px-6 py-5 text-xs font-bold text-text-muted">إجراءات</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-border-color">
                        <tr class="group table-row-hover transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-primary font-mono">#1024</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center gap-3">
                                    <div class="size-10 rounded-full bg-cover bg-center bg-no-repeat ring-2 ring-white shadow-sm"
                                        data-alt="Client avatar"
                                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDeyN_X7iaQw0GI7sEnJOdH_6tBb9thHDKV6eK6NDrOvl-B1tRvnNs87MzM8_Xm6DwMxRxB93RBGx2uzcqUd_sHA-Ft7cDCjGT7Fia7hJAYrZvVybKKZFHaOLp5-mO5rKN77xOzJyV4abWrUwlhQKMD3gfjDxg5YMyaDgVGocfrYk09Cry9Qzc3HIeo2PU2x3n3fzddOYhCsdXdBoCZariKxcfezVhZYWoRzhpdqXurcoTUcIdvV3l7ZgNW4CYgKT9JMNrsaznjueY");'>
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-sm font-bold text-text-main">سارة محمد</span>
                                        <span class="text-xs text-text-muted font-sans" dir="ltr">050 123 4567</span>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex flex-wrap gap-1.5 max-w-[200px]">
                                    <span
                                        class="px-2.5 py-1 bg-primary-light text-primary text-xs rounded-lg font-medium border border-primary/10">قص
                                        شعر</span>
                                    <span
                                        class="px-2.5 py-1 bg-primary-light text-primary text-xs rounded-lg font-medium border border-primary/10">صبغة</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-text-main">نورة العلي</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex flex-col">
                                    <span class="text-sm font-medium text-text-main">24 أكتوبر, 2023</span>
                                    <span class="text-xs text-text-muted">02:30 م - 04:00 م</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span
                                    class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-[#edf7ed] text-[#1e4620] border border-[#c8e6c9]">
                                    <span class="size-1.5 rounded-full bg-[#4caf50]"></span>
                                    مؤكد
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-text-main">
                                <div class="flex flex-col">
                                    <span class="font-bold text-text-main">500 ر.س</span>
                                    <span class="text-xs text-[#4caf50] font-medium">مدفوع بالكامل</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-text-muted">
                                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                    <button
                                        class="size-8 flex items-center justify-center rounded-lg hover:bg-primary-light text-primary transition-colors"
                                        title="تعديل">
                                        <span class="material-symbols-outlined text-[1.2rem]">edit</span>
                                    </button>
                                    <button
                                        class="size-8 flex items-center justify-center rounded-lg hover:bg-[#e0f2f1] text-[#00695c] transition-colors"
                                        title="مراسلة واتساب">
                                        <span class="material-symbols-outlined text-[1.2rem]">chat</span>
                                    </button>
                                    <button
                                        class="size-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-500 transition-colors"
                                        title="المزيد">
                                        <span class="material-symbols-outlined text-[1.2rem]">more_horiz</span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr class="group table-row-hover transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-primary font-mono">#1025</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center gap-3">
                                    <div class="size-10 rounded-full bg-cover bg-center bg-no-repeat ring-2 ring-white shadow-sm"
                                        data-alt="Client avatar"
                                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuC6xGFiDWcQe66683-SsIbFnYi-e5yqYHToEP9ltZijU0BuhUIPDIsvEeLsd3qayfl4zspB5WXb4un3TcpsLR6sGl2qFu1dml1N1kWtKrIdETZDFwAOoiCu9uPJVhIzdES7F4_BKU1zIrb5VKPV4PwtMaIz3G7lsSZihJQVz1P7sTEfLE-7ij3YEO5Mvsxswf0tOPzU2ukYcJLFWfnQH2FthWJHJ0ySPTh162L5ui0TQUHdSQC4hSaVPp1OuP7f4j_1Fa6jWo2U9bk");'>
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-sm font-bold text-text-main">ليلى خالد</span>
                                        <span class="text-xs text-text-muted font-sans" dir="ltr">055 987 6543</span>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span
                                    class="px-2.5 py-1 bg-primary-light text-primary text-xs rounded-lg font-medium border border-primary/10">مانيكير
                                    وباديكير</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-text-main">سارة حسن</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex flex-col">
                                    <span class="text-sm font-medium text-text-main">24 أكتوبر, 2023</span>
                                    <span class="text-xs text-text-muted">04:15 م - 05:15 م</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span
                                    class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-[#fff8e1] text-[#f57f17] border border-[#ffecb3]">
                                    <span class="size-1.5 rounded-full bg-[#ffb300]"></span>
                                    قيد الانتظار
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-text-main">
                                <div class="flex flex-col">
                                    <span class="font-bold text-text-main">200 ر.س</span>
                                    <span class="text-xs text-primary font-medium">متبقي: 200 ر.س</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-text-muted">
                                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                    <button
                                        class="size-8 flex items-center justify-center rounded-lg hover:bg-primary-light text-primary transition-colors"
                                        title="تعديل">
                                        <span class="material-symbols-outlined text-[1.2rem]">edit</span>
                                    </button>
                                    <button
                                        class="size-8 flex items-center justify-center rounded-lg hover:bg-[#e0f2f1] text-[#00695c] transition-colors"
                                        title="مراسلة واتساب">
                                        <span class="material-symbols-outlined text-[1.2rem]">chat</span>
                                    </button>
                                    <button
                                        class="size-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-500 transition-colors"
                                        title="المزيد">
                                        <span class="material-symbols-outlined text-[1.2rem]">more_horiz</span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr class="group table-row-hover transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-primary font-mono">#1023</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center gap-3">
                                    <div class="size-10 rounded-full bg-cover bg-center bg-no-repeat ring-2 ring-white shadow-sm"
                                        data-alt="Client avatar"
                                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCuDjLIWJlp50AO6DTAEI0LYOdt1luhzeFHmB3xzHSpby4A9eqT2oP7oW4lClQUMln3wMzojtSorg6pnlgQmJHd3MYhMuGsKeiR6XgZ_o2x6Qt_fX4UMTy6vQZ54JBTczHR6HV8XGqQr6ftPh-HzIyaMUssGcI79wDtOung8OI22-BfQ03jrhlXY_k6dW2VZEcpdFBzVhqXWao1G_KLCnPY95kznhRFFSepErkJ3561fYebq_cI7WwV-A-IIEtV8D9BPmZhwz6WFg0");'>
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-sm font-bold text-text-main">أمل سعيد</span>
                                        <span class="text-xs text-text-muted font-sans" dir="ltr">054 321 0987</span>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span
                                    class="px-2.5 py-1 bg-primary-light text-primary text-xs rounded-lg font-medium border border-primary/10">تنظيف
                                    بشرة</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-text-main">مريم علي</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex flex-col">
                                    <span class="text-sm font-medium text-text-main">24 أكتوبر, 2023</span>
                                    <span class="text-xs text-text-muted">01:00 م - 02:00 م</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span
                                    class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-[#ffebee] text-[#b71c1c] border border-[#ffcdd2]">
                                    <span class="size-1.5 rounded-full bg-[#f44336]"></span>
                                    ملغي
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-text-main">
                                <div class="flex flex-col">
                                    <span class="font-bold text-gray-400 line-through">350 ر.س</span>
                                    <span class="text-xs text-text-muted">-</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-text-muted">
                                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                    <button
                                        class="size-8 flex items-center justify-center rounded-lg hover:bg-primary-light text-primary transition-colors"
                                        title="تعديل">
                                        <span class="material-symbols-outlined text-[1.2rem]">edit</span>
                                    </button>
                                    <button
                                        class="size-8 flex items-center justify-center rounded-lg hover:bg-[#e0f2f1] text-[#00695c] transition-colors"
                                        title="مراسلة واتساب">
                                        <span class="material-symbols-outlined text-[1.2rem]">chat</span>
                                    </button>
                                    <button
                                        class="size-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-500 transition-colors"
                                        title="المزيد">
                                        <span class="material-symbols-outlined text-[1.2rem]">more_horiz</span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr class="group table-row-hover transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-primary font-mono">#1022</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center gap-3">
                                    <div class="size-10 rounded-full bg-cover bg-center bg-no-repeat ring-2 ring-white shadow-sm"
                                        data-alt="Client avatar"
                                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAH8r0Dv4ks6kLBAhF1e8qpHKPyTUxVOokoqm_-lS08pH2VqE6c8Pahs38gfJBwR3xhPba-WDUlR-hg5wmYYeCNZ6AsX50fACFOde0nx7PtOIpRq1KlC86hjq2F8VogVw8UnF6fB14xfcAIEp_xBCRnJ4ANaF-HdAluND562s7Vc3_v4zNHCaYAXwK-CFxMJ1M24S8Z9Z_dcAX4h2nt0M0slJsOveIx11eaWqLGiBU6e1KJL1HeOm6yoz3P8GmncW2NL0pso7CTEjg");'>
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-sm font-bold text-text-main">هدى عبدالله</span>
                                        <span class="text-xs text-text-muted font-sans" dir="ltr">056 777 8888</span>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span
                                    class="px-2.5 py-1 bg-primary-light text-primary text-xs rounded-lg font-medium border border-primary/10">استشوار</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-text-main">نورة العلي</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex flex-col">
                                    <span class="text-sm font-medium text-text-main">24 أكتوبر, 2023</span>
                                    <span class="text-xs text-text-muted">11:00 ص - 11:45 ص</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span
                                    class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-[#e3f2fd] text-[#0d47a1] border border-[#bbdefb]">
                                    <span class="size-1.5 rounded-full bg-[#2196f3]"></span>
                                    مكتمل
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-text-main">
                                <div class="flex flex-col">
                                    <span class="font-bold text-text-main">150 ر.س</span>
                                    <span class="text-xs text-[#4caf50] font-medium">مدفوع بالكامل</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-text-muted">
                                <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                    <button
                                        class="size-8 flex items-center justify-center rounded-lg hover:bg-primary-light text-primary transition-colors"
                                        title="تعديل">
                                        <span class="material-symbols-outlined text-[1.2rem]">edit</span>
                                    </button>
                                    <button
                                        class="size-8 flex items-center justify-center rounded-lg hover:bg-[#e0f2f1] text-[#00695c] transition-colors"
                                        title="مراسلة واتساب">
                                        <span class="material-symbols-outlined text-[1.2rem]">chat</span>
                                    </button>
                                    <button
                                        class="size-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-500 transition-colors"
                                        title="المزيد">
                                        <span class="material-symbols-outlined text-[1.2rem]">more_horiz</span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            {{-- Pagination --}}
            <div class="px-6 py-4 border-t border-border-color flex justify-between items-center">
                <span class="text-sm text-text-muted">عرض 1 من 128</span>
                <div class="flex gap-2">
                    <button class="size-10 border rounded">1</button>
                    <button class="size-10 border rounded">2</button>
                    <button class="size-10 border rounded">3</button>
                </div>
            </div>
        </div>

    </div>
    @include('components.bookings.booking-drawer')

    @push('scripts')
        <script>
            function openBookingDrawer() {
                document.getElementById('bookingDrawer')?.classList.remove('-translate-x-full');
                document.getElementById('bookingOverlay')?.classList.remove('hidden');
            }

            function closeBookingDrawer() {
                document.getElementById('bookingDrawer')?.classList.add('-translate-x-full');
                document.getElementById('bookingOverlay')?.classList.add('hidden');
            }
        </script>
    @endpush


@endsection