<div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-2xl font-black text-slate-900 tracking-tight mb-1">التقارير والكشوفات</h1>
        <p class="text-sm text-slate-500 font-medium">لوحة التحكم المركزية للتقارير والبيانات الإحصائية والكشوفات الخاصة بالنظام.</p>
    </div>

    <!-- Reports Grid -->
    <div class="flex flex-wrap gap-4">
        
        <!-- Entity Statement -->
        <a href="{{ route('reports.entities') }}" wire:navigate class="flex flex-col items-center justify-center text-center gap-2 bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-md hover:border-indigo-200 transition-all group w-32 h-32">
            <div class="w-10 h-10 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center group-hover:scale-110 group-hover:bg-indigo-600 group-hover:text-white transition-all">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
            </div>
            <h3 class="font-bold text-slate-800 text-[13px] group-hover:text-indigo-600 transition-colors">الكيانات</h3>
        </a>

        <!-- Branches Statement -->
        <a href="{{ route('reports.branches') }}" wire:navigate class="flex flex-col items-center justify-center text-center gap-2 bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-md hover:border-sky-200 transition-all group w-32 h-32">
            <div class="w-10 h-10 bg-sky-50 text-sky-600 rounded-xl flex items-center justify-center group-hover:scale-110 group-hover:bg-sky-600 group-hover:text-white transition-all">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
            </div>
            <h3 class="font-bold text-slate-800 text-[13px] group-hover:text-blue-600 transition-colors">الفروع</h3>
        </a>

        <!-- Center Statement -->
        <a href="{{ route('reports.centers') }}" wire:navigate class="flex flex-col items-center justify-center text-center gap-2 bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-md hover:border-amber-200 transition-all group w-32 h-32">
            <div class="w-10 h-10 bg-amber-50 text-amber-600 rounded-xl flex items-center justify-center group-hover:scale-110 group-hover:bg-amber-500 group-hover:text-white transition-all">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
            </div>
            <h3 class="font-bold text-slate-800 text-[13px] group-hover:text-amber-600 transition-colors">المراكز</h3>
        </a>

        <!-- Project Statement -->
        <a href="{{ route('reports.projects') }}" wire:navigate class="flex flex-col items-center justify-center text-center gap-2 bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-md hover:border-emerald-200 transition-all group w-32 h-32">
            <div class="w-10 h-10 bg-emerald-50 text-emerald-600 rounded-xl flex items-center justify-center group-hover:scale-110 group-hover:bg-emerald-500 group-hover:text-white transition-all">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
            </div>
            <h3 class="font-bold text-slate-800 text-[13px] group-hover:text-emerald-600 transition-colors">المشاريع</h3>
        </a>

        <!-- Party Statement -->
        <a href="{{ route('reports.parties') }}" wire:navigate class="flex flex-col items-center justify-center text-center gap-2 bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-md hover:border-cyan-200 transition-all group w-32 h-32">
            <div class="w-10 h-10 bg-cyan-50 text-cyan-600 rounded-xl flex items-center justify-center group-hover:scale-110 group-hover:bg-cyan-500 group-hover:text-white transition-all">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            </div>
            <h3 class="font-bold text-slate-800 text-[13px] group-hover:text-cyan-600 transition-colors">الأطراف</h3>
        </a>

        <!-- Account Statement -->
        <a href="{{ route('reports.accounts') }}" wire:navigate class="flex flex-col items-center justify-center text-center gap-2 bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-md hover:border-fuchsia-200 transition-all group w-32 h-32">
            <div class="w-10 h-10 bg-fuchsia-50 text-fuchsia-600 rounded-xl flex items-center justify-center group-hover:scale-110 group-hover:bg-fuchsia-500 group-hover:text-white transition-all">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
            </div>
            <h3 class="font-bold text-slate-800 text-[13px] group-hover:text-fuchsia-600 transition-colors">الحسابات</h3>
        </a>

        <!-- Ledger Statement -->
        <a href="{{ route('reports.ledgers') }}" wire:navigate class="flex flex-col items-center justify-center text-center gap-2 bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-md hover:border-violet-200 transition-all group w-32 h-32">
            <div class="w-10 h-10 bg-violet-50 text-violet-600 rounded-xl flex items-center justify-center group-hover:scale-110 group-hover:bg-violet-600 group-hover:text-white transition-all">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
            </div>
            <h3 class="font-bold text-slate-800 text-[13px] group-hover:text-violet-600 transition-colors">الدفاتر</h3>
        </a>

        <!-- Page Statement -->
        <a href="{{ route('reports.pages') }}" wire:navigate class="flex flex-col items-center justify-center text-center gap-2 bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-md hover:border-pink-200 transition-all group w-32 h-32">
            <div class="w-10 h-10 bg-rose-50 text-rose-600 rounded-xl flex items-center justify-center group-hover:scale-110 group-hover:bg-rose-500 group-hover:text-white transition-all">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
            </div>
            <h3 class="font-bold text-slate-800 text-[13px] group-hover:text-rose-600 transition-colors">الصفحات</h3>
        </a>

        <!-- Balances Statement -->
        <a href="{{ route('reports.balances') }}" wire:navigate class="flex flex-col items-center justify-center text-center gap-2 bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-md hover:border-yellow-200 transition-all group w-32 h-32">
            <div class="w-10 h-10 bg-yellow-50 text-yellow-600 rounded-xl flex items-center justify-center group-hover:scale-110 group-hover:bg-yellow-500 group-hover:text-white transition-all">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            </div>
            <h3 class="font-bold text-slate-800 text-[13px] group-hover:text-yellow-600 transition-colors">الأرصدة المجمعة</h3>
        </a>

        <!-- Account Statement (Simplified) -->
        <a href="{{ route('reports.account_statement') }}" wire:navigate class="flex flex-col items-center justify-center text-center gap-2 bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-md hover:border-orange-200 transition-all group w-32 h-32">
            <div class="w-10 h-10 bg-orange-50 text-orange-600 rounded-xl flex items-center justify-center group-hover:scale-110 group-hover:bg-orange-500 group-hover:text-white transition-all">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
            </div>
            <h3 class="font-bold text-slate-800 text-[13px] group-hover:text-orange-600 transition-colors">كشف الحساب</h3>
        </a>

        <!-- Aggregated Statement -->
        <a href="{{ route('reports.aggregated_statement') }}" wire:navigate class="flex flex-col items-center justify-center text-center gap-2 bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-md hover:border-teal-200 transition-all group w-32 h-32">
            <div class="w-10 h-10 bg-teal-50 text-teal-600 rounded-xl flex items-center justify-center group-hover:scale-110 group-hover:bg-teal-500 group-hover:text-white transition-all">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
            </div>
            <h3 class="font-bold text-slate-800 text-[13px] group-hover:text-teal-600 transition-colors">كشف مجمع</h3>
        </a>

    </div>
</div>
