@extends('layouts.app')
@section('title', 'Chart of Accounts')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active">Chart of Accounts</li>
@endsection

@push('styles')
<style>
.type-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0;margin-top:4px}
#coaTable thead th{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#6b7280;border-bottom:2px solid #e5e7eb;padding:10px 12px}
#coaTable tbody td{vertical-align:middle;padding:10px 12px}
#coaTable tbody tr:hover{background:#f0f9ff}
.sec-row td{background:#f9fafb!important;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#6b7280;padding:7px 12px!important;border-top:2px solid #e5e7eb!important}
.act-btn{background:#fff;border:1px solid #d1d5db;border-radius:4px;padding:3px 10px;font-size:12.5px;font-weight:500;color:#374151;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.act-btn:hover{background:#f3f4f6}
.detail-pill{display:inline-block;font-size:11.5px;padding:1px 8px;border-radius:10px;background:#f3f4f6;color:#4b5563}
.type-info-box{font-size:12px;padding:7px 10px;border-radius:6px;background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;display:none;line-height:1.35}
.print-report-header{display:none}
@media print{
    @page{size:A4 landscape;margin:12mm}
    html,body{background:#fff!important;color:#111827!important;font-size:11px!important}
    #sidebar,#topbar,.coa-create-window,.coa-create-overlay,.modal,.modal-backdrop,.page-header .d-flex,#filterBar,.act-btn,.dropdown-menu,.btn{display:none!important}
    #main{margin-left:0!important;padding-top:0!important;min-height:auto!important}
    .page-content{padding:0!important}
    .page-header{display:block!important;margin:0 0 10px!important;border-bottom:2px solid #111827;padding-bottom:8px}
    .page-title{font-size:18px!important;margin:0!important;color:#111827!important}
    .page-subtitle{font-size:11px!important;color:#374151!important;margin-top:3px!important}
    .print-report-header{display:flex!important;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #d1d5db;margin-bottom:10px;padding-bottom:8px}
    .print-report-title{font-size:13px;font-weight:700;color:#111827;text-transform:uppercase;letter-spacing:.05em}
    .print-report-meta{font-size:10px;color:#4b5563;text-align:right;line-height:1.5}
    .card{border:0!important;box-shadow:none!important}
    .card-body{padding:0!important}
    .table-responsive{overflow:visible!important}
    #coaTable{width:100%!important;min-width:0!important;border-collapse:collapse!important}
    #coaTable thead th{background:#f3f4f6!important;color:#111827!important;border:1px solid #d1d5db!important;padding:6px 7px!important;font-size:9px!important;letter-spacing:.04em}
    #coaTable tbody td{border:1px solid #e5e7eb!important;padding:5px 7px!important;font-size:10px!important;vertical-align:top!important}
    #coaTable th:nth-child(5),#coaTable td:nth-child(5){display:none!important}
    #coaTable tbody tr{break-inside:avoid;page-break-inside:avoid}
    .sec-row td{background:#e5e7eb!important;color:#111827!important;border:1px solid #9ca3af!important;font-size:10px!important;padding:6px 7px!important}
    .type-dot{width:6px!important;height:6px!important;margin-top:4px!important}
    .badge,.detail-pill{border:1px solid #d1d5db!important;background:#fff!important;color:#111827!important;font-size:8px!important;padding:1px 5px!important}
    a[href]:after{content:""!important}
}
</style>
@endpush

@section('content')

<div class="print-report-header">
    <div>
        <div class="print-report-title">{{ auth()->user()->company?->name ?? config('app.name') }}</div>
        <div>Chart of Accounts</div>
    </div>
    <div class="print-report-meta">
        <div>Printed: {{ now()->format('d M Y, h:i A') }}</div>
        <div>Total: {{ $stats['total'] }} | Active: {{ $stats['active'] }} | Inactive: {{ $stats['inactive'] }}</div>
    </div>
</div>

<div class="page-header">
    <div>
        <h1 class="page-title">Chart of Accounts</h1>
        <p class="page-subtitle">
            {{ $stats['total'] }} accounts &nbsp;·&nbsp;
            <span class="text-success">{{ $stats['active'] }} active</span> &nbsp;·&nbsp;
            <span class="text-muted">{{ $stats['inactive'] }} inactive</span>
        </p>
    </div>
    <div class="d-flex gap-2">
        <a class="btn btn-outline-success btn-sm d-none d-sm-inline-flex" href="{{ route('coa.export') }}">
            <i class="bi bi-file-earmark-excel me-1"></i>Export
        </a>
        <a class="btn btn-outline-secondary btn-sm d-none d-sm-inline-flex" href="{{ route('coa.print') }}" target="_blank">
            <i class="bi bi-printer me-1"></i>Print
        </a>
        @if(auth()->user()->hasPermission('accounts','create'))
        <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#importCoaModal">
            <i class="bi bi-upload me-1"></i>Import
        </button>
        <button class="btn btn-primary" id="btnNew">
            <i class="bi bi-plus-lg me-1"></i>New
        </button>
        @endif
    </div>
</div>

@if(session('success'))
<div class="alert alert-success alert-dismissible d-flex gap-2 align-items-center mb-3" style="font-size:13.5px">
    <i class="bi bi-check-circle flex-shrink-0"></i><div>{{ session('success') }}</div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
</div>
@endif
@if($errors->any())
<div class="alert alert-danger alert-dismissible mb-3">
    @foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

{{-- Filter Bar --}}
<div class="card mb-3" id="filterBar">
    <div class="card-body py-2 px-3">
        <div class="row g-2 align-items-center">
            <div class="col-12 col-sm-5 col-md-4">
                <div class="input-group input-group-sm">
                    <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
                    <input id="srch" type="text" class="form-control border-start-0 ps-0" placeholder="Search by name or number…">
                    <button id="srchClear" class="btn btn-outline-secondary d-none"><i class="bi bi-x-lg"></i></button>
                </div>
            </div>
            <div class="col-6 col-sm-3 col-md-2">
                <select id="fTypeFilter" class="form-select form-select-sm">
                    <option value="">All Account Types</option>
                    @foreach($sectionMeta ?? [] as $meta)
                        <option value="{{ strtolower($meta['label']) }}">{{ $meta['label'] }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-sm-3 col-md-2">
                <select id="fStatusFilter" class="form-select form-select-sm">
                    <option value="1">Active</option>
                    <option value="0">Inactive</option>
                    <option value="">All</option>
                </select>
            </div>
            <div class="col-auto ms-auto">
                <span id="rowCount" class="text-muted" style="font-size:12.5px"></span>
            </div>
        </div>
    </div>
</div>

{{-- COA Table --}}
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0" id="coaTable" style="min-width:720px">
                <thead>
                    <tr>
                        <th class="ps-4" style="width:11%"><span class="sort-hd" data-col="code" style="cursor:pointer">CODE <i class="bi bi-chevron-expand" style="font-size:10px"></i></span></th>
                        <th style="width:34%"><span class="sort-hd" data-col="name" style="cursor:pointer">NAME <i class="bi bi-chevron-expand" style="font-size:10px"></i></span></th>
                        <th style="width:16%"><span class="sort-hd" data-col="type" style="cursor:pointer">TYPE <i class="bi bi-chevron-expand" style="font-size:10px"></i></span></th>
                        <th class="d-none d-sm-table-cell text-end" style="width:14%">BALANCE</th>
                        <th class="text-end pe-4" style="width:15%">ACTION</th>
                    </tr>
                </thead>
                <tbody id="coaTbody">
@php
$typeColors = ['asset'=>'#2563EB','liability'=>'#DC2626','equity'=>'#16A34A','income'=>'#D97706','expense'=>'#7C3AED'];
$sections = collect($sections ?? [])->map(function ($section) {
    $section['accs'] = collect($section['accs'] ?? []);
    return $section;
});
@endphp
@foreach($sections as $section)
@php $accs=$section['accs']; @endphp
@continue($accs->isEmpty())
<tr class="sec-row" data-section="{{ $section['key'] }}">
    <td colspan="5"><span style="color:{{ $section['color'] }}">●</span> &nbsp;{{ $section['label'] }}<span class="ms-2 fw-normal text-muted" style="font-size:10.5px">({{ $accs->count() }})</span></td>
</tr>
@foreach($accs as $acc)
<tr data-type="{{ $acc->type }}" data-section="{{ $acc->qb_section ?? $section['key'] }}" data-account-type="{{ strtolower($acc->qb_account_type ?? $section['label']) }}" data-active="{{ $acc->is_active ? '1':'0' }}" data-name="{{ strtolower($acc->name) }}" data-code="{{ strtolower($acc->code ?? '') }}">
    <td class="ps-4" style="font-family:monospace;font-size:12.5px;color:{{ $acc->is_active ? '#374151':'#9ca3af' }};white-space:nowrap">
        {{ $acc->code ?: '—' }}
    </td>
    <td>
        <div class="d-flex align-items-start gap-2">
            @if(($acc->display_depth ?? $acc->depth) > 0)<span style="width:{{ ($acc->display_depth ?? $acc->depth) * 16 }}px;flex-shrink:0"></span>@endif
            <span class="type-dot mt-1" style="background:{{ $typeColors[$acc->type] ?? '#9ca3af' }};opacity:{{ $acc->is_active ? '.85':'.35' }}"></span>
            <div>
                <div style="font-size:13.5px;font-weight:600;color:{{ $acc->is_active ? '#111827':'#9ca3af' }}">
                    {{ $acc->name }}
                    @if($acc->is_bank)<span class="badge ms-1" style="background:#EFF6FF;color:#1D4ED8;font-size:10px">Bank</span>@endif
                    @if($acc->is_cash)<span class="badge ms-1" style="background:#F0FDF4;color:#15803D;font-size:10px">Cash</span>@endif
                    @if(!$acc->is_active)<span class="badge bg-secondary ms-1" style="font-size:10px">Inactive</span>@endif
                </div>
                @if($acc->parent_id && $acc->parent)<div style="font-size:11px;color:#9ca3af">Sub-account of {{ $acc->parent->name }}</div>@endif
            </div>
        </div>
    </td>
    <td style="font-size:13px;color:#374151;white-space:nowrap">{{ $acc->qb_account_type ?? $section['label'] }}</td>
    <td class="d-none d-sm-table-cell text-end text-money" style="font-size:13px;color:#374151;font-weight:600">
        @if($acc->show_current_balance ?? false)
            @php
                $balanceText = \App\Helpers\NumberHelper::formatAmount($acc->current_balance_value ?? 0, $companyId)
                    . ($acc->current_balance_suffix ?? '');
            @endphp
            <a href="{{ route('reports.general-ledger', ['account_id' => $acc->id]) }}" class="text-decoration-none fw-semibold" title="Open General Ledger">
                {{ $balanceText }}
            </a>
        @else
            —
        @endif
    </td>
    <td class="text-end pe-4">
        <div class="dropdown">
            <button class="act-btn dropdown-toggle" data-bs-toggle="dropdown">
                Edit <i class="bi bi-chevron-down" style="font-size:10px"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow-sm" style="font-size:13px;min-width:175px">
                @if(auth()->user()->hasPermission('accounts','edit'))
                <li><button type="button" class="dropdown-item py-2 btn-edit"
                    data-id="{{ $acc->id }}" data-name="{{ $acc->name }}"
                    data-code="{{ $acc->code ?? '' }}" data-type="{{ $acc->type }}"
                    data-subtype="{{ $acc->sub_type ?? '' }}" data-detail-type="{{ $acc->qb_detail_type ?? $acc->detail_type ?? '' }}" data-section="{{ $acc->qb_section ?? $section['key'] }}" data-description="{{ $acc->description ?? '' }}"
                    data-is-bank="{{ $acc->is_bank ? '1':'0' }}" data-is-cash="{{ $acc->is_cash ? '1':'0' }}"
                    data-is-active="{{ $acc->is_active ? '1':'0' }}" data-is-group="{{ $acc->is_group ? '1':'0' }}" data-parent="{{ $acc->parent_id ?? '' }}"
                    data-url="{{ route('coa.update', $acc) }}">
                    <i class="bi bi-pencil me-2 text-primary"></i>Edit
                </button></li>
                @endif
                <li>
                    <a class="dropdown-item py-2" href="{{ route('reports.general-ledger', ['account_id' => $acc->id]) }}">
                        <i class="bi bi-bar-chart-line me-2 text-secondary"></i>Run Report
                    </a>
                </li>
                @if(!$acc->is_system && auth()->user()->hasPermission('accounts','edit'))
                <li><hr class="dropdown-divider my-1"></li>
                <li>
                    <form method="POST" action="{{ route('coa.update', $acc) }}">
                        @csrf @method('PUT')
                        <input type="hidden" name="name"        value="{{ $acc->name }}">
                        <input type="hidden" name="code"        value="{{ $acc->code }}">
                        <input type="hidden" name="type"        value="{{ $acc->type }}">
                        <input type="hidden" name="sub_type"    value="{{ $acc->sub_type }}">
                        <input type="hidden" name="detail_type" value="{{ $acc->qb_detail_type ?? $acc->detail_type }}">
                        <input type="hidden" name="description" value="{{ $acc->description }}">
                        <input type="hidden" name="parent_id"   value="{{ $acc->parent_id }}">
                        <input type="hidden" name="is_group"    value="{{ $acc->is_group ? '1':'0' }}">
                        <input type="hidden" name="is_active"   value="{{ $acc->is_active ? '0':'1' }}">
                        <input type="hidden" name="is_bank"     value="{{ $acc->is_bank ? '1':'0' }}">
                        <input type="hidden" name="is_cash"     value="{{ $acc->is_cash ? '1':'0' }}">
                        <button type="submit" class="dropdown-item py-2 {{ $acc->is_active ? 'text-danger':'text-success' }}">
                            <i class="bi bi-{{ $acc->is_active ? 'eye-slash':'eye' }} me-2"></i>
                            Make {{ $acc->is_active ? 'Inactive':'Active' }}
                        </button>
                    </form>
                </li>
                @endif
                @if(!$acc->is_system && auth()->user()->hasPermission('accounts','delete'))
                <li>
                    <form method="POST" action="{{ route('coa.destroy', $acc) }}"
                          onsubmit="return confirm('Delete \'{{ addslashes($acc->name) }}\'? This cannot be undone.')">
                        @csrf @method('DELETE')
                        <button type="submit" class="dropdown-item py-2 text-danger">
                            <i class="bi bi-trash me-2"></i>Delete
                        </button>
                    </form>
                </li>
                @endif
            </ul>
        </div>
    </td>
</tr>
@endforeach
@endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>


{{-- Import Modal --}}
<div class="modal fade" id="importCoaModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="{{ route('coa.import') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header border-0 pb-0">
                    <div>
                        <h5 class="modal-title fw-bold">Import Chart of Accounts</h5>
                        <div class="text-muted" style="font-size:12.5px">Upload Excel/CSV to create or update accounts in bulk.</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info mb-3" style="font-size:12.5px">
                        <strong>Easy Excel format</strong> — download the current list, edit it, and upload again.
                        Keep the header row unchanged.
                    </div>

                    <div class="mb-3 p-3 rounded-2 border" style="background:#f8fafc;font-size:12.5px">
                        <div class="fw-semibold mb-2">Mother account vs sub-account</div>
                        <ul class="mb-2 ps-3">
                            <li><strong>Mother account</strong> — leave <strong>Parent Account No.</strong> blank.</li>
                            <li><strong>Sub-account</strong> — put the mother account number in <strong>Parent Account No.</strong></li>
                            <li>List the mother account <strong>above</strong> its sub-accounts in the file.</li>
                            <li>Sub-accounts must use the <strong>same Account Type</strong> as their mother account.</li>
                        </ul>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered mb-0 bg-white" style="font-size:11.5px">
                                <thead class="table-light">
                                    <tr>
                                        <th>Account No.</th>
                                        <th>Account Name</th>
                                        <th>Account Type</th>
                                        <th>Parent Account No.</th>
                                        <th>Balance</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>2700</td>
                                        <td>Advance &amp; Prepayments</td>
                                        <td>Other Current Assets</td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>2701</td>
                                        <td>Employee Advance</td>
                                        <td>Other Current Assets</td>
                                        <td>2700</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>270101</td>
                                        <td>Employee-1</td>
                                        <td>Other Current Assets</td>
                                        <td>2701</td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="text-muted mt-2" style="font-size:11.5px">
                            <strong>2700 Advance &amp; Prepayments</strong> is the mother account.
                            <strong>2701 Employee Advance</strong> is a sub-account of <strong>2700</strong>.
                            <strong>270101 Employee-1</strong> is a sub-account of <strong>2701</strong>.
                            Leave <strong>Balance</strong> blank if you do not want to set an opening balance.
                        </div>
                    </div>

                    <div class="mb-3" style="font-size:12px">
                        <div class="fw-semibold mb-1">Column guide</div>
                        <div class="row g-2">
                            <div class="col-md-6"><strong>Account No.</strong> — unique number (recommended)</div>
                            <div class="col-md-6"><strong>Account Name</strong> — required</div>
                            <div class="col-md-6"><strong>Account Type</strong> — e.g. Bank, Expenses, Income</div>
                            <div class="col-md-6"><strong>Parent Account No.</strong> — mother account number, or blank</div>
                            <div class="col-md-6"><strong>Balance</strong> — optional opening balance (any format: 1,48,180.00 / 1.234,56 / -5000 / Dr or Cr)</div>
                            <div class="col-md-6"><strong>Status</strong> — Active or Inactive</div>
                            <div class="col-md-6"><strong>Bank / Cash</strong> — Yes for bank or cash ledgers</div>
                        </div>
                    </div>

                    <label class="form-label fw-semibold">Excel / CSV File <span class="text-danger">*</span></label>
                    <input type="file" name="coa_file" class="form-control" accept=".xlsx,.xls,.csv" required>
                    <div class="form-text">Maximum file size: 10 MB. Existing accounts with the same account number will be updated.</div>
                    <div class="mt-3">
                        <a href="{{ route('coa.export') }}" class="btn btn-outline-success btn-sm">
                            <i class="bi bi-file-earmark-excel me-1"></i>Download current list as template
                        </a>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-upload me-1"></i>Import Accounts
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Overlay --}}
<div class="panel-overlay coa-create-overlay" id="overlay"></div>

{{-- Create / Edit window --}}
<div class="slide-panel coa-create-window" id="slidePanel">
    <div class="sp-header">
        <div class="d-flex justify-content-between align-items-start">
            <div>
                <h5 class="mb-0 fw-bold" id="panelTitle" style="font-size:16px;line-height:1.25">New Account</h5>
                <p class="mb-0 text-muted mt-1" id="panelSub" style="font-size:12px;line-height:1.3">Create a new account to track money in your business.</p>
            </div>
            <button type="button" id="btnClose" class="btn-close mt-1"></button>
        </div>
    </div>
    <div class="sp-body coa-create-compact">
        <form id="panelForm" method="POST">
            @csrf
            <input type="hidden" name="_method" id="fMethod" value="POST">
            <input type="hidden" name="account_section" id="fAccountSection" value="">
            <input type="hidden" name="sub_type" id="fSubType" value="">
            <input type="hidden" name="is_group" id="fIsGroup" value="0">
            <input type="hidden" id="fTypeHidden" name="type" value="">

            <div id="panelFormError" class="alert alert-danger d-none py-2 px-3 mb-2" style="font-size:13px"></div>

            <div class="coa-create-grid mb-1">
                <div>
                    <label class="form-label fw-semibold">Account Type <span class="text-danger">*</span></label>
                    <select id="fTypeSelect" class="form-select" required>
                        <option value="">— Select Account Type —</option>
                        <option value="bank">Bank</option>
                        <option value="accounts_receivable">Accounts Receivable (A/R)</option>
                        <option value="other_current_assets">Other Current Assets</option>
                        <option value="fixed_assets">Fixed Assets</option>
                        <option value="other_assets">Other Assets</option>
                        <option value="accounts_payable">Accounts Payable (A/P)</option>
                        <option value="credit_card">Credit Card</option>
                        <option value="other_current_liabilities">Other Current Liabilities</option>
                        <option value="long_term_liabilities">Long-Term Liabilities</option>
                        <option value="equity">Equity</option>
                        <option value="income">Income</option>
                        <option value="other_income">Other Income</option>
                        <option value="cost_of_goods_sold">Cost of Goods Sold</option>
                        <option value="expenses">Expenses</option>
                        <option value="other_expense">Other Expense</option>
                    </select>
                </div>
                <div>
                    <label class="form-label fw-semibold">Number</label>
                    <input type="text" id="fCode" name="code" class="form-control" placeholder="e.g. 1010" style="font-family:monospace">
                </div>
            </div>
            <div id="typeInfoBox" class="type-info-box mb-1"></div>

            <div class="mb-1">
                <label class="form-label fw-semibold">Name <span class="text-danger">*</span></label>
                <input type="text" id="fName" name="name" class="form-control" required placeholder="e.g. Checking Account">
            </div>

            <div class="mb-1 coa-create-sub-block">
                <div class="form-check form-switch mb-0">
                    <input class="form-check-input" type="checkbox" id="fIsSubAcc" role="switch">
                    <label class="form-check-label fw-semibold" for="fIsSubAcc">Is sub-account</label>
                </div>
                <div id="parentRow" style="display:none;margin-top:6px">
                    <label class="form-label fw-semibold coa-create-sub-label">Parent Account</label>
                    @include('accounting.coa._parent-picker', [
                        'pickerId' => 'coaPanelParentPicker',
                        'inputName' => 'parent_id',
                        'allowAddNew' => auth()->user()->hasPermission('accounts', 'create'),
                        'compact' => true,
                    ])
                    <div class="coa-parent-inline-add" id="coaPanelParentInlineAdd">
                        <div class="row g-2 align-items-end">
                            <div class="col-sm-5">
                                <label class="form-label fw-semibold mb-1" style="font-size:12px">Parent Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-sm coa-panel-parent-name" maxlength="150">
                            </div>
                            <div class="col-sm-3">
                                <label class="form-label fw-semibold mb-1" style="font-size:12px">Code</label>
                                <input type="text" class="form-control form-control-sm coa-panel-parent-code" maxlength="30">
                            </div>
                            <div class="col-sm-4 d-flex gap-2">
                                <button type="button" class="btn btn-primary btn-sm coa-panel-parent-create">Create Parent</button>
                                <button type="button" class="btn btn-outline-secondary btn-sm coa-panel-parent-cancel">Cancel</button>
                            </div>
                        </div>
                        <div class="text-danger mt-1 d-none coa-panel-parent-error" style="font-size:12px"></div>
                    </div>
                </div>
            </div>

            <div id="bankCashRow" class="mb-1 coa-create-flags" style="display:none">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" name="is_bank" value="1" id="fIsBank" role="switch">
                    <label class="form-check-label" for="fIsBank">Bank Account</label>
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" name="is_cash" value="1" id="fIsCash" role="switch">
                    <label class="form-check-label" for="fIsCash">Cash Account</label>
                </div>
            </div>

            <div id="statusRow" class="mb-0 coa-create-sub-block" style="display:none">
                <div class="form-check form-switch mb-0">
                    <input class="form-check-input" type="checkbox" name="is_active" value="1" id="fIsActive" checked role="switch">
                    <label class="form-check-label fw-semibold" for="fIsActive">Active</label>
                </div>
            </div>
        </form>
    </div>
    <div class="sp-footer">
        <button type="button" id="btnCancel" class="btn btn-outline-secondary btn-sm px-3">Cancel</button>
        <button type="button" id="btnSaveNew" class="btn btn-outline-primary btn-sm px-3">Save &amp; New</button>
        <button type="button" id="btnSave" class="btn btn-primary btn-sm px-3">
            <i class="bi bi-check2 me-1"></i>Save and Close
        </button>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/coa-parent-picker.js') }}?v={{ filemtime(public_path('js/coa-parent-picker.js')) }}"></script>
<script>
const sectionMeta = @json($sectionMeta);
let parentPickerTreeData = @json($parentPickerTree ?? []);
let parentPickerAccounts = @json($parentPickerAccounts ?? []);
let parentAccountMap = Object.fromEntries(parentPickerAccounts.map(acc => [String(acc.id), acc]));
const typeDescMap = Object.fromEntries(
    Object.entries(sectionMeta).map(([key, meta]) => [key, meta.description || meta.label])
);
const coaStoreAjaxUrl = @json(route('coa.store-ajax'));
const coaQuickStoreUrl = @json(route('coa.quick-store'));
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
const panelParentPickerEl = document.getElementById('coaPanelParentPicker');
let panelSaveAction = 'close';

function accountsMapFromList(list) {
    return Object.fromEntries(list.map(acc => [String(acc.id), acc]));
}

function refreshPanelParentPicker(typeFilter, selectedId) {
    if (!panelParentPickerEl || typeof window.axisRefreshCoaParentPicker !== 'function') return;
    window.axisRefreshCoaParentPicker(panelParentPickerEl, {
        tree: parentPickerTreeData,
        accountsMap: parentAccountMap,
        typeFilter: typeFilter || '',
    });
    if (selectedId !== undefined) {
        window.axisSetCoaParentPickerValue(panelParentPickerEl, selectedId || '');
    }
}

function initPanelParentPicker(typeFilter) {
    if (!panelParentPickerEl || typeof window.axisInitCoaParentPicker !== 'function') return;
    window.axisInitCoaParentPicker(panelParentPickerEl, {
        tree: parentPickerTreeData,
        accountsMap: parentAccountMap,
        typeFilter: typeFilter || '',
        onAddNew: function () {
            document.getElementById('coaPanelParentInlineAdd')?.classList.add('is-open');
            document.querySelector('.coa-panel-parent-name')?.focus();
        },
    });
}

function collectDescendantIds(accountId) {
    const ids = [];
    const walk = (parentId) => {
        parentPickerAccounts
            .filter(acc => String(acc.parent_id) === String(parentId))
            .forEach(acc => {
                ids.push(String(acc.id));
                walk(acc.id);
            });
    };
    walk(accountId);
    return ids;
}

function showPanelError(message) {
    const el = document.getElementById('panelFormError');
    if (!el) return;
    el.textContent = message;
    el.classList.remove('d-none');
}

function hidePanelError() {
    document.getElementById('panelFormError')?.classList.add('d-none');
}

function syncBankCashRow() {
    const isBankSection = document.getElementById('fTypeSelect')?.value === 'bank';
    const row = document.getElementById('bankCashRow');
    if (!row) return;
    row.style.display = isBankSection ? '' : 'none';
    if (!isBankSection) {
        const bank = document.getElementById('fIsBank');
        const cash = document.getElementById('fIsCash');
        if (bank) bank.checked = false;
        if (cash) cash.checked = false;
    }
}

function openPanelParentPicker() {
    if (!panelParentPickerEl || typeof window.axisOpenCoaParentPicker !== 'function') return;
    requestAnimationFrame(() => window.axisOpenCoaParentPicker(panelParentPickerEl));
}
function openPanel(){document.getElementById('slidePanel').classList.add('open');document.getElementById('overlay').classList.add('open');document.body.style.overflow='hidden';}
function closePanel(){
    if (typeof window.axisCloseAllCoaParentPickers === 'function') {
        window.axisCloseAllCoaParentPickers();
    }
    document.getElementById('slidePanel').classList.remove('open');
    document.getElementById('overlay').classList.remove('open');
    document.body.style.overflow='';
}
function resetPanel(){
    document.getElementById('panelForm').reset();
    document.getElementById('typeInfoBox').style.display='none';
    document.getElementById('fAccountSection').value='';
    document.getElementById('fSubType').value='';
    document.getElementById('parentRow').style.display='none';
    document.getElementById('statusRow').style.display='none';
    document.getElementById('coaPanelParentInlineAdd')?.classList.remove('is-open');
    hidePanelError();
    syncBankCashRow();
    refreshPanelParentPicker(document.getElementById('fTypeHidden')?.value || '', '');
    document.getElementById('btnSave').innerHTML='<i class="bi bi-check2 me-1"></i>Save and Close';
    document.getElementById('btnSave').disabled=false;
    document.getElementById('btnSaveNew').disabled=false;
    ['fTypeSelect','fName'].forEach(i=>{document.getElementById(i).style.borderColor='';});
}

if (typeof window.axisWireExclusiveBankCash === 'function') {
    window.axisWireExclusiveBankCash(
        document.getElementById('fIsBank'),
        document.getElementById('fIsCash')
    );
}

document.getElementById('btnClose').addEventListener('click',closePanel);
document.getElementById('btnCancel').addEventListener('click',closePanel);
document.getElementById('overlay').addEventListener('click',closePanel);

document.getElementById('btnNew')?.addEventListener('click',()=>{
    resetPanel();
    document.getElementById('panelTitle').textContent='New Account';
    document.getElementById('panelSub').textContent='Create a new account to track money in your business.';
    document.getElementById('fMethod').value='POST';
    initPanelParentPicker('');
    openPanel();
    setTimeout(()=>document.getElementById('fTypeSelect').focus(),300);
});

document.querySelectorAll('.btn-edit').forEach(function(btn){
  btn.addEventListener('click',function(){
    resetPanel();
    document.getElementById('panelTitle').textContent='Edit Account';
    document.getElementById('panelSub').textContent='Update account details.';
    document.getElementById('panelForm').action=this.dataset.url;
    document.getElementById('fMethod').value='PUT';
    var type=this.dataset.type, sub=this.dataset.subtype;
    var isBank=this.dataset.isBank==='1', isCash=this.dataset.isCash==='1';
    var fk=this.dataset.section || '';
    if(!fk){
      var subToKey={'fixed_asset':'fixed_assets','other_asset':'other_assets','long_term_liability':'long_term_liabilities','cost_of_goods':'cost_of_goods_sold','other_income':'other_income','other_expense':'other_expense','retained_earnings':'equity'};
      var typeToKey={'asset':'other_current_assets','liability':'other_current_liabilities','equity':'equity','income':'income','expense':'expenses'};
      fk=(isBank||isCash)?'bank':(subToKey[sub]||typeToKey[type]||'');
    }
    var sel=document.getElementById('fTypeSelect');
    if(fk){sel.value=fk;sel.dispatchEvent(new Event('change'));}
    document.getElementById('fName').value=this.dataset.name;
    document.getElementById('fCode').value=this.dataset.code;
    document.getElementById('fDesc') && (document.getElementById('fDesc').value=this.dataset.description || '');
    document.getElementById('fIsBank').checked=isBank;
    document.getElementById('fIsCash').checked=isCash;
    document.getElementById('fIsGroup').value=this.dataset.isGroup==='1'?'1':'0';
    document.getElementById('fIsActive').checked=this.dataset.isActive==='1';
    document.getElementById('statusRow').style.display='';
    if(this.dataset.parent){
      document.getElementById('fIsSubAcc').checked=true;
      document.getElementById('parentRow').style.display='';
    }
    initPanelParentPicker(type);
    refreshPanelParentPicker(type, this.dataset.parent || '');
    openPanel();
  });
});

document.getElementById('fTypeSelect').addEventListener('change',function(){
    const key=this.value;
    const section=sectionMeta[key]||null;
    const realType=section?.type||'';
    document.getElementById('fTypeHidden').value=realType;
    document.getElementById('fAccountSection').value=key;
    document.getElementById('fSubType').value=section?.sub_type||'';
    const infoBox=document.getElementById('typeInfoBox');
    if(key&&typeDescMap[key]){infoBox.textContent=typeDescMap[key];infoBox.style.display='';}
    else{infoBox.style.display='none';}
    syncBankCashRow();
    if (panelParentPickerEl?.querySelector('.coa-parent-picker-input')?.value) {
        const selected=parentAccountMap[panelParentPickerEl.querySelector('.coa-parent-picker-input').value];
        if (!selected || selected.type!==realType) refreshPanelParentPicker(realType, '');
    } else {
        refreshPanelParentPicker(realType, '');
    }
});

document.getElementById('fIsSubAcc').addEventListener('change',function(){
    document.getElementById('parentRow').style.display=this.checked?'':'none';
    if (typeof window.axisCloseAllCoaParentPickers === 'function') {
        window.axisCloseAllCoaParentPickers();
    }
    if (this.checked) {
        const typeFilter = document.getElementById('fTypeHidden')?.value || '';
        initPanelParentPicker(typeFilter);
        refreshPanelParentPicker(typeFilter, panelParentPickerEl?.querySelector('.coa-parent-picker-input')?.value || '');
        openPanelParentPicker();
    } else {
        refreshPanelParentPicker(document.getElementById('fTypeHidden')?.value || '', '');
        document.getElementById('coaPanelParentInlineAdd')?.classList.remove('is-open');
    }
});

function validatePanelForm() {
    const selKey=document.getElementById('fTypeSelect').value;
    const name=document.getElementById('fName').value.trim();
    if(!selKey){document.getElementById('fTypeSelect').style.borderColor='#ef4444';document.getElementById('fTypeSelect').focus();return false;}
    if(!name){document.getElementById('fName').style.borderColor='#ef4444';document.getElementById('fName').focus();return false;}
    const isSub=document.getElementById('fIsSubAcc').checked;
    const parentInput=panelParentPickerEl?.querySelector('.coa-parent-picker-input');
    if(isSub && !parentInput?.value){
        panelParentPickerEl?.querySelector('.coa-parent-picker-toggle')?.classList.add('is-invalid');
        panelParentPickerEl?.querySelector('.coa-parent-picker-toggle')?.focus();
        return false;
    }
    return true;
}

function savePanelAccount(action) {
    panelSaveAction = action;
    if (!validatePanelForm()) return;

    const method = document.getElementById('fMethod').value;
    if (method !== 'POST') {
        document.getElementById('btnSave').innerHTML='<span class="spinner-border spinner-border-sm me-2"></span>Saving…';
        document.getElementById('btnSave').disabled=true;
        document.getElementById('panelForm').submit();
        return;
    }

    hidePanelError();
    const btnSave = document.getElementById('btnSave');
    const btnSaveNew = document.getElementById('btnSaveNew');
    btnSave.innerHTML='<span class="spinner-border spinner-border-sm me-2"></span>Saving…';
    btnSave.disabled=true;
    btnSaveNew.disabled=true;

    const payload = new FormData(document.getElementById('panelForm'));
    if (!document.getElementById('fIsSubAcc').checked) {
        payload.delete('parent_id');
    }

    fetch(coaStoreAjaxUrl, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
        body: payload,
    }).then(response => response.json().then(data => {
        if (!response.ok) throw data;
        return data;
    })).then(data => {
        parentPickerTreeData = data.parentPickerTree || parentPickerTreeData;
        parentPickerAccounts = data.parentPickerAccounts || parentPickerAccounts;
        parentAccountMap = accountsMapFromList(parentPickerAccounts);
        if (panelSaveAction === 'new') {
            resetPanel();
            initPanelParentPicker('');
            return;
        }
        closePanel();
        window.location.reload();
    }).catch(error => {
        const message = error?.message || (error?.errors ? Object.values(error.errors).flat().join(' ') : 'Unable to create account.');
        showPanelError(message);
    }).finally(() => {
        btnSave.innerHTML='<i class="bi bi-check2 me-1"></i>Save and Close';
        btnSave.disabled=false;
        btnSaveNew.disabled=false;
    });
}

document.getElementById('btnSave').addEventListener('click', function() {
    savePanelAccount('close');
});

document.getElementById('btnSaveNew')?.addEventListener('click', function() {
    savePanelAccount('new');
});

document.querySelector('.coa-panel-parent-cancel')?.addEventListener('click', function() {
    document.getElementById('coaPanelParentInlineAdd')?.classList.remove('is-open');
    document.querySelector('.coa-panel-parent-error')?.classList.add('d-none');
});

document.querySelector('.coa-panel-parent-create')?.addEventListener('click', function() {
    const inline = document.getElementById('coaPanelParentInlineAdd');
    const nameInput = inline?.querySelector('.coa-panel-parent-name');
    const codeInput = inline?.querySelector('.coa-panel-parent-code');
    const errorEl = inline?.querySelector('.coa-panel-parent-error');
    const name = nameInput?.value.trim() || '';
    if (!name) {
        if (errorEl) {
            errorEl.textContent = 'Parent account name is required.';
            errorEl.classList.remove('d-none');
        }
        nameInput?.focus();
        return;
    }
    const payload = new FormData();
    payload.append('intent', 'parent');
    payload.append('name', name);
    payload.append('code', codeInput?.value || '');
    payload.append('account_section', document.getElementById('fTypeSelect')?.value || '');
    fetch(coaQuickStoreUrl, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
        body: payload,
    }).then(response => response.json().then(data => {
        if (!response.ok) throw data;
        return data;
    })).then(data => {
        parentPickerTreeData = data.parentPickerTree || parentPickerTreeData;
        parentPickerAccounts = data.parentPickerAccounts || parentPickerAccounts;
        parentAccountMap = accountsMapFromList(parentPickerAccounts);
        refreshPanelParentPicker(document.getElementById('fTypeHidden')?.value || '', data.account?.id || '');
        inline?.classList.remove('is-open');
        if (nameInput) nameInput.value = '';
        if (codeInput) codeInput.value = '';
        errorEl?.classList.add('d-none');
    }).catch(error => {
        const message = error?.message || (error?.errors ? Object.values(error.errors).flat().join(' ') : 'Unable to create parent account.');
        if (errorEl) {
            errorEl.textContent = message;
            errorEl.classList.remove('d-none');
        }
    });
});

// Table filtering
function applyFilters(){
    const s=document.getElementById('srch').value.toLowerCase().trim();
    const t=document.getElementById('fTypeFilter').value;
    const a=document.getElementById('fStatusFilter').value;
    const rows=document.querySelectorAll('#coaTbody tr[data-name]');
    let vis=0;
    rows.forEach(r=>{
        const show=(!s||(r.dataset.name||'').includes(s)||(r.dataset.code||'').includes(s))&&(!t||r.dataset.accountType===t)&&(!a||r.dataset.active===a);
        r.style.display=show?'':'none';
        if(show)vis++;
    });
    document.querySelectorAll('#coaTbody tr.sec-row').forEach(sr=>{
        const st=sr.dataset.section;
        const has=[...rows].some(r=>r.dataset.section===st&&r.style.display!=='none');
        sr.style.display=has?'':'none';
    });
    document.getElementById('rowCount').textContent=vis===rows.length?`${rows.length} accounts`:`${vis} of ${rows.length} shown`;
    document.getElementById('srchClear').classList.toggle('d-none',!s);
}
document.getElementById('srch').addEventListener('input',applyFilters);
document.getElementById('fTypeFilter').addEventListener('change',applyFilters);
document.getElementById('fStatusFilter').addEventListener('change',applyFilters);
document.getElementById('srchClear').addEventListener('click',()=>{document.getElementById('srch').value='';applyFilters();});
applyFilters();
initPanelParentPicker('');
syncBankCashRow();

// Column headers keep hierarchy order; flat sorting breaks parent/child grouping.
document.querySelectorAll('.sort-hd').forEach(hd=>{
    hd.style.cursor='default';
    hd.addEventListener('click',function(e){
        e.preventDefault();
    });
});
</script>
@endpush