@extends('layouts.app')
@section('title', 'Chart of Accounts')
@section('breadcrumbs')
<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li><li class="breadcrumb-item"><a href="#">Finance</a></li><li class="breadcrumb-item active">Chart of Accounts</li></ol></nav>
@endsection
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div><h1 class="h3 mb-1 text-dark fw-semibold">Chart of Accounts</h1><p class="text-muted mb-0">Manage your ledger accounts</p></div>
    <a href="{{ route('finance.ledger-accounts.create') }}" class="btn btn-primary"><i class="bi bi-plus-lg me-1"></i> New Account</a>
</div>
<div class="row g-4">
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-semibold">Account Tree</h5>
                <input type="text" class="form-control form-control-sm" style="width:150px;" id="treeSearch" placeholder="Search...">
            </div>
            <div class="card-body" style="max-height:600px;overflow-y:auto;">
                <ul class="list-unstyled account-tree" id="accountTree">
                    @foreach($tree ?? [] as $type => $groups)
                    <li class="mb-2">
                        <div class="fw-semibold text-primary d-flex align-items-center cursor-pointer tree-toggle" data-target="tree-{{ Str::slug($type) }}">
                            <i class="bi bi-chevron-right me-1 tree-icon" style="font-size:0.7rem;"></i> {{ $type }}
                        </div>
                        <ul class="list-unstyled ms-3 mt-1 d-none" id="tree-{{ Str::slug($type) }}">
                            @foreach($groups as $groupName => $accounts)
                            <li class="mb-1">
                                <div class="fw-medium text-muted small d-flex align-items-center cursor-pointer tree-toggle" data-target="tree-{{ Str::slug($groupName) }}">
                                    <i class="bi bi-chevron-right me-1 tree-icon" style="font-size:0.6rem;"></i> {{ $groupName }}
                                </div>
                                <ul class="list-unstyled ms-3 d-none" id="tree-{{ Str::slug($groupName) }}">
                                    @foreach($accounts as $account)
                                    <li><a href="#" class="text-decoration-none small d-block py-1 px-2 rounded account-link" data-id="{{ $account->id }}">{{ $account->name }}</a></li>
                                    @endforeach
                                </ul>
                            </li>
                            @endforeach
                        </ul>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-semibold">Accounts</h5>
                <div class="d-flex gap-2">
                    <select class="form-select form-select-sm" style="width:130px;" id="typeFilter"><option value="">All Types</option><option value="asset">Asset</option><option value="liability">Liability</option><option value="income">Income</option><option value="expense">Expense</option><option value="equity">Equity</option></select>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="accountsTable" class="table table-hover align-middle mb-0 w-100">
                        <thead class="bg-light"><tr><th class="border-0 px-3 py-3 fw-semibold text-muted small">Code</th><th class="border-0 px-3 py-3 fw-semibold text-muted small">Name</th><th class="border-0 px-3 py-3 fw-semibold text-muted small">Type</th><th class="border-0 px-3 py-3 fw-semibold text-muted small">Parent</th><th class="border-0 px-3 py-3 fw-semibold text-muted small text-end">Balance</th><th class="border-0 px-3 py-3 fw-semibold text-muted small text-end">Actions</th></tr></thead>
                        <tbody>
                            @forelse($accounts ?? [] as $account)
                            <tr>
                                <td class="px-3"><span class="badge bg-light text-dark border">{{ $account->code ?? '' }}</span></td>
                                <td class="px-3 fw-medium">{{ $account->name }}</td>
                                <td class="px-3"><span class="badge bg-{{ match($account->type ?? '','asset'=>'primary-subtle text-primary','liability'=>'danger-subtle text-danger','income'=>'success-subtle text-success','expense'=>'warning-subtle text-warning','equity'=>'info-subtle text-info', default=>'secondary') }} px-2">{{ ucfirst($account->type ?? '') }}</span></td>
                                <td class="px-3 text-muted">{{ $account->parent->name ?? 'Top Level' }}</td>
                                <td class="px-3 text-end fw-medium">{{ number_format($account->opening_balance ?? 0, 2) }}</td>
                                <td class="px-3 text-end"><div class="dropdown"><button class="btn btn-sm btn-light" data-bs-toggle="dropdown"><i class="bi bi-three-dots-vertical"></i></button><ul class="dropdown-menu dropdown-menu-end shadow-sm"><li><a class="dropdown-item" href="#"><i class="bi bi-pencil me-2"></i>Edit</a></li><li><a class="dropdown-item text-danger" href="#"><i class="bi bi-trash me-2"></i>Delete</a></li></ul></div></td>
                            </tr>
                            @empty
                            <tr><td colspan="6" class="text-center py-5 text-muted"><i class="bi bi-inbox display-4 d-block mb-2"></i><p>No accounts found</p></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
$(document).ready(function(){
    $('#accountsTable').DataTable({order:[[0,'asc']],pageLength:25});
    $('.tree-toggle').on('click',function(){
        var target=$('#'+$(this).data('target'));
        target.toggleClass('d-none');
        $(this).find('.tree-icon').toggleClass('bi-chevron-right bi-chevron-down');
    });
});
</script>
@endpush