@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 ($dueBills->isNotEmpty())
            <a href="{{ route('finance.recurring') }}" class="flex items-center gap-1.5 px-3 py-2 rounded-xl bg-danger/10 border border-danger/20 text-danger text-xs font-semibold hover:bg-danger/20 transition-all no-underline">
                <span class="w-2 h-2 rounded-full bg-danger animate-pulse"></span>
                {{ $dueBills->count() }} فاتورة مستحقة
            </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-1 lg:grid-cols-3 gap-5 mb-5">

    {{-- ملخص العملات --}}
    <div class="lg:col-span-2 bg-white rounded-[16px] border border-gray-200 shadow-sm overflow-hidden">
        <div class="px-5 py-3 border-b border-gray-100 flex items-center justify-between">
            <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) || ($activeCurrencies && count($activeCurrencies) === 0))
                        <tr><td colspan="4" class="px-4 py-8 text-center text-muted text-sm">لا توجد بيانات</td></tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>

    {{-- العمولات --}}
    <div class="bg-white rounded-[16px] border border-gray-200 shadow-sm overflow-hidden">
        <div class="px-5 py-3 border-b border-gray-100 flex items-center justify-between">
            <h2 class="font-display font-bold text-primary-900 text-sm flex items-center gap-2">💵 العمولات</h2>
            <a href="{{ route('finance.commissions') }}" class="text-[0.65rem] text-accent-600 hover:text-accent-700 font-semibold no-underline">عرض الكل ←</a>
        </div>
        <div class="p-4 space-y-3">
            <div class="flex items-center justify-between p-3 rounded-xl bg-amber-50/80 border border-amber-100">
                <div class="flex items-center gap-2">
                    <span class="w-8 h-8 rounded-lg bg-amber-500/10 flex items-center justify-center text-sm">⏳</span>
                    <div>
                        <p class="text-[0.65rem] text-muted font-semibold">معلقة</p>
                        <p class="text-sm font-bold text-amber-600">{{ number_format($totalCommissionsPending, 2) }}</p>
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-between p-3 rounded-xl bg-success/5 border border-success/10">
                <div class="flex items-center gap-2">
                    <span class="w-8 h-8 rounded-lg bg-success/10 flex items-center justify-center text-sm">✅</span>
                    <div>
                        <p class="text-[0.65rem] text-muted font-semibold">مدفوعة</p>
                        <p class="text-sm font-bold text-success">{{ number_format($totalCommissionsPaid, 2) }}</p>
                    </div>
                </div>
            </div>
            <div class="flex items-center justify-between p-3 rounded-xl bg-accent-500/5 border border-accent-500/10">
                <div class="flex items-center gap-2">
                    <span class="w-8 h-8 rounded-lg bg-accent-500/10 flex items-center justify-center text-sm">📊</span>
                    <div>
                        <p class="text-[0.65rem] text-muted font-semibold">الإجمالي</p>
                        <p class="text-sm font-bold text-accent-600">{{ number_format($totalCommissionsPaid + $totalCommissionsPending, 2) }} USD</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ==================== الخزائن ==================== --}}
@if ($cashboxes->isNotEmpty())
    <div class="mb-5">
        <div class="flex items-center justify-between mb-3">
            <h2 class="font-display font-bold text-primary-900 text-sm flex items-center gap-2">🏦 الخزائن</h2>
            <a href="{{ route('finance.cashbox') }}" class="text-[0.65rem] text-accent-600 hover:text-accent-700 font-semibold no-underline">إدارة الخزائن ←</a>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach ($cashboxes as $cb)
                <div class="bg-white rounded-[14px] border border-gray-200 shadow-sm p-4 relative overflow-hidden">
                    <div class="absolute top-0 left-0 right-0 h-1 bg-emerald-500"></div>
                    <p class="text-sm font-bold text-primary-900 mb-3">💰 {{ $cb->name }}</p>
                    <div class="grid grid-cols-3 gap-2">
                        <div class="text-center p-2 rounded-lg bg-accent-500/5">
                            <p class="text-[0.6rem] text-muted mb-0.5">🇪🇬 EGP</p>
                            <p class="text-xs font-extrabold text-primary-900">{{ number_format($cb->balance_egp, 0) }}</p>
                        </div>
                        <div class="text-center p-2 rounded-lg bg-success/5">
                            <p class="text-[0.6rem] text-muted mb-0.5">🇺🇸 USD</p>
                            <p class="text-xs font-extrabold text-primary-900">{{ number_format($cb->balance_usd, 0) }}</p>
                        </div>
                        <div class="text-center p-2 rounded-lg bg-amber-500/5">
                            <p class="text-[0.6rem] text-muted mb-0.5">🇹🇷 TRY</p>
                            <p class="text-xs font-extrabold text-primary-900">{{ number_format($cb->balance_try, 0) }}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endif

{{-- ==================== آخر الإيرادات والمصروفات ==================== --}}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
    <div class="bg-white rounded-[16px] border border-gray-200 shadow-sm overflow-hidden">
        <div class="px-5 py-3 border-b border-gray-100 flex items-center justify-between">
            <h2 class="font-display font-bold text-primary-900 text-sm flex items-center gap-2"><span class="w-6 h-6 rounded-md bg-success/10 flex items-center justify-center text-xs">💰</span> آخر الإيرادات</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">
                    @forelse ($recentPayments as $payment)
                        <tr class="hover:bg-gray-50/50 transition-colors">
                            <td class="px-4 py-2.5 font-semibold text-primary-900">{{ $payment->student_name ?? '—' }}</td>
                            <td class="px-4 py-2.5 font-bold">{{ number_format($payment->amount, 2) }}</td>
                            <td class="px-4 py-2.5"><span class="inline-block px-2 py-0.5 rounded-md bg-accent-50 text-accent-600 border border-accent-100 text-xs font-semibold">{{ $payment->currency ?? 'USD' }}</span></td>
                            <td class="px-4 py-2.5 text-muted text-xs">{{ \Carbon\Carbon::parse($payment->created_at)->format('Y-m-d') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-4 py-10 text-center text-muted text-sm">لا توجد إيرادات مسجلة بعد</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="bg-white rounded-[16px] border border-gray-200 shadow-sm overflow-hidden">
        <div class="px-5 py-3 border-b border-gray-100 flex items-center justify-between">
            <h2 class="font-display font-bold text-primary-900 text-sm flex items-center gap-2"><span class="w-6 h-6 rounded-md bg-danger/10 flex items-center justify-center text-xs">🧾</span> آخر المصروفات</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">
                    @forelse ($recentExpenses as $expense)
                        <tr class="hover:bg-gray-50/50 transition-colors">
                            <td class="px-4 py-2.5 font-semibold text-primary-900">{{ $expense->title ?? '—' }}</td>
                            <td class="px-4 py-2.5 font-bold">{{ number_format($expense->amount, 2) }}</td>
                            <td class="px-4 py-2.5"><span class="inline-block px-2 py-0.5 rounded-md bg-accent-50 text-accent-600 border border-accent-100 text-xs font-semibold">{{ $expense->currency ?? 'USD' }}</span></td>
                            <td class="px-4 py-2.5 text-muted text-xs">{{ \Carbon\Carbon::parse($expense->created_at)->format('Y-m-d') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-4 py-10 text-center text-muted text-sm">لا توجد مصروفات مسجلة بعد</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection