@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">إدارة المبيعات، الفواتير، النقاط، وقيمة
                        الخصومات.</p>
                </div>
                <div class="flex gap-3">
                    <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]">add</span>
                        إضافة فاتورة جديدة
                    </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">
        <div class="grid grid-cols-1 my-5 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div
                class="bg-white rounded-2xl p-5 border border-border-color flex flex-col gap-1 shadow-sm hover:shadow-md transition-shadow">
                <div class="flex justify-between items-start mb-2">
                    <div class="p-2 rounded-lg bg-surface-alt text-primary">
                        <span class="material-symbols-outlined">attach_money</span>
                    </div>
                    <span class="text-green-600 text-xs font-bold bg-green-50 px-2 py-1 rounded-full">+12%</span>
                </div>
                <p class="text-text-secondary text-sm font-medium">إجمالي المبيعات</p>
                <p class="text-text-main text-2xl font-bold">12,450 ريال</p>
            </div>
            <div
                class="bg-white rounded-2xl p-5 border border-border-color flex flex-col gap-1 shadow-sm hover:shadow-md transition-shadow">
                <div class="flex justify-between items-start mb-2">
                    <div class="p-2 rounded-lg bg-surface-alt text-green-600">
                        <span class="material-symbols-outlined">check_circle</span>
                    </div>
                    <span class="text-green-600 text-xs font-bold bg-green-50 px-2 py-1 rounded-full">+5%</span>
                </div>
                <p class="text-text-secondary text-sm font-medium">الفواتير المدفوعة</p>
                <p class="text-text-main text-2xl font-bold">45</p>
            </div>
            <div
                class="bg-white rounded-2xl p-5 border border-border-color flex flex-col gap-1 shadow-sm hover:shadow-md transition-shadow">
                <div class="flex justify-between items-start mb-2">
                    <div class="p-2 rounded-lg bg-surface-alt text-orange-500">
                        <span class="material-symbols-outlined">pending</span>
                    </div>
                    <span class="text-red-500 text-xs font-bold bg-red-50 px-2 py-1 rounded-full">-2%</span>
                </div>
                <p class="text-text-secondary text-sm font-medium">الفواتير المعلقة</p>
                <p class="text-text-main text-2xl font-bold">3</p>
            </div>
            <div
                class="bg-white rounded-2xl p-5 border border-border-color flex flex-col gap-1 shadow-sm hover:shadow-md transition-shadow">
                <div class="flex justify-between items-start mb-2">
                    <div class="p-2 rounded-lg bg-surface-alt text-purple-600">
                        <span class="material-symbols-outlined">loyalty</span>
                    </div>
                    <span class="text-green-600 text-xs font-bold bg-green-50 px-2 py-1 rounded-full">+8%</span>
                </div>
                <p class="text-text-secondary text-sm font-medium">قيمة الخصومات </p>
                <p class="text-text-main text-2xl font-bold">850 ريال</p>
            </div>
        </div>
        <div class="flex flex-col lg:flex-row gap-6 h-full min-h-[600px]">
            <div class="flex-1 flex flex-col gap-4">
                <div class="flex flex-wrap gap-3">
                    <button
                        class="flex items-center gap-2 bg-white border border-border-color text-text-main px-4 py-2 rounded-lg hover:border-primary hover:text-primary transition-colors shadow-sm">
                        <span class="text-sm font-medium">التاريخ: هذا الشهر</span>
                        <span class="material-symbols-outlined text-sm text-text-secondary">expand_more</span>
                    </button>
                    <button
                        class="flex items-center gap-2 bg-white border border-border-color text-text-main px-4 py-2 rounded-lg hover:border-primary hover:text-primary transition-colors shadow-sm">
                        <span class="text-sm font-medium">الحالة: الكل</span>
                        <span class="material-symbols-outlined text-sm text-text-secondary">expand_more</span>
                    </button>
                    <button
                        class="flex items-center gap-2 bg-white border border-border-color text-text-main px-4 py-2 rounded-lg hover:border-primary hover:text-primary transition-colors shadow-sm">
                        <span class="text-sm font-medium">طريقة الدفع: الكل</span>
                        <span class="material-symbols-outlined text-sm text-text-secondary">expand_more</span>
                    </button>
                </div>
                <div class="bg-white border border-border-color rounded-2xl overflow-hidden flex-1 shadow-sm">
                    <div class="overflow-x-auto">
                        <table class="w-full text-right">
                            <thead class="bg-surface-alt border-b border-border-color">
                                <tr>
                                    <th class="px-6 py-4 text-xs font-bold text-text-secondary uppercase tracking-wider">
                                        رقم الفاتورة</th>
                                    <th class="px-6 py-4 text-xs font-bold text-text-secondary uppercase tracking-wider">
                                        العميل</th>
                                    <th class="px-6 py-4 text-xs font-bold text-text-secondary uppercase tracking-wider">
                                        التاريخ</th>
                                    <th class="px-6 py-4 text-xs font-bold text-text-secondary uppercase tracking-wider">
                                        المبلغ</th>
                                    <th class="px-6 py-4 text-xs font-bold text-text-secondary uppercase tracking-wider">
                                        الحالة</th>
                                    <th class="px-6 py-4 text-xs font-bold text-text-secondary uppercase tracking-wider">
                                        الإجراء</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-border-color">
                                <tr class="bg-primary/5 cursor-pointer hover:bg-primary/10 transition-colors">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-primary">#INV-1024
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center gap-3">
                                            <div class="size-8 rounded-full bg-cover bg-center shadow-sm"
                                                data-alt="Client avatar"
                                                style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuA4rMylUtVnHaVU1jSfQbx0JVqW4MlTa-Y5w5HBQWO3HoW1ZVQg-E2UrxopAYN_s85qE6ac_OnT9RRMXPPNVehOm5_flfZYHawbIS5bSsU95O7y_5TEmKYCq-3HXIWQ7lCpFd4VWpg-McWVCg1lehblnTz0aFt6hsiefQO64J5gj8-z864R_heA59y4VpNRJuCaHEuqbqBWUjh40nHaeorafgLYeszx5UBpn2M31AIvDYYH-KlcUG1n39h5g8UyXMkWedYOxBZomUU");'>
                                            </div>
                                            <span class="text-sm font-medium text-text-main">سارة أحمد</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">12 أكتوبر، 10:30
                                        ص</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-text-main">450 ريال
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span
                                            class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2.5 py-1 text-xs font-medium text-green-700 border border-green-100">
                                            <span class="size-1.5 rounded-full bg-green-500"></span>
                                            مدفوع
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <button
                                            class="text-primary hover:text-primary-hover font-medium transition-colors">عرض
                                            التفاصيل</button>
                                    </td>
                                </tr>
                                <tr class="bg-surface hover:bg-surface-alt cursor-pointer transition-colors">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-text-secondary">
                                        #INV-1023</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center gap-3">
                                            <div class="size-8 rounded-full bg-cover bg-center shadow-sm"
                                                data-alt="Client avatar"
                                                style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCXFKUUWBgp9dwUTmb372VDTcg99dbh_J7Sevdjlk8SefbbPRe4RabwnaAKG_8xhL7GcvHPWiS5D7B6ION57VIVABvp5uO4au3XBET3UxQOYnePkV-D_3gK6vlWTVNmPsVIcmGdCEORk_dnh1DdnE4s063GE425KG7xIpKO4h5DBRwWvHzTLMwX0ww3fOFyUiubdzpEf6Wjs-6N1x0j5DXajnm4FrO6kA2WjsjdyetRiSRs7qVuYdYXGrmrRfoLciLqwND2pdunX-o");'>
                                            </div>
                                            <span class="text-sm font-medium text-text-main">نورة السعود</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">12 أكتوبر، 09:15
                                        ص</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-text-main">120 ريال
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span
                                            class="inline-flex items-center gap-1 rounded-full bg-yellow-50 px-2.5 py-1 text-xs font-medium text-yellow-700 border border-yellow-100">
                                            <span class="size-1.5 rounded-full bg-yellow-500"></span>
                                            معلق
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <button class="text-text-secondary hover:text-primary transition-colors">عرض
                                            التفاصيل</button>
                                    </td>
                                </tr>
                                <tr class="bg-surface hover:bg-surface-alt cursor-pointer transition-colors">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-text-secondary">
                                        #INV-1022</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center gap-3">
                                            <div class="size-8 rounded-full bg-cover bg-center shadow-sm"
                                                data-alt="Client avatar"
                                                style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBZlMaIEj9vZq3T8QGIqIWEgFyNG1liNIeBStU2u-waOR6ZX-0PejDK3lGXUU7Kf89ieIJMrXw9n7RGWFzoaWaCLHCHcxz4YcwBPdT5ujmpdZxpw-F9lPG25JyX4Bo7u90sLCWICZ8cKUBEzXykHndmQbX_aHvxqv2TZ46LVR3kq_fxFUBKbfy3EMjyM2vJwz8yB1Z2420fYSlS7n0P06p7Ps19UQi1pUpuYgSS-NGF5lQ4juandG-gU8x23A2vKjSv4QXpYkpiSUQ");'>
                                            </div>
                                            <span class="text-sm font-medium text-text-main">ليلى محمد</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">11 أكتوبر، 04:45
                                        م</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-text-main">300 ريال
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span
                                            class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2.5 py-1 text-xs font-medium text-green-700 border border-green-100">
                                            <span class="size-1.5 rounded-full bg-green-500"></span>
                                            مدفوع
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <button class="text-text-secondary hover:text-primary transition-colors">عرض
                                            التفاصيل</button>
                                    </td>
                                </tr>
                                <tr class="bg-surface hover:bg-surface-alt cursor-pointer transition-colors">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-text-secondary">
                                        #INV-1021</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center gap-3">
                                            <div class="size-8 rounded-full bg-cover bg-center shadow-sm"
                                                data-alt="Client avatar"
                                                style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCteNDo7sNfysVagZ_VAwxrJJnVr1pbeANiQ1wkehArK9yOjkhNG2kazQwcPE_kIOphqOtcwR7i4MRsx5X9rb2SFzhJr2PockCEMnXZYO8Bn3wbDYJ9VoRnOyJtaS0HQcZisQh6VYqB7n4wR6rHzorfJbmTU9JveOqPB-aV_Md4GRZ-BG3Qi1gBi803FAfIgWohKu9Kb5HkemgDk0_OqrEXIOQbnQkrEkC2F9e8PdHQ0DrtppW3GNsrYnNRNrxifPAs-oF-QMdEvmc");'>
                                            </div>
                                            <span class="text-sm font-medium text-text-main">مها الحربي</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">11 أكتوبر، 02:00
                                        م</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-text-main">850 ريال
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span
                                            class="inline-flex items-center gap-1 rounded-full bg-orange-50 px-2.5 py-1 text-xs font-medium text-orange-700 border border-orange-100">
                                            <span class="size-1.5 rounded-full bg-orange-500"></span>
                                            جزئي
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <button class="text-text-secondary hover:text-primary transition-colors">عرض
                                            التفاصيل</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="p-4 border-t border-border-color flex items-center justify-between bg-surface">
                        <span class="text-xs text-text-secondary">عرض 4 من أصل 128 فاتورة</span>
                        <div class="flex gap-2">
                            <button
                                class="p-1 rounded bg-surface-alt text-text-secondary hover:text-text-main hover:bg-gray-200 border border-border-color disabled:opacity-50 transition-colors">
                                <span class="material-symbols-outlined text-sm">chevron_right</span>
                            </button>
                            <button
                                class="p-1 rounded bg-surface-alt text-text-secondary hover:text-text-main hover:bg-gray-200 border border-border-color transition-colors">
                                <span class="material-symbols-outlined text-sm">chevron_left</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-[400px] xl:w-[450px] shrink-0 flex flex-col gap-4">
                <div
                    class="bg-white border border-border-color rounded-2xl p-6 flex flex-col h-full shadow-lg relative overflow-hidden">
                    <div class="flex justify-between items-start mb-6 pb-6 border-b border-border-color border-dashed">
                        <div>
                            <h3 class="text-text-main text-xl font-bold mb-1">فاتورة #INV-1024</h3>
                            <p class="text-text-secondary text-sm">12 أكتوبر 2023 - 10:30 ص</p>
                        </div>
                        <div
                            class="bg-green-50 text-green-700 px-3 py-1 rounded-lg text-sm font-bold border border-green-200">
                            مدفوع
                        </div>
                    </div>
                    <div class="flex items-center gap-4 mb-6">
                        <div class="size-12 rounded-full bg-cover bg-center border border-border-color shadow-sm"
                            data-alt="Client avatar detail view"
                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBKXxMYhGCpuD_C9cxVRJ72ggcQ_Egppp3XUAqQZZcpwI7RkkiXJtdNPorjQ2krkVBTmFQNl2Y980IsI38DU6jMibFbPQySuV-K7SzOoFBlAOTj-0m7hwJiWVLddPV7CpMbcU9v7Ht0J5y-BYcRTlIZMvkET2Kh5WretVfs4lAGU45VA4DPT7E4plLgYUsJqmdYll0GgGaxlhPzLWG-gV0K5QkbBymQbwlmpxApTa-wKbtkTNYDNW0RIF7YE2nnANITFK5p73BvBV4");'>
                        </div>
                        <div class="flex-1">
                            <p class="text-text-main font-bold">سارة أحمد</p>
                            <p class="text-text-secondary text-sm" dir="ltr">+966 55 123 4567</p>
                        </div>
                        <div class="flex flex-col items-end">
                            <p class="text-[10px] text-text-secondary uppercase">نقاط الولاء</p>
                            <p class="text-primary font-bold">120 pt</p>
                        </div>
                    </div>
                    <div class="flex-1 overflow-y-auto mb-6 pr-2">
                        <p class="text-xs font-bold text-text-secondary uppercase mb-3">الخدمات</p>
                        <div class="flex flex-col gap-3">
                            <div
                                class="flex justify-between items-center p-3 rounded-lg bg-surface-alt border border-border-color/60">
                                <div class="flex flex-col">
                                    <span class="text-text-main text-sm font-medium">صبغة شعر وتلوين</span>
                                    <span class="text-text-secondary text-xs">ساعتين • أخصائية نورة</span>
                                </div>
                                <span class="text-text-main font-bold text-sm">350 ريال</span>
                            </div>
                            <div
                                class="flex justify-between items-center p-3 rounded-lg bg-surface-alt border border-border-color/60">
                                <div class="flex flex-col">
                                    <span class="text-text-main text-sm font-medium">استشوار (مجاني)</span>
                                    <span class="text-text-secondary text-xs">30 دقيقة • أخصائية نورة</span>
                                </div>
                                <span class="text-text-main font-bold text-sm">0 ريال</span>
                            </div>
                            <div
                                class="flex justify-between items-center p-3 rounded-lg bg-surface-alt border border-border-color/60">
                                <div class="flex flex-col">
                                    <span class="text-text-main text-sm font-medium">منتج عناية بالشعر</span>
                                    <span class="text-text-secondary text-xs">منتجات</span>
                                </div>
                                <span class="text-text-main font-bold text-sm">100 ريال</span>
                            </div>
                        </div>
                    </div>
                    <div class="bg-surface-alt -mx-6 -mb-6 p-6 border-t border-border-color">
                        <div class="flex flex-col gap-2 mb-4">
                            <div class="flex justify-between text-sm">
                                <span class="text-text-secondary">المجموع الفرعي</span>
                                <span class="text-text-main font-medium">450 ريال</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-text-secondary">الضريبة (15%)</span>
                                <span class="text-text-main font-medium">67.5 ريال</span>
                            </div>
                            <div class="border-t border-border-color my-2"></div>
                            <div class="flex justify-between text-lg font-bold">
                                <span class="text-text-main">الإجمالي</span>
                                <span class="text-primary">517.5 ريال</span>
                            </div>
                        </div>
                        <div class="flex gap-2 mb-6">
                            <span
                                class="px-2 py-1 rounded bg-white text-xs text-text-secondary border border-border-color shadow-sm">كاش:
                                200</span>
                            <span
                                class="px-2 py-1 rounded bg-white text-xs text-text-secondary border border-border-color shadow-sm">شبكة:
                                317.5</span>
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <button
                                class="flex items-center justify-center gap-2 bg-white hover:bg-gray-50 border border-border-color text-text-main py-2.5 rounded-lg text-sm font-medium transition-colors shadow-sm">
                                <span class="material-symbols-outlined text-sm text-text-secondary">print</span>
                                طباعة
                            </button>
                            <button
                                class="flex items-center justify-center gap-2 bg-[#25D366] hover:bg-[#1fb858] text-white py-2.5 rounded-lg text-sm font-medium transition-colors shadow-sm shadow-green-200">
                                <span class="material-symbols-outlined text-sm">send</span>
                                واتساب
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection