@include('accounting::admin.accounting._styles')

<div class="acc-wrap">
    <div class="acc-header">
        <div class="acc-header-left">
            <div class="acc-header-icon" style="background:linear-gradient(135deg,#6366f1,#4338ca)">
                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/></svg>
            </div>
            <div><h1>Balance Sheet</h1><div class="acc-header-sub">As of {{ \Carbon\Carbon::parse($asOf)->format('d M Y') }}</div></div>
        </div>
        <form method="GET" style="display:flex;gap:8px;align-items:flex-end;">
            <div class="acc-form-group" style="margin:0;"><label style="font-size:11px;">As of</label><input type="date" name="as_of" class="acc-form-control" value="{{ $asOf }}"></div>
            <button type="submit" class="btn-acc-primary">Apply</button>
        </form>
    </div>

    @php $totalSources = $equity['total'] + $liabs['total']; @endphp

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
        {{-- Assets --}}
        <div class="acc-card">
            <div class="acc-card-header" style="background:rgba(59,130,246,.06);">
                <h3 style="color:#1d4ed8;">Assets</h3>
                <span style="font-weight:700;color:#1d4ed8;">₹ {{ number_format($assets['total'],2) }}</span>
            </div>
            <div class="acc-card-body" style="padding:0;">
                <table style="width:100%;border-collapse:collapse;font-size:13px;">
                    <thead><tr style="background:var(--body-bg);"><th style="padding:8px 16px;">Account</th><th style="padding:8px 16px;">Group</th><th style="padding:8px 16px;text-align:right;">Amount (₹)</th></tr></thead>
                    <tbody>
                        @foreach($assets['rows'] as $row)
                        <tr style="border-top:1px solid var(--card-border);">
                            <td style="padding:10px 16px;">{{ $row['account'] }}</td>
                            <td style="padding:10px 16px;font-size:11px;color:var(--text-muted);">{{ $row['group'] }}</td>
                            <td style="padding:10px 16px;text-align:right;font-weight:600;">₹ {{ number_format($row['value'],2) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot><tr style="background:var(--body-bg);border-top:2px solid var(--card-border);"><td colspan="2" style="padding:10px 16px;font-weight:700;">Total Assets</td><td style="padding:10px 16px;text-align:right;font-weight:700;color:#1d4ed8;">₹ {{ number_format($assets['total'],2) }}</td></tr></tfoot>
                </table>
            </div>
        </div>

        {{-- Liabilities + Equity --}}
        <div>
            <div class="acc-card" style="margin-bottom:16px;">
                <div class="acc-card-header" style="background:rgba(99,102,241,.06);">
                    <h3 style="color:#4338ca;">Equity / Capital</h3>
                    <span style="font-weight:700;color:#4338ca;">₹ {{ number_format($equity['total'],2) }}</span>
                </div>
                <div class="acc-card-body" style="padding:0;">
                    <table style="width:100%;border-collapse:collapse;font-size:13px;">
                        <tbody>
                            @foreach($equity['rows'] as $row)
                            <tr style="border-top:1px solid var(--card-border);">
                                <td style="padding:10px 16px;">{{ $row['account'] }}</td>
                                <td style="padding:10px 16px;text-align:right;font-weight:600;">₹ {{ number_format($row['value'],2) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="acc-card">
                <div class="acc-card-header" style="background:rgba(220,38,38,.06);">
                    <h3 style="color:#dc2626;">Liabilities</h3>
                    <span style="font-weight:700;color:#dc2626;">₹ {{ number_format($liabs['total'],2) }}</span>
                </div>
                <div class="acc-card-body" style="padding:0;">
                    <table style="width:100%;border-collapse:collapse;font-size:13px;">
                        <tbody>
                            @foreach($liabs['rows'] as $row)
                            <tr style="border-top:1px solid var(--card-border);">
                                <td style="padding:10px 16px;">{{ $row['account'] }}<div style="font-size:11px;color:var(--text-muted);">{{ $row['group'] }}</div></td>
                                <td style="padding:10px 16px;text-align:right;font-weight:600;color:#dc2626;">₹ {{ number_format($row['value'],2) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot><tr style="background:var(--body-bg);border-top:2px solid var(--card-border);"><td style="padding:10px 16px;font-weight:700;">Total Equity + Liabilities</td><td style="padding:10px 16px;text-align:right;font-weight:700;">₹ {{ number_format($totalSources,2) }}</td></tr></tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Balance check --}}
    <div style="margin-top:16px;padding:14px 20px;border-radius:8px;font-size:13px;font-weight:600;{{ abs($assets['total'] - $totalSources) < 1 ? 'background:rgba(5,150,105,.1);color:#065f46;border:1px solid rgba(5,150,105,.3);' : 'background:rgba(220,38,38,.1);color:#991b1b;border:1px solid rgba(220,38,38,.3);' }}">
        {{ abs($assets['total'] - $totalSources) < 1 ? '✓ Balance Sheet is balanced.' : '⚠ Balance Sheet is NOT balanced. Difference: ₹'.number_format(abs($assets['total'] - $totalSources),2) }}
    </div>
</div>