@extends('layouts.app')

@section('title', 'المالية')

@section('page-title', 'إدارة المالية')

@section('breadcrumb')
    <li class="flex items-center">
        <span>المالية</span>
    </li>
@endsection

@section('content')
    <!-- الإحصائيات المالية -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        <!-- الإيرادات -->
        <div class="dashboard-card-secondary">
            <div class="flex justify-between items-start">
                <div>
                    <h3 class="dashboard-label">إجمالي الإيرادات</h3>
                    <p class="dashboard-stat">42.5 مليون ريال</p>
                </div>
                <div class="bg-secondary-100 p-3 rounded-full">
                    <i class="fas fa-money-bill-wave text-secondary-600 text-l"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <span class="text-success-500 flex items-center">
                    <i class="fas fa-arrow-up ml-1"></i>
                    12%
                </span>
                <span class="text-neutral-500 mr-2">مقارنة بالعام الماضي</span>
            </div>
        </div>
        
        <!-- المصروفات -->
        <div class="dashboard-card-danger">
            <div class="flex justify-between items-start">
                <div>
                    <h3 class="dashboard-label">إجمالي المصروفات</h3>
                    <p class="dashboard-stat">36.8 مليون ريال</p>
                </div>
                <div class="bg-danger-100 p-3 rounded-full">
                    <i class="fas fa-chart-pie text-danger-600 text-l"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <span class="text-danger-500 flex items-center">
                    <i class="fas fa-arrow-up ml-1"></i>
                    8%
                </span>
                <span class="text-neutral-500 mr-2">مقارنة بالعام الماضي</span>
            </div>
        </div>
        
        <!-- صافي الربح -->
        <div class="dashboard-card-success">
            <div class="flex justify-between items-start">
                <div>
                    <h3 class="dashboard-label">صافي الربح</h3>
                    <p class="dashboard-stat">5.7 مليون ريال</p>
                </div>
                <div class="bg-success-100 p-3 rounded-full">
                    <i class="fas fa-chart-line text-success-600 text-l"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <span class="text-success-500 flex items-center">
                    <i class="fas fa-arrow-up ml-1"></i>
                    15%
                </span>
                <span class="text-neutral-500 mr-2">مقارنة بالعام الماضي</span>
            </div>
        </div>
        
        <!-- المستحقات -->
        <div class="dashboard-card-primary">
            <div class="flex justify-between items-start">
                <div>
                    <h3 class="dashboard-label">المستحقات</h3>
                    <p class="dashboard-stat">8.2 مليون ريال</p>
                </div>
                <div class="bg-primary-100 p-3 rounded-full">
                    <i class="fas fa-file-invoice-dollar text-primary-600 text-l"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <span class="text-danger-500 flex items-center">
                    <i class="fas fa-arrow-up ml-1"></i>
                    5%
                </span>
                <span class="text-neutral-500 mr-2">مقارنة بالعام الماضي</span>
            </div>
        </div>
    </div>
    
    <!-- تبويبات المالية -->
    <div class="mb-6">
        <div class="border-b border-neutral-200">
            <nav class="flex -mb-p">
                <a href="#" class="py-4 p-6 border-b-2 border-primary text-primary-800 font-medium">نظرة عامة</a>
                <a href="#" class="py-4 p-6 border-b-2 border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300">الإيرادات</a>
                <a href="#" class="py-4 p-6 border-b-2 border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300">المصروفات</a>
                <a href="#" class="py-4 p-6 border-b-2 border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300">المستخلصات</a>
                <a href="#" class="py-4 p-6 border-b-2 border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300">الفواتير</a>
                <a href="#" class="py-4 p-6 border-b-2 border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300">التقارير</a>
                <a href="#" class="py-4 p-6 border-b-2 border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300">الزكاة والضرائب</a>
            </nav>
        </div>
    </div>
    
    <!-- الرسومات البيانية والمعلومات -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        <!-- الرسم البياني للإيرادات والمصروفات -->
        <div class="lg:col-span-2">
            <div class="card">
                <div class="card-header flex justify-between items-center">
                    <h2>الإيرادات والمصروفات</h2>
                    <div>
                        <select class="form-select text-sm py-1">
                            <option>ربع سنوي</option>
                            <option>نصف سنوي</option>
                            <option selected>سنوي</option>
                        </select>
                    </div>
                </div>
                <div class="chart-container h-80">
                    <!-- هنا سيتم إضافة الرسم البياني باستخدام Chart.js -->
                    <div class="flex items-center justify-center h-full text-neutral-500">
                        <p>الرسم البياني للإيرادات والمصروفات</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- توزيع المصروفات -->
        <div>
            <div class="card">
                <div class="card-header">
                    <h2>توزيع المصروفات</h2>
                </div>
                <div class="chart-container h-80">
                    <!-- هنا سيتم إضافة الرسم البياني الدائري باستخدام Chart.js -->
                    <div class="flex items-center justify-center h-full text-neutral-500">
                        <p>الرسم البياني لتوزيع المصروفات</p>
                    </div>
                </div>
                <div class="mt-4 grid grid-cols-2 gap-2">
                    <div class="flex items-center">
                        <span class="inline-block w-3 h-3 rounded-full bg-primary mr-2"></span>
                        <span>المواد (45%)</span>
                    </div>
                    <div class="flex items-center">
                        <span class="inline-block w-3 h-3 rounded-full bg-secondary mr-2"></span>
                        <span>العمالة (30%)</span>
                    </div>
                    <div class="flex items-center">
                        <span class="inline-block w-3 h-3 rounded-full bg-success mr-2"></span>
                        <span>المعدات (15%)</span>
                    </div>
                    <div class="flex items-center">
                        <span class="inline-block w-3 h-3 rounded-full bg-danger mr-2"></span>
                        <span>أخرى (10%)</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- الفواتير والمستخلصات -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- الفواتير المستحقة -->
        <div>
            <div class="card">
                <div class="card-header flex justify-between items-center">
                    <h2>الفواتير المستحقة</h2>
                    <a href="#" class="text-primary-600 hover:text-primary-800 text-sm">
                        عرض الكل
                        <i class="fas fa-arrow-left mr-1"></i>
                    </a>
                </div>
                <div class="overflow--auto">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>رقم الفاتورة</th>
                                <th>المورد</th>
                                <th>المبلغ</th>
                                <th>تاريخ الاستحقاق</th>
                                <th>الحالة</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="font-medium">INV-2023-156</td>
                                <td>شركة الإنشاءات المتحدة</td>
                                <td>450,000 ريال</td>
                                <td>25 أكتوبر 2023</td>
                                <td><span class="badge-danger">متأخرة</span></td>
                            </tr>
                            <tr>
                                <td class="font-medium">INV-2023-158</td>
                                <td>مؤسسة الخليج للمقاولات</td>
                                <td>320,000 ريال</td>
                                <td>30 أكتوبر 2023</td>
                                <td><span class="badge-secondary">قريبة</span></td>
                            </tr>
                            <tr>
                                <td class="font-medium">INV-2023-162</td>
                                <td>شركة المعدات الإنشائية</td>
                                <td>180,000 ريال</td>
                                <td>5 نوفمبر 2023</td>
                                <td><span class="badge-primary">عادية</span></td>
                            </tr>
                            <tr>
                                <td class="font-medium">INV-2023-165</td>
                                <td>مصنع الحديد الوطني</td>
                                <td>275,000 ريال</td>
                                <td>10 نوفمبر 2023</td>
                                <td><span class="badge-primary">عادية</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- المستخلصات -->
        <div>
            <div class="card">
                <div class="card-header flex justify-between items-center">
                    <h2>المستخلصات</h2>
                    <a href="#" class="text-primary-600 hover:text-primary-800 text-sm">
                        عرض الكل
                        <i class="fas fa-arrow-left mr-1"></i>
                    </a>
                </div>
                <div class="overflow--auto">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>رقم المستخلص</th>
                                <th>المشروع</th>
                                <th>المبلغ</th>
                                <th>تاريخ التقديم</th>
                                <th>الحالة</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="font-medium">EST-2023-045</td>
                                <td>مشروع برج الأعمال</td>
                                <td>3,000,000 ريال</td>
                                <td>15 أكتوبر 2023</td>
                                <td><span class="badge-success">مدفوع</span></td>
                            </tr>
                            <tr>
                                <td class="font-medium">EST-2023-048</td>
                                <td>مجمع سكني الواحة</td>
                                <td>2,500,000 ريال</td>
                                <td>20 أكتوبر 2023</td>
                                <td><span class="badge-primary">معتمد</span></td>
                            </tr>
                            <tr>
                                <td class="font-medium">EST-2023-052</td>
                                <td>توسعة مستشفى الرعاية</td>
                                <td>1,800,000 ريال</td>
                                <td>25 أكتوبر 2023</td>
                                <td><span class="badge-secondary">قيد المراجعة</span></td>
                            </tr>
                            <tr>
                                <td class="font-medium">EST-2023-055</td>
                                <td>مركز تجاري النخيل</td>
                                <td>1,200,000 ريال</td>
                                <td>1 نوفمبر 2023</td>
                                <td><span class="badge-secondary">قيد المراجعة</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- التدفقات النقدية -->
    <div class="mt-6">
        <div class="card">
            <div class="card-header flex justify-between items-center">
                <h2>التدفقات النقدية</h2>
                <div>
                    <select class="form-select text-sm py-1">
                        <option>آخر 30 يوم</option>
                        <option selected>آخر 90 يوم</option>
                        <option>آخر 180 يوم</option>
                        <option>هذا العام</option>
                    </select>
                </div>
            </div>
            <div class="chart-container h-80">
                <!-- هنا سيتم إضافة الرسم البياني باستخدام Chart.js -->
                <div class="flex items-center justify-center h-full text-neutral-500">
                    <p>الرسم البياني للتدفقات النقدية</p>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
                <div class="p-4 bg-neutral-50 rounded-md">
                    <h3 class="text-sm text-neutral-500 mb-1">التدفقات الواردة</h3>
                    <p class="text-l font-bold text-success-600">12.5 مليون ريال</p>
                </div>
                <div class="p-4 bg-neutral-50 rounded-md">
                    <h3 class="text-sm text-neutral-500 mb-1">التدفقات الصادرة</h3>
                    <p class="text-l font-bold text-danger-600">10.8 مليون ريال</p>
                </div>
                <div class="p-4 bg-neutral-50 rounded-md">
                    <h3 class="text-sm text-neutral-500 mb-1">صافي التدفق</h3>
                    <p class="text-l font-bold text-primary-600">1.7 مليون ريال</p>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    // هنا يمكن إضافة سكريبت Chart.js لإنشاء الرسومات البيانية
</script>
@endpush