@extends('layouts.app')

@section('title', 'لوحة التحكم')
@section('page_title', 'لوحة التحكم المالية والتشغيلية')

@section('content')
<div class="space-y-8">
    <!-- Quick Analytics Row (KPIs) -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Sales KPI Card -->
        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-100 dark:border-slate-700/60 shadow-sm flex items-center justify-between group hover:shadow-md transition-all duration-300">
            <div class="space-y-2">
                <span class="text-xs font-bold text-slate-400">مبيعات اليوم</span>
                <h3 class="text-2xl font-extrabold text-slate-800 dark:text-white">{{ number_format($dailySales, 2) }} <span class="text-xs font-semibold text-slate-400">ر.س</span></h3>
                <span class="text-[10px] text-emerald-500 font-bold bg-emerald-500/10 px-2 py-0.5 rounded-full"><i class="fa-solid fa-arrow-trend-up"></i> تحديث فوري</span>
            </div>
            <div class="h-12 w-12 bg-primary-50 dark:bg-primary-950/30 rounded-2xl flex items-center justify-center text-primary-500 group-hover:scale-110 transition-transform">
                <i class="fa-solid fa-cash-register text-xl"></i>
            </div>
        </div>

        <!-- Monthly Sales KPI Card -->
        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-100 dark:border-slate-700/60 shadow-sm flex items-center justify-between group hover:shadow-md transition-all duration-300">
            <div class="space-y-2">
                <span class="text-xs font-bold text-slate-400">المبيعات الشهرية</span>
                <h3 class="text-2xl font-extrabold text-slate-800 dark:text-white">{{ number_format($monthlySales, 2) }} <span class="text-xs font-semibold text-slate-400">ر.س</span></h3>
                <span class="text-[10px] text-slate-400">الشهر الحالي</span>
            </div>
            <div class="h-12 w-12 bg-emerald-50 dark:bg-emerald-950/30 rounded-2xl flex items-center justify-center text-emerald-500 group-hover:scale-110 transition-transform">
                <i class="fa-solid fa-calendar-check text-xl"></i>
            </div>
        </div>

        <!-- Net Profit KPI Card -->
        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-100 dark:border-slate-700/60 shadow-sm flex items-center justify-between group hover:shadow-md transition-all duration-300">
            <div class="space-y-2">
                <span class="text-xs font-bold text-slate-400">صافي الأرباح</span>
                <h3 class="text-2xl font-extrabold text-slate-800 dark:text-white" :class="{{ $netProfit }} >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-500'">{{ number_format($netProfit, 2) }} <span class="text-xs font-semibold text-slate-400">ر.س</span></h3>
                <span class="text-[10px] text-slate-400">إيراد السلع - المصاريف</span>
            </div>
            <div class="h-12 w-12 bg-indigo-50 dark:bg-indigo-950/30 rounded-2xl flex items-center justify-center text-indigo-500 group-hover:scale-110 transition-transform">
                <i class="fa-solid fa-coins text-xl"></i>
            </div>
        </div>

        <!-- Low Stock Alerts KPI Card -->
        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-100 dark:border-slate-700/60 shadow-sm flex items-center justify-between group hover:shadow-md transition-all duration-300">
            <div class="space-y-2">
                <span class="text-xs font-bold text-slate-400">تنبيهات المخزون المنخفض</span>
                <h3 class="text-2xl font-extrabold text-slate-800 dark:text-white">{{ $inventoryAlertsCount }}</h3>
                <span class="text-[10px] text-red-500 font-bold bg-red-500/10 px-2 py-0.5 rounded-full"><i class="fa-solid fa-triangle-exclamation"></i> تحتاج تزويد</span>
            </div>
            <div class="h-12 w-12 bg-red-50 dark:bg-red-950/30 rounded-2xl flex items-center justify-center text-red-500 group-hover:scale-110 transition-transform">
                <i class="fa-solid fa-boxes-packing text-xl"></i>
            </div>
        </div>
    </div>

    <!-- Outstanding & Cash flows overview -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Cashboxes & Banks Summary -->
        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-100 dark:border-slate-700/60 shadow-sm space-y-6">
            <h4 class="font-extrabold text-slate-800 dark:text-white text-sm"><i class="fa-solid fa-vault text-primary-500 ml-2"></i>أرصدة الخزينة والبنوك الحالية</h4>
            
            <div class="space-y-4">
                <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-700/40 rounded-2xl border border-slate-100 dark:border-slate-600/30">
                    <div class="flex items-center gap-3">
                        <div class="h-10 w-10 bg-primary-100 dark:bg-primary-950/40 rounded-xl flex items-center justify-center text-primary-600 dark:text-primary-400">
                            <i class="fa-solid fa-money-bill-wave text-lg"></i>
                        </div>
                        <div>
                            <p class="font-semibold text-xs text-slate-500 dark:text-slate-400">صناديق النقدية</p>
                            <span class="text-xs text-slate-400">السيولة النقدية المباشرة</span>
                        </div>
                    </div>
                    <span class="font-bold text-sm text-slate-800 dark:text-white">{{ number_format($cashBoxesSum, 2) }} ر.س</span>
                </div>

                <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-700/40 rounded-2xl border border-slate-100 dark:border-slate-600/30">
                    <div class="flex items-center gap-3">
                        <div class="h-10 w-10 bg-emerald-100 dark:bg-emerald-950/40 rounded-xl flex items-center justify-center text-emerald-600 dark:text-emerald-400">
                            <i class="fa-solid fa-building-columns text-lg"></i>
                        </div>
                        <div>
                            <p class="font-semibold text-xs text-slate-500 dark:text-slate-400">الحسابات البنكية</p>
                            <span class="text-xs text-slate-400">الرصيد الجاري بالبنوك</span>
                        </div>
                    </div>
                    <span class="font-bold text-sm text-slate-800 dark:text-white">{{ number_format($bankSum, 2) }} ر.س</span>
                </div>
            </div>
        </div>

        <!-- Debts Balances (Customers/Suppliers) -->
        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-100 dark:border-slate-700/60 shadow-sm space-y-6">
            <h4 class="font-extrabold text-slate-800 dark:text-white text-sm"><i class="fa-solid fa-handshake text-primary-500 ml-2"></i>المديونيات والالتزامات الخارجية</h4>
            
            <div class="space-y-4">
                <!-- Customer Balances -->
                <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-700/40 rounded-2xl border border-slate-100 dark:border-slate-600/30">
                    <div class="flex items-center gap-3">
                        <div class="h-10 w-10 bg-indigo-100 dark:bg-indigo-950/40 rounded-xl flex items-center justify-center text-indigo-600 dark:text-indigo-400">
                            <i class="fa-solid fa-users-viewfinder text-lg"></i>
                        </div>
                        <div>
                            <p class="font-semibold text-xs text-slate-500 dark:text-slate-400">مستحقات العملاء</p>
                            <span class="text-xs text-slate-400">مبيعات آجلة غير محصلة</span>
                        </div>
                    </div>
                    <span class="font-bold text-sm text-slate-800 dark:text-white">{{ number_format($outstandingCustomers, 2) }} ر.س</span>
                </div>

                <!-- Supplier Balances -->
                <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-700/40 rounded-2xl border border-slate-100 dark:border-slate-600/30">
                    <div class="flex items-center gap-3">
                        <div class="h-10 w-10 bg-amber-100 dark:bg-amber-950/40 rounded-xl flex items-center justify-center text-amber-600 dark:text-amber-400">
                            <i class="fa-solid fa-truck-ramp-box text-lg"></i>
                        </div>
                        <div>
                            <p class="font-semibold text-xs text-slate-500 dark:text-slate-400">مستحقات الموردين</p>
                            <span class="text-xs text-slate-400">فواتير شراء غير مسددة</span>
                        </div>
                    </div>
                    <span class="font-bold text-sm text-slate-800 dark:text-white">{{ number_format($outstandingSuppliers, 2) }} ر.س</span>
                </div>
            </div>
        </div>

        <!-- Latest Rule Notifications / Insights -->
        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-100 dark:border-slate-700/60 shadow-sm space-y-6">
            <div class="flex items-center justify-between">
                <h4 class="font-extrabold text-slate-800 dark:text-white text-sm"><i class="fa-solid fa-bell text-secondary-500 ml-2"></i>الإشعارات والرؤى الذكية</h4>
                <a href="{{ route('assistant.index') }}" class="text-xs font-bold text-primary-500 hover:underline">عرض الكل</a>
            </div>

            <div class="space-y-3.5 max-h-[170px] overflow-y-auto pr-1">
                @forelse($unreadAlerts as $alert)
                    <div class="p-3 rounded-xl border {{ $alert->type === 'inventory_level' ? 'bg-red-50/60 border-red-100 text-red-900 dark:bg-red-950/20 dark:border-red-900/40' : ($alert->type === 'customer_overdue' ? 'bg-amber-50/60 border-amber-100 text-amber-900 dark:bg-amber-950/20 dark:border-amber-900/40' : 'bg-blue-50/60 border-blue-100 text-blue-900 dark:bg-blue-950/20 dark:border-blue-900/40') }}">
                        <p class="font-bold text-xs">{{ $alert->title }}</p>
                        <span class="text-[10px] block mt-0.5 truncate">{{ $alert->message }}</span>
                    </div>
                @empty
                    <p class="text-slate-400 text-xs text-center py-8">لا توجد تنبيهات معلقة حالياً.</p>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Sales Analytics & Dynamic Chart -->
    <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-100 dark:border-slate-700/60 shadow-sm">
        <h4 class="font-extrabold text-slate-800 dark:text-white text-sm mb-6"><i class="fa-solid fa-chart-area text-primary-500 ml-2"></i>منحنى المبيعات للنصف السنوي الأخير</h4>
        <div class="h-80 relative">
            <canvas id="salesChart"></canvas>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const ctx = document.getElementById('salesChart').getContext('2d');
        const labels = @json($monthsList);
        const data = @json($salesChartData);

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'المبيعات الشهرية (ر.س)',
                    data: data,
                    borderColor: '#1d4ed8',
                    backgroundColor: 'rgba(29, 78, 216, 0.08)',
                    fill: true,
                    tension: 0.35,
                    borderWidth: 3,
                    pointBackgroundColor: '#1d4ed8',
                    pointBorderColor: '#ffffff',
                    pointBorderWidth: 2,
                    pointRadius: 6,
                    pointHoverRadius: 8
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        grid: {
                            color: 'rgba(156, 163, 175, 0.1)'
                        },
                        ticks: {
                            font: {
                                family: 'Cairo'
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            font: {
                                family: 'Cairo'
                            }
                        }
                    }
                }
            }
        });
    });
</script>
@endsection