@php
    $partners = $allPartners ?? [];
@endphp

<div id="partners-vault-report" dir="rtl" x-data x-on:triggerPrint.window="window.print()">
    <style>
        #partners-vault-report{
            font-family:'Tajawal','Segoe UI',Arial,sans-serif;
            background:linear-gradient(135deg,#eef2ff,#f0f9ff);
            padding:24px;border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.06)
        }

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

        #partners-vault-report .toolbar{display:flex;justify-content:flex-end;margin-bottom:12px}
        #partners-vault-report .btn{
            background:#1e3a8a;color:#fff;border:none;border-radius:10px;padding:8px 12px;font-size:13px;cursor:pointer
        }

        .dark #partners-vault-report .btn{
            background:#1e40af;color:#f1f5f9;
        }

        #partners-vault-report .btn:hover{opacity:.9}
        #partners-vault-report .title{
            font-size:22px;font-weight:800;color:#1e3a8a;text-align:center;margin:0 0 16px
        }

        .dark #partners-vault-report .title{
            color:#38bdf8;
        }

        /* Filters */
        #partners-vault-report .filters{
            display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
            gap:14px;margin-bottom:18px
        }
        #partners-vault-report label{display:block;font-weight:700;color:#1e3a8a;margin:0 0 6px}

        .dark #partners-vault-report label{color:#38bdf8;}

        #partners-vault-report select,
        #partners-vault-report input[type="date"]{
            width:100%;padding:8px 10px;border-radius:10px;border:1px solid #c7d2fe;background:#fff;font-size:14px
        }

        .dark #partners-vault-report select,
        .dark #partners-vault-report input[type="date"]{
            background:#374151;border:1px solid #4b5563;color:#e5e7eb;
        }
        #partners-vault-report .apply-wrap{display:flex;align-items:end}

        /* KPI cards */
        #partners-vault-report .kpis{
            display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
            gap:16px;margin-bottom:18px
        }
        #partners-vault-report .card{
            background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(30,58,138,.08);padding:16px 18px
        }

        .dark #partners-vault-report .card{
            background:#1f2937;box-shadow:0 2px 10px rgba(0,0,0,.25);
        }

        #partners-vault-report .kpi-title{color:#475569;font-size:13px;font-weight:700;margin-bottom:6px}

        .dark #partners-vault-report .kpi-title{color:#9ca3af;}

        #partners-vault-report .kpi-value{font-size:20px;font-weight:900;color:#1e3a8a}

        .dark #partners-vault-report .kpi-value{color:#38bdf8;}

        #partners-vault-report .badge{
            display:inline-block;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:700
        }
        #partners-vault-report .badge-info{background:#e0f2fe;color:#075985}
        #partners-vault-report .badge-success{background:#dcfce7;color:#166534}
        #partners-vault-report .badge-danger{background:#fee2e2;color:#991b1b}

        .dark #partners-vault-report .badge-info{background:#1e3a8a;color:#bfdbfe}
        .dark #partners-vault-report .badge-success{background:#166534;color:#bbf7d0}
        .dark #partners-vault-report .badge-danger{background:#991b1b;color:#fecaca}

        /* Tables */
        #partners-vault-report .split{
            display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px
        }
        @media (max-width: 992px){ #partners-vault-report .split{grid-template-columns:1fr} }

        #partners-vault-report .table-wrap{
            background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(30,58,138,.08);overflow:auto
        }

        .dark #partners-vault-report .table-wrap{
            background:#1f2937;box-shadow:0 2px 10px rgba(0,0,0,.25);
        }

        #partners-vault-report table{width:100%;border-collapse:separate;border-spacing:0}
        #partners-vault-report thead th{
            background:#e0e7ff;color:#1e3a8a;font-size:13px;letter-spacing:.4px;text-transform:uppercase;
            padding:12px 14px;text-align:right;position:sticky;top:0;z-index:1
        }

        .dark #partners-vault-report thead th{
            background:#374151;color:#38bdf8;
        }

        #partners-vault-report tbody td{
            padding:12px 14px;border-top:1px solid #e2e8f0;font-size:14px;color:#0f172a;vertical-align:middle
        }

        .dark #partners-vault-report tbody td{
            border-top:1px solid #4b5563;color:#e5e7eb;
        }

        #partners-vault-report tbody tr:hover{background:#eef2ff}

        .dark #partners-vault-report tbody tr:hover{background:#374151}

        #partners-vault-report .amount{font-weight:800;color:#1e3a8a;white-space:nowrap}

        .dark #partners-vault-report .amount{color:#10b981;}

        #partners-vault-report .empty{padding:14px;text-align:center;color:#64748b;font-style:italic}

        .dark #partners-vault-report .empty{color:#9ca3af;}
    </style>

    <div class="toolbar">
        <button class="btn" type="button" onclick="window.print()">🖨️ {{ __('common.print') ?? 'طباعة' }}</button>
    </div>

    <h2 class="title">{{ __('partners_vault.title') ?? 'تقرير خزنة الشركاء' }}</h2>

    {{-- Filters --}}
    <form wire:submit.prevent="generateReport" class="filters">
        <div>
            <label>{{ __('partners_vault.date_from') }}</label>
            <input type="date" wire:model.lazy="date_from" />
        </div>
        <div>
            <label>{{ __('partners_vault.date_to') }}</label>
            <input type="date" wire:model.lazy="date_to" />
        </div>
        <div>
            <label>{{ __('partners_vault.partner') }}</label>
            <select wire:model.lazy="partner_id">
                <option value="">{{ __('partners_vault.all_partners') }}</option>
                @foreach($partners as $id => $name)
                    <option value="{{ $id }}">{{ $name }}</option>
                @endforeach
            </select>
        </div>
        <div class="apply-wrap">
            <button type="submit" class="btn">{{ __('common.apply') }}</button>
        </div>
    </form>

    {{-- KPIs --}}
    <div class="kpis">
        <div class="card">
            <div class="kpi-title">{{ __('partners_vault.opening_balance') }}</div>
            <div class="kpi-value"><span class="badge badge-info">{{ number_format($opening_balance, 2) }}</span></div>
        </div>
        <div class="card">
            <div class="kpi-title">{{ __('partners_vault.total_deposits') }}</div>
            <div class="kpi-value"><span class="badge badge-success">{{ number_format($total_deposits, 2) }}</span></div>
        </div>
        <div class="card">
            <div class="kpi-title">{{ __('partners_vault.total_withdrawals') }}</div>
            <div class="kpi-value"><span class="badge badge-danger">{{ number_format($total_withdrawals, 2) }}</span></div>
        </div>
        <div class="card">
            <div class="kpi-title">{{ __('partners_vault.closing_balance') }}</div>
            <div class="kpi-value"><span class="badge badge-info">{{ number_format($closing_balance, 2) }}</span></div>
        </div>
    </div>

    {{-- Tables --}}
    <div class="split">
        <div class="table-wrap">
            <div class="card" style="border-radius:14px 14px 0 0;">
                <div class="kpi-title" style="margin:0 0 6px 0">{{ __('partners_vault.deposits') }}</div>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>{{ __('partners_vault.partner_name') ?? 'اسم الشريك' }}</th>
                        <th>{{ __('partners_vault.deposit_date') }}</th>
                        <th>{{ __('partners_vault.amount') }}</th>
                        <th>{{ __('partners_vault.notes') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($deposits as $deposit)
                        <tr>
                            <td><strong style="color: #1e3a8a;">{{ $deposit->partner->name ?? 'غير محدد' }}</strong></td>
                            <td>
                                @if($deposit->deposit_date instanceof \Carbon\Carbon)
                                    {{ $deposit->deposit_date->format('Y-m-d') }}
                                @else
                                    {{ (string) $deposit->deposit_date }}
                                @endif
                            </td>
                            <td class="amount">{{ number_format($deposit->amount, 2) }}</td>
                            <td>{{ $deposit->notes }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="empty">{{ __('common.no_records') }}</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="table-wrap">
            <div class="card" style="border-radius:14px 14px 0 0;">
                <div class="kpi-title" style="margin:0 0 6px 0">{{ __('partners_vault.withdrawals') }}</div>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>{{ __('partners_vault.partner_name') ?? 'اسم الشريك' }}</th>
                        <th>{{ __('partners_vault.withdrawal_date') }}</th>
                        <th>{{ __('partners_vault.amount') }}</th>
                        <th>{{ __('partners_vault.notes') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($withdrawals as $withdrawal)
                        <tr>
                            <td><strong style="color: #1e3a8a;">{{ $withdrawal->partner->name ?? 'غير محدد' }}</strong></td>
                            <td>
                                @if($withdrawal->withdrawal_date instanceof \Carbon\Carbon)
                                    {{ $withdrawal->withdrawal_date->format('Y-m-d') }}
                                @else
                                    {{ (string) $withdrawal->withdrawal_date }}
                                @endif
                            </td>
                            <td class="amount">{{ number_format($withdrawal->amount, 2) }}</td>
                            <td>{{ $withdrawal->notes }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="empty">{{ __('common.no_records') }}</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>