{{-- resources/views/filament/pages/general-treasury-report.blade.php --}}
<x-filament-panels::page>
    {{-- Bootstrap CSS --}}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    
    <style>
        /* تحسين تصميم الفلاتر - كلهم في سطر واحد */
        .filters-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }
        
        .filters-card .card-body {
            padding: 2rem;
        }
        
        .filters-title {
            color: white;
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        /* جعل الفورم في سطر واحد مع توزيع متساوي */
        .filters-form {
            display: flex !important;
            flex-wrap: nowrap !important;
            gap: 1rem !important;
            align-items: flex-end !important;
        }
        
        .filters-form > div {
            display: flex !important;
            flex-wrap: nowrap !important;
            gap: 1rem !important;
            align-items: flex-end !important;
            flex: 1 1 auto !important;
        }
        
        .filters-form [data-field-wrapper] {
            background: white;
            border-radius: 10px;
            padding: 0.5rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            flex: 1 !important;
            margin-bottom: 0 !important;
        }
        
        .filters-form [data-field-wrapper] label {
            font-weight: 600;
            color: #4a5568;
            margin-bottom: 0.5rem;
        }
        
        .search-btn {
            background: white !important;
            color: #667eea !important;
            font-weight: 600 !important;
            padding: 0.75rem 1.5rem !important;
            border-radius: 10px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
            border: none !important;
            transition: all 0.3s ease !important;
            height: fit-content !important;
            align-self: flex-end !important;
            white-space: nowrap !important;
            flex: 0 0 auto !important;
        }
        
        .search-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
        }
        
        /* قواعد الطباعة */
        @media print {
            /* إخفاء العناصر غير المطبوعة */
            .no-print { display: none !important; }
            
            /* إخفاء الشريط الجانبي والـ navigation الخاص بـ Filament */
            aside,
            nav,
            .fi-sidebar,
            .fi-topbar,
            .fi-sidebar-nav,
            [data-sidebar],
            header,
            .fi-header,
            .fi-main-banner,
            .fi-global-search,
            .fi-notification-trigger,
            .fi-user-menu,
            .fi-breadcrumbs {
                display: none !important;
            }
            
            /* إزالة الخلفية الرمادية */
            body {
                background: white !important;
                background-color: white !important;
            }
            
            /* جعل المحتوى يأخذ العرض الكامل */
            main,
            .fi-main,
            .fi-page,
            .container-fluid {
                margin: 0 !important;
                padding: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                background: white !important;
            }
            
            /* تحسين الجداول للطباعة */
            .table {
                page-break-inside: auto;
            }
            
            .table tr {
                page-break-inside: avoid;
                page-break-after: auto;
            }
            
            /* إزالة الظلال والحواف الملونة */
            .card,
            .card-body {
                box-shadow: none !important;
                border: 1px solid #ddd !important;
            }
        }
        
        @media (max-width: 992px) {
            .filters-form {
                flex-wrap: wrap !important;
            }
            .filters-form [data-field-wrapper] {
                flex: 1 1 200px !important;
            }
        }
        
        @media (max-width: 768px) {
            .filters-form,
            .filters-form > div {
                flex-direction: column !important;
                flex-wrap: wrap !important;
            }
            .search-btn {
                width: 100% !important;
            }
            .filters-form [data-field-wrapper] {
                width: 100% !important;
                max-width: 100% !important;
                flex: 1 1 100% !important;
            }
        }
    </style>
    
    {{-- بطاقة الفلاتر المحسّنة --}}
    <div class="card filters-card mb-4 no-print">
        <div class="card-body">
            <div class="filters-title">
                <i class="bi bi-funnel-fill"></i>
                خيارات البحث والتصفية
            </div>
            
            <form wire:submit.prevent="generateReport" class="filters-form" style="display: flex; flex-wrap: nowrap; gap: 1rem; align-items: flex-end;">
                {{ $this->form }}
                
                <button type="submit" class="search-btn">
                    <i class="bi bi-search me-2"></i>
                    عرض التقرير
                </button>
            </form>
        </div>
    </div>

    @if(empty($reportData) || !isset($reportData['date_from']))
        {{-- رسالة عند عدم وجود بيانات --}}
        <div class="card shadow-sm">
            <div class="card-body text-center py-5">
                <i class="bi bi-file-earmark-text text-muted" style="font-size: 4rem;"></i>
                <h4 class="mt-3">لا توجد بيانات لعرضها</h4>
                <p class="text-muted">اختر الخزينة والفترة الزمنية ثم اضغط على زر "عرض التقرير"</p>
            </div>
        </div>
    @else
        {{-- محتوى التقرير --}}
        <div class="container-fluid px-0">
            {{-- رأس التقرير --}}
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="mb-0">
                            <i class="bi bi-wallet2 me-2"></i>
                            {{ __('general_treasury_report.page_title') }}
                        </h3>
                        <div class="no-print">
                            <button type="button" wire:click="exportPDF" wire:loading.attr="disabled" class="btn btn-danger btn-sm me-2">
                                <span wire:loading.remove wire:target="exportPDF">
                                    <i class="bi bi-file-earmark-pdf me-1"></i>
                                    تصدير PDF
                                </span>
                                <span wire:loading wire:target="exportPDF">
                                    <span class="spinner-border spinner-border-sm me-1"></span>
                                    جاري التصدير...
                                </span>
                            </button>
                            <button type="button" class="btn btn-light btn-sm" onclick="window.print()">
                                <i class="bi bi-printer me-1"></i>
                                طباعة
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body bg-light">
                    <div class="row">
                        <div class="col-md-4">
                            <strong><i class="bi bi-building me-2"></i>الخزينة:</strong>
                            @if(isset($vault_id) && $vault_id)
                                {{ \App\Models\Vault::find($vault_id)?->name ?? '' }}
                            @else
                                جميع الخزائن
                            @endif
                        </div>
                        <div class="col-md-4">
                            <strong><i class="bi bi-funnel me-2"></i>نوع الحركات:</strong>
                            @if(isset($reportData['transaction_type']))
                                @if($reportData['transaction_type'] === 'installments')
                                    <span class="badge bg-info">أقساط فقط</span>
                                @elseif($reportData['transaction_type'] === 'sales_purchases')
                                    <span class="badge bg-warning">مبيعات ومشتريات فقط</span>
                                @else
                                    <span class="badge bg-primary">جميع الحركات</span>
                                @endif
                            @else
                                <span class="badge bg-primary">جميع الحركات</span>
                            @endif
                        </div>
                        <div class="col-md-4 text-end">
                            <strong><i class="bi bi-calendar-range me-2"></i>الفترة:</strong>
                            {{ __('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>
                    </div>
                </div>
            </div>

            {{-- ملخص الحركة المالية --}}
            <div class="row g-3 mb-4">
                <div class="col-md-6 col-lg-3">
                    <div class="card shadow-sm border-start border-primary border-4 h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-muted mb-1">
                                        <i class="bi bi-arrow-down-circle text-primary me-1"></i>
                                        {{ __('general_treasury_report.opening_balance') }}
                                    </h6>
                                    <h3 class="mb-0 fw-bold text-primary">
                                        {{ number_format($reportData['opening_balance'] ?? 0, 2) }}
                                    </h3>
                                    <small class="text-muted">{{ __('general_treasury_report.currency') }}</small>
                                </div>
                                <i class="bi bi-coin text-primary opacity-25" style="font-size: 3rem;"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="card shadow-sm border-start border-success border-4 h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-muted mb-1">
                                        <i class="bi bi-arrow-up-circle text-success me-1"></i>
                                        {{ __('general_treasury_report.total_revenues') }}
                                    </h6>
                                    <h3 class="mb-0 fw-bold text-success">
                                        {{ number_format($reportData['total_revenues'] ?? 0, 2) }}
                                    </h3>
                                    <small class="text-muted">{{ __('general_treasury_report.currency') }}</small>
                                </div>
                                <i class="bi bi-graph-up-arrow text-success opacity-25" style="font-size: 3rem;"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="card shadow-sm border-start border-danger border-4 h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-muted mb-1">
                                        <i class="bi bi-arrow-down-circle text-danger me-1"></i>
                                        {{ __('general_treasury_report.total_expenses') }}
                                    </h6>
                                    <h3 class="mb-0 fw-bold text-danger">
                                        {{ number_format($reportData['total_expenses'] ?? 0, 2) }}
                                    </h3>
                                    <small class="text-muted">{{ __('general_treasury_report.currency') }}</small>
                                </div>
                                <i class="bi bi-graph-down-arrow text-danger opacity-25" style="font-size: 3rem;"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="card shadow-sm border-start border-warning border-4 h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-muted mb-1">
                                        <i class="bi bi-wallet2 text-warning me-1"></i>
                                        {{ __('general_treasury_report.closing_balance') }}
                                    </h6>
                                    <h3 class="mb-0 fw-bold text-warning">
                                        {{ number_format($reportData['closing_balance'] ?? 0, 2) }}
                                    </h3>
                                    <small class="text-muted">{{ __('general_treasury_report.currency') }}</small>
                                </div>
                                <i class="bi bi-cash-coin text-warning opacity-25" style="font-size: 3rem;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ملخص تفصيلي حسب نوع الحركات --}}
            <div class="row g-3 mb-4">
                {{-- الإيرادات حسب النوع --}}
                <div class="col-md-6">
                    <div class="card shadow-sm h-100">
                        <div class="card-header bg-success text-white">
                            <h6 class="mb-0">
                                <i class="bi bi-arrow-up-circle me-2"></i>
                                تفصيل الإيرادات
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                                <span><i class="bi bi-cash-stack text-info me-2"></i>أقساط مسددة</span>
                                <strong class="text-info">{{ number_format($reportData['installments_revenue'] ?? 0, 2) }} جنيه</strong>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                                <span><i class="bi bi-receipt text-success me-2"></i>مبيعات نقدية</span>
                                <strong class="text-success">{{ number_format($reportData['sales_revenue'] ?? 0, 2) }} جنيه</strong>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                                <span><i class="bi bi-wallet text-primary me-2"></i>دفعات عملاء أخرى</span>
                                <strong class="text-primary">{{ number_format($reportData['payments_revenue'] ?? 0, 2) }} جنيه</strong>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                                <span><i class="bi bi-people text-secondary me-2"></i>إيداعات شركاء</span>
                                <strong class="text-secondary">{{ number_format($reportData['deposits_revenue'] ?? 0, 2) }} جنيه</strong>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                                <span><i class="bi bi-file-earmark-text text-warning me-2"></i>مقدم العقود</span>
                                <strong class="text-warning">{{ number_format($reportData['contract_advance_revenue'] ?? 0, 2) }} جنيه</strong>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mt-3 pt-2 border-top">
                                <strong><i class="bi bi-calculator me-2"></i>إجمالي الإيرادات</strong>
                                <strong class="text-success fs-5">{{ number_format($reportData['total_revenues'] ?? 0, 2) }} جنيه</strong>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- المصروفات حسب النوع --}}
                <div class="col-md-6">
                    <div class="card shadow-sm h-100">
                        <div class="card-header bg-danger text-white">
                            <h6 class="mb-0">
                                <i class="bi bi-arrow-down-circle me-2"></i>
                                تفصيل المصروفات
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                                <span><i class="bi bi-cart text-warning me-2"></i>فواتير شراء</span>
                                <strong class="text-warning">{{ number_format($reportData['purchases_expenses'] ?? 0, 2) }} جنيه</strong>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                                <span><i class="bi bi-receipt-cutoff text-danger me-2"></i>مصروفات عامة</span>
                                <strong class="text-danger">{{ number_format($reportData['general_expenses'] ?? 0, 2) }} جنيه</strong>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mt-3 pt-2 border-top">
                                <strong><i class="bi bi-calculator me-2"></i>إجمالي المصروفات</strong>
                                <strong class="text-danger fs-5">{{ number_format($reportData['total_expenses'] ?? 0, 2) }} جنيه</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- تفاصيل الإيرادات --}}
            @if(isset($reportData['revenues']) && count($reportData['revenues']) > 0)
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-arrow-up-circle me-2"></i>
                        {{ __('general_treasury_report.revenues_details') }}
                    </h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover table-striped mb-0">
                            <thead class="table-success">
                                <tr>
                                    <th><i class="bi bi-calendar3 me-1"></i>{{ __('general_treasury_report.date') }}</th>
                                    <th><i class="bi bi-tag me-1"></i>{{ __('general_treasury_report.type') }}</th>
                                    <th><i class="bi bi-info-circle me-1"></i>{{ __('general_treasury_report.description') }}</th>
                                    <th><i class="bi bi-hash me-1"></i>{{ __('general_treasury_report.reference') }}</th>
                                    <th class="text-end"><i class="bi bi-cash me-1"></i>{{ __('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="badge bg-success">{{ $revenue['type_label'] }}</span></td>
                                    <td>{{ $revenue['description'] }}</td>
                                    <td>{{ $revenue['reference'] }}</td>
                                    <td class="text-end fw-bold text-success">
                                        {{ number_format($revenue['amount'], 2) }}
                                        {{ __('general_treasury_report.currency') }}
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                            <tfoot class="table-success">
                                <tr class="fw-bold">
                                    <td colspan="4" class="text-end">
                                        <i class="bi bi-calculator me-2"></i>
                                        {{ __('general_treasury_report.total_revenues_label') }}
                                    </td>
                                    <td class="text-end fs-5">
                                        {{ number_format($reportData['total_revenues'], 2) }}
                                        {{ __('general_treasury_report.currency') }}
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
            @endif

            {{-- تفاصيل المصروفات --}}
            @if(isset($reportData['expenses']) && count($reportData['expenses']) > 0)
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-arrow-down-circle me-2"></i>
                        {{ __('general_treasury_report.expenses_details') }}
                    </h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover table-striped mb-0">
                            <thead class="table-danger">
                                <tr>
                                    <th><i class="bi bi-calendar3 me-1"></i>{{ __('general_treasury_report.date') }}</th>
                                    <th><i class="bi bi-tag me-1"></i>{{ __('general_treasury_report.type') }}</th>
                                    <th><i class="bi bi-info-circle me-1"></i>{{ __('general_treasury_report.description') }}</th>
                                    <th><i class="bi bi-hash me-1"></i>{{ __('general_treasury_report.reference') }}</th>
                                    <th class="text-end"><i class="bi bi-cash me-1"></i>{{ __('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="badge bg-danger">{{ $expense['type_label'] }}</span></td>
                                    <td>{{ $expense['description'] }}</td>
                                    <td>{{ $expense['reference'] }}</td>
                                    <td class="text-end fw-bold text-danger">
                                        {{ number_format($expense['amount'], 2) }}
                                        {{ __('general_treasury_report.currency') }}
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                            <tfoot class="table-danger">
                                <tr class="fw-bold">
                                    <td colspan="4" class="text-end">
                                        <i class="bi bi-calculator me-2"></i>
                                        {{ __('general_treasury_report.total_expenses_label') }}
                                    </td>
                                    <td class="text-end fs-5">
                                        {{ number_format($reportData['total_expenses'], 2) }}
                                        {{ __('general_treasury_report.currency') }}
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
            @endif

        </div>
    @endif

    {{-- Bootstrap JS --}}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    {{-- PDF Download Handler --}}
    <script>
        document.addEventListener('livewire:initialized', () => {
            Livewire.on('open-pdf-download', (event) => {
                // Open PDF in new window to trigger download
                window.open(event.url, '_blank');
            });
        });
    </script>
</x-filament-panels::page>