<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <div>
                <h2 class="font-semibold text-2xl text-gray-800 leading-tight">
                    {{ \App\Helpers\TranslationHelper::transFromDatabase('Dashboard', 'Dashboard') }}
                </h2>
                <p class="text-sm text-gray-600 mt-1">{{ \App\Helpers\TranslationHelper::transFromDatabase('Welcome', 'Welcome') }} {{ Auth::user()->name }}</p>
            </div>
            <div class="text-sm text-gray-500">
                <i class="fas fa-calendar-alt ml-2"></i>
                {{ now()->format('d/m/Y') }}
            </div>
        </div>
    </x-slot>

    <div class="py-8 bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- إحصائيات المبيعات والخدمات -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <!-- إجمالي العملاء -->
                <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden border-t-4 border-blue-600">
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <div>
                                <p class="text-gray-600 text-sm font-medium">{{ \App\Helpers\TranslationHelper::transFromDatabase('Total Customers', 'Total Customers') }}</p>
                                <p class="text-3xl font-bold text-gray-900 mt-2">{{ $totalCustomers }}</p>
                            </div>
                            <div class="bg-gradient-to-br from-blue-100 to-blue-50 p-3 rounded-lg">
                                <i class="fas fa-users text-blue-600 text-2xl"></i>
                            </div>
                        </div>
                        <div class="flex items-center pt-4 border-t border-gray-100">
                            <span class="text-gray-500 text-xs">{{ \App\Helpers\TranslationHelper::transFromDatabase('Commercial activities', 'Commercial activities') }}</span>
                        </div>
                    </div>
                </div>

                <!-- الإيرادات -->
                <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden border-t-4 border-emerald-600">
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <div>
                                <p class="text-gray-600 text-sm font-medium">{{ \App\Helpers\TranslationHelper::transFromDatabase('Revenue', 'Revenue') }}</p>
                                <p class="text-3xl font-bold text-gray-900 mt-2">{{ number_format($totalRevenue) . ' ر.س' }}</p>
                            </div>
                            <div class="bg-gradient-to-br from-emerald-100 to-emerald-50 p-3 rounded-lg">
                                <i class="fas fa-chart-line text-emerald-600 text-2xl"></i>
                            </div>
                        </div>
                        <div class="flex items-center pt-4 border-t border-gray-100">
                            <span class="text-sm font-medium flex items-center {{ $revenueChangePercent >= 0 ? 'text-green-600' : 'text-red-600' }}">
                                <i class="fas {{ $revenueChangePercent >= 0 ? 'fa-arrow-up' : 'fa-arrow-down' }} ml-1"></i>
                                {{ abs($revenueChangePercent) }}%
                            </span>
                            <span class="text-gray-500 text-xs mr-2">{{ \App\Helpers\TranslationHelper::transFromDatabase('Compared to last month', 'Compared to last month') }}</span>
                        </div>
                    </div>
                </div>

                <!-- المصروفات -->
                <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden border-t-4 border-orange-600">
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <div>
                                <p class="text-gray-600 text-sm font-medium">{{ \App\Helpers\TranslationHelper::transFromDatabase('Expenses', 'Expenses') }}</p>
                                <p class="text-3xl font-bold text-gray-900 mt-2">{{ number_format($totalExpenses) . ' ر.س' }}</p>
                            </div>
                            <div class="bg-gradient-to-br from-orange-100 to-orange-50 p-3 rounded-lg">
                                <i class="fas fa-wallet text-orange-600 text-2xl"></i>
                            </div>
                        </div>
                        <div class="flex items-center pt-4 border-t border-gray-100">
                            <span class="text-sm font-medium flex items-center {{ $expensesChangePercent >= 0 ? 'text-red-600' : 'text-green-600' }}">
                                <i class="fas {{ $expensesChangePercent >= 0 ? 'fa-arrow-up' : 'fa-arrow-down' }} ml-1"></i>
                                {{ abs($expensesChangePercent) }}%
                            </span>
                            <span class="text-gray-500 text-xs mr-2">{{ \App\Helpers\TranslationHelper::transFromDatabase('Commercial expenses', 'Commercial expenses') }}</span>
                        </div>
                    </div>
                </div>

                <!-- الموظفين -->
                <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden border-t-4 border-purple-600">
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <div>
                                <p class="text-gray-600 text-sm font-medium">{{ \App\Helpers\TranslationHelper::transFromDatabase('Active Employees', 'Active Employees') }}</p>
                                <p class="text-3xl font-bold text-gray-900 mt-2">{{ $activeEmployees }}</p>
                            </div>
                            <div class="bg-gradient-to-br from-purple-100 to-purple-50 p-3 rounded-lg">
                                <i class="fas fa-user-tie text-purple-600 text-2xl"></i>
                            </div>
                        </div>
                        <div class="flex items-center pt-4 border-t border-gray-100">
                            <span class="text-sm font-medium flex items-center {{ $activeEmployeesChangePercent >= 0 ? 'text-green-600' : 'text-red-600' }}">
                                <i class="fas {{ $activeEmployeesChangePercent >= 0 ? 'fa-arrow-up' : 'fa-arrow-down' }} ml-1"></i>
                                {{ abs($activeEmployeesChangePercent) }}%
                            </span>
                            <span class="text-gray-500 text-xs mr-2">{{ \App\Helpers\TranslationHelper::transFromDatabase('Last month', 'Last month') }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- الرسومات البيانية والمعلومات -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                <!-- الرسم البياني للإيرادات والمصروفات -->
                <div class="lg:col-span-2 bg-white rounded-xl shadow-lg p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-lg font-bold text-gray-900">{{ \App\Helpers\TranslationHelper::transFromDatabase('Revenue and Expenses', 'Revenue and Expenses') }}</h3>
                        <select id="periodSelect" class="form-select text-sm py-2 px-3 border border-gray-300 rounded-lg focus:ring-blue-500">
                            <option value="7">{{ \App\Helpers\TranslationHelper::transFromDatabase('Last 7 days', 'Last 7 days') }}</option>
                            <option value="30">{{ \App\Helpers\TranslationHelper::transFromDatabase('Last 30 days', 'Last 30 days') }}</option>
                            <option value="90" selected>{{ \App\Helpers\TranslationHelper::transFromDatabase('Last 90 days', 'Last 90 days') }}</option>
                            <option value="year">{{ \App\Helpers\TranslationHelper::transFromDatabase('This year', 'This year') }}</option>
                        </select>
                    </div>
                    <div class="h-72">
                        <canvas id="revenueChart"></canvas>
                    </div>
                </div>

                <!-- توزيع الفواتير -->
                <div class="bg-white rounded-xl shadow-lg p-6">
                    <h3 class="text-lg font-bold text-gray-900 mb-6">{{ \App\Helpers\TranslationHelper::transFromDatabase('Invoices Status', 'Invoices Status') }}</h3>
                    <div class="h-72 flex items-center justify-center">
                        <canvas id="invoiceStatusChart"></canvas>
                    </div>
                    <div class="mt-6 space-y-3">
                        <div class="flex items-center justify-between p-2 bg-blue-50 rounded-lg">
                            <span class="flex items-center text-sm font-medium text-gray-700">
                                <span class="w-3 h-3 rounded-full bg-blue-500 ml-2"></span>
                                {{ \App\Helpers\TranslationHelper::transFromDatabase('Sent', 'Sent') }}
                            </span>
                            <span class="text-sm font-bold text-blue-700">{{ $invoiceStatuses['sent'] }}</span>
                        </div>
                        <div class="flex items-center justify-between p-2 bg-emerald-50 rounded-lg">
                            <span class="flex items-center text-sm font-medium text-gray-700">
                                <span class="w-3 h-3 rounded-full bg-emerald-500 ml-2"></span>
                                {{ \App\Helpers\TranslationHelper::transFromDatabase('Paid', 'Paid') }}
                            </span>
                            <span class="text-sm font-bold text-emerald-700">{{ $invoiceStatuses['paid'] }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                <!-- الفواتير المعلقة -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <div class="p-6 border-b border-gray-200">
                        <div class="flex justify-between items-center">
                            <h3 class="text-lg font-bold text-gray-900">{{ \App\Helpers\TranslationHelper::transFromDatabase('Pending Invoices', 'Pending Invoices') }}</h3>
                            <a href="{{ route('customer-invoices.index') }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
                                {{ \App\Helpers\TranslationHelper::transFromDatabase('View All', 'View All') }}
                                <i class="fas fa-arrow-left mr-1"></i>
                            </a>
                        </div>
                    </div>
                    <div class="divide-y divide-gray-200">
                        @forelse($pendingInvoices as $invoice)
                        <div class="p-6 hover:bg-gray-50 transition-colors border-b border-gray-100 last:border-b-0">
                            <div class="flex justify-between items-start">
                                <div class="flex-1">
                                    <p class="text-sm font-medium text-gray-900">{{ \App\Helpers\TranslationHelper::transFromDatabase('Invoice No.', 'Invoice No.') }} {{ $invoice->invoice_number }}</p>
                                    <p class="text-sm text-gray-600 mt-1">{{ $invoice->customer->name ?? 'بدون عميل' }}</p>
                                </div>
                                <div class="text-left">
                                    <p class="text-lg font-bold text-gray-900">{{ number_format($invoice->total_amount) }} ر.س</p>
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800 mt-2">{{ $invoice->status }}</span>
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="p-8 text-center text-gray-500">
                            <i class="fas fa-file-invoice text-3xl mb-2 block opacity-50"></i>
                            {{ \App\Helpers\TranslationHelper::transFromDatabase('No pending invoices', 'No pending invoices') }}
                        </div>
                        @endforelse
                    </div>
                </div>

                <!-- الموردين الجدد -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <div class="p-6 border-b border-gray-200">
                        <div class="flex justify-between items-center">
                            <h3 class="text-lg font-bold text-gray-900">{{ \App\Helpers\TranslationHelper::transFromDatabase('Recent Suppliers', 'Recent Suppliers') }}</h3>
                            <a href="{{ route('suppliers.index') }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
                                {{ \App\Helpers\TranslationHelper::transFromDatabase('View All', 'View All') }}
                                <i class="fas fa-arrow-left mr-1"></i>
                            </a>
                        </div>
                    </div>
                    <div class="divide-y divide-gray-200">
                        @forelse($recentSuppliers as $supplier)
                        <div class="p-6 hover:bg-gray-50 transition-colors border-b border-gray-100 last:border-b-0">
                            <div class="flex justify-between items-start">
                                <div class="flex-1">
                                    <p class="text-sm font-medium text-gray-900">{{ $supplier->name }}</p>
                                    <p class="text-sm text-gray-600 mt-1">{{ $supplier->phone ?? 'بدون هاتف' }}</p>
                                </div>
                                <div class="text-left">
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">{{ $supplier->type ?? 'مورد' }}</span>
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="p-8 text-center text-gray-500">
                            <i class="fas fa-truck text-3xl mb-2 block opacity-50"></i>
                            {{ \App\Helpers\TranslationHelper::transFromDatabase('No recent suppliers', 'No recent suppliers') }}
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        let revenueChart = null;

        function initRevenueChart(labels, revenueData, expensesData) {
            const ctx = document.getElementById('revenueChart').getContext('2d');

            if (revenueChart) {
                revenueChart.destroy();
            }

            revenueChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'الإيرادات',
                            data: revenueData,
                            borderColor: '#3B82F6',
                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
                            tension: 0.4,
                            fill: true,
                            borderWidth: 2
                        },
                        {
                            label: 'المصروفات',
                            data: expensesData,
                            borderColor: '#EF4444',
                            backgroundColor: 'rgba(239, 68, 68, 0.1)',
                            tension: 0.4,
                            fill: true,
                            borderWidth: 2
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return value.toLocaleString('ar-SA') + ' ر.س';
                                }
                            }
                        }
                    }
                }
            });
        }

        document.getElementById('periodSelect').addEventListener('change', function() {
            const period = this.value;
            fetch(`/dashboard/chart-data/${period}`)
                .then(response => response.json())
                .then(data => {
                    initRevenueChart(data.labels, data.revenueData, data.expensesData);
                })
                .catch(error => console.error('Error:', error));
        });

        fetch('/dashboard/chart-data/90')
            .then(response => response.json())
            .then(data => {
                initRevenueChart(data.labels, data.revenueData, data.expensesData);
            });

        const invoiceStatusCtx = document.getElementById('invoiceStatusChart').getContext('2d');
        new Chart(invoiceStatusCtx, {
            type: 'doughnut',
            data: {
                labels: ['مدفوعة', 'مرسلة', 'جزئية', 'متأخرة'],
                datasets: [{
                    data: [
                        {{ $invoiceStatuses['paid'] }},
                        {{ $invoiceStatuses['sent'] }},
                        {{ $invoiceStatuses['partially_paid'] }},
                        {{ $invoiceStatuses['overdue'] }}
                    ],
                    backgroundColor: ['#10B981', '#3B82F6', '#FBBF24', '#EF4444'],
                    borderColor: '#ffffff',
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    </script>
    @endpush
</x-app-layout>
