{{-- resources/views/filament/pages/general-treasury-report.blade.php --}}
<x-filament-panels::page>
    <style>
        /* تنسيق الفلاتر في سطر واحد */
        form[wire\\:submit\\.prevent="generateReport"] {
            display: block !important;
        }
        
        form[wire\\:submit\\.prevent="generateReport"] > div {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 1rem !important;
            align-items: end !important;
        }
        
        form[wire\\:submit\\.prevent="generateReport"] [data-field-wrapper] {
            flex: 1 !important;
            min-width: 180px !important;
            margin-bottom: 0 !important;
        }
        
        @media (max-width: 768px) {
            form[wire\\:submit\\.prevent="generateReport"] > div {
                flex-direction: column !important;
            }
            
            form[wire\\:submit\\.prevent="generateReport"] [data-field-wrapper] {
                width: 100% !important;
            }
        }
    </style>
    
    {{-- عرض الفلاتر --}}
    <x-filament::card class="mb-6">
        <form wire:submit.prevent="generateReport">
            <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: end;">
                {{ $this->form }}
                
                <x-filament::button type="submit" color="primary">
                    <svg class="w-5 h-5 me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                    عرض التقرير
                </x-filament::button>
            </div>
        </form>
    </x-filament::card>

<div id="general-treasury-report" dir="rtl">
    <style>
        /* Reset and base styles */
        * {
            box-sizing: border-box;
        }

        #general-treasury-report {
            font-family: 'Tajawal', 'Segoe UI', Arial, sans-serif;
            background: linear-gradient(135deg, #e8f4fd, #f3e8ff);
            padding: 24px;
            border-radius: 18px;
            box-shadow: 0 10px 24px rgba(0,0,0,0.07);
            max-width: 1400px;
            margin: 0 auto;
        }

        /* Dark Mode Support */
        .dark #general-treasury-report {
            background: linear-gradient(135deg, #1e293b, #0f172a);
            color: #e2e8f0;
        }

        /* Mobile responsiveness for main container */
        @media (max-width: 768px) {
            #general-treasury-report {
                padding: 16px;
                margin: 10px;
                border-radius: 12px;
            }
        }

        @media (max-width: 480px) {
            #general-treasury-report {
                padding: 12px;
                margin: 5px;
                border-radius: 8px;
            }
        }

        #general-treasury-report .title {
            font-size: 32px;
            font-weight: 900;
            color: #1e3a8a;
            text-align: center;
            margin-bottom: 20px;
            text-shadow: 0 2px 4px rgba(30,58,138,0.1);
        }

        .dark #general-treasury-report .title {
            color: #38bdf8;
            text-shadow: 0 2px 4px rgba(56,189,248,0.1);
        }

        /* Mobile responsiveness for title */
        @media (max-width: 768px) {
            #general-treasury-report .title {
                font-size: 24px;
                margin-bottom: 15px;
            }
        }

        @media (max-width: 480px) {
            #general-treasury-report .title {
                font-size: 20px;
                margin-bottom: 12px;
            }
        }

        #general-treasury-report .toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        /* Mobile responsiveness for toolbar */
        @media (max-width: 768px) {
            #general-treasury-report .toolbar {
                flex-direction: column;
                gap: 10px;
                text-align: center;
            }
        }

        #general-treasury-report .btn {
            background: linear-gradient(135deg, #1e40af, #3b82f6);
            color: #fff;
            border: none;
            border-radius: 12px;
            padding: 10px 16px;
            font-size: 14px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(59,130,246,0.3);
            transition: all 0.3s ease;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

        .dark #general-treasury-report .btn {
            background: linear-gradient(135deg, #1e40af, #2563eb);
            color: #f1f5f9;
            box-shadow: 0 4px 12px rgba(30,64,175,0.4);
        }

        /* Mobile responsiveness for buttons */
        @media (max-width: 768px) {
            #general-treasury-report .btn {
                padding: 12px 18px;
                font-size: 15px;
                min-height: 44px;
                min-width: 44px;
            }
        }

        #general-treasury-report .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(59,130,246,0.4);
        }

        /* Summary Cards */
        #general-treasury-report .summary-cards {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 20px !important;
            margin-bottom: 30px !important;
        }

        /* Mobile responsiveness for summary cards */
        @media (max-width: 768px) {
            #general-treasury-report .summary-cards {
                grid-template-columns: 1fr !important;
                gap: 15px;
            }
        }

        #general-treasury-report .summary-card {
            background: white;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
            border-left: 5px solid;
        }

        .dark #general-treasury-report .summary-card {
            background: #1f2937;
            box-shadow: 0 4px 16px rgba(0,0,0,0.25);
        }

        /* Mobile responsiveness for summary cards */
        @media (max-width: 768px) {
            #general-treasury-report .summary-card {
                padding: 15px;
                border-radius: 12px;
            }
        }

        @media (max-width: 480px) {
            #general-treasury-report .summary-card {
                padding: 12px;
                border-radius: 8px;
            }
        }

        #general-treasury-report .summary-card.opening {
            border-left-color: #6366f1;
            background: linear-gradient(135deg, #f8fafc, #e0e7ff);
        }

        .dark #general-treasury-report .summary-card.opening {
            background: linear-gradient(135deg, #1f2937, #374151);
        }

        #general-treasury-report .summary-card.revenues {
            border-left-color: #22c55e;
            background: linear-gradient(135deg, #f0fdf4, #dcfce7);
        }

        .dark #general-treasury-report .summary-card.revenues {
            background: linear-gradient(135deg, #1f2937, #374151);
        }

        #general-treasury-report .summary-card.expenses {
            border-left-color: #ef4444;
            background: linear-gradient(135deg, #fef2f2, #fee2e2);
        }

        .dark #general-treasury-report .summary-card.expenses {
            background: linear-gradient(135deg, #1f2937, #374151);
        }

        #general-treasury-report .summary-card.closing {
            border-left-color: #f59e0b;
            background: linear-gradient(135deg, #fffbeb, #fef3c7);
        }

        .dark #general-treasury-report .summary-card.closing {
            background: linear-gradient(135deg, #1f2937, #374151);
        }

        #general-treasury-report .summary-card h3 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 8px;
            color: #374151;
        }

        .dark #general-treasury-report .summary-card h3 {
            color: #e5e7eb;
        }

        #general-treasury-report .summary-card .amount {
            font-size: 24px;
            font-weight: 900;
            margin-bottom: 4px;
        }

        /* Mobile responsiveness for summary card amounts */
        @media (max-width: 768px) {
            #general-treasury-report .summary-card .amount {
                font-size: 20px;
            }
        }

        @media (max-width: 480px) {
            #general-treasury-report .summary-card .amount {
                font-size: 18px;
            }
        }

        #general-treasury-report .summary-card.opening .amount {
            color: #6366f1;
        }

        #general-treasury-report .summary-card.revenues .amount {
            color: #22c55e;
        }

        #general-treasury-report .summary-card.expenses .amount {
            color: #ef4444;
        }

        #general-treasury-report .summary-card.closing .amount {
            color: #f59e0b;
        }

        /* Tables */
        #general-treasury-report .section {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.06);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .dark #general-treasury-report .section {
            background: #1f2937;
            box-shadow: 0 4px 16px rgba(0,0,0,0.3);
        }

        /* Custom scrollbar for all screen sizes */
        #general-treasury-report .section::-webkit-scrollbar {
            height: 8px;
        }

        #general-treasury-report .section::-webkit-scrollbar-track {
            background: #f8f9fa;
            border-radius: 4px;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
        }

        #general-treasury-report .section::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        #general-treasury-report .section::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
        }

        #general-treasury-report .section::-webkit-scrollbar-thumb:active {
            background: linear-gradient(135deg, #4338ca, #6d28d9);
        }

        /* Firefox scrollbar */
        #general-treasury-report .section {
            scrollbar-width: thin;
            scrollbar-color: #6366f1 #f8f9fa;
        }

        /* Mobile responsiveness for sections */
        @media (max-width: 768px) {
            #general-treasury-report .section {
                padding: 15px;
                border-radius: 12px;
                margin-bottom: 15px;
            }
        }

        @media (max-width: 480px) {
            #general-treasury-report .section {
                padding: 12px;
                border-radius: 8px;
                margin-bottom: 12px;
            }
        }

        #general-treasury-report .section-title {
            font-size: 20px;
            font-weight: 800;
            color: #1e3a8a;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 2px solid #e5e7eb;
        }

        .dark #general-treasury-report .section-title {
            color: #38bdf8;
            border-bottom: 2px solid #4b5563;
        }

        /* Mobile responsiveness for section titles */
        @media (max-width: 768px) {
            #general-treasury-report .section-title {
                font-size: 18px;
                margin-bottom: 12px;
            }
        }

        @media (max-width: 480px) {
            #general-treasury-report .section-title {
                font-size: 16px;
                margin-bottom: 10px;
            }
        }

        #general-treasury-report table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin-top: 12px;
            min-width: 800px; /* Ensure table always needs scrolling on smaller screens */
        }

        /* Table scroll indicator */
        #general-treasury-report .section {
            position: relative;
        }

        #general-treasury-report .section::before,
        #general-treasury-report .section::after {
            content: '';
            position: absolute;
            top: 60px;
            bottom: 20px;
            width: 30px;
            pointer-events: none;
            z-index: 2;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        #general-treasury-report .section::before {
            left: 20px;
            background: linear-gradient(to right, rgba(255,255,255,0.9), transparent);
        }

        #general-treasury-report .section::after {
            right: 20px;
            background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
        }

        /* Show gradients when table overflows */
        @media (max-width: 1200px) {
            #general-treasury-report .section::before,
            #general-treasury-report .section::after {
                opacity: 1;
            }
        }

        /* Scroll hint for mobile */
        #general-treasury-report .scroll-hint {
            display: none;
            text-align: center;
            color: #6b7280;
            font-size: 12px;
            margin-top: 8px;
            animation: pulse 2s infinite;
        }

        @media (max-width: 768px) {
            #general-treasury-report .scroll-hint {
                display: block;
            }
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        /* Mobile responsiveness for tables */
        @media (max-width: 768px) {
            #general-treasury-report table {
                font-size: 12px;
            }

            #general-treasury-report .section {
                padding: 15px;
            }

            /* Enhanced mobile scrollbar */
            #general-treasury-report .section::-webkit-scrollbar {
                height: 10px;
            }

            #general-treasury-report .section::-webkit-scrollbar-track {
                background: #e5e7eb;
                border-radius: 5px;
                box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
            }

            #general-treasury-report .section::-webkit-scrollbar-thumb {
                background: linear-gradient(135deg, #3b82f6, #1d4ed8);
                border-radius: 5px;
                box-shadow: 0 2px 6px rgba(0,0,0,0.3);
                border: 1px solid rgba(255,255,255,0.3);
            }

            #general-treasury-report .section::-webkit-scrollbar-thumb:hover {
                background: linear-gradient(135deg, #2563eb, #1e40af);
            }

            /* Make tables horizontally scrollable on mobile */
            #general-treasury-report table {
                min-width: 600px;
            }
        }

        @media (max-width: 480px) {
            #general-treasury-report table {
                font-size: 11px;
                min-width: 550px;
            }

            #general-treasury-report .section {
                padding: 12px;
            }
        }

        #general-treasury-report thead th {
            background: linear-gradient(135deg, #f8fafc, #e2e8f0);
            color: #374151;
            font-size: 13px;
            font-weight: 700;
            padding: 14px 12px;
            text-align: right;
            border-bottom: 2px solid #d1d5db;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .dark #general-treasury-report thead th {
            background: linear-gradient(135deg, #4b5563, #374151);
            color: #f3f4f6;
            border-bottom: 2px solid #6b7280;
        }

        /* Mobile responsiveness for table headers */
        @media (max-width: 768px) {
            #general-treasury-report thead th {
                padding: 10px 8px;
                font-size: 11px;
            }
        }

        @media (max-width: 480px) {
            #general-treasury-report thead th {
                padding: 8px 6px;
                font-size: 10px;
            }
        }

        #general-treasury-report tbody td {
            padding: 12px;
            border-bottom: 1px solid #f3f4f6;
            font-size: 14px;
            color: #374151;
            vertical-align: middle;
        }

        .dark #general-treasury-report tbody td {
            background: #374151;
            border-bottom: 1px solid #4b5563;
            color: #f3f4f6;
        }

        /* Mobile responsiveness for table cells */
        @media (max-width: 768px) {
            #general-treasury-report tbody td {
                padding: 8px 6px;
                font-size: 12px;
            }
        }

        @media (max-width: 480px) {
            #general-treasury-report tbody td {
                padding: 6px 4px;
                font-size: 11px;
            }
        }

        #general-treasury-report tbody tr:nth-child(even) {
            background-color: #f9fafb;
        }

        .dark #general-treasury-report tbody tr:nth-child(even) {
            background-color: #1f2937;
        }

        .dark #general-treasury-report tbody tr:nth-child(even) td {
            background-color: #1f2937;
        }

        #general-treasury-report tbody tr:hover {
            background-color: #eff6ff;
        }

        .dark #general-treasury-report tbody tr:hover {
            background-color: #4b5563;
        }

        .dark #general-treasury-report tbody tr:hover td {
            background-color: #4b5563;
        }

        /* Mobile touch interactions */
        @media (max-width: 768px) {
            #general-treasury-report tbody tr {
                touch-action: manipulation;
                -webkit-tap-highlight-color: rgba(239, 246, 255, 0.3);
            }

            #general-treasury-report tbody tr:active {
                background-color: #dbeafe;
            }
        }

        #general-treasury-report .amount-cell {
            font-weight: 700;
            text-align: left;
        }

        #general-treasury-report .amount-positive {
            color: #22c55e;
        }

        #general-treasury-report .amount-negative {
            color: #ef4444;
        }

        #general-treasury-report .type-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
        }

        /* Mobile responsiveness for badges */
        @media (max-width: 768px) {
            #general-treasury-report .type-badge {
                padding: 3px 6px;
                font-size: 10px;
                border-radius: 15px;
            }
        }

        @media (max-width: 480px) {
            #general-treasury-report .type-badge {
                padding: 2px 5px;
                font-size: 9px;
                border-radius: 12px;
            }
        }

        #general-treasury-report .type-badge.revenue {
            background: #dcfce7;
            color: #166534;
        }

        .dark #general-treasury-report .type-badge.revenue {
            background: #1f2937;
            color: #34d399;
        }

        #general-treasury-report .type-badge.expense {
            background: #fee2e2;
            color: #991b1b;
        }

        .dark #general-treasury-report .type-badge.expense {
            background: #1f2937;
            color: #f87171;
        }

        #general-treasury-report .empty {
            text-align: center;
            color: #9ca3af;
            font-style: italic;
            padding: 20px;
        }

        .dark #general-treasury-report .empty {
            color: #6b7280;
        }

        /* Print Styles */
        @media print {
            body * {
                visibility: hidden !important;
            }
            #general-treasury-report, #general-treasury-report * {
                visibility: visible !important;
            }
            #general-treasury-report {
                position: absolute !important;
                left: 0 !important;
                top: 0 !important;
                width: 100% !important;
                height: 100% !important;
                background: white !important;
                box-shadow: none !important;
                padding: 20px !important;
                font-size: 12px !important;
            }
            #general-treasury-report .btn {
                display: none !important;
            }
            #general-treasury-report table {
                min-width: auto !important;
                font-size: 10px !important;
            }
        }
    </style>

    @if(empty($reportData) || !isset($reportData['date_from']))
        {{-- رسالة عند عدم وجود بيانات --}}
        <div class="flex items-center justify-center" style="padding: 60px 20px; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
            <div class="text-center">
                <svg class="w-12 h-12 mx-auto mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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"/>
                </svg>
                <h3 class="text-lg font-semibold text-gray-700 mb-2">لا توجد بيانات لعرضها</h3>
                <p class="text-sm text-gray-500">اختر الخزينة والفترة الزمنية ثم اضغط على زر "عرض التقرير"</p>
            </div>
        </div>
    @else
    {{-- محتوى التقرير --}}
    <div class="title">{{ __('general_treasury_report.page_title') }}</div>

    <div class="toolbar">
        <div style="color: #6b7280; font-size: 14px;">
            @if(isset($vault_id) && $vault_id)
                @php
                    $vaultName = \App\Models\Vault::find($vault_id)?->name ?? '';
                @endphp
                <strong>الخزينة:</strong> {{ $vaultName }} | 
            @else
                <strong>الخزينة:</strong> جميع الخزائن | 
            @endif
            {{ __('general_treasury_report.from_label') }} {{ isset($reportData['date_from']) ? $reportData['date_from']->format('d/m/Y') : '' }}
            {{ __('general_treasury_report.to_label') }} {{ isset($reportData['date_to']) ? $reportData['date_to']->format('d/m/Y') : '' }}
        </div>
        <button class="btn" onclick="window.print()">🖨️ {{ __('general_treasury_report.print') }}</button>
    </div>

    {{-- Summary Cards - ملخص الحركة المالية --}}
    <div class="summary-cards">
        <div class="summary-card opening">
            <h3>{{ __('general_treasury_report.opening_balance') }}</h3>
            <div class="amount">{{ number_format($reportData['opening_balance'] ?? 0, 2) }} {{ __('general_treasury_report.currency') }}</div>
            <small style="color: #6b7280;">{{ __('general_treasury_report.opening_balance_desc') }}</small>
        </div>

        <div class="summary-card revenues">
            <h3>{{ __('general_treasury_report.total_revenues') }}</h3>
            <div class="amount">{{ number_format($reportData['total_revenues'] ?? 0, 2) }} {{ __('general_treasury_report.currency') }}</div>
            <small style="color: #6b7280;">{{ __('general_treasury_report.revenues_desc') }}</small>
        </div>

        <div class="summary-card expenses">
            <h3>{{ __('general_treasury_report.total_expenses') }}</h3>
            <div class="amount">{{ number_format($reportData['total_expenses'] ?? 0, 2) }} {{ __('general_treasury_report.currency') }}</div>
            <small style="color: #6b7280;">{{ __('general_treasury_report.expenses_desc') }}</small>
        </div>

        <div class="summary-card closing">
            <h3>{{ __('general_treasury_report.closing_balance') }}</h3>
            <div class="amount">{{ number_format($reportData['closing_balance'] ?? 0, 2) }} {{ __('general_treasury_report.currency') }}</div>
            <small style="color: #6b7280;">{{ __('general_treasury_report.closing_balance_desc') }}</small>
        </div>
    </div>

    {{-- Revenues Section --}}
    <div class="section">
        <div class="section-title">{{ __('general_treasury_report.revenues_details') }}</div>
        @if(isset($reportData['revenues']) && count($reportData['revenues']) > 0)
            <table>
                <thead>
                    <tr>
                        <th>{{ __('general_treasury_report.date') }}</th>
                        <th>{{ __('general_treasury_report.type') }}</th>
                        <th>{{ __('general_treasury_report.description') }}</th>
                        <th>{{ __('general_treasury_report.reference') }}</th>
                        <th>{{ __('general_treasury_report.amount') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($reportData['revenues'] as $revenue)
                        <tr>
                            <td>{{ \Carbon\Carbon::parse($revenue['date'])->format('d/m/Y') }}</td>
                            <td><span class="type-badge revenue">{{ $revenue['type_label'] }}</span></td>
                            <td>{{ $revenue['description'] }}</td>
                            <td>{{ $revenue['reference'] }}</td>
                            <td class="amount-cell amount-positive">{{ number_format($revenue['amount'], 2) }} {{ __('general_treasury_report.currency') }}</td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr style="background: #dcfce7; font-weight: bold;">
                        <td colspan="4">{{ __('general_treasury_report.total_revenues_label') }}</td>
                        <td class="amount-cell amount-positive">{{ number_format($reportData['total_revenues'], 2) }} {{ __('general_treasury_report.currency') }}</td>
                    </tr>
                </tfoot>

                <style>
                    .dark #general-treasury-report tfoot tr {
                        background: #1f2937 !important;
                    }
                    .dark #general-treasury-report tfoot td {
                        background: #1f2937 !important;
                        color: #34d399 !important;
                    }
                </style>
            </table>
            <div class="scroll-hint">← مرر يميناً ويساراً لرؤية جميع البيانات →</div>
        @else
            <div class="empty">{{ __('general_treasury_report.no_revenues') }}</div>
        @endif
    </div>

    {{-- Expenses Section --}}
    <div class="section">
        <div class="section-title">{{ __('general_treasury_report.expenses_details') }}</div>
        @if(isset($reportData['expenses']) && count($reportData['expenses']) > 0)
            <table>
                <thead>
                    <tr>
                        <th>{{ __('general_treasury_report.date') }}</th>
                        <th>{{ __('general_treasury_report.type') }}</th>
                        <th>{{ __('general_treasury_report.description') }}</th>
                        <th>{{ __('general_treasury_report.reference') }}</th>
                        <th>{{ __('general_treasury_report.amount') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($reportData['expenses'] as $expense)
                        <tr>
                            <td>{{ \Carbon\Carbon::parse($expense['date'])->format('d/m/Y') }}</td>
                            <td><span class="type-badge expense">{{ $expense['type_label'] }}</span></td>
                            <td>{{ $expense['description'] }}</td>
                            <td>{{ $expense['reference'] }}</td>
                            <td class="amount-cell amount-negative">{{ number_format($expense['amount'], 2) }} {{ __('general_treasury_report.currency') }}</td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr style="background: #fee2e2; font-weight: bold;">
                        <td colspan="4">{{ __('general_treasury_report.total_expenses_label') }}</td>
                        <td class="amount-cell amount-negative">{{ number_format($reportData['total_expenses'], 2) }} {{ __('general_treasury_report.currency') }}</td>
                    </tr>
                </tfoot>

                <style>
                    .dark #general-treasury-report .section:nth-child(5) tfoot tr {
                        background: #1f2937 !important;
                    }
                    .dark #general-treasury-report .section:nth-child(5) tfoot td {
                        background: #1f2937 !important;
                        color: #f87171 !important;
                    }
                </style>
            </table>
            <div class="scroll-hint">← مرر يميناً ويساراً لرؤية جميع البيانات →</div>
        @else
            <div class="empty">{{ __('general_treasury_report.no_expenses') }}</div>
        @endif
    </div>

    {{-- Net Movement Summary --}}
    <div class="section" style="background: linear-gradient(135deg, #f0f9ff, #e0f2fe);">
        <div class="section-title" style="color: #0c4a6e;">{{ __('general_treasury_report.financial_movement_summary') }}</div>
        <table>
            <tbody>
                <tr>
                    <td style="font-weight: bold; color: #6366f1;">{{ __('general_treasury_report.summary_opening') }}</td>
                    <td class="amount-cell" style="color: #6366f1; font-weight: bold;">{{ number_format($reportData['opening_balance'] ?? 0, 2) }} {{ __('general_treasury_report.currency') }}</td>
                </tr>
                <tr>
                    <td style="font-weight: bold; color: #ef4444;">{{ __('general_treasury_report.summary_expenses') }}</td>
                    <td class="amount-cell" style="color: #ef4444; font-weight: bold;">{{ number_format($reportData['total_expenses'] ?? 0, 2) }} {{ __('general_treasury_report.currency') }}</td>
                </tr>
                <tr style="border-top: 3px solid #0c4a6e; background: rgba(12,74,110,0.1);">
                    <td style="font-weight: 900; font-size: 18px; color: #0c4a6e;">{{ __('general_treasury_report.summary_closing') }}</td>
                    <td class="amount-cell" style="color: #0c4a6e; font-weight: 900; font-size: 18px;">{{ number_format($reportData['closing_balance'] ?? 0, 2) }} {{ __('general_treasury_report.currency') }}</td>
                </tr>
            </tbody>
        </table>
        <div class="scroll-hint">← مرر يميناً ويساراً لرؤية جميع البيانات →</div>
    </div>

    <style>
        .dark #general-treasury-report .section:last-child {
            background: linear-gradient(135deg, #1f2937, #0f172a) !important;
        }
        .dark #general-treasury-report .section:last-child .section-title {
            color: #38bdf8 !important;
        }
        .dark #general-treasury-report .section:last-child td[style*="color: #6366f1"] {
            color: #60a5fa !important;
        }
        .dark #general-treasury-report .section:last-child td[style*="color: #22c55e"] {
            color: #34d399 !important;
        }
        .dark #general-treasury-report .section:last-child td[style*="color: #ef4444"] {
            color: #f87171 !important;
        }
        .dark #general-treasury-report .section:last-child td[style*="color: #0c4a6e"] {
            color: #38bdf8 !important;
        }
        .dark #general-treasury-report .section:last-child tr[style*="border-top"] {
            border-top: 3px solid #38bdf8 !important;
            background: rgba(56, 189, 248, 0.1) !important;
        }
    </style>

    @endif {{-- نهاية شرط عرض التقرير --}}

</div>
</x-filament-panels::page>