@extends('layouts.app')

@section('title', 'لوحة الإدارة العامة')

@php
    $allCurrencies = ['EGP' => 'جنيه مصري', 'USD' => 'دولار أمريكي', 'TRY' => 'ليرة تركية'];
    $currencyIcons = ['EGP' => '🇪🇬', 'USD' => '🇺🇸', 'TRY' => '🇹🇷'];
    $activeCurrencies = $incomeByCurrency->pluck('currency')->merge($expensesByCurrency->pluck('currency'))->unique()->sort()->values()->toArray();
    if (empty($activeCurrencies)) $activeCurrencies = ['EGP', 'USD', 'TRY'];
@endphp

@section('content')

<div class="flex items-center justify-between mb-5">
    <div>
        <h1 class="text-xl font-display font-extrabold text-primary-900">لوحة الإدارة العامة</h1>
        <p class="text-xs text-muted mt-0.5">متابعة جميع الأقسام في مكان واحد</p>
    </div>
    <div class="flex gap-2">
        @if ($pendingApprovals > 0)
            <a href="{{ route('admin.approvals') }}" class="flex items-center gap-1.5 px-3 py-2 rounded-xl bg-amber-50 border border-amber-200 text-amber-700 text-xs font-semibold hover:bg-amber-100 transition-all no-underline">
                <span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span>
                موافقات معلقة ({{ $pendingApprovals }})
            </a>
        @endif
        <a href="{{ route('finance.reports') }}" class="flex items-center gap-1.5 px-3 py-2 rounded-xl bg-gray-100 text-muted text-xs font-semibold hover:bg-gray-200 transition-all no-underline">📊 التقارير</a>
    </div>
</div>

{{-- ==================== إحصائيات سريعة ==================== --}}
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4 mb-6">
    <div class="bg-white rounded-[14px] border border-gray-200 p-4 shadow-sm relative overflow-hidden">
        <div class="absolute top-0 left-0 right-0 h-1 bg-secondary-600"></div>
        <p class="text-[0.65rem] text-muted font-semibold mb-1">👤 المستخدمين</p>
        <p class="text-xl font-display font-extrabold text-primary-900">{{ $counts['users'] }}</p>
    </div>
    <div class="bg-white rounded-[14px] border border-gray-200 p-4 shadow-sm relative overflow-hidden">
        <div class="absolute top-0 left-0 right-0 h-1 bg-accent-500"></div>
        <p class="text-[0.65rem] text-muted font-semibold mb-1">📞 الليدات</p>
        <p class="text-xl font-display font-extrabold text-primary-900">{{ $counts['leads'] }}</p>
    </div>
    <div class="bg-white rounded-[14px] border border-gray-200 p-4 shadow-sm relative overflow-hidden">
        <div class="absolute top-0 left-0 right-0 h-1 bg-green-500"></div>
        <p class="text-[0.65rem] text-muted font-semibold mb-1">🎓 الطلاب المسجلين</p>
        <p class="text-xl font-display font-extrabold text-primary-900">{{ $counts['students'] }}</p>
    </div>
    <div class="bg-white rounded-[14px] border border-gray-200 p-4 shadow-sm relative overflow-hidden">
        <div class="absolute top-0 left-0 right-0 h-1 bg-sky-500"></div>
        <p class="text-[0.65rem] text-muted font-semibold mb-1">📋 القبولات</p>
        <p class="text-xl font-display font-extrabold text-primary-900">{{ $counts['applications'] }}</p>
    </div>
    <div class="bg-white rounded-[14px] border border-gray-200 p-4 shadow-sm relative overflow-hidden">
        <div class="absolute top-0 left-0 right-0 h-1 bg-emerald-500"></div>
        <p class="text-[0.65rem] text-muted font-semibold mb-1">💰 الإيرادات</p>
        <p class="text-xl font-display font-extrabold text-primary-900">{{ $counts['payments'] }}</p>
    </div>
    <div class="bg-white rounded-[14px] border border-gray-200 p-4 shadow-sm relative overflow-hidden">
        <div class="absolute top-0 left-0 right-0 h-1 bg-red-500"></div>
        <p class="text-[0.65rem] text-muted font-semibold mb-1">💸 المصروفات</p>
        <p class="text-xl font-display font-extrabold text-primary-900">{{ $counts['expenses'] }}</p>
    </div>
</div>

{{-- ==================== ملخص الإيرادات والمصروفات حسب العملة ==================== --}}
<div class="bg-white rounded-[16px] border border-gray-200 shadow-sm overflow-hidden mb-6">
    <div class="px-5 py-3 border-b border-gray-100">
        <h2 class="font-display font-bold text-primary-900 text-sm flex items-center gap-2">💱 ملخص الإيرادات والمصروفات حسب العملة</h2>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-right text-sm">
            <thead>
                <tr class="border-b border-gray-100">
                    <th class="px-4 py-2.5 text-xs font-semibold text-muted">العملة</th>
                    <th class="px-4 py-2.5 text-xs font-semibold text-muted">الإيرادات</th>
                    <th class="px-4 py-2.5 text-xs font-semibold text-muted">المصروفات</th>
                    <th class="px-4 py-2.5 text-xs font-semibold text-muted">صافي الربح</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach ($activeCurrencies as $cur)
                    @php
                        $inc = $incomeByCurrency->where('currency', $cur)->sum('total');
                        $exp = $expensesByCurrency->where('currency', $cur)->sum('total');
                        $net = $inc - $exp;
                    @endphp
                    <tr class="hover:bg-gray-50/50 transition-colors">
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-2">
                                <span class="text-base">{{ $currencyIcons[$cur] ?? '💱' }}</span>
                                <div>
                                    <p class="font-bold text-primary-900">{{ $cur }}</p>
                                    <p class="text-[0.65rem] text-muted">{{ $allCurrencies[$cur] ?? $cur }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3 font-bold text-success">{{ number_format($inc, 2) }}</td>
                        <td class="px-4 py-3 font-bold text-danger">{{ number_format($exp, 2) }}</td>
                        <td class="px-4 py-3">
                            <span class="font-bold {{ $net >= 0 ? 'text-accent-500' : 'text-danger' }}">{{ number_format($net, 2) }}</span>
                            @if($net >= 0)
                                <span class="text-[0.6rem] text-success mr-1">▲</span>
                            @else
                                <span class="text-[0.6rem] text-danger mr-1">▼</span>
                            @endif
                        </td>
                    </tr>
                @endforeach
                @if (empty($activeCurrencies))
                    <tr><td colspan="4" class="px-4 py-8 text-center text-muted text-sm">لا توجد بيانات</td></tr>
                @endif
            </tbody>
        </table>
    </div>
</div>

{{-- ==================== الأقسام السريعة ==================== --}}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-6">
    <a href="{{ route('hr.dashboard') }}" class="bg-white rounded-[14px] border border-gray-200 p-4 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all block">
        <div class="flex items-center gap-3">
            <div class="w-9 h-9 rounded-xl bg-secondary-500/10 flex items-center justify-center text-base shrink-0">🧑‍💼</div>
            <div>
                <h3 class="font-bold text-primary-900 text-sm">إدارة الموظفين</h3>
                <p class="text-[0.65rem] text-muted mt-0.5">إضافة إيميلات وكلمات سر</p>
            </div>
        </div>
    </a>
    <a href="{{ route('finance.dashboard') }}" class="bg-white rounded-[14px] border border-gray-200 p-4 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all block">
        <div class="flex items-center gap-3">
            <div class="w-9 h-9 rounded-xl bg-green-500/10 flex items-center justify-center text-base shrink-0">💰</div>
            <div>
                <h3 class="font-bold text-primary-900 text-sm">المالية</h3>
                <p class="text-[0.65rem] text-muted mt-0.5">مراقبة الإيرادات والمصروفات</p>
            </div>
        </div>
    </a>
    <a href="{{ route('sales.dashboard') }}" class="bg-white rounded-[14px] border border-gray-200 p-4 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all block">
        <div class="flex items-center gap-3">
            <div class="w-9 h-9 rounded-xl bg-accent-500/10 flex items-center justify-center text-base shrink-0">📊</div>
            <div>
                <h3 class="font-bold text-primary-900 text-sm">السيلز</h3>
                <p class="text-[0.65rem] text-muted mt-0.5">أداء مندوبي المبيعات</p>
            </div>
        </div>
    </a>
    <a href="{{ route('operations.dashboard') }}" class="bg-white rounded-[14px] border border-gray-200 p-4 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all block">
        <div class="flex items-center gap-3">
            <div class="w-9 h-9 rounded-xl bg-amber-500/10 flex items-center justify-center text-base shrink-0">👨‍🏫</div>
            <div>
                <h3 class="font-bold text-primary-900 text-sm">تنظيم المدرسين</h3>
                <p class="text-[0.65rem] text-muted mt-0.5">جداول ومواعيد التصوير</p>
            </div>
        </div>
    </a>
    <a href="{{ route('admission.dashboard') }}" class="bg-white rounded-[14px] border border-gray-200 p-4 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all block">
        <div class="flex items-center gap-3">
            <div class="w-9 h-9 rounded-xl bg-sky-500/10 flex items-center justify-center text-base shrink-0">🎓</div>
            <div>
                <h3 class="font-bold text-primary-900 text-sm">القبولات</h3>
                <p class="text-[0.65rem] text-muted mt-0.5">قبولات مبدئية ونهائية</p>
            </div>
        </div>
    </a>
    <a href="{{ route('admin.approvals') }}" class="bg-white rounded-[14px] border border-gray-200 p-4 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all block relative">
        <div class="flex items-center gap-3">
            <div class="w-9 h-9 rounded-xl bg-emerald-500/10 flex items-center justify-center text-base shrink-0">✅</div>
            <div>
                <h3 class="font-bold text-primary-900 text-sm">الموافقات الإدارية</h3>
                <p class="text-[0.65rem] text-muted mt-0.5">اعتماد أو رفض الطلبات</p>
            </div>
        </div>
        @if ($pendingApprovals > 0)
            <span class="absolute top-3 right-3 bg-red-500 text-white text-[0.6rem] font-bold px-1.5 py-0.5 rounded-full min-w-[1.25rem] text-center">{{ $pendingApprovals }}</span>
        @endif
    </a>
</div>
@endsection