@extends('layouts.app')

@section('title', 'Chart of Accounts')

@push('styles')
<style>
    .type-row td { background: #f8fafc !important; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #475569; }
    .acct-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: #4f46e5; }
    .type-filter .btn { --bs-btn-padding-y: .2rem; --bs-btn-font-size: .8rem; }
    .balance-neg { color: #b91c1c; }
</style>
@endpush

@php
    $typeMeta = [
        'Asset'     => ['Assets', 'bi-safe', '#eef2ff', '#4f46e5'],
        'Liability' => ['Liabilities', 'bi-credit-card-2-back', '#fee2e2', '#b91c1c'],
        'Equity'    => ['Equity', 'bi-bank', '#f1f5f9', '#475569'],
        'Revenue'   => ['Revenue', 'bi-graph-up-arrow', '#dcfce7', '#15803d'],
        'Expense'   => ['Expenses', 'bi-receipt', '#fef3c7', '#b45309'],
    ];
    $reopen = old('_form');
@endphp

@section('content')
<div class="page-header">
    <div>
        <div class="eyebrow">Financial Control &amp; Reports</div>
        <h1>Chart of Accounts</h1>
        <p>Every ledger account your hotel posts to, with its current balance{{ $branchName ? " for {$branchName}" : '' }}. Click an account to see its full ledger.</p>
    </div>
    @if ($can['create'])
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#accountModal" data-mode="create"><i class="bi bi-plus-lg me-1"></i> Add Account</button>
    @endif
</div>

@if ($missing->isNotEmpty())
    <div class="alert alert-warning border-0 shadow-sm d-flex flex-wrap align-items-center justify-content-between gap-3">
        <div>
            <i class="bi bi-exclamation-triangle-fill me-2"></i><strong>{{ $missing->count() }} {{ Str::plural('account', $missing->count()) }} that automatic posting uses {{ $missing->count() === 1 ? "isn't" : "aren't" }} in your chart yet:</strong>
            {{ $missing->map(fn ($m, $code) => "{$code} {$m[0]}")->implode(', ') }}.
            <span class="d-block small">They're created automatically the first time they're needed, or you can add them all now.</span>
        </div>
        @if ($can['create'])
            <form method="POST" action="{{ route('hotel.accounts.provision') }}">@csrf<button type="submit" class="btn btn-sm btn-warning">Create missing accounts</button></form>
        @endif
    </div>
@endif

<div class="row g-3 mb-4">
    @foreach ($typeMeta as $type => [$label, $icon, $bg, $fg])
        @php $group = $byType->get($type, collect()); @endphp
        <div class="col-sm-6 col-lg">
            <div class="stat-card">
                <span class="stat-icon" style="background:{{ $bg }};color:{{ $fg }};"><i class="bi {{ $icon }}"></i></span>
                <span class="min-w-0">
                    <span class="stat-value d-block money">₦{{ number_format($group->sum('balance'), 2) }}</span>
                    <span class="stat-label">{{ $label }} · {{ $group->count() }} {{ Str::plural('account', $group->count()) }}</span>
                </span>
            </div>
        </div>
    @endforeach
</div>

<section class="panel">
    @php $filtering = $filters['q'] !== '' || $filters['type'] || $filters['active']; @endphp
    {{-- Server-side: the filters reach every page of the chart, not just the one on screen. --}}
    <form method="GET" action="{{ route('hotel.accounts.index') }}" class="panel-header" role="search" id="acctFilter">
        <div class="d-flex flex-wrap gap-2 align-items-center">
            <div class="input-group input-group-sm" style="width: 260px;">
                <span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
                <label for="acctSearch" class="visually-hidden">Search accounts</label>
                <input type="search" id="acctSearch" name="q" class="form-control" placeholder="Search code or name…" autocomplete="off" value="{{ $filters['q'] }}">
            </div>
            <div class="btn-group type-filter" role="group" aria-label="Filter by type">
                <input type="radio" class="btn-check" name="type" id="tf_all" value="" @checked(!$filters['type']) onchange="this.form.submit()"><label class="btn btn-outline-secondary" for="tf_all">All</label>
                @foreach ($typeMeta as $type => [$label])
                    <input type="radio" class="btn-check" name="type" id="tf_{{ $type }}" value="{{ $type }}" @checked($filters['type'] === $type) onchange="this.form.submit()"><label class="btn btn-outline-secondary" for="tf_{{ $type }}">{{ $label }}</label>
                @endforeach
            </div>
            @if ($filtering)
                <a href="{{ route('hotel.accounts.index') }}" class="btn btn-sm btn-light border">Clear</a>
                <span class="small text-muted">{{ $page->total() }} of {{ $accounts->count() }} {{ Str::plural('account', $accounts->count()) }}</span>
            @endif
        </div>
        <div class="form-check form-switch mb-0">
            <input class="form-check-input" type="checkbox" role="switch" id="activeOnly" name="active" value="1" @checked($filters['active']) onchange="this.form.submit()">
            <label class="form-check-label small" for="activeOnly">Only accounts with postings</label>
        </div>
    </form>
    <div class="table-responsive">
        <table class="table table-hover align-middle">
            <thead>
                <tr>
                    <th style="width: 110px;">Code</th>
                    <th>Account</th>
                    <th>USALI schedule</th>
                    <th class="text-end">Postings</th>
                    <th class="text-end">Balance</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody id="acctRows">
                @php $pageByType = $page->getCollection()->groupBy('account_type'); @endphp
                @foreach ($typeMeta as $type => [$label])
                    @continue(!$pageByType->has($type))
                    <tr class="type-row" data-type-header="{{ $type }}"><td colspan="6">{{ $label }}</td></tr>
                    @foreach ($pageByType[$type] as $a)
                        <tr data-type="{{ $type }}" data-text="{{ mb_strtolower("{$a->account_code} {$a->account_name}") }}" data-lines="{{ $a->line_count }}">
                            <td><a href="{{ route('hotel.accounts.show', $a) }}" class="acct-code text-decoration-none">{{ $a->account_code }}</a></td>
                            <td>
                                <a href="{{ route('hotel.accounts.show', $a) }}" class="text-body text-decoration-none fw-medium">{{ $a->account_name }}</a>
                                @if ($a->isSystemAccount())<i class="bi bi-gear-fill text-muted ms-1 small" title="Used by automatic posting"></i>@endif
                            </td>
                            <td class="small text-muted">{{ $a->usali_schedule ? str_replace('.', ' › ', $a->usali_schedule) : '—' }}</td>
                            <td class="text-end small text-muted">{{ $a->line_count ?: '—' }}</td>
                            <td class="text-end money fw-semibold {{ $a->balance < 0 ? 'balance-neg' : '' }}">{{ $a->line_count ? '₦' . number_format($a->balance, 2) : '—' }}</td>
                            <td class="text-end text-nowrap">
                                <a href="{{ route('hotel.accounts.show', $a) }}" class="btn btn-sm btn-light border" title="View ledger" aria-label="Ledger for {{ $a->account_code }}"><i class="bi bi-list-columns-reverse"></i></a>
                                @if ($can['edit'])
                                    <button type="button" class="btn btn-sm btn-light border" title="Edit account" aria-label="Edit {{ $a->account_code }}" data-bs-toggle="modal" data-bs-target="#accountModal" data-mode="edit"
                                            data-action="{{ route('hotel.accounts.update', $a) }}" data-code="{{ $a->account_code }}" data-name="{{ $a->account_name }}" data-type="{{ $a->account_type }}"
                                            data-usali="{{ $a->usali_schedule }}" data-system="{{ $a->isSystemAccount() ? 1 : 0 }}" data-posted="{{ $a->line_count ? 1 : 0 }}"><i class="bi bi-pencil"></i></button>
                                @endif
                                @if ($can['delete'] && !$a->line_count && !$a->isSystemAccount())
                                    <form method="POST" action="{{ route('hotel.accounts.destroy', $a) }}" class="d-inline" onsubmit="return confirm('Delete account {{ $a->account_code }} · {{ addslashes($a->account_name) }}?');">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-light border text-danger" title="Delete account" aria-label="Delete {{ $a->account_code }}"><i class="bi bi-trash3"></i></button>
                                    </form>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                @endforeach
                @if ($accounts->isEmpty())
                    <tr><td colspan="6"><div class="empty-state"><i class="bi bi-diagram-2"></i>No accounts yet.</div></td></tr>
                @elseif ($page->isEmpty())
                    <tr><td colspan="6"><div class="empty-state py-4"><i class="bi bi-search"></i>{{ $page->total() ? 'No accounts on this page.' : 'No accounts match.' }}</div></td></tr>
                @endif
            </tbody>
        </table>
    </div>
    <div class="pb-3">@include('partials.list-pager', ['page' => $page, 'noun' => 'account'])</div>
    <div class="panel-body border-top small text-muted">
        Balances are shown on each account's natural side — debits for assets and expenses, credits for liabilities, equity and revenue — so a negative figure means the account is running against its normal direction.
        <i class="bi bi-gear-fill ms-1"></i> marks accounts automatic posting looks up by number; they can be renamed but not renumbered or deleted.
    </div>
</section>

<div class="modal fade" id="accountModal" tabindex="-1" aria-labelledby="accountModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" action="{{ $reopen === 'account-edit' ? old('_action') : route('hotel.accounts.store') }}" class="modal-content border-0 shadow" id="accountForm">
            @csrf
            <input type="hidden" name="_method" id="accountMethod" value="{{ $reopen === 'account-edit' ? 'PUT' : 'POST' }}">
            <input type="hidden" name="_form" id="accountFormKey" value="{{ $reopen === 'account-edit' ? 'account-edit' : 'account-create' }}">
            <input type="hidden" name="_action" id="accountActionField" value="{{ old('_action') }}">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold" id="accountModalTitle">{{ $reopen === 'account-edit' ? 'Edit Account' : 'Add Account' }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-4">
                        <label for="ac_code" class="form-label">Code</label>
                        <input type="text" id="ac_code" name="account_code" class="form-control font-monospace" maxlength="20" placeholder="6015" value="{{ old('account_code') }}" required>
                    </div>
                    <div class="col-8">
                        <label for="ac_type" class="form-label">Type</label>
                        <select id="ac_type" name="account_type" class="form-select" required>
                            @foreach ($typeMeta as $type => [$label])<option value="{{ $type }}" @selected(old('account_type') === $type)>{{ $type }}</option>@endforeach
                        </select>
                    </div>
                    <div class="col-12">
                        <label for="ac_name" class="form-label">Account name</label>
                        <input type="text" id="ac_name" name="account_name" class="form-control" maxlength="150" placeholder="e.g. Generator Diesel Expense" value="{{ old('account_name') }}" required>
                    </div>
                    <div class="col-12">
                        <label for="ac_usali" class="form-label">USALI schedule <span class="text-muted fw-normal">(optional)</span></label>
                        <input type="text" id="ac_usali" name="usali_schedule" class="form-control" maxlength="60" list="usaliList" placeholder="e.g. UndistributedExpenses.Utilities" value="{{ old('usali_schedule') }}">
                        <datalist id="usaliList">@foreach ($schedules as $s)<option value="{{ $s }}">@endforeach</datalist>
                        <div class="form-text">Groups the account on hotel-industry (USALI) statements.</div>
                    </div>
                    <div class="col-12 d-none" id="ac_note"><div class="alert alert-light border small mb-0 py-2"></div></div>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary px-4">Save Account</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
(() => {
    const $ = (id) => document.getElementById(id);
    // ---- Search: runs on the server across every page; searches a moment after typing stops (or on Enter) ----
    const acctSearch = $('acctSearch');
    let typing;
    acctSearch.addEventListener('input', () => { clearTimeout(typing); typing = setTimeout(() => $('acctFilter').submit(), 600); });
    if (acctSearch.value) { acctSearch.focus(); acctSearch.setSelectionRange(acctSearch.value.length, acctSearch.value.length); }

    $('accountModal').addEventListener('show.bs.modal', (e) => {
        const b = e.relatedTarget;
        if (!b?.dataset.mode) return;
        const edit = b.dataset.mode === 'edit';
        $('accountForm').action = edit ? b.dataset.action : @json(route('hotel.accounts.store'));
        $('accountMethod').value = edit ? 'PUT' : 'POST';
        $('accountFormKey').value = edit ? 'account-edit' : 'account-create';
        $('accountActionField').value = edit ? b.dataset.action : '';
        $('accountModalTitle').textContent = edit ? 'Edit Account' : 'Add Account';
        $('ac_code').value = edit ? b.dataset.code : '';
        $('ac_name').value = edit ? b.dataset.name : '';
        $('ac_type').value = edit ? b.dataset.type : 'Expense';
        $('ac_usali').value = edit ? (b.dataset.usali || '') : '';
        const locked = edit && b.dataset.system === '1', typed = edit && b.dataset.posted === '1';
        $('ac_code').readOnly = locked;
        [...$('ac_type').options].forEach(o => o.disabled = typed && o.value !== b.dataset.type);
        const notes = [locked && 'This account is used by automatic posting, so its number is fixed.', typed && 'It already has postings, so its type is fixed.'].filter(Boolean);
        $('ac_note').classList.toggle('d-none', !notes.length);
        $('ac_note').querySelector('div').textContent = notes.join(' ');
    });

    if (@json((bool) $reopen)) bootstrap.Modal.getOrCreateInstance($('accountModal')).show();
})();
</script>
@endpush