@extends('layouts.portal')

@section('title', __('Subaccounts Tree'))

@push('styles')
    <style>
        .subaccounts-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
        .subaccounts-actions { display: flex; flex-wrap: wrap; gap: 8px; }
        .subaccounts-scroll { overflow-x: auto; border: 1px solid #d8e1d9; background: #fff; }
        .subaccounts-scroll { --subaccounts-columns: 80px 110px minmax(220px, 2fr) minmax(150px, 1.2fr) 130px 130px 120px; }
        .subaccounts-grid { display: grid; min-width: 1050px; grid-template-columns: var(--subaccounts-columns); align-items: center; }
        .subaccounts-heading { position: sticky; top: 0; z-index: 1; color: #40534b; background: #e9eee9; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
        .subaccounts-cell { min-height: 38px; padding: 8px 10px; border-bottom: 1px solid #e4e9e4; }
        .subaccounts-heading .subaccounts-cell { min-height: 36px; border-bottom: 2px solid #9fb0a5; }
        .subaccounts-tree, .subaccounts-tree ul { margin: 0; padding: 0; list-style: none; }
        .subaccounts-node > summary { display: block; cursor: pointer; list-style: none; }
        .subaccounts-node > summary::-webkit-details-marker { display: none; }
        .subaccounts-node > summary:hover .subaccounts-row,
        .subaccounts-leaf:hover { background: #f3f7d9; }
        .subaccounts-row { display: grid; min-width: 1050px; grid-template-columns: var(--subaccounts-columns); align-items: center; }
        .subaccounts-account { display: flex; align-items: center; gap: 7px; padding-left: calc(var(--depth, 0) * 18px + 10px); }
        .subaccounts-toggle { width: 14px; color: #64756d; font-size: 10px; }
        .subaccounts-node:not([open]) > summary .subaccounts-toggle { transform: rotate(-90deg); }
        .subaccounts-leaf .subaccounts-account { padding-left: calc(var(--depth, 0) * 18px + 10px); }
        .subaccounts-id { font-variant-numeric: tabular-nums; color: #52645c; }
        .subaccounts-code { font-weight: 700; font-variant-numeric: tabular-nums; }
        .subaccounts-bool { color: #52645c; font-size: 12px; }
        .subaccounts-empty { padding: 30px; color: #64756d; text-align: center; }

        @media (max-width: 700px) {
            .subaccounts-toolbar { align-items: flex-start; flex-direction: column; }
        }
    </style>
@endpush

@section('content')
<div class="portal-page">
    @include('partials.portal-header')

    <main class="module-main">
        <div class="module-heading">
            <div>
                <p class="eyebrow">{{ __('General Ledger') }}</p>
                <h1>{{ __('Subaccounts Tree') }}</h1>
                <p>{{ __('All active accounts from the accounting.Subaccounts view, arranged in an expandable parent-child tree.') }}</p>
            </div>
            <a class="module-link" href="{{ route('accounting.accounts.index') }}">{{ __('Chart of Accounts') }} &rarr;</a>
        </div>

        <div class="subaccounts-toolbar">
            <span class="text-muted">{{ __('Subaccounts: :count', ['count' => $subaccountCount]) }}</span>
            <div class="subaccounts-actions">
                <a class="module-link" href="{{ route('accounting.subaccounts.pdf') }}" target="_blank" rel="noopener">{{ __('Print PDF') }}</a>
                <button type="button" class="module-link" data-tree-action="expand">{{ __('Expand all') }}</button>
                <button type="button" class="module-link" data-tree-action="collapse">{{ __('Collapse all') }}</button>
            </div>
        </div>

        <section class="subaccounts-scroll" aria-label="{{ __('Subaccounts') }}">
            <div class="subaccounts-grid subaccounts-heading" aria-hidden="true">
                <div class="subaccounts-cell">{{ __('ID') }}</div>
                <div class="subaccounts-cell">{{ __('Code') }}</div>
                <div class="subaccounts-cell">{{ __('Account') }}</div>
                <div class="subaccounts-cell">{{ __('Parent account') }}</div>
                <div class="subaccounts-cell">{{ __('Type') }}</div>
                <div class="subaccounts-cell">{{ __('Party-associated') }}</div>
                <div class="subaccounts-cell">{{ __('Stock-associated') }}</div>
            </div>

            @if($tree === [])
                <div class="subaccounts-empty">{{ __('No active accounts are available.') }}</div>
            @else
                <ul class="subaccounts-tree">
                    @foreach($tree as $account)
                        @include('accounting.subaccounts._node', ['account' => $account, 'depth' => 0])
                    @endforeach
                </ul>
            @endif
        </section>
        <script>
            document.querySelectorAll('[data-tree-action]').forEach((button) => {
                button.addEventListener('click', () => {
                    const shouldExpand = button.dataset.treeAction === 'expand';
                    document.querySelectorAll('.subaccounts-node').forEach((node) => {
                        node.open = shouldExpand;
                    });
                });
            });
        </script>
    </main>
</div>
@endsection