@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>
                <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">إدارة تفضيلات النظام، سياسات الحجز،
                        صلاحيات الموظفين، وسجلات النشاط.</p>
                </div>
                <div class="flex gap-3">
                    <button
                        class="px-5 py-2.5 rounded-lg border border-border-color bg-white text-text-main font-bold text-sm hover:bg-gray-50 transition-colors shadow-sm">إلغاء</button>
                    <button
                        class="px-5 py-2.5 rounded-lg bg-primary text-white font-bold text-sm hover:bg-primary/90 transition-colors shadow-md flex items-center gap-2">
                        <span class="material-symbols-outlined text-[20px]">save</span>
                        حفظ التغييرات
                    </button>
                </div>
            </div>
        </div>
    </header>
    <!-- end page header -->

    <!-- Page Scrollable Content -->
    <div class="flex-1 overflow-y-auto bg-background-light p-6 md:p-10 lg:px-16">
        <div class="">

            <!-- Tabs Navigation -->
            <div class="border-b border-border-color sticky top-0 bg-background-light z-10 pt-2">
                <div class="flex gap-8 overflow-x-auto pb-px hide-scrollbar">
                    <button
                        class="flex items-center gap-2 pb-3 border-b-[3px] border-primary text-primary whitespace-nowrap px-1 group">
                        <span class="material-symbols-outlined fill group-hover:scale-110 transition-transform">tune</span>
                        <span class="text-sm font-bold">عام</span>
                    </button>
                    <button
                        class="flex items-center gap-2 pb-3 border-b-[3px] border-transparent text-text-secondary hover:text-text-main hover:border-border-color transition-all whitespace-nowrap px-1 group">
                        <span class="material-symbols-outlined group-hover:scale-110 transition-transform">policy</span>
                        <span class="text-sm font-bold">سياسات الحجز</span>
                    </button>
                    <button
                        class="flex items-center gap-2 pb-3 border-b-[3px] border-transparent text-text-secondary hover:text-text-main hover:border-border-color transition-all whitespace-nowrap px-1 group">
                        <span
                            class="material-symbols-outlined group-hover:scale-110 transition-transform">credit_card</span>
                        <span class="text-sm font-bold">بوابات الدفع</span>
                    </button>
                    <button
                        class="flex items-center gap-2 pb-3 border-b-[3px] border-transparent text-text-secondary hover:text-text-main hover:border-border-color transition-all whitespace-nowrap px-1 group">
                        <span
                            class="material-symbols-outlined group-hover:scale-110 transition-transform">admin_panel_settings</span>
                        <span class="text-sm font-bold">الأدوار والصلاحيات</span>
                    </button>

                </div>
            </div>
            <!-- Content Sections -->
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
                <!-- General Settings Card -->
                <div class="lg:col-span-7 flex flex-col gap-6">
                    <div class="bg-card-bg rounded-2xl border border-border-color shadow-sm p-6">
                        <h2 class="text-text-main text-xl font-bold mb-6 flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary">language</span>
                            إعدادات عامة
                        </h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <label class="flex flex-col gap-2">
                                <span class="text-text-main text-sm font-semibold">لغة النظام</span>
                                <div class="relative">
                                    <select
                                        class="w-full appearance-none rounded-xl border border-border-color bg-background-light px-4 py-3 text-text-main focus:border-primary focus:ring-0 text-sm font-medium">
                                        <option selected="" value="ar">العربية</option>
                                        <option value="en">English</option>
                                    </select>
                                    <div
                                        class="pointer-events-none absolute inset-y-0 left-0 flex items-center px-4 text-text-secondary">
                                        <span class="material-symbols-outlined">expand_more</span>
                                    </div>
                                </div>
                            </label>
                            <label class="flex flex-col gap-2">
                                <span class="text-text-main text-sm font-semibold">المنطقة الزمنية</span>
                                <div class="relative">
                                    <select
                                        class="w-full appearance-none rounded-xl border border-border-color bg-background-light px-4 py-3 text-text-main focus:border-primary focus:ring-0 text-sm font-medium">
                                        <option selected="" value="riyadh">توقيت الرياض (GMT+3)</option>
                                        <option value="cairo">توقيت القاهرة (GMT+2)</option>
                                        <option value="dubai">توقيت دبي (GMT+4)</option>
                                    </select>
                                    <div
                                        class="pointer-events-none absolute inset-y-0 left-0 flex items-center px-4 text-text-secondary">
                                        <span class="material-symbols-outlined">expand_more</span>
                                    </div>
                                </div>
                            </label>
                            <!-- <label class="flex flex-col gap-2 md:col-span-2">
                                    <span class="text-text-main text-sm font-semibold">اسم الصالون</span>
                                    <input
                                        class="w-full rounded-xl border border-border-color bg-background-light px-4 py-3 text-text-main focus:border-primary focus:ring-0 text-sm font-medium placeholder:text-text-secondary/50"
                                        type="text" value="صالون سوان للجمال" />
                                </label> -->
                        </div>
                    </div>
                    <!-- Booking Policies -->
                    <div class="bg-card-bg rounded-2xl border border-border-color shadow-sm p-6">
                        <h2 class="text-text-main text-xl font-bold mb-6 flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary">gavel</span>
                            سياسات الحجز
                        </h2>
                        <div class="space-y-4">
                            <div
                                class="flex items-center justify-between p-4 rounded-xl border border-border-color bg-background-light/50">
                                <div>
                                    <p class="text-text-main font-bold text-sm">الإلغاء المجاني</p>
                                    <p class="text-text-secondary text-xs mt-1">السماح للعملاء بإلغاء الموعد دون رسوم قبل
                                        فترة محددة.</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input checked="" class="sr-only peer" type="checkbox" />
                                    <div
                                        class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary">
                                    </div>
                                </label>
                            </div>
                            <div class="grid grid-cols-2 gap-4">
                                <label class="flex flex-col gap-2">
                                    <span class="text-text-main text-sm font-semibold">فترة الإلغاء (ساعات)</span>
                                    <input
                                        class="w-full rounded-xl border border-border-color bg-background-light px-4 py-3 text-text-main focus:border-primary focus:ring-0 text-sm font-medium"
                                        type="number" value="24" />
                                </label>
                                <label class="flex flex-col gap-2">
                                    <span class="text-text-main text-sm font-semibold">قيمة العربون (%)</span>
                                    <input
                                        class="w-full rounded-xl border border-border-color bg-background-light px-4 py-3 text-text-main focus:border-primary focus:ring-0 text-sm font-medium"
                                        type="number" value="15" />
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Side Column: Hours & Payments -->
                <div class="lg:col-span-5 flex flex-col gap-6">
                    <!-- Business Hours -->
                    <div class="bg-card-bg rounded-2xl border border-border-color shadow-sm p-6">
                        <div class="flex items-center justify-between mb-6">
                            <h2 class="text-text-main text-xl font-bold flex items-center gap-2">
                                <span class="material-symbols-outlined text-primary">schedule</span>
                                ساعات العمل
                            </h2>
                            <button class="text-primary text-sm font-bold hover:underline">تعديل</button>
                        </div>
                        <div class="flex flex-col gap-3">
                            <div
                                class="flex justify-between items-center py-2 border-b border-dashed border-border-color last:border-0">
                                <span class="text-text-main text-sm font-medium">الأحد</span>
                                <span class="text-text-secondary text-sm dir-ltr">09:00 AM - 09:00 PM</span>
                            </div>
                            <div
                                class="flex justify-between items-center py-2 border-b border-dashed border-border-color last:border-0">
                                <span class="text-text-main text-sm font-medium">الإثنين</span>
                                <span class="text-text-secondary text-sm dir-ltr">09:00 AM - 09:00 PM</span>
                            </div>
                            <div
                                class="flex justify-between items-center py-2 border-b border-dashed border-border-color last:border-0">
                                <span class="text-text-main text-sm font-medium">الثلاثاء</span>
                                <span class="text-text-secondary text-sm dir-ltr">09:00 AM - 09:00 PM</span>
                            </div>
                            <div
                                class="flex justify-between items-center py-2 border-b border-dashed border-border-color last:border-0">
                                <span class="text-text-main text-sm font-medium">الأربعاء</span>
                                <span class="text-text-secondary text-sm dir-ltr">09:00 AM - 09:00 PM</span>
                            </div>
                            <div
                                class="flex justify-between items-center py-2 border-b border-dashed border-border-color last:border-0">
                                <span class="text-text-main text-sm font-medium">الخميس</span>
                                <span class="text-text-secondary text-sm dir-ltr">09:00 AM - 11:00 PM</span>
                            </div>
                            <div
                                class="flex justify-between items-center py-2 border-b border-dashed border-border-color last:border-0 opacity-50 bg-gray-50 -mx-6 px-6">
                                <span class="text-text-main text-sm font-medium">الجمعة</span>
                                <span class="text-text-secondary text-sm">مغلق</span>
                            </div>
                        </div>
                    </div>
                    <!-- Payment Gateways -->
                    <div class="bg-card-bg rounded-2xl border border-border-color shadow-sm p-6">
                        <h2 class="text-text-main text-xl font-bold mb-6 flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary">credit_card</span>
                            بوابات الدفع
                        </h2>
                        <div class="flex flex-col gap-4">
                            <!-- Stripe -->
                            <div
                                class="flex items-center justify-between p-3 rounded-xl border border-border-color hover:border-primary/30 transition-colors">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-10 h-10 rounded-lg bg-background-light flex items-center justify-center text-text-main font-bold text-xs border border-border-color">
                                        VISA</div>
                                    <div class="flex flex-col">
                                        <span class="text-sm font-bold text-text-main">البطاقات الائتمانية</span>
                                        <span class="text-xs text-green-600 font-medium">متصل</span>
                                    </div>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input checked="" class="sr-only peer" type="checkbox" />
                                    <div
                                        class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary">
                                    </div>
                                </label>
                            </div>
                            <!-- Mada -->
                            <div
                                class="flex items-center justify-between p-3 rounded-xl border border-border-color hover:border-primary/30 transition-colors">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-10 h-10 rounded-lg bg-background-light flex items-center justify-center text-text-main font-bold text-xs border border-border-color">
                                        mada</div>
                                    <div class="flex flex-col">
                                        <span class="text-sm font-bold text-text-main">مدى</span>
                                        <span class="text-xs text-text-secondary font-medium">غير مفعل</span>
                                    </div>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input class="sr-only peer" type="checkbox" />
                                    <div
                                        class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary">
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Roles & Permissions Section (Full Width) -->
                <div class="lg:col-span-12">
                    <div class="bg-card-bg rounded-2xl border border-border-color shadow-sm p-6 overflow-hidden">
                        <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
                            <h2 class="text-text-main text-xl font-bold flex items-center gap-2">
                                <span class="material-symbols-outlined text-primary">shield_person</span>
                                صلاحيات الأدوار
                            </h2>
                            <div
                                class="flex items-center gap-3 bg-background-light p-1 rounded-lg border border-border-color w-fit">
                                <button
                                    class="px-4 py-1.5 rounded-md bg-white shadow-sm text-primary text-sm font-bold">مدير
                                    النظام</button>
                                <button
                                    class="px-4 py-1.5 rounded-md text-text-secondary hover:text-text-main text-sm font-medium">موظف
                                    استقبال</button>
                                <button
                                    class="px-4 py-1.5 rounded-md text-text-secondary hover:text-text-main text-sm font-medium">أخصائية
                                    تجميل</button>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm text-right">
                                <thead class="bg-background-light text-text-secondary uppercase">
                                    <tr>
                                        <th class="px-6 py-4 rounded-r-xl font-bold" scope="col">الوحدة</th>
                                        <th class="px-6 py-4 font-bold text-center" scope="col">عرض</th>
                                        <th class="px-6 py-4 font-bold text-center" scope="col">إضافة</th>
                                        <th class="px-6 py-4 font-bold text-center" scope="col">تعديل</th>
                                        <th class="px-6 py-4 rounded-l-xl font-bold text-center" scope="col">حذف</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-border-color">
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-6 py-4 font-bold text-text-main flex items-center gap-2">
                                            <span
                                                class="material-symbols-outlined text-lg text-text-secondary">calendar_month</span>
                                            إدارة المواعيد
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <span class="material-symbols-outlined text-primary">check_circle</span>
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <span class="material-symbols-outlined text-primary">check_circle</span>
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <span class="material-symbols-outlined text-primary">check_circle</span>
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <span class="material-symbols-outlined text-gray-300">cancel</span>
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-6 py-4 font-bold text-text-main flex items-center gap-2">
                                            <span class="material-symbols-outlined text-lg text-text-secondary">group</span>
                                            العملاء
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <span class="material-symbols-outlined text-primary">check_circle</span>
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <span class="material-symbols-outlined text-primary">check_circle</span>
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <span class="material-symbols-outlined text-primary">check_circle</span>
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <span class="material-symbols-outlined text-primary">check_circle</span>
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-6 py-4 font-bold text-text-main flex items-center gap-2">
                                            <span
                                                class="material-symbols-outlined text-lg text-text-secondary">payments</span>
                                            التقارير المالية
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <span class="material-symbols-outlined text-primary">check_circle</span>
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <span class="material-symbols-outlined text-gray-300">cancel</span>
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <span class="material-symbols-outlined text-gray-300">cancel</span>
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <span class="material-symbols-outlined text-gray-300">cancel</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection