@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>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- Assets Left Column -->
        <div class="space-y-6">
            <h4 class="font-extrabold text-xs text-slate-500 uppercase tracking-wider border-b pb-2">1. الأصول (الموجودات)</h4>
            <div class="space-y-3">
                @foreach($assets as $asset)
                    <div class="flex items-center justify-between text-xs font-semibold text-slate-700 dark:text-slate-200">
                        <span>{{ $asset->name }}</span>
                        <span class="font-mono">{{ number_format($asset->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">
                    <span>إجمالي الأصول</span>
                    <span class="font-mono text-primary-500">{{ number_format($totalAssets, 2) }} ر.س</span>
                </div>
            </div>
        </div>

        <!-- Liabilities & Equity Right Column -->
        <div class="space-y-6">
            <h4 class="font-extrabold text-xs text-slate-500 uppercase tracking-wider border-b pb-2">2. الالتزامات وحقوق الملكية (المطلوبات)</h4>
            <div class="space-y-6">
                <!-- Liabilities subset -->
                <div class="space-y-3">
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">الالتزامات (الخصوم)</span>
                    @foreach($liabilities as $lia)
                        <div class="flex items-center justify-between text-xs font-semibold text-slate-700 dark:text-slate-200">
                            <span>{{ $lia->name }}</span>
                            <span class="font-mono">{{ number_format($lia->balance, 2) }} ر.س</span>
                        </div>
                    @endforeach
                    <div class="flex items-center justify-between font-bold text-xs text-slate-800 dark:text-white pt-2 border-t border-dashed">
                        <span>إجمالي الالتزامات</span>
                        <span class="font-mono">{{ number_format($totalLiabilities, 2) }} ر.س</span>
                    </div>
                </div>

                <!-- Equity subset -->
                <div class="space-y-3">
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">حقوق الملكية</span>
                    @foreach($equity as $eq)
                        <div class="flex items-center justify-between text-xs font-semibold text-slate-700 dark:text-slate-200">
                            <span>{{ $eq->name }}</span>
                            <span class="font-mono">{{ number_format($eq->balance, 2) }} ر.س</span>
                        </div>
                    @endforeach
                    <div class="flex items-center justify-between font-bold text-xs text-slate-800 dark:text-white pt-2 border-t border-dashed">
                        <span>إجمالي حقوق الملكية</span>
                        <span class="font-mono">{{ number_format($totalEquity, 2) }} ر.س</span>
                    </div>
                </div>

                <div class="flex items-center justify-between font-bold text-sm text-slate-800 dark:text-white pt-2 border-t">
                    <span>إجمالي الالتزامات وحقوق الملكية</span>
                    <span class="font-mono text-indigo-500">{{ number_format($totalLiabilities + $totalEquity, 2) }} ر.س</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Balance Check Info -->
    <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-end">
        @if(abs($totalAssets - ($totalLiabilities + $totalEquity)) < 0.01)
            <span class="bg-emerald-500/10 text-emerald-500 text-xs px-3 py-1.5 rounded-full font-bold border border-emerald-500/20"><i class="fa-solid fa-circle-check mr-1.5"></i>المركز المالي متزن ومطابق</span>
        @else
            <span class="bg-red-500/10 text-red-500 text-xs px-3 py-1.5 rounded-full font-bold border border-red-500/20"><i class="fa-solid fa-triangle-exclamation mr-1.5"></i>المعادلة المحاسبية غير متطابقة! الفارق: {{ number_format(abs($totalAssets - ($totalLiabilities + $totalEquity)), 2) }} ر.س</span>
        @endif
    </div>
</div>
@endsection