@extends('layouts.app')

@section('title', 'قائمة الدخل')
@section('page_title', 'قائمة الدخل (الأرباح والخسائر)')

@section('content')
<div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-100 dark:border-slate-700/60 shadow-sm max-w-4xl space-y-8">
    <div>
        <h3 class="font-extrabold text-sm text-slate-800 dark:text-white">قائمة الأرباح والخسائر</h3>
        <p class="text-xs text-slate-400 mt-1">تقرير الأداء التشغيلي والربحي للشركة منذ بداية السنة المالية الحالية</p>
    </div>

    <!-- Revenues section -->
    <div class="space-y-4">
        <h4 class="font-extrabold text-xs text-slate-500 uppercase tracking-wider border-b pb-2">1. الإيرادات التشغيلية</h4>
        <div class="space-y-3">
            @foreach($revenues as $rev)
                <div class="flex items-center justify-between text-xs font-semibold text-slate-700 dark:text-slate-200">
                    <span>{{ $rev->name }}</span>
                    <span class="font-mono">{{ number_format($rev->balance, 2) }} ر.س</span>
                </div>
            @endforeach
            <div class="flex items-center justify-between font-bold text-sm text-slate-800 dark:text-white pt-2 border-t border-dashed">
                <span>إجمالي الإيرادات</span>
                <span class="font-mono text-emerald-600">{{ number_format($totalRevenue, 2) }} ر.س</span>
            </div>
        </div>
    </div>

    <!-- Expenses section -->
    <div class="space-y-4">
        <h4 class="font-extrabold text-xs text-slate-500 uppercase tracking-wider border-b pb-2">2. المصروفات التشغيلية والعمومية</h4>
        <div class="space-y-3">
            @foreach($expenses as $exp)
                <div class="flex items-center justify-between text-xs font-semibold text-slate-700 dark:text-slate-200">
                    <span>{{ $exp->name }}</span>
                    <span class="font-mono text-red-500">{{ number_format($exp->balance, 2) }} - ر.س</span>
                </div>
            @endforeach
            <div class="flex items-center justify-between font-bold text-sm text-slate-800 dark:text-white pt-2 border-t border-dashed">
                <span>إجمالي المصروفات</span>
                <span class="font-mono text-red-500">{{ number_format($totalExpenses, 2) }} - ر.س</span>
            </div>
        </div>
    </div>

    <!-- Net Profit section -->
    <div class="p-4 bg-slate-50 dark:bg-slate-700/50 rounded-2xl border border-slate-100 dark:border-slate-600/30 flex items-center justify-between">
        <h4 class="font-extrabold text-base text-slate-800 dark:text-white">صافي الربح / الخسارة للفترة</h4>
        <span class="font-mono text-lg font-extrabold {{ $netIncome >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-500' }}">
            {{ number_format($netIncome, 2) }} ر.س
        </span>
    </div>
</div>
@endsection