@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-primary font-bold">التقارير</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">إدارة تقارير الحجوزات والإيرادات وأداء
                        الموظفات وولاء العملاء مع
                        تصديرها إلى PDF/CSV</p>
                </div>
            </div>
        </div>
    </header>
    <!-- end page header -->

    <div class="flex-1 overflow-y-auto p-4 md:p-8 md:px-12 scroll-smooth">
        <div
            class="flex flex-col sm:flex-row flex-wrap items-center justify-between gap-4 bg-white p-4 rounded-xl border border-border-subtle shadow-card">
            <div class="flex flex-wrap gap-3 w-full sm:w-auto">
                <div class="relative group">
                    <select
                        class="appearance-none bg-background border border-border-subtle text-text-main text-sm rounded-lg pr-10 pl-8 py-2.5 focus:outline-none focus:ring-1 focus:ring-primary w-full sm:w-40 cursor-pointer hover:border-primary/30 transition-colors font-medium">
                        <option>هذا الشهر</option>
                        <option>الشهر الماضي</option>
                        <option>هذا الأسبوع</option>
                        <option>اليوم</option>
                    </select>
                    <span
                        class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-primary pointer-events-none text-lg">calendar_today</span>
                    <span
                        class="material-symbols-outlined absolute left-2 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none text-lg">expand_more</span>
                </div>
                <div class="relative group">
                    <select
                        class="appearance-none bg-background border border-border-subtle text-text-main text-sm rounded-lg pr-10 pl-8 py-2.5 focus:outline-none focus:ring-1 focus:ring-primary w-full sm:w-40 cursor-pointer hover:border-primary/30 transition-colors font-medium">
                        <option>الموظفة: الكل</option>
                        <option>سارة أحمد</option>
                        <option>ليلى محمد</option>
                        <option>منال يوسف</option>
                    </select>
                    <span
                        class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none text-lg">person</span>
                    <span
                        class="material-symbols-outlined absolute left-2 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none text-lg">expand_more</span>
                </div>
                <div class="relative group">
                    <select
                        class="appearance-none bg-background border border-border-subtle text-text-main text-sm rounded-lg pr-10 pl-8 py-2.5 focus:outline-none focus:ring-1 focus:ring-primary w-full sm:w-40 cursor-pointer hover:border-primary/30 transition-colors font-medium">
                        <option>الخدمة: الكل</option>
                        <option>قص شعر</option>
                        <option>صبغة</option>
                        <option>مكياج</option>
                    </select>
                    <span
                        class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none text-lg">spa</span>
                    <span
                        class="material-symbols-outlined absolute left-2 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none text-lg">expand_more</span>
                </div>
            </div>
            <div class="flex gap-2 w-full sm:w-auto sm:justify-end">
                <button
                    class="flex-1 sm:flex-none items-center justify-center bg-background hover:bg-gray-100 text-text-muted hover:text-text-main border border-border-subtle px-4 py-2.5 rounded-lg transition-all text-sm font-medium">
                    مسح الفلتر
                </button>
                <button
                    class="flex-1 sm:flex-none flex items-center justify-center gap-2 bg-background hover:bg-gray-100 text-text-main border border-border-subtle px-4 py-2.5 rounded-lg transition-all text-sm font-medium">
                    <span class="material-symbols-outlined text-lg">print</span>
                    <span>طباعة</span>
                </button>
            </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 my-4">
            <div
                class="bg-white rounded-xl p-6 flex flex-col justify-between group hover:-translate-y-1 transition-all duration-300 shadow-card hover:shadow-lg hover:shadow-primary/5 border border-transparent hover:border-primary/10">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-text-muted text-sm font-medium mb-1">إجمالي الإيرادات</p>
                        <h3 class="text-text-main text-2xl font-bold font-display">٥٤,٣٠٠ ر.س</h3>
                    </div>
                    <div
                        class="size-10 rounded-full bg-primary/5 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors">
                        <span class="material-symbols-outlined">payments</span>
                    </div>
                </div>
                <div class="flex items-center gap-2 mt-4">
                    <span
                        class="flex items-center text-emerald-600 text-xs font-bold bg-emerald-50 px-2 py-0.5 rounded-full border border-emerald-100">
                        <span class="material-symbols-outlined text-sm">trending_up</span>
                        ١٢%
                    </span>
                    <span class="text-text-muted text-xs">مقارنة بالشهر الماضي</span>
                </div>
            </div>
            <div
                class="bg-white rounded-xl p-6 flex flex-col justify-between group hover:-translate-y-1 transition-all duration-300 shadow-card hover:shadow-lg hover:shadow-primary/5 border border-transparent hover:border-primary/10">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-text-muted text-sm font-medium mb-1">عدد الحجوزات</p>
                        <h3 class="text-text-main text-2xl font-bold font-display">٣٢٠</h3>
                    </div>
                    <div
                        class="size-10 rounded-full bg-primary/5 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors">
                        <span class="material-symbols-outlined">confirmation_number</span>
                    </div>
                </div>
                <div class="flex items-center gap-2 mt-4">
                    <span
                        class="flex items-center text-emerald-600 text-xs font-bold bg-emerald-50 px-2 py-0.5 rounded-full border border-emerald-100">
                        <span class="material-symbols-outlined text-sm">trending_up</span>
                        ٥%
                    </span>
                    <span class="text-text-muted text-xs">مقارنة بالشهر الماضي</span>
                </div>
            </div>
            <div
                class="bg-white rounded-xl p-6 flex flex-col justify-between group hover:-translate-y-1 transition-all duration-300 shadow-card hover:shadow-lg hover:shadow-primary/5 border border-transparent hover:border-primary/10">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-text-muted text-sm font-medium mb-1">عملاء جدد</p>
                        <h3 class="text-text-main text-2xl font-bold font-display">٤٥</h3>
                    </div>
                    <div
                        class="size-10 rounded-full bg-primary/5 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors">
                        <span class="material-symbols-outlined">person_add</span>
                    </div>
                </div>
                <div class="flex items-center gap-2 mt-4">
                    <span
                        class="flex items-center text-rose-600 text-xs font-bold bg-rose-50 px-2 py-0.5 rounded-full border border-rose-100">
                        <span class="material-symbols-outlined text-sm">trending_down</span>
                        ٢%
                    </span>
                    <span class="text-text-muted text-xs">مقارنة بالشهر الماضي</span>
                </div>
            </div>
            <div
                class="bg-white rounded-xl p-6 flex flex-col justify-between group hover:-translate-y-1 transition-all duration-300 shadow-card hover:shadow-lg hover:shadow-primary/5 border border-transparent hover:border-primary/10">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-text-muted text-sm font-medium mb-1">متوسط التذكرة</p>
                        <h3 class="text-text-main text-2xl font-bold font-display">١٧٠ ر.س</h3>
                    </div>
                    <div
                        class="size-10 rounded-full bg-primary/5 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors">
                        <span class="material-symbols-outlined">receipt_long</span>
                    </div>
                </div>
                <div class="flex items-center gap-2 mt-4">
                    <span
                        class="flex items-center text-emerald-600 text-xs font-bold bg-emerald-50 px-2 py-0.5 rounded-full border border-emerald-100">
                        <span class="material-symbols-outlined text-sm">trending_up</span>
                        ٨%
                    </span>
                    <span class="text-text-muted text-xs">أداء ممتاز</span>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="lg:col-span-2 bg-white rounded-xl p-6 shadow-card border border-border-subtle">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-text-main text-lg font-bold">تحليل الإيرادات والحجوزات</h3>
                    <button
                        class="text-xs text-primary hover:text-primary-hover font-medium transition-colors bg-primary-bg px-3 py-1 rounded-full">عرض
                        التفاصيل</button>
                </div>
                <div
                    class="relative h-64 w-full chart-grid rounded-lg border border-border-subtle/50 flex items-end justify-between px-4 pb-0 pt-8 gap-2 overflow-hidden bg-background/50">
                    <div
                        class="w-full h-[40%] bg-primary/10 rounded-t-sm relative group hover:bg-primary/20 transition-colors cursor-pointer">
                        <div
                            class="absolute -top-10 left-1/2 -translate-x-1/2 bg-text-main text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity shadow-xl z-20 pointer-events-none whitespace-nowrap after:content-[''] after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-text-main">
                            حجوزات: ٤٠</div>
                    </div>
                    <div
                        class="w-full h-[60%] bg-primary/10 rounded-t-sm relative group hover:bg-primary/20 transition-colors cursor-pointer">
                        <div
                            class="absolute -top-10 left-1/2 -translate-x-1/2 bg-text-main text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity shadow-xl z-20 pointer-events-none whitespace-nowrap after:content-[''] after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-text-main">
                            حجوزات: ٦٠</div>
                    </div>
                    <div
                        class="w-full h-[45%] bg-primary/10 rounded-t-sm relative group hover:bg-primary/20 transition-colors cursor-pointer">
                        <div
                            class="absolute -top-10 left-1/2 -translate-x-1/2 bg-text-main text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity shadow-xl z-20 pointer-events-none whitespace-nowrap after:content-[''] after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-text-main">
                            حجوزات: ٤٥</div>
                    </div>
                    <div
                        class="w-full h-[80%] bg-primary/10 rounded-t-sm relative group hover:bg-primary/20 transition-colors cursor-pointer">
                        <div
                            class="absolute -top-10 left-1/2 -translate-x-1/2 bg-text-main text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity shadow-xl z-20 pointer-events-none whitespace-nowrap after:content-[''] after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-text-main">
                            حجوزات: ٨٠</div>
                    </div>
                    <div
                        class="w-full h-[55%] bg-primary/10 rounded-t-sm relative group hover:bg-primary/20 transition-colors cursor-pointer">
                        <div
                            class="absolute -top-10 left-1/2 -translate-x-1/2 bg-text-main text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity shadow-xl z-20 pointer-events-none whitespace-nowrap after:content-[''] after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-text-main">
                            حجوزات: ٥٥</div>
                    </div>
                    <div
                        class="w-full h-[70%] bg-primary/10 rounded-t-sm relative group hover:bg-primary/20 transition-colors cursor-pointer">
                        <div
                            class="absolute -top-10 left-1/2 -translate-x-1/2 bg-text-main text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity shadow-xl z-20 pointer-events-none whitespace-nowrap after:content-[''] after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-text-main">
                            حجوزات: ٧٠</div>
                    </div>
                    <div
                        class="w-full h-[90%] bg-primary/10 rounded-t-sm relative group hover:bg-primary/20 transition-colors cursor-pointer">
                        <div
                            class="absolute -top-10 left-1/2 -translate-x-1/2 bg-text-main text-white text-[10px] py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity shadow-xl z-20 pointer-events-none whitespace-nowrap after:content-[''] after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-text-main">
                            حجوزات: ٩٠</div>
                    </div>
                    <svg class="absolute inset-0 w-full h-full pointer-events-none" preserveAspectRatio="none">
                        <path class="drop-shadow-md"
                            d="M0,150 C50,130 100,100 150,110 S250,50 300,60 S400,100 500,80 S600,20 800,40" fill="none"
                            stroke="#7b1f1f" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></path>
                        <path d="M0,150 C50,130 100,100 150,110 S250,50 300,60 S400,100 500,80 S600,20 800,40 V300 H0 Z"
                            fill="url(#gradient)" opacity="0.1"></path>
                        <defs>
                            <linearGradient id="gradient" x1="0%" x2="0%" y1="0%" y2="100%">
                                <stop offset="0%" style="stop-color:#7b1f1f;stop-opacity:1"></stop>
                                <stop offset="100%" style="stop-color:#7b1f1f;stop-opacity:0"></stop>
                            </linearGradient>
                        </defs>
                    </svg>
                </div>
                <div class="flex justify-between mt-3 text-xs text-text-muted px-2 font-medium">
                    <span>الأحد</span>
                    <span>الاثنين</span>
                    <span>الثلاثاء</span>
                    <span>الأربعاء</span>
                    <span>الخميس</span>
                    <span>الجمعة</span>
                    <span>السبت</span>
                </div>
                <div class="flex justify-center gap-6 mt-4">
                    <div class="flex items-center gap-2">
                        <span class="size-3 rounded-full bg-primary"></span>
                        <span class="text-xs text-text-main font-medium">الإيرادات</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="size-3 rounded-full bg-primary/20"></span>
                        <span class="text-xs text-text-main font-medium">الحجوزات</span>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-card border border-border-subtle flex flex-col">
                <h3 class="text-text-main text-lg font-bold mb-6">توزيع الخدمات</h3>
                <div class="flex-1 flex items-center justify-center relative my-4">
                    <div class="size-48 rounded-full border-[16px] border-surface relative flex items-center justify-center shadow-inner bg-background"
                        style="background: conic-gradient(#7b1f1f 0% 40%, #a34545 40% 65%, #cbb1b1 65% 85%, #f2e8e8 85% 100%);">
                        <div
                            class="size-32 bg-surface rounded-full flex flex-col items-center justify-center z-10 shadow-sm">
                            <span class="text-3xl font-bold text-text-main">١٠٠٪</span>
                            <span class="text-xs text-text-muted">إجمالي الخدمات</span>
                        </div>
                    </div>
                </div>
                <div class="space-y-3 mt-4">
                    <div class="flex items-center justify-between text-sm">
                        <div class="flex items-center gap-2">
                            <span class="size-2 rounded-full bg-[#7b1f1f]"></span>
                            <span class="text-text-main">قص شعر وتصفيف</span>
                        </div>
                        <span class="text-text-muted font-medium">٤٠٪</span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <div class="flex items-center gap-2">
                            <span class="size-2 rounded-full bg-[#a34545]"></span>
                            <span class="text-text-main">عناية بالأظافر</span>
                        </div>
                        <span class="text-text-muted font-medium">٢٥٪</span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <div class="flex items-center gap-2">
                            <span class="size-2 rounded-full bg-[#cbb1b1]"></span>
                            <span class="text-text-main">عناية بالبشرة</span>
                        </div>
                        <span class="text-text-muted font-medium">٢٠٪</span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <div class="flex items-center gap-2">
                            <span class="size-2 rounded-full bg-[#f2e8e8]"></span>
                            <span class="text-text-main">أخرى</span>
                        </div>
                        <span class="text-text-muted font-medium">١٥٪</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 my-4">
            <div class="bg-white rounded-xl p-6 shadow-card border border-border-subtle">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-text-main text-lg font-bold">أداء الموظفات</h3>
                    <button
                        class="text-xs text-primary hover:text-primary-hover font-medium transition-colors bg-primary-bg px-3 py-1 rounded-full">عرض
                        التقرير الكامل</button>
                </div>
                <div class="space-y-4">
                    <div class="flex items-center gap-4 group">
                        <div class="bg-center bg-no-repeat bg-cover rounded-full size-12 shadow-sm border border-border-subtle group-hover:border-primary transition-colors"
                            data-alt="Stylist portrait"
                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCtEzMcl3xLAIcNdzfAHxhJH_7M6v2Md4iVDt7qzOVrWnISy-u01GJIbw71qiY5K30PbqIX6oc0MHNFlo4aFZcIVvS4ASJwRCgj3A23B8LCutwWelbW3qpiNYQqF4h5TD9AsBQTbSZlHm7msAts8xvkztZAZO3Hza7UrzSRAES9oR0Wgf6UiimrDWC7ocnRV_yty_n9Urb6Yi65InhKS6ZQg2S62DCeXL7bjP9o54_mAXpmQQBUce6XArBLJoe4yHbcNemVS7lBvNk");'>
                        </div>
                        <div class="flex-1">
                            <div class="flex justify-between mb-2">
                                <span class="text-text-main text-sm font-bold">سارة أحمد</span>
                                <span class="text-text-muted text-xs font-medium">١٢,٤٠٠ ر.س</span>
                            </div>
                            <div class="w-full bg-primary-bg rounded-full h-2 overflow-hidden">
                                <div class="bg-primary h-2 rounded-full shadow-[0_2px_4px_rgba(123,31,31,0.2)]"
                                    style="width: 85%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center gap-4 group">
                        <div class="bg-center bg-no-repeat bg-cover rounded-full size-12 shadow-sm border border-border-subtle group-hover:border-primary transition-colors"
                            data-alt="Stylist portrait"
                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuB8KYJBauyOOJWJOJT7y5SPUkXJO1-cVdP-PK_kXFXB8odD5khS2D4UwPI1zLt5SEW-5H4YHjyFtU-pNzqSPKUP-UFsR2vR0h6adNA47Rf035zK__tiEzuOlUrEW6iiCDWJ5BqrxbnYJX7ekk0B8SRzPyA51bpAwa29MQEUf2hHslf2ogJtYq54o2dog4zntUrBb6SxSXm1H1sD4sxg4rhsJloBFVcyhE0wYqOMGagkIvY5PjXqsNIm4eoEKIhvi6uXf37DtXSKefU");'>
                        </div>
                        <div class="flex-1">
                            <div class="flex justify-between mb-2">
                                <span class="text-text-main text-sm font-bold">ليلى محمد</span>
                                <span class="text-text-muted text-xs font-medium">٩,٢٥٠ ر.س</span>
                            </div>
                            <div class="w-full bg-primary-bg rounded-full h-2 overflow-hidden">
                                <div class="bg-primary/70 h-2 rounded-full" style="width: 65%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center gap-4 group">
                        <div class="bg-center bg-no-repeat bg-cover rounded-full size-12 shadow-sm border border-border-subtle group-hover:border-primary transition-colors"
                            data-alt="Stylist portrait"
                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCbnFhZ8xMlZzsx-NZxZNF-j7CEBbO7bv8XhIIjYXTIIVlFJ5m4XIdsRfuZL2ljEbfLsZCPuiK6aCXP15V_-LB8eSUEQMlT5ZopDlVWbp0iucxPv-QW5R2L5255kBhE9FsngYt04uUw8g6-HT31DBKpOPXT0i6dqjBzj6fvCkl4is0tmWrKOT8r4gBiXV4ATu35VIfoVnXw-1YSJI_0F0A82B1hX4TURpQHrEMl7zrmglSudninZWHber1XlECHs35ann5A3eprM2M");'>
                        </div>
                        <div class="flex-1">
                            <div class="flex justify-between mb-2">
                                <span class="text-text-main text-sm font-bold">منال يوسف</span>
                                <span class="text-text-muted text-xs font-medium">٨,١٠٠ ر.س</span>
                            </div>
                            <div class="w-full bg-primary-bg rounded-full h-2 overflow-hidden">
                                <div class="bg-primary/50 h-2 rounded-full" style="width: 55%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center gap-4 group">
                        <div class="bg-center bg-no-repeat bg-cover rounded-full size-12 shadow-sm border border-border-subtle group-hover:border-primary transition-colors"
                            data-alt="Stylist portrait"
                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuB9RU_t3rW1e4nX-sgAyeCOQF5jPYr_mtSrDcH55yhKRIfsmq9XZvZvcBgqICwknq2BO7oZuAemEElLJhvs9Zf8z0QL05EiBhimBoPnreMM9JpQeZiJBj_CKDBmmWkXpT9lKVohTf95y2j2kuR5PbsY3l0N6wXx3aYKRx-a494ytQtgjR0wWA5lJ-d2jC6sT53nzR3aQNGIq5GZaEUgr4gs3alcIfOswZ7aADPTHBJjtpgGiBVyA7SHOf7XLsCut_kISWBF5BzOrR8");'>
                        </div>
                        <div class="flex-1">
                            <div class="flex justify-between mb-2">
                                <span class="text-text-main text-sm font-bold">أمل حسين</span>
                                <span class="text-text-muted text-xs font-medium">٦,٤٠٠ ر.س</span>
                            </div>
                            <div class="w-full bg-primary-bg rounded-full h-2 overflow-hidden">
                                <div class="bg-primary/30 h-2 rounded-full" style="width: 40%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-card border border-border-subtle overflow-hidden flex flex-col">
                <div class="p-6 border-b border-border-subtle flex items-center justify-between bg-surface">
                    <h3 class="text-text-main text-lg font-bold">آخر العمليات</h3>
                    <button
                        class="text-xs text-primary hover:text-primary-hover font-medium transition-colors bg-primary-bg px-3 py-1 rounded-full">عرض
                        الكل</button>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm text-right">
                        <thead class="text-xs text-text-muted bg-background uppercase font-medium">
                            <tr>
                                <th class="px-6 py-4" scope="col">رقم الحجز</th>
                                <th class="px-6 py-4" scope="col">العميلة</th>
                                <th class="px-6 py-4" scope="col">الخدمة</th>
                                <th class="px-6 py-4" scope="col">المبلغ</th>
                                <th class="px-6 py-4" scope="col">الحالة</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-border-subtle">
                            <tr class="hover:bg-primary-bg/30 transition-colors">
                                <td class="px-6 py-4 font-bold text-text-main">#4221</td>
                                <td class="px-6 py-4 text-text-muted">عبير خالد</td>
                                <td class="px-6 py-4 text-text-main">قص وصبغ</td>
                                <td class="px-6 py-4 text-text-main font-bold">٤٥٠ ر.س</td>
                                <td class="px-6 py-4">
                                    <span
                                        class="bg-emerald-50 text-emerald-600 text-xs font-bold px-3 py-1 rounded-full border border-emerald-100 shadow-sm">مكتمل</span>
                                </td>
                            </tr>
                            <tr class="hover:bg-primary-bg/30 transition-colors">
                                <td class="px-6 py-4 font-bold text-text-main">#4222</td>
                                <td class="px-6 py-4 text-text-muted">هند العمري</td>
                                <td class="px-6 py-4 text-text-main">بديكير</td>
                                <td class="px-6 py-4 text-text-main font-bold">١٢٠ ر.س</td>
                                <td class="px-6 py-4">
                                    <span
                                        class="bg-amber-50 text-amber-600 text-xs font-bold px-3 py-1 rounded-full border border-amber-100 shadow-sm">قيد
                                        التنفيذ</span>
                                </td>
                            </tr>
                            <tr class="hover:bg-primary-bg/30 transition-colors">
                                <td class="px-6 py-4 font-bold text-text-main">#4223</td>
                                <td class="px-6 py-4 text-text-muted">ريم السالم</td>
                                <td class="px-6 py-4 text-text-main">علاج شعر</td>
                                <td class="px-6 py-4 text-text-main font-bold">٣٠٠ ر.س</td>
                                <td class="px-6 py-4">
                                    <span
                                        class="bg-blue-50 text-blue-600 text-xs font-bold px-3 py-1 rounded-full border border-blue-100 shadow-sm">مجدول</span>
                                </td>
                            </tr>
                            <tr class="hover:bg-primary-bg/30 transition-colors">
                                <td class="px-6 py-4 font-bold text-text-main">#4224</td>
                                <td class="px-6 py-4 text-text-muted">مها الفهد</td>
                                <td class="px-6 py-4 text-text-main">مكياج سهرة</td>
                                <td class="px-6 py-4 text-text-main font-bold">٥٥٠ ر.س</td>
                                <td class="px-6 py-4">
                                    <span
                                        class="bg-rose-50 text-rose-600 text-xs font-bold px-3 py-1 rounded-full border border-rose-100 shadow-sm">ملغى</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

@endsection