@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    @php
        $money = function ($value, bool $dashZero = false) {
            $value = round((float) $value, 2);

            if (abs($value) < 0.00001) {
                return $dashZero ? '-' : '0.00';
            }

            if ($value < 0) {
                return number_format(abs($value), 2) . '-';
            }

            return number_format($value, 2);
        };

        $amountClass = function ($value) {
            $value = round((float) $value, 2);

            if ($value > 0.00001) {
                return 'fr-money--positive';
            }

            if ($value < -0.00001) {
                return 'fr-money--negative';
            }

            return 'fr-money--muted';
        };

        $tabs = [
            'balance_sheet' => ['label' => 'Balance Sheet', 'icon' => 'ri:scale-3-line'],
            'profit_loss' => ['label' => 'Profit & Loss', 'icon' => 'ri:line-chart-line'],
            'cash_flow' => ['label' => 'Cash Position', 'icon' => 'ri:money-dollar-circle-line'],
            'trial_balance' => ['label' => 'Trial Balance', 'icon' => 'ri:balance-line'],
            'combined_report' => ['label' => 'Combined Report', 'icon' => 'ri:dashboard-line'],
            // 'financial_indicators' => ['label' => 'Financial Indicators', 'icon' => 'ri:funds-line', 'route' => 'financial_indicators.index'],
            'custom_statement' => ['label' => 'Custom Statement', 'icon' => 'ri:edit-2-line'],
        ];

        $queryFor = function ($report) {
            $query = request()->query();
            unset($query['page']);

            return array_filter([
                ...$query,
                'report' => $report,
            ], fn($value) => $value !== null && $value !== '');
        };

        $queryWithoutReport = array_filter(
            request()->except(['report', 'page']),
            fn($value) => $value !== null && $value !== ''
        );
    @endphp

    <div class="container-fluid app-bg financial-reports-page">
        <div class="page-shell">
            <div class="space-y-4">
                <x-page-title title="Financial Reports"
                    description="Balance sheet, profit and loss, cash position, and trial balance from posted financial records.">
                </x-page-title>

                <div class="fr-toolbar">
                    <div class="fr-tabs">
                        @foreach($tabs as $key => $tab)
                            <a href="{{ isset($tab['route']) ? route($tab['route'], $queryWithoutReport) : route('financial_reports.index', $queryFor($key)) }}"
                                class="fr-tab {{ $activeReport === $key ? 'is-active' : '' }}">
                                <iconify-icon icon="{{ $tab['icon'] }}"></iconify-icon>
                                <span>{{ $tab['label'] }}</span>
                            </a>
                        @endforeach
                    </div>

                    <form method="GET" action="{{ route('financial_reports.index') }}" class="fr-filters"
                        id="financial-report-filters">
                        <input type="hidden" name="report" value="{{ $activeReport }}">
                        <input type="hidden" name="posted_only" value="{{ $filters['posted_only'] ? 1 : 0 }}">

                        <div class="fr-filter-head">
                            <div class="fr-filter-title">
                                <iconify-icon icon="ri:filter-3-line"></iconify-icon>
                                <span>Filters</span>
                            </div>

                            <div class="fr-filter-actions">
                                <button type="submit" class="btn btn-sm btn-primary fr-action">
                                    <iconify-icon icon="ri:refresh-line"></iconify-icon>
                                    Apply
                                </button>

                                <a href="{{ route('financial_reports.index', ['report' => $activeReport]) }}"
                                    class="btn btn-sm btn-light fr-action fr-clear-action">
                                    <iconify-icon icon="ri:close-circle-line"></iconify-icon>
                                    Clear
                                </a>

                                <button type="submit" name="export" value="excel"
                                    class="btn btn-sm btn-light fr-action fr-export-action">
                                    <iconify-icon icon="ri:file-excel-2-line"></iconify-icon>
                                    Export
                                </button>
                            </div>
                        </div>

                        <div class="fr-filter-fields">
                            <label class="fr-filter-control">
                                <span>From</span>
                                <input type="date" name="from_date" value="{{ $filters['from_date'] }}"
                                    class="form-control form-control-sm">
                            </label>

                            <label class="fr-filter-control">
                                <span>To</span>
                                <input type="date" name="to_date" value="{{ $filters['to_date'] }}"
                                    class="form-control form-control-sm">
                            </label>
                            <label class="fr-filter-control fr-filter-control--wide">
                                <span>Cost Center</span>
                                <select name="cost_center_id" class="form-select form-select-sm">
                                    <option value="">All Cost Centers</option>
                                    @foreach($costCenters as $costCenter)
                                    <option value="{{ $costCenter->id }}" @selected((string) ($filters['cost_center_id']
                                        ?? '' )===(string) $costCenter->id)>
                                        {{ $costCenter->code ? $costCenter->code . ' - ' : '' }}{{ $costCenter->title }}
                                    </option>
                                    @endforeach
                                </select>
                            </label>
                        </div>
                    </form>
                </div>

                @if($activeReport === 'balance_sheet')
                    <div class="fr-balance-meta">
                        <span
                            class="{{ $balanceSheet['isBalanced'] ? 'fr-balance-status' : 'fr-balance-status fr-balance-status--danger' }}">
                            <iconify-icon
                                icon="{{ $balanceSheet['isBalanced'] ? 'ri:check-line' : 'ri:error-warning-line' }}"></iconify-icon>
                            {{ $balanceSheet['isBalanced'] ? 'Assets = Liabilities + Equity' : 'Difference ' . $money($balanceSheet['difference']) }}
                        </span>
                        <div>
                            <div class="mt-3">Balance Sheet</div>
                            <p>Click any account to view movements.</p>
                        </div>
                    </div>

                    <div class="fr-balance-grid">
                        <div class="fr-stack">
                            <div class="fr-report-panel">
                                @include('dashboard.financial_reports.partials.balance-section', [
                                    'sectionKey' => 'liability',
                                    'section' => $balanceSheet['sections']['liability'],
                                    'money' => $money,
                                    'amountClass' => $amountClass,
                                ])
                            </div>

                            <div class="fr-report-panel">
                                @include('dashboard.financial_reports.partials.balance-section', [
                                    'sectionKey' => 'equity',
                                    'section' => $balanceSheet['sections']['equity'],
                                    'money' => $money,
                                    'amountClass' => $amountClass,
                                ])
                            </div>
                        </div>

                        <div class="fr-report-panel">
                            @include('dashboard.financial_reports.partials.balance-section', [
                                'sectionKey' => 'asset',
                                'section' => $balanceSheet['sections']['asset'],
                                'money' => $money,
                                'amountClass' => $amountClass,
                            ])
                        </div>
                    </div>

                    <div class="fr-total-grid mt-3">
                        <div class="fr-total-strip fr-total-strip--green fr-drill-card" role="button" tabindex="0"
                            data-card="balance_assets" data-title="Total Assets" data-expected="{{ $balanceSheet['assetsTotal'] }}">
                            <span>Total Assets</span>
                            <strong>{{ $money($balanceSheet['assetsTotal']) }}</strong>
                        </div>
                        <div class="fr-total-strip fr-total-strip--navy fr-drill-card" role="button" tabindex="0"
                            data-card="balance_liabilities_equity" data-title="Total Liabilities + Equity" data-expected="{{ $balanceSheet['liabilityAndEquityTotal'] }}">
                            <span>Total Liabilities + Equity</span>
                            <strong>{{ $money($balanceSheet['liabilityAndEquityTotal']) }}</strong>
                        </div>
                        <div
                            class="fr-total-strip {{ ($balanceSheet['periodResult'] ?? 0) >= 0 ? 'fr-total-strip--green' : 'fr-total-strip--red' }} fr-drill-card"
                            role="button" tabindex="0" data-card="balance_net_profit"
                            data-title="{{ ($balanceSheet['periodResult'] ?? 0) >= 0 ? 'Net Profit' : 'Net Loss' }}"
                            data-expected="{{ $balanceSheet['periodResult'] ?? 0 }}">
                            <span>{{ ($balanceSheet['periodResult'] ?? 0) >= 0 ? 'Net Profit' : 'Net Loss' }}</span>
                            <strong>{{ $money(abs($balanceSheet['periodResult'] ?? 0)) }}</strong>
                        </div>
                    </div>
                @elseif($activeReport === 'profit_loss')
                    <div class="fr-pl-shell">
                        <div class="fr-balance-meta fr-pl-meta">
                            <span></span>
                            <div>
                                <div class="mt-3">Profit & Loss</div>
                                <p>{{ $filters['from_date'] }} - {{ $filters['to_date'] }}. Click any account to view movements.
                                </p>
                            </div>
                        </div>

                        <div>
                            <div class="">
                                @include('dashboard.financial_reports.partials.profit-loss-section', [
                                    'sectionKey' => 'pl-income',
                                    'title' => 'Revenue',
                                    'rows' => $profitLoss['incomeRows'],
                                    'total' => $profitLoss['totalIncome'],
                                    'sign' => 1,
                                    'amountLabel' => 'Revenue',
                                    'emptyText' => 'No revenue accounts found.',
                                    'money' => $money,
                                    'amountClass' => $amountClass,
                                ])

                            </div>

                            <div class="mt-3">
                                @include('dashboard.financial_reports.partials.profit-loss-section', [
                                    'sectionKey' => 'pl-expense',
                                    'title' => 'Expenses',
                                    'rows' => $profitLoss['expenseRows'],
                                    'total' => $profitLoss['totalExpense'],
                                    'sign' => -1,
                                    'amountLabel' => 'Expense',
                                    'emptyText' => 'No expense accounts found.',
                                    'money' => $money,
                                    'amountClass' => $amountClass,
                                ])
                            </div>

                            <div
                                class="mt-3 fr-net-strip {{ $profitLoss['netIncome'] >= 0 ? 'fr-net-strip--profit' : 'fr-net-strip--loss' }} fr-drill-card"
                                role="button" tabindex="0" data-card="profit_loss_net"
                                data-title="{{ $profitLoss['netIncome'] >= 0 ? 'Net Profit' : 'Net Loss' }}"
                                data-expected="{{ $profitLoss['netIncome'] }}">
                                <span>{{ $profitLoss['netIncome'] >= 0 ? 'Net Profit' : 'Net Loss' }}</span>
                                <strong>{{ $money(abs($profitLoss['netIncome'])) }}</strong>
                            </div>
                        </div>
                    </div>
                @elseif($activeReport === 'cash_flow')
                    <div class="fr-pl-shell">
                        <div class="fr-balance-meta fr-pl-meta mt-3">
                            <span></span>
                            <div>
                                <div>Cash Position</div>
                                <p>Cash activity during {{ $filters['from_date'] }} - {{ $filters['to_date'] }}.</p>
                            </div>
                        </div>

                        <div class="fr-cash-summary-grid">
                            <div class="fr-summary fr-summary--navy fr-drill-card" role="button" tabindex="0"
                                data-card="cash_beginning" data-title="Beginning Cash" data-expected="{{ $cashFlow['beginningCash'] }}">
                                <span>Beginning Cash</span>
                                <strong>{{ $money($cashFlow['beginningCash']) }}</strong>
                            </div>
                            <div class="fr-summary {{ $cashFlow['netChange'] >= 0 ? 'fr-summary--green' : 'fr-summary--red' }} fr-drill-card"
                                role="button" tabindex="0" data-card="cash_net_change" data-title="Net Change"
                                data-expected="{{ $cashFlow['netChange'] }}">
                                <span>Net Change</span>
                                <strong>{{ $money($cashFlow['netChange']) }}</strong>
                            </div>
                            <div class="fr-summary fr-summary--navy fr-drill-card" role="button" tabindex="0"
                                data-card="cash_ending" data-title="Ending Cash" data-expected="{{ $cashFlow['endingCash'] }}">
                                <span>Ending Cash</span>
                                <strong>{{ $money($cashFlow['endingCash']) }}</strong>
                            </div>
                            <div class="fr-summary fr-drill-card" role="button" tabindex="0"
                                data-card="cash_accounts" data-title="Cash Accounts" data-expected="{{ $cashFlow['cashAccountsCount'] }}"
                                data-is-count="1">
                                <span>Cash Accounts</span>
                                <strong>{{ $cashFlow['cashAccountsCount'] }}</strong>
                            </div>
                        </div>

                        <div class="fr-report-panel">
                            <div class="fr-section-head">
                                <div>
                                    <div>Operating Activities</div>
                                    <p>{{ $cashFlow['operatingRows']->count() }} movement(s)</p>
                                </div>
                                <div class="fr-section-total {{ $amountClass($cashFlow['operatingTotal']) }}">
                                    {{ $money($cashFlow['operatingTotal']) }}
                                </div>
                            </div>

                            <div class="fr-table-wrap">
                                <table class="fr-table fr-cash-table">
                                    <thead>
                                        <tr>
                                            <th>Movement</th>
                                            <th class="text-end">Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($cashFlow['operatingRows'] as $row)
                                            @php
                                                $rowKey = 'cash-' . $row['payment_id'];
                                            @endphp
                                            <tr class="fr-pl-account-row">
                                                <td>
                                                    <div class="fr-account">
                                                        <button type="button" class="fr-toggle" data-target-id="{{ $rowKey }}">
                                                            <iconify-icon icon="ri:arrow-right-s-line"></iconify-icon>
                                                        </button>
                                                        <span>{{ $row['description'] }}</span>
                                                        <span class="fr-code">{{ $row['reference'] }}</span>
                                                    </div>
                                                </td>
                                                <td class="text-end fr-money {{ $amountClass($row['amount']) }}">
                                                    {{ $row['amount'] >= 0 ? '+' : '' }}{{ $money($row['amount']) }}
                                                </td>
                                            </tr>
                                            <tr class="fr-detail-row d-none" data-detail-for="{{ $rowKey }}">
                                                <td colspan="2">
                                                    <div class="fr-detail-box">
                                                        <div class="fr-detail-title">Payment details</div>
                                                        <div class="fr-detail-table-wrap">
                                                            <table class="fr-detail-table">
                                                                <thead>
                                                                    <tr>
                                                                        <th>Date</th>
                                                                        <th>Payment</th>
                                                                        <th>Method</th>
                                                                        <th>Direction</th>
                                                                        <th>Cost Center</th>
                                                                        <th class="text-end">Amount</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td>{{ optional($row['date'])->format('Y-m-d') ?: '-' }}
                                                                        </td>
                                                                        <td>
                                                                            <a href="{{ route('payments.show', $row['payment_id']) }}"
                                                                                class="fr-entry-link">
                                                                                {{ $row['reference'] }}
                                                                            </a>
                                                                        </td>
                                                                        <td>{{ $row['payment_method'] }}</td>
                                                                        <td>{{ $row['direction'] }}</td>
                                                                        <td>
                                                                            @if($row['cost_center'])
                                                                                <span
                                                                                    class="fr-cost-center">{{ $row['cost_center']->title }}</span>
                                                                            @else
                                                                                <span class="fr-muted">-</span>
                                                                            @endif
                                                                        </td>
                                                                        <td
                                                                            class="text-end fr-money {{ $amountClass($row['amount']) }}">
                                                                            {{ $row['amount'] >= 0 ? '+' : '' }}{{ $money($row['amount']) }}
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="2" class="text-center text-muted py-3">No cash movements found.</td>
                                            </tr>
                                        @endforelse
                                        <tr class="fr-section-total-row">
                                            <td>Net Cash From Operating Activities</td>
                                            <td class="text-end fr-money {{ $amountClass($cashFlow['operatingTotal']) }}">
                                                {{ $money($cashFlow['operatingTotal']) }}</td>
                                        </tr>
                                        <tr class="fr-total-row">
                                            <td>Ending Cash</td>
                                            <td class="text-end">{{ $money($cashFlow['endingCash']) }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                @elseif($activeReport === 'combined_report')
                        <div class="fr-balance-meta mt-3">
                            <span></span>
                            <div>
                                <div>Combined Financial Report</div>
                                <p>Activity from {{ $filters['from_date'] }} to {{ $filters['to_date'] }}.</p>
                            </div>
                        </div>

                        <div class="fr-combined-kpis my-3">
                            <div class="fr-summary fr-summary--green fr-drill-card" role="button" tabindex="0"
                                data-card="combined_assets" data-title="Total Assets" data-expected="{{ $combinedReport['totalAssets'] }}">
                                <span>Total Assets</span>
                                <strong>{{ $money($combinedReport['totalAssets']) }}</strong>
                            </div>
                            <div class="fr-summary fr-summary--red fr-drill-card" role="button" tabindex="0"
                                data-card="combined_liabilities" data-title="Total Liabilities" data-expected="{{ $combinedReport['totalLiabilities'] }}">
                                <span>Total Liabilities</span>
                                <strong>{{ $money($combinedReport['totalLiabilities']) }}</strong>
                            </div>
                            <div class="fr-summary fr-summary--navy fr-drill-card" role="button" tabindex="0"
                                data-card="combined_equity" data-title="Equity" data-expected="{{ $combinedReport['totalEquity'] }}">
                                <span>Equity</span>
                                <strong>{{ $money($combinedReport['totalEquity']) }}</strong>
                            </div>
                            <div
                                class="fr-summary {{ $combinedReport['netResult'] >= 0 ? 'fr-summary--green' : 'fr-summary--red' }} fr-drill-card"
                                role="button" tabindex="0" data-card="combined_period_result"
                                data-title="Period Result" data-expected="{{ $combinedReport['netResult'] }}">
                                <span>Period Result</span>
                                <strong>{{ $money($combinedReport['netResult']) }}</strong>
                            </div>
                        </div>

                        <div class="fr-combined-grid mb-3">
                            <div class="fr-report-panel">
                                <div class="fr-section-head">
                                    <div>
                                        <div>Period Activity</div>
                                        <p>Revenue, expenses, and net result during the selected period.</p>
                                    </div>
                                </div>
                                <table class="fr-mini-table">
                                    <tbody>
                                        <tr>
                                            <td>Revenue</td>
                                            <td class="text-end fr-money fr-money--positive">
                                                {{ $money($combinedReport['totalRevenue']) }}</td>
                                        </tr>
                                        <tr>
                                            <td>Expenses</td>
                                            <td class="text-end fr-money fr-money--negative">
                                                ({{ $money($combinedReport['totalExpenses']) }})</td>
                                        </tr>
                                        <tr class="fr-mini-total">
                                            <td>{{ $combinedReport['netResult'] >= 0 ? 'Net Profit' : 'Net Loss' }}</td>
                                            <td class="text-end fr-money {{ $amountClass($combinedReport['netResult']) }}">
                                                {{ $money($combinedReport['netResult']) }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="fr-report-panel">
                                <div class="fr-section-head">
                                    <div>
                                        <div>Financial Position</div>
                                        <p>Totals from the balance sheet.</p>
                                    </div>
                                </div>
                                <table class="fr-mini-table">
                                    <tbody>
                                        <tr>
                                            <td>Total Assets</td>
                                            <td class="text-end fr-money fr-money--positive">
                                                {{ $money($combinedReport['totalAssets']) }}</td>
                                        </tr>
                                        <tr>
                                            <td>Total Liabilities</td>
                                            <td class="text-end fr-money fr-money--negative">
                                                {{ $money($combinedReport['totalLiabilities']) }}</td>
                                        </tr>
                                        <tr>
                                            <td>Equity</td>
                                            <td class="text-end fr-money fr-money--navy">
                                                {{ $money($combinedReport['totalEquity']) }}</td>
                                        </tr>
                                        <tr class="fr-mini-total">
                                            <td>Net Assets</td>
                                            <td class="text-end fr-money">{{ $money($combinedReport['netAssets']) }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="fr-combined-grid">
                            @forelse($combinedReport['entityRows'] as $entityRow)
                                <div class="fr-report-panel">
                                    <div class="fr-entity-head">
                                        <strong>{{ $entityRow['title'] }}</strong>
                                        <span>{{ $entityRow['code'] }}</span>
                                    </div>
                                    <table class="fr-mini-table">
                                        <tbody>
                                            @forelse(collect($entityRow['movements'] ?? [])->take(3) as $movement)
                                                <tr>
                                                    <td>
                                                        <div class="fr-line-title">{{ $movement['description'] }}</div>
                                                        <span class="fr-muted">{{ $movement['entry_reference'] }}</span>
                                                    </td>
                                                    <td
                                                        class="text-end fr-money {{ $amountClass(($movement['debit'] ?? 0) - ($movement['credit'] ?? 0)) }}">
                                                        {{ $money(($movement['debit'] ?? 0) - ($movement['credit'] ?? 0)) }}
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td class="fr-muted">No movements</td>
                                                    <td class="text-end fr-money">{{ $money($entityRow['amount']) }}</td>
                                                </tr>
                                            @endforelse
                                            <tr class="fr-mini-total">
                                                <td>Total</td>
                                                <td class="text-end fr-money {{ $amountClass($entityRow['amount']) }}">
                                                    {{ $money($entityRow['amount']) }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            @empty
                                <div class="fr-report-panel">
                                    <div class="fr-empty-state">
                                        <iconify-icon icon="ri:file-list-3-line"></iconify-icon>
                                        <div>No entity balances found.</div>
                                        <p>Try changing filters or date range.</p>
                                    </div>
                                </div>
                            @endforelse
                        </div>

                        <div class="fr-report-panel mt-3">
                            <div class="fr-section-head">
                                <div>
                                    <div>Cost Center Result</div>
                                    <p>Revenue, direct cost, and result by cost center.</p>
                                </div>
                            </div>
                            <div class="fr-table-wrap">
                                <x-table :headers="[
                        'Cost Center',
                        'Revenue',
                        'Direct Cost',
                        'Result'
                    ]">
                                    @forelse($combinedReport['costCenterRows'] as $row)
                                        @php
                                            $detailKey = 'combined-cc-' . $row['cost_center_id'];
                                            $details = ($combinedReport['costCenterDetails'] ?? collect())->get($row['cost_center_id'], ['accounts' => collect(), 'movements' => collect()]);
                                            $movements = collect($details['movements'] ?? []);
                                            $revenue = (float) $row['revenue'];
                                            $directCost = (float) $row['direct_cost'];
                                            $result = (float) $row['result'];
                                        @endphp
                                        <tr>
                                            <td>
                                                <div class="fr-account">
                                                    <button type="button" class="fr-toggle" data-target-id="{{ $detailKey }}"
                                                        title="Show movements">
                                                        <iconify-icon icon="ri:arrow-right-s-line"></iconify-icon>
                                                    </button>
                                                    <span>{{ $row['cost_center_title'] }}</span>
                                                    <span class="fr-code">{{ $row['cost_center_code'] ?: '-' }}</span>
                                                </div>
                                            </td>
                                            <td class="text-center fr-money fr-money--positive">{{ $money($revenue, true) }}</td>
                                            <td class="text-center fr-money fr-money--negative">{{ $money($directCost, true) }}</td>
                                            <td class="text-center fr-money {{ $amountClass($result) }}">{{ $money($result) }}</td>
                                        </tr>
                                        <tr class="fr-detail-row d-none" data-detail-for="{{ $detailKey }}">
                                            <td colspan="4">
                                                <div class="fr-detail-box">
                                                    <div class="fr-detail-title">Movements ({{ $movements->count() }})</div>
                                                    <div class="fr-detail-table-wrap">
                                                        <table class="fr-detail-table">
                                                            <thead>
                                                                <tr>
                                                                    <th>Date</th>
                                                                    <th>Entry</th>
                                                                    <th>Account</th>
                                                                    <th>Section</th>
                                                                    <th>Description</th>
                                                                    <th class="text-end">Amount</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @forelse($movements as $movement)
                                                                    <tr>
                                                                        <td>{{ optional($movement['date'])->format('Y-m-d') ?: '-' }}</td>
                                                                        <td>
                                                                            <a href="{{ route('journal_entries.review', $movement['journal_entry_id']) }}"
                                                                                class="fr-entry-link">
                                                                                #{{ $movement['journal_entry_id'] }}
                                                                            </a>
                                                                        </td>
                                                                        <td>{{ $movement['account_title'] }} <span
                                                                                class="fr-muted">{{ $movement['account_code'] }}</span></td>
                                                                        <td>{{ $movement['section'] }}</td>
                                                                        <td>{{ $movement['description'] }}</td>
                                                                        <td
                                                                            class="text-end fr-money {{ $movement['section'] === 'Revenue' ? 'fr-money--positive' : 'fr-money--negative' }}">
                                                                            {{ $money($movement['amount'], true) }}</td>
                                                                    </tr>
                                                                @empty
                                                                    <tr>
                                                                        <td colspan="6" class="text-center fr-muted">No movements found.
                                                                        </td>
                                                                    </tr>
                                                                @endforelse
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4">
                                                <div class="fr-empty-state">
                                                    <iconify-icon icon="ri:pie-chart-line"></iconify-icon>
                                                    <div>No cost center results found.</div>
                                                    <p>Try changing filters or date range.</p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse

                                    <tr class="fr-trial-total-row">
                                        <td>Total</td>
                                        <td class="text-center fr-money fr-money--positive">
                                            {{ $money($combinedReport['costCenterTotals']['revenue']) }}</td>
                                        <td class="text-center fr-money fr-money--negative">
                                            {{ $money($combinedReport['costCenterTotals']['direct_cost']) }}</td>
                                        <td
                                            class="text-center fr-money {{ $amountClass($combinedReport['costCenterTotals']['result']) }}">
                                            {{ $money($combinedReport['costCenterTotals']['result']) }}
                                        </td>
                                    </tr>
                                </x-table>
                            </div>

                        </div>
                @elseif($activeReport === 'custom_statement')
                    <div class="fr-balance-meta mt-3">
                        <span></span>
                        <div>
                            <div>Custom Financial Statement</div>
                            <p>Select accounts and choose how the balance should be calculated.</p>
                        </div>
                    </div>

                    <div class="fr-report-panel mt-3">
                        <input type="hidden" name="account_selection_submitted" value="1" form="financial-report-filters">

                        <div class="fr-custom-head">
                            <div>
                                <strong>Select accounts to include</strong>
                                <span>{{ count($customStatement['selectedAccountIds']) }} selected account(s)</span>
                            </div>

                            <div class="fr-basis-control" role="group" aria-label="Custom statement basis">
                                <label class="{{ ($filters['custom_basis'] ?? 'period') === 'period' ? 'is-active' : '' }}">
                                    <input type="radio" name="custom_basis" value="period" form="financial-report-filters"
                                        @checked(($filters['custom_basis'] ?? 'period') === 'period')>
                                    <span>Period Movement</span>
                                </label>
                            </div>
                        </div>

                        @php
                            $selectedCustomAccountIds = collect($customStatement['selectedAccountIds'])
                                ->map(fn($id) => (int) $id)
                                ->all();
                        @endphp

                        <div class="fr-account-picker">
                            @foreach($customStatement['availableAccounts'] as $account)
                                @php
                                    $isSelectedAccount = in_array((int) $account->id, $selectedCustomAccountIds, true);
                                @endphp

                                <label class="fr-account-choice {{ $isSelectedAccount ? 'is-selected' : '' }}">
                                    <input type="checkbox" name="account_ids[]" value="{{ $account->id }}"
                                        form="financial-report-filters" @checked($isSelectedAccount)>
                                    <span class="fr-account-choice__name">{{ $account->title }}</span>
                                    <span class="fr-account-choice__code">{{ $account->code }}</span>
                                </label>
                            @endforeach
                        </div>

                        <div class="fr-custom-actions">
                            <button type="submit" form="financial-report-filters" class="btn btn-sm btn-primary fr-action">
                                <iconify-icon icon="ri:refresh-line"></iconify-icon>
                                Apply Custom Statement
                            </button>
                        </div>
                    </div>

                    <div class="fr-custom-result-shell mt-3">
                        <div class="fr-report-panel">
                            <div class="fr-section-head">
                                <div>
                                    <div>Custom Statement ({{ $customStatement['rows']->count() }} accounts)</div>
                                    <p>
                                        @if($customStatement['basis'] === 'period')
                                            Period movement from {{ $filters['from_date'] }} to {{ $filters['to_date'] }}.
                                        @else
                                            Period movement.
                                        @endif
                                    </p>
                                </div>
                            </div>

                            <table class="fr-mini-table fr-custom-statement-table">
                                <tbody>
                                    @forelse($customStatement['rows'] as $row)
                                        <tr>
                                            <td>
                                                <div class="fr-custom-line">
                                                    <span class="fr-custom-line__title">{{ $row['title'] }}</span>
                                                    <span class="fr-custom-line__meta">
                                                        <span class="fr-code">{{ $row['code'] }}</span>
                                                        <span class="fr-pill">{{ $row['classification'] }}</span>
                                                    </span>
                                                </div>
                                            </td>
                                            <td class="text-end fr-money {{ $amountClass($row['amount']) }}">
                                                {{ $money($row['amount']) }}
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="2">
                                                <div class="fr-empty-state">
                                                    <iconify-icon icon="ri:file-list-3-line"></iconify-icon>
                                                    <div>No selected accounts.</div>
                                                    <p>Choose at least one account and apply the statement.</p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse

                                    <tr class="fr-mini-total fr-drill-card" role="button" tabindex="0"
                                        data-card="custom_total" data-title="Net Balance"
                                        data-expected="{{ $customStatement['total'] }}"
                                        data-account-ids="{{ implode(',', $customStatement['selectedAccountIds']) }}">
                                        <td>
                                            <span class="fr-total-label">Net Balance</span>
                                            <span class="fr-total-hint">Debit positive / Credit negative</span>
                                        </td>
                                        <td class="text-end fr-money {{ $amountClass($customStatement['total']) }}">
                                            {{ $money($customStatement['total']) }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                @elseif($activeReport === 'trial_balance')

                        <div class="fr-balance-meta mt-3">
                            <span></span>
                            <div>
                                <div>Trial Balance</div>
                                <p>Posted journal entries from {{ $filters['from_date'] }} to {{ $filters['to_date'] }}. Click
                                    parent accounts to show children.</p>
                            </div>
                        </div>

                        <div class="fr-summary-grid my-3">
                            <div class="fr-summary fr-summary--green fr-drill-card" role="button" tabindex="0"
                                data-card="trial_debit" data-title="Total Debit" data-expected="{{ $trialBalance['totalDebit'] }}">
                                <span>Total Debit</span>
                                <strong>{{ $money($trialBalance['totalDebit']) }}</strong>
                            </div>
                            <div class="fr-summary fr-summary--red fr-drill-card" role="button" tabindex="0"
                                data-card="trial_credit" data-title="Total Credit" data-expected="{{ $trialBalance['totalCredit'] }}">
                                <span>Total Credit</span>
                                <strong>{{ $money($trialBalance['totalCredit']) }}</strong>
                            </div>
                            <div class="fr-summary {{ $trialBalance['isBalanced'] ? 'fr-summary--green' : 'fr-summary--red' }} fr-drill-card"
                                role="button" tabindex="0" data-card="trial_difference" data-title="Balance Check"
                                data-expected="{{ $trialBalance['difference'] }}">
                                <span>Balance Check</span>
                                <strong>{{ $trialBalance['isBalanced'] ? 'Balanced' : $money($trialBalance['difference']) }}</strong>
                            </div>
                        </div>

                        <div class="fr-report-panel">

                            <div class="fr-table-wrap">
                                <x-table :headers="[
                        'Code',
                        'Account Name',
                        'Classification',
                        'Debit',
                        'Credit'
                    ]">
                                    @forelse($trialBalance['rows'] as $row)
                                        <tr class="fr-tree-row {{ ($row['level'] ?? 0) > 0 ? 'd-none' : '' }}"
                                            data-account-id="trial-{{ $row['account_id'] }}"
                                            data-parent-id="{{ $row['parent_id'] ? 'trial-' . $row['parent_id'] : '' }}"
                                            data-level="{{ $row['level'] ?? 0 }}">
                                            <td class="text-center"><span class="fr-code">{{ $row['code'] }}</span></td>
                                            <td>
                                                <div class="fr-account" style="--level: {{ $row['level'] ?? 0 }};">
                                                    @if($row['has_children'] ?? false)
                                                        <button type="button" class="fr-toggle"
                                                            data-target-id="trial-{{ $row['account_id'] }}" title="Show child accounts">
                                                            <iconify-icon icon="ri:arrow-right-s-line"></iconify-icon>
                                                        </button>
                                                    @else
                                                        <span class="fr-toggle-space"></span>
                                                    @endif
                                                    <span>{{ $row['title'] }}</span>
                                                </div>
                                            </td>
                                            <td class="text-center"><span class="fr-pill">{{ $row['classification'] }}</span></td>
                                            <td class="text-center fr-money fr-money--positive">{{ $money($row['debit'], true) }}</td>
                                            <td class="text-center fr-money fr-money--negative">{{ $money($row['credit'], true) }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5">
                                                <div class="fr-empty-state">
                                                    <iconify-icon icon="ri:scale-line"></iconify-icon>
                                                    <div>No accounts found.</div>
                                                    <p>Try changing filters or search keyword.</p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse

                                    <tr class="fr-trial-total-row">
                                        <td colspan="3">Total</td>
                                        <td class="text-center fr-money fr-money--positive">
                                            {{ $money($trialBalance['totalDebit']) }}</td>
                                        <td class="text-center fr-money fr-money--negative">
                                            {{ $money($trialBalance['totalCredit']) }}</td>
                                    </tr>
                                </x-table>
                            </div>

                        </div>
                @endif

                <div class="modal fade fr-drill-modal" id="frDrilldownModal" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-xl modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <div>
                                    <h5 class="modal-title" id="frDrilldownTitle">Records</h5>
                                    <p class="fr-drill-subtitle mb-0" id="frDrilldownSubtitle">
                                        {{ $filters['from_date'] }} - {{ $filters['to_date'] }}
                                    </p>
                                </div>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="fr-drill-status" id="frDrilldownStatus">Loading records...</div>
                                <div class="fr-detail-table-wrap fr-drill-table-wrap d-none" id="frDrilldownTableWrap">
                                    <table class="fr-detail-table fr-drill-table">
                                        <thead>
                                            <tr>
                                                <th>Date</th>
                                                <th>Account</th>
                                                <th>Party</th>
                                                <th>Cost Center</th>
                                                <th class="text-end">Amount</th>
                                            </tr>
                                        </thead>
                                        <tbody id="frDrilldownRows"></tbody>
                                        <tfoot>
                                            <tr>
                                                <td colspan="4" class="text-end">Displayed Total</td>
                                                <td class="text-end fr-money" id="frDrilldownTotal">0.00</td>
                                            </tr>
                                            <tr>
                                                <td colspan="4" class="text-end">Card Value</td>
                                                <td class="text-end fr-money" id="frDrilldownExpected">0.00</td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .financial-reports-page {
            color: #0f172a;
            direction: ltr;
            text-align: left;
        }

        .financial-reports-page .page-shell,
        .financial-reports-page .space-y-4 {
            direction: ltr;
            text-align: left;
        }

        .financial-reports-page .page-title {
            direction: ltr;
            text-align: left;
            align-items: flex-start !important;
        }

        .financial-reports-page .page-title>div {
            text-align: left;
        }

        .fr-toolbar,
        .fr-report-panel,
        .fr-summary,
        .fr-total-strip {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
        }

        .fr-toolbar {
            display: grid;
            gap: 0.8rem;
            min-width: 0;
            padding: 0.8rem;
        }

        .fr-tabs {
            display: flex;
            gap: 0.25rem;
            flex-wrap: wrap;
            justify-content: flex-start;
            margin-bottom: 0.75rem;
            border: 1px solid #e8eef6;
            border-radius: 8px;
            background: #f8fafc;
            padding: 0.25rem;
            min-width: 0;
        }

        .fr-tab,
        .fr-action {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            font-weight: 800;
            white-space: nowrap;
        }

        .fr-tab {
            flex: 1 1 150px;
            color: #334155;
            text-decoration: none;
            border: 1px solid transparent;
            background: transparent;
            border-radius: 7px;
            padding: 0.5rem 0.72rem;
            font-size: 0.8rem;
        }

        .fr-tab:hover {
            background: #fff;
            border-color: #dbe3ef;
        }

        .fr-tab.is-active {
            background: #fff;
            border-color: #dbe3ef;
            color: #0f766e;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
        }

        .fr-filters {
            display: grid;
            gap: 0.7rem;
            border: 1px solid #e8eef6;
            border-radius: 8px;
            background: #fbfdff;
            padding: 0.75rem;
            min-width: 0;
        }

        .fr-filter-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .fr-filter-title {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            color: #0f172a;
            font-size: 0.82rem;
            font-weight: 900;
        }

        .fr-filter-title iconify-icon {
            color: #0f766e;
            font-size: 1rem;
        }

        .fr-filter-fields {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 0.55rem;
            align-items: end;
        }

        .fr-filter-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.45rem;
        }

        .fr-filter-control {
            display: grid;
            gap: 0.28rem;
            margin: 0;
            min-width: 0;
            border: 1px solid #e8eef6;
            border-radius: 8px;
            background: #fff;
            padding: 0.48rem 0.55rem;
        }

        .fr-filter-control span {
            color: #64748b;
            font-size: 0.68rem;
            font-weight: 850;
            line-height: 1;
        }

        .fr-filters .form-control,
        .fr-filters .form-select {
            min-height: 28px;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: #0f172a;
            font-size: 0.82rem;
            font-weight: 850;
            padding: 0;
        }

        .fr-filters .form-control:focus,
        .fr-filters .form-select:focus {
            box-shadow: none;
        }

        .fr-filter-actions .fr-action {
            min-height: 34px;
            padding-inline: 0.72rem;
            border-radius: 7px;
        }

        .fr-export-action {
            color: #13734a;
            border-color: #cde8d8;
            background: #f1fbf5;
        }

        .fr-clear-action {
            color: #475569;
            border-color: #dbe3ef;
            background: #fff;
            text-decoration: none;
        }

        .fr-clear-action:hover {
            color: #0f172a;
            background: #f8fafc;
            border-color: #cbd5e1;
        }

        .fr-balance-status {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            border-radius: 999px;
            background: #eaf8ef;
            color: #047857;
            padding: 0.5rem 0.75rem;
            font-size: 0.76rem;
            font-weight: 900;
        }

        .fr-balance-status--danger {
            background: #fef2f2;
            color: #dc2626;
        }

        .fr-balance-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 0.25rem;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            background: #fff;
            padding: 1rem;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
        }

        .fr-balance-meta>span:empty {
            display: none;
        }

        .fr-balance-meta>div {
            order: -1;
        }

        .fr-balance-meta div {
            margin: 0;
            font-size: 1.25rem !important;
            font-weight: 900;
            text-align: left;
        }

        .fr-balance-meta p {
            margin: 0.2rem 0 0;
            color: #64748b;
            font-size: 0.82rem;
            text-align: left;
        }

        .fr-summary-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.85rem;
        }

        .fr-cash-summary-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.55rem;
        }

        .fr-summary {
            padding: 1rem;
        }

        .fr-cash-summary-grid .fr-summary {
            min-height: 76px;
        }

        .fr-drill-card {
            cursor: pointer;
            transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
        }

        .fr-drill-card:hover,
        .fr-drill-card:focus {
            border-color: #99c5bc;
            box-shadow: 0 10px 26px rgba(15, 23, 42, 0.1);
            outline: 0;
            transform: translateY(-1px);
        }

        .fr-drill-card:focus-visible {
            box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18), 0 10px 26px rgba(15, 23, 42, 0.1);
        }

        .fr-drill-subtitle {
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 800;
        }

        .fr-drill-status {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: #f8fafc;
            color: #475569;
            padding: 0.75rem 0.85rem;
            font-size: 0.84rem;
            font-weight: 850;
        }

        .fr-drill-status.is-match {
            border-color: #bbf7d0;
            background: #f0fdf4;
            color: #047857;
        }

        .fr-drill-status.is-mismatch {
            border-color: #fecaca;
            background: #fef2f2;
            color: #b91c1c;
        }

        .fr-drill-table-wrap {
            margin-top: 0.75rem;
        }

        .fr-drill-table tfoot td {
            background: #f8fafc;
            border-top: 1px solid #dbe3ef;
            font-weight: 900;
        }

        .fr-summary span {
            display: block;
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 850;
            text-transform: uppercase;
        }

        .fr-summary strong {
            display: block;
            margin-top: 0.25rem;
            font-size: 1.15rem;
            font-weight: 900;
        }

        .fr-summary--green strong {
            color: #047857;
        }

        .fr-summary--red strong {
            color: #dc2626;
        }

        .fr-summary--navy strong,
        .fr-money--navy {
            color: #0f172a;
        }

        .fr-balance-grid {
            display: grid;
            grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
            gap: 0.85rem;
            align-items: start;
            margin-top: 0.85rem;
        }

        .fr-combined-kpis {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.85rem;
        }

        .fr-combined-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.85rem;
            align-items: start;
        }

        .fr-custom-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            padding: 0.95rem 1rem;
            border-bottom: 1px solid #e8eef6;
        }

        .fr-custom-head strong {
            display: block;
            color: #0f172a;
            font-size: 0.9rem;
            font-weight: 900;
        }

        .fr-custom-head span {
            display: block;
            margin-top: 0.2rem;
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 800;
        }

        .fr-basis-control {
            display: inline-flex;
            gap: 0.35rem;
            padding: 0.25rem;
            border: 1px solid #dbe3ef;
            border-radius: 8px;
            background: #f8fafc;
        }

        .fr-basis-control label {
            cursor: pointer;
            margin: 0;
        }

        .fr-basis-control input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .fr-basis-control label span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 30px;
            border-radius: 7px;
            color: #334155;
            padding: 0.35rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 900;
            margin: 0;
        }

        .fr-basis-control label.is-active span {
            background: #0f766e;
            color: #fff;
        }

        .fr-account-picker {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 0.55rem;
            padding: 1rem;
        }

        .fr-account-choice {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 0.55rem;
            min-height: 42px;
            border: 1px solid #dbe3ef;
            border-radius: 8px;
            background: #f8fafc;
            padding: 0.55rem 0.65rem;
            cursor: pointer;
            margin: 0;
            transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
        }

        .fr-account-choice:hover {
            border-color: #94a3b8;
            background: #fff;
        }

        .fr-account-choice.is-selected,
        .fr-account-choice:has(input:checked) {
            border-color: #0f766e;
            background: #ecfdf5;
            box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.15);
        }

        .fr-account-choice input {
            width: 17px;
            height: 17px;
            accent-color: #0f766e;
        }

        .fr-account-choice.is-selected .fr-account-choice__name,
        .fr-account-choice:has(input:checked) .fr-account-choice__name {
            color: #0f766e;
        }

        .fr-account-choice.is-selected .fr-account-choice__code,
        .fr-account-choice:has(input:checked) .fr-account-choice__code {
            color: #0f766e;
        }

        .fr-account-choice__name {
            min-width: 0;
            color: #0f172a;
            font-size: 0.78rem;
            font-weight: 900;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .fr-account-choice__code {
            color: #64748b;
            font-size: 0.72rem;
            font-weight: 850;
        }

        .fr-custom-actions {
            display: flex;
            justify-content: flex-start;
            padding: 0 1rem 1rem;
        }

        .fr-custom-result-shell {
            /* width: min(980px, 100%); */
            margin-left: 0;
            margin-right: auto;
        }

        .fr-stack {
            display: grid;
            gap: 0.85rem;
        }

        .fr-pl-shell {
            /* width: min(980px, 100%); */
            margin-left: 0;
            margin-right: auto;
            display: grid;
            gap: 0.85rem;
        }

        .fr-pl-meta {
            justify-content: flex-start;
        }

        /* .fr-pl-stack { display: flex; gap: 0.85rem; } */
        .fr-section-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            padding: 0.95rem 1rem;
            border-bottom: 1px solid #e8eef6;
            flex-wrap: wrap;
        }

        .fr-section-head>div {
            margin: 0;
            font-size: 1rem !important;
            font-weight: 900;
            min-width: 0;
        }

        .fr-section-head p {
            margin: 0.15rem 0 0;
            color: #64748b;
            font-size: 0.78rem;
            width: 100%;
        }

        .fr-section-total {
            font-size: 1rem;
            font-weight: 900;
        }

        .fr-table-wrap {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .fr-table {
            width: 100%;
            min-width: 720px;
            border-collapse: collapse;
        }

        .fr-balance-table {
            min-width: 560px;
        }

        .fr-pl-table {
            min-width: 620px;
        }

        .fr-cash-table {
            min-width: 620px;
        }

        .fr-report-panel,
        .fr-summary,
        .fr-total-strip {
            min-width: 0;
        }

        .financial-reports-page .ui-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .financial-reports-page .ui-table {
            min-width: 860px;
            vertical-align: middle;
        }

        .financial-reports-page .ui-table thead th {
            background: #f8fafc;
            color: #475569;
            border-bottom: 1px solid #e5e7eb;
            padding: 0.7rem 0.85rem;
            font-size: 0.74rem;
            font-weight: 900;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .financial-reports-page .ui-table tbody td {
            border-bottom: 1px solid #edf2f7;
            padding: 0.72rem 0.85rem;
            color: #334155;
            font-size: 0.85rem;
            font-weight: 700;
            vertical-align: middle;
            white-space: nowrap;
        }

        .financial-reports-page .ui-table tbody tr:hover {
            background: #f8fafc;
        }

        .fr-table th {
            background: #f8fafc;
            color: #475569;
            border-bottom: 1px solid #e5e7eb;
            padding: 0.7rem 0.85rem;
            font-size: 0.74rem;
            font-weight: 900;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .fr-table td {
            border-bottom: 1px solid #edf2f7;
            padding: 0.72rem 0.85rem;
            font-size: 0.85rem;
            font-weight: 700;
            vertical-align: middle;
            white-space: nowrap;
        }

        .fr-table tbody tr:hover {
            background: #f8fafc;
        }

        .fr-mini-table {
            width: 100%;
            border-collapse: collapse;
        }

        .fr-mini-table td {
            border-bottom: 1px solid #edf2f7;
            padding: 0.78rem 1rem;
            color: #0f172a;
            font-size: 0.85rem;
            font-weight: 800;
            vertical-align: middle;
        }

        .fr-mini-table tr:last-child td {
            border-bottom: 0;
        }

        .fr-mini-total td {
            background: #f8fafc;
            border-top: 1px solid #dbe3ef;
            font-weight: 900;
        }

        .fr-custom-statement-table {
            border: 1px solid #e8eef6;
            border-radius: 8px;
            border-collapse: separate;
            border-spacing: 0;
            overflow: hidden;
            background: #fff;
        }

        .fr-custom-statement-table tr {
            transition: background 0.15s ease;
        }

        .fr-custom-statement-table tbody tr:not(.fr-mini-total):hover {
            background: #f8fafc;
        }

        .fr-custom-statement-table td {
            padding: 0.9rem 1rem;
            font-size: 0.84rem;
        }

        .fr-custom-statement-table td:last-child {
            min-width: 150px;
            white-space: nowrap;
        }

        .fr-custom-line {
            display: grid;
            gap: 0.35rem;
        }

        .fr-custom-line__title {
            color: #0f172a;
            font-weight: 900;
            line-height: 1.35;
        }

        .fr-custom-line__meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.35rem;
        }

        .fr-custom-statement-table .fr-code,
        .fr-custom-statement-table .fr-pill {
            border-radius: 6px;
            padding: 0.2rem 0.5rem;
            font-size: 0.68rem;
            font-weight: 850;
        }

        .fr-custom-statement-table .fr-pill {
            background: #eef6f4;
            color: #0f766e;
        }

        .fr-custom-statement-table .fr-mini-total td {
            background: #f8fafc;
            border-top: 1px solid #dbe3ef;
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        .fr-total-label,
        .fr-total-hint {
            display: block;
        }

        .fr-total-label {
            color: #0f172a;
            font-weight: 900;
        }

        .fr-total-hint {
            margin-top: 0.18rem;
            color: #64748b;
            font-size: 0.72rem;
            font-weight: 800;
        }

        .fr-entity-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.9rem 1rem;
            border-bottom: 1px solid #e8eef6;
        }

        .fr-entity-head strong {
            color: #0f172a;
            font-size: 0.9rem;
            font-weight: 900;
        }

        .fr-entity-head span {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 850;
        }

        .fr-line-title {
            max-width: 420px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .fr-account {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding-left: calc(var(--level, 0) * 1.1rem);
        }

        .fr-toggle {
            width: 24px;
            height: 24px;
            border: 1px solid #dbe3ef;
            border-radius: 999px;
            background: #fff;
            color: #334155;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .fr-toggle.is-open iconify-icon {
            transform: rotate(90deg);
        }

        .fr-toggle-space {
            width: 24px;
            display: inline-block;
        }

        .fr-code,
        .fr-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background: #f1f5f9;
            color: #334155;
            padding: 0.25rem 0.65rem;
            font-size: 0.74rem;
            font-weight: 900;
        }

        .fr-mini-pill {
            display: inline-flex;
            align-items: center;
            border-radius: 6px;
            border: 1px solid #dbe3ef;
            color: #64748b;
            background: #fff;
            padding: 0.18rem 0.45rem;
            font-size: 0.68rem;
            font-weight: 850;
        }

        .fr-detail-row td {
            background: #f8fafc;
            padding: 0;
        }

        .fr-detail-box {
            padding: 0.85rem;
            border-top: 1px solid #e5e7eb;
        }

        .fr-detail-title {
            color: #475569;
            font-size: 0.76rem;
            font-weight: 900;
            margin-bottom: 0.55rem;
        }

        .fr-detail-table-wrap {
            overflow-x: auto;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: #fff;
        }

        .fr-detail-table {
            width: 100%;
            min-width: 760px;
            border-collapse: collapse;
        }

        .fr-detail-table th {
            background: #f1f5f9;
            color: #64748b;
            padding: 0.55rem 0.7rem;
            font-size: 0.7rem;
            font-weight: 900;
            text-transform: uppercase;
            border-bottom: 1px solid #e5e7eb;
        }

        .fr-detail-table td {
            padding: 0.55rem 0.7rem;
            font-size: 0.78rem;
            border-bottom: 1px solid #edf2f7;
        }

        .fr-detail-table tr:last-child td {
            border-bottom: 0;
        }

        .fr-entry-link {
            color: #2563eb;
            font-weight: 900;
            text-decoration: none;
        }

        .fr-cost-center {
            display: inline-flex;
            border-radius: 6px;
            background: #f3e8ff;
            color: #7e22ce;
            padding: 0.18rem 0.45rem;
            font-size: 0.7rem;
            font-weight: 850;
        }

        .fr-muted {
            color: #94a3b8;
        }

        .fr-money {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-weight: 900;
        }

        .fr-money--positive {
            color: #047857;
        }

        .fr-money--negative {
            color: #dc2626;
        }

        .fr-money--muted {
            color: #94a3b8;
        }

        .fr-group-row td {
            background: #f8fafc;
            font-weight: 900;
        }

        .fr-section-total-row td {
            background: #f8fafc;
            font-weight: 900;
            border-top: 1px solid #dbe3ef;
        }

        .fr-total-row td {
            background: #0f172a;
            color: #fff;
            font-weight: 900;
            border-bottom: 0;
        }

        .fr-trial-total-row td {
            background: #f8fafc;
            color: #111827 !important;
            font-weight: 900 !important;
            border-top: 1px solid #111827 !important;
        }

        .fr-empty-state {
            padding: 2.5rem 1rem;
            text-align: center;
            color: #94a3b8;
            background: #fff;
        }

        .fr-empty-state iconify-icon {
            display: block;
            font-size: 2.15rem;
            color: #cbd5e1;
            margin-bottom: 0.7rem;
        }

        .fr-empty-state div {
            margin: 0;
            color: #475569;
            font-weight: 900;
        }

        .fr-empty-state p {
            margin: 0.35rem 0 0;
            font-size: 0.86rem;
        }

        .fr-net-strip {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            border-radius: 10px;
            padding: 1.05rem 1rem;
            color: #fff;
            font-weight: 900;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
        }

        .fr-net-strip strong {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 1.1rem;
        }

        .fr-net-strip--profit {
            background: #13734a;
        }

        .fr-net-strip--loss {
            background: #b43227;
        }

        .fr-total-strip {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem;
            color: #fff;
            font-weight: 900;
            border-radius: 10px;
        }

        .fr-total-strip span,
        .fr-total-strip strong {
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .fr-total-strip strong {
            text-align: right;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        }

        .fr-total-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.85rem;
        }

        .fr-total-strip--green {
            background: #13734a;
            border-color: #13734a;
        }

        .fr-total-strip--navy {
            background: #0f172a;
            border-color: #0f172a;
        }

        .fr-total-strip--red {
            background: #b43227;
            border-color: #b43227;
        }

        @media (max-width: 991.98px) {

            .fr-summary-grid,
            .fr-balance-grid,
            .fr-combined-grid {
                grid-template-columns: 1fr;
            }

            .fr-total-grid {
                grid-template-columns: 1fr;
            }

            .fr-combined-kpis {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .fr-account-picker {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .fr-cash-summary-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .fr-filter-fields {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .fr-filter-actions {
                justify-content: flex-start;
            }

            .fr-tabs {
                overflow-x: auto;
                flex-wrap: nowrap;
            }

            .fr-tab {
                flex: 0 0 auto;
            }
        }

        @media (max-width: 575.98px) {
            .financial-reports-page .page-shell {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
            }

            .fr-toolbar {
                padding: 0.65rem;
            }

            .fr-tabs {
                margin-bottom: 0;
            }

            .fr-tab {
                min-height: 38px;
                padding-inline: 0.6rem;
                font-size: 0.76rem;
            }

            .fr-balance-meta {
                align-items: stretch;
                padding: 0.85rem;
            }

            .fr-balance-meta>div {
                width: 100%;
            }

            .fr-balance-meta div {
                font-size: 1.05rem !important;
            }

            .fr-balance-status {
                width: 100%;
                justify-content: center;
                border-radius: 8px;
                text-align: center;
            }

            .fr-section-head {
                padding: 0.85rem;
            }

            .fr-section-total {
                width: 100%;
                text-align: left;
            }

            .fr-report-panel {
                overflow: hidden;
            }

            .fr-combined-kpis {
                grid-template-columns: 1fr;
            }

            .fr-account-picker {
                grid-template-columns: 1fr;
            }

            .fr-cash-summary-grid {
                grid-template-columns: 1fr;
            }

            .fr-filter-fields {
                grid-template-columns: 1fr;
            }

            .fr-filter-head {
                align-items: stretch;
            }

            .fr-filter-title {
                width: 100%;
            }

            .fr-filter-actions {
                display: grid;
                grid-template-columns: 1fr 1fr;
                width: 100%;
                gap: 0.5rem;
            }

            .fr-filter-actions .fr-action {
                justify-content: center;
                width: 100%;
            }

            .fr-export-action {
                grid-column: 1 / -1;
            }

            .fr-balance-table {
                min-width: 0;
            }

            .fr-balance-table,
            .fr-balance-table thead,
            .fr-balance-table tbody,
            .fr-balance-table tfoot,
            .fr-balance-table tr,
            .fr-balance-table td {
                display: block;
                width: 100%;
            }

            .fr-balance-table thead {
                display: none;
            }

            .fr-balance-table tr {
                border-bottom: 1px solid #edf2f7;
                background: #fff;
            }

            .fr-balance-table .fr-tree-row td {
                border-bottom: 0;
                padding: 0.45rem 0.85rem;
                white-space: normal;
            }

            .fr-balance-table .fr-tree-row td:first-child {
                padding-top: 0.85rem;
            }

            .fr-balance-table .fr-tree-row td:last-child {
                padding-bottom: 0.85rem;
                text-align: left !important;
            }

            .fr-balance-table .fr-tree-row td:last-child::before {
                content: "Amount";
                display: block;
                margin-bottom: 0.18rem;
                color: #64748b;
                font-family: inherit;
                font-size: 0.68rem;
                font-weight: 900;
                text-transform: uppercase;
            }

            .fr-balance-table .fr-detail-row {
                display: block;
            }

            .fr-balance-table .fr-detail-row td {
                display: block;
                width: 100%;
                padding: 0;
            }

            .fr-balance-table .fr-total-row td {
                display: block;
                width: 100%;
                border-bottom: 0;
                padding: 0.5rem 0.85rem;
                text-align: left !important;
            }

            .fr-balance-table .fr-total-row td:first-child {
                padding-top: 0.85rem;
            }

            .fr-balance-table .fr-total-row td:last-child {
                padding-bottom: 0.85rem;
            }

            .fr-account {
                display: flex;
                width: 100%;
                align-items: flex-start;
                white-space: normal;
            }

            .fr-account>span:not(.fr-mini-pill) {
                min-width: 0;
                overflow-wrap: anywhere;
            }

            .fr-total-strip {
                display: grid;
                gap: 0.3rem;
                padding: 0.9rem;
            }

            .fr-total-strip strong {
                text-align: left;
                font-size: 1rem;
            }

            .fr-table,
            .fr-pl-table,
            .fr-cash-table,
            .fr-detail-table {
                min-width: 100%;
            }

            .fr-table th,
            .fr-table td,
            .fr-pl-table th,
            .fr-pl-table td,
            .fr-cash-table th,
            .fr-cash-table td,
            .fr-detail-table th,
            .fr-detail-table td {
                white-space: normal;
            }

            .fr-section-head {
                justify-content: space-between;
            }

            .fr-section-head>div {
                width: 100%;
            }

            .fr-section-head p {
                margin-top: 0.5rem;
            }

            .fr-custom-statement-table td {
                display: block;
                width: 100%;
                padding: 0.75rem 0.85rem;
            }

            .fr-custom-statement-table td:last-child {
                min-width: 0;
                padding-top: 0;
                text-align: left !important;
            }

            .fr-custom-statement-table .fr-mini-total td:last-child {
                padding-top: 0.25rem;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const rows = Array.from(document.querySelectorAll('.fr-tree-row'));
            const details = Array.from(document.querySelectorAll('.fr-detail-row'));

            function childRows(parentId) {
                return rows.filter(function (row) {
                    return row.dataset.parentId === parentId;
                });
            }

            function detailRow(targetId) {
                return details.find(function (row) {
                    return row.dataset.detailFor === targetId;
                });
            }

            function hideChildren(parentId) {
                const detail = detailRow(parentId);
                if (detail) {
                    detail.classList.add('d-none');
                }

                childRows(parentId).forEach(function (row) {
                    row.classList.add('d-none');
                    const toggle = row.querySelector('.fr-toggle');
                    if (toggle) {
                        toggle.classList.remove('is-open');
                    }
                    hideChildren(row.dataset.accountId);
                });
            }

            document.querySelectorAll('.fr-toggle').forEach(function (button) {
                button.addEventListener('click', function () {
                    const targetId = button.dataset.targetId;
                    const children = childRows(targetId);
                    const detail = detailRow(targetId);
                    const shouldOpen = children.some(function (row) {
                        return row.classList.contains('d-none');
                    }) || (detail && detail.classList.contains('d-none'));

                    button.classList.toggle('is-open', shouldOpen);

                    children.forEach(function (row) {
                        row.classList.toggle('d-none', !shouldOpen);
                    });

                    if (detail) {
                        detail.classList.toggle('d-none', !shouldOpen);
                    }

                    if (!shouldOpen) {
                        hideChildren(targetId);
                    }
                });
            });

            document.querySelectorAll('.fr-account-choice input[type="checkbox"]').forEach(function (checkbox) {
                const choice = checkbox.closest('.fr-account-choice');
                if (!choice) {
                    return;
                }

                choice.classList.toggle('is-selected', checkbox.checked);

                checkbox.addEventListener('change', function () {
                    choice.classList.toggle('is-selected', checkbox.checked);
                });
            });

            document.querySelectorAll('.fr-basis-control input[type="radio"]').forEach(function (radio) {
                const updateBasisState = function () {
                    document.querySelectorAll('.fr-basis-control label').forEach(function (label) {
                        const input = label.querySelector('input[type="radio"]');
                        label.classList.toggle('is-active', Boolean(input && input.checked));
                    });
                };

                radio.addEventListener('change', updateBasisState);
                updateBasisState();
            });

            const drillModalElement = document.getElementById('frDrilldownModal');
            const drillModal = drillModalElement && window.bootstrap ? new bootstrap.Modal(drillModalElement) : null;
            const drillTitle = document.getElementById('frDrilldownTitle');
            const drillSubtitle = document.getElementById('frDrilldownSubtitle');
            const drillStatus = document.getElementById('frDrilldownStatus');
            const drillRows = document.getElementById('frDrilldownRows');
            const drillTableWrap = document.getElementById('frDrilldownTableWrap');
            const drillTotal = document.getElementById('frDrilldownTotal');
            const drillExpected = document.getElementById('frDrilldownExpected');
            const drillUrl = @json(route('financial_reports.card_records'));
            @php
                $baseDrillParams = [
                    'from_date' => $filters['from_date'],
                    'to_date' => $filters['to_date'],
                    'cost_center_id' => $filters['cost_center_id'],
                    'posted_only' => $filters['posted_only'] ? 1 : 0,
                    'search' => $filters['search'] ?? '',
                ];
            @endphp
            const baseDrillParams = @json($baseDrillParams);

            const formatNumber = function (value, isCount) {
                const number = Number(value || 0);

                if (isCount) {
                    return String(Math.round(number));
                }

                return number.toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                });
            };

            const escapeText = function (value) {
                return String(value ?? '-')
                    .replaceAll('&', '&amp;')
                    .replaceAll('<', '&lt;')
                    .replaceAll('>', '&gt;')
                    .replaceAll('"', '&quot;')
                    .replaceAll("'", '&#039;');
            };

            const setDrillStatus = function (message, state) {
                drillStatus.textContent = message;
                drillStatus.classList.toggle('is-match', state === 'match');
                drillStatus.classList.toggle('is-mismatch', state === 'mismatch');
            };

            const openDrilldown = function (card) {
                if (!drillModal) {
                    return;
                }

                const title = card.dataset.title || 'Records';
                const params = new URLSearchParams();
                Object.entries(baseDrillParams).forEach(function ([key, value]) {
                    if (value !== null && value !== '') {
                        params.append(key, value);
                    }
                });

                params.set('card', card.dataset.card);
                params.set('expected', card.dataset.expected || '0');

                if (card.dataset.isCount === '1') {
                    params.set('is_count', '1');
                }

                (card.dataset.accountIds || '').split(',').filter(Boolean).forEach(function (accountId) {
                    params.append('account_ids[]', accountId);
                });

                drillTitle.textContent = title;
                drillSubtitle.textContent = baseDrillParams.from_date + ' - ' + baseDrillParams.to_date;
                drillRows.innerHTML = '';
                drillTableWrap.classList.add('d-none');
                drillTotal.textContent = '0.00';
                drillExpected.textContent = formatNumber(card.dataset.expected, card.dataset.isCount === '1');
                setDrillStatus('Loading records...', null);
                drillModal.show();

                fetch(drillUrl + '?' + params.toString(), {
                    headers: {
                        'Accept': 'application/json',
                    },
                })
                    .then(function (response) {
                        if (!response.ok) {
                            throw new Error('Unable to load records.');
                        }

                        return response.json();
                    })
                    .then(function (payload) {
                        const records = payload.records || [];
                        const isCount = Boolean(payload.is_count);

                        drillRows.innerHTML = records.length
                            ? records.map(function (record) {
                                const amount = record.amount === null || record.amount === undefined
                                    ? '-'
                                    : formatNumber(record.amount, false);
                                const account = record.link
                                    ? '<a href="' + escapeText(record.link) + '" class="fr-entry-link">' + escapeText(record.account) + '</a>'
                                    : escapeText(record.account);

                                return '<tr>'
                                    + '<td>' + escapeText(record.date) + '</td>'
                                    + '<td>' + account + '</td>'
                                    + '<td>' + escapeText(record.party) + '</td>'
                                    + '<td>' + escapeText(record.cost_center) + '</td>'
                                    + '<td class="text-end fr-money">' + amount + '</td>'
                                    + '</tr>';
                            }).join('')
                            : '<tr><td colspan="5" class="text-center fr-muted">No records found.</td></tr>';

                        drillTotal.textContent = formatNumber(payload.total, isCount);
                        drillExpected.textContent = formatNumber(payload.expected, isCount);
                        drillTableWrap.classList.remove('d-none');
                        setDrillStatus(
                            payload.matches
                                ? 'Displayed records total matches the card value.'
                                : 'Displayed records total does not match the card value.',
                            payload.matches ? 'match' : 'mismatch'
                        );
                    })
                    .catch(function (error) {
                        drillRows.innerHTML = '';
                        drillTableWrap.classList.add('d-none');
                        setDrillStatus(error.message || 'Unable to load records.', 'mismatch');
                    });
            };

            document.querySelectorAll('.fr-drill-card').forEach(function (card) {
                card.addEventListener('click', function (event) {
                    if (event.target.closest('a, button, input, select, textarea, label')) {
                        return;
                    }

                    openDrilldown(card);
                });

                card.addEventListener('keydown', function (event) {
                    if (event.key !== 'Enter' && event.key !== ' ') {
                        return;
                    }

                    event.preventDefault();
                    openDrilldown(card);
                });
            });
        });
    </script>
@endpush