<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart of Accounts Report</title>
    <style>
        :root {
            --ink: #111827;
            --muted: #4b5563;
            --line: #cbd5e1;
            --soft: #f8fafc;
            --head: #e2e8f0;
            --brand: #123d66;
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            padding: 24px;
            background: #eef2f7;
            color: var(--ink);
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
        }
        .report-page {
            max-width: 1200px;
            margin: 0 auto;
            background: #fff;
            padding: 26px 30px 32px;
            border: 1px solid var(--line);
            box-shadow: 0 8px 30px rgba(15, 23, 42, .12);
        }
        .toolbar {
            max-width: 1200px;
            margin: 0 auto 14px;
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        .btn {
            border: 1px solid #94a3b8;
            border-radius: 6px;
            background: #fff;
            color: #0f172a;
            padding: 8px 14px;
            text-decoration: none;
            cursor: pointer;
            font-size: 13px;
        }
        .btn-primary {
            border-color: var(--brand);
            background: var(--brand);
            color: #fff;
        }
        .report-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 24px;
            padding-bottom: 16px;
            border-bottom: 3px solid var(--brand);
        }
        .company-name {
            font-size: 20px;
            line-height: 1.2;
            font-weight: 700;
            color: var(--brand);
            margin-bottom: 6px;
        }
        .company-meta {
            color: var(--muted);
            line-height: 1.5;
        }
        .report-title {
            text-align: right;
        }
        .report-title h1 {
            margin: 0;
            font-size: 24px;
            letter-spacing: .02em;
            text-transform: uppercase;
            color: var(--ink);
        }
        .report-title div {
            margin-top: 6px;
            color: var(--muted);
            font-size: 11px;
        }
        .summary {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin: 18px 0;
        }
        .summary-card {
            border: 1px solid var(--line);
            background: var(--soft);
            border-radius: 8px;
            padding: 10px 12px;
        }
        .summary-card span {
            display: block;
            color: var(--muted);
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: .05em;
            margin-bottom: 4px;
        }
        .summary-card strong {
            font-size: 18px;
            color: var(--brand);
        }
        table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }
        thead th {
            background: var(--head);
            border: 1px solid #94a3b8;
            color: #0f172a;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: .04em;
            padding: 8px 7px;
            text-align: left;
        }
        tbody td {
            border: 1px solid var(--line);
            padding: 7px;
            vertical-align: top;
            line-height: 1.35;
        }
        .section-row td {
            background: #dbeafe;
            border-color: #93c5fd;
            color: #123d66;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .04em;
            padding: 8px 7px;
        }
        .muted { color: var(--muted); }
        .status {
            display: inline-block;
            border: 1px solid #cbd5e1;
            border-radius: 999px;
            padding: 1px 8px;
            font-size: 10px;
            background: #fff;
        }
        .status-active { color: #166534; border-color: #86efac; background: #f0fdf4; }
        .status-inactive { color: #991b1b; border-color: #fecaca; background: #fef2f2; }
        .footer-note {
            margin-top: 14px;
            display: flex;
            justify-content: space-between;
            color: var(--muted);
            font-size: 10px;
            border-top: 1px solid var(--line);
            padding-top: 8px;
        }
        .col-code { width: 11%; }
        .col-name { width: 28%; }
        .col-type { width: 18%; }
        .col-balance { width: 14%; text-align: right; }
        .col-status { width: 10%; }
        .col-desc { width: 19%; }
        .tree-name { position: relative; }
        .tree-guide {
            display: inline-block;
            color: #94a3b8;
            font-weight: 400;
            margin-right: 4px;
        }
        @page { size: A4 landscape; margin: 11mm; }
        @media print {
            body {
                background: #fff;
                padding: 0;
                font-size: 10px;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            .toolbar { display: none !important; }
            .report-page {
                max-width: none;
                border: 0;
                box-shadow: none;
                padding: 0;
            }
            .report-header { padding-bottom: 10px; }
            .company-name { font-size: 16px; }
            .report-title h1 { font-size: 18px; }
            .summary { margin: 10px 0; gap: 6px; }
            .summary-card { padding: 6px 8px; border-radius: 4px; }
            .summary-card strong { font-size: 14px; }
            thead { display: table-header-group; }
            tr { break-inside: avoid; page-break-inside: avoid; }
            thead th { padding: 5px; font-size: 8px; }
            tbody td { padding: 4px 5px; }
            .section-row td { padding: 5px; }
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <a class="btn" href="{{ route('coa.index') }}">Back to COA</a>
        <button class="btn btn-primary" onclick="window.print()">Print Report</button>
    </div>

    <main class="report-page">
        <header class="report-header">
            <div>
                <div class="company-name">{{ $company?->name ?? config('app.name') }}</div>
                <div class="company-meta">
                    @if($company?->legal_name)<div>{{ $company->legal_name }}</div>@endif
                    @if($company?->address)<div>{{ $company->address }}</div>@endif
                    @if($company?->city || $company?->country)<div>{{ trim(($company->city ?? '') . ', ' . ($company->country ?? ''), ', ') }}</div>@endif
                    @if($company?->email)<div>{{ $company->email }}</div>@endif
                </div>
            </div>
            <div class="report-title">
                <h1>Chart of Accounts</h1>
                <div>Printed: {{ now()->format('d M Y, h:i A') }}</div>
                <div>Company Code: {{ auth()->user()->company_code ?? auth()->user()->company?->company_code ?? '—' }}</div>
            </div>
        </header>

        <section class="summary">
            <div class="summary-card"><span>Total Accounts</span><strong>{{ $stats['total'] }}</strong></div>
            <div class="summary-card"><span>Active</span><strong>{{ $stats['active'] }}</strong></div>
            <div class="summary-card"><span>Inactive</span><strong>{{ $stats['inactive'] }}</strong></div>
            <div class="summary-card"><span>Postable</span><strong>{{ $stats['postable'] }}</strong></div>
        </section>

        <table>
            <thead>
                <tr>
                    <th class="col-code">Account No.</th>
                    <th class="col-name">Account Name</th>
                    <th class="col-type">Account Type</th>
                    <th class="col-balance text-end">Balance</th>
                    <th class="col-status">Status</th>
                    <th class="col-desc">Description</th>
                </tr>
            </thead>
            <tbody>
                @foreach($sections as $section)
                    @php $accs = collect($section['accs'] ?? []); @endphp
                    @continue($accs->isEmpty())
                    <tr class="section-row">
                        <td colspan="6">{{ $section['label'] }} ({{ $accs->count() }})</td>
                    </tr>
                    @foreach($accs as $account)
                    <tr>
                        <td>{{ $account->code ?: '—' }}</td>
                        <td>
                            @php $treeDepth = (int) ($account->display_depth ?? $account->depth ?? 0); @endphp
                            <div class="tree-name" style="padding-left:{{ $treeDepth * 16 }}px">
                                @if($treeDepth > 0)<span class="tree-guide">↳</span>@endif
                                <strong>{{ $account->name }}</strong>
                            </div>
                            @if($account->is_group)<div class="muted" style="padding-left:{{ $treeDepth * 16 }}px">Group account</div>@endif
                            @if($account->is_system)<div class="muted" style="padding-left:{{ $treeDepth * 16 }}px">System generated</div>@endif
                        </td>
                        <td>{{ $account->qb_account_type }}</td>
                        <td class="text-end">{{ $account->current_balance_display ?? '—' }}</td>
                        <td>
                            <span class="status {{ $account->is_active ? 'status-active' : 'status-inactive' }}">
                                {{ $account->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </td>
                        <td>{{ $account->description ?: '—' }}</td>
                    </tr>
                    @endforeach
                @endforeach
            </tbody>
        </table>

        <div class="footer-note">
            <span>Generated from {{ config('app.name') }}</span>
            <span>Prepared by: {{ auth()->user()->name ?? auth()->user()->username }}</span>
        </div>
    </main>
</body>
</html>
