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

@section('body')
<main class="app-content">
    <div class="row">
        <div class="col-12">

            <div class="card mb-3">
                <div class="card-body d-flex flex-wrap justify-content-between align-items-center gap-2">
                    <div>
                        <h5 class="mb-0">Chart of Accounts (Auto From Modules)</h5>
                        <small class="text-muted">Group row click = child accounts show/hide. Type + Date filters supported.</small>
                    </div>
                    <div class="d-flex gap-2">
                        <a target="_blank" class="btn btn-outline-dark btn-sm"
                           href="{{ route('reporting.chart_of_accounts.print', request()->query()) }}">
                            <i class="fa fa-print"></i> Print
                        </a>
                    </div>
                </div>
            </div>

            {{-- Summary --}}
            <div class="row g-2 mb-3">
                @foreach(['Asset','Liability','Equity','Income','Expense'] as $t)
                    <div class="col-md-2 col-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="small text-muted">{{ $t }}</div>
                                <div class="fw-bold">{{ number_format((float)($totals[$t]['balance'] ?? 0), 2) }}</div>
                                <div class="small text-muted">
                                    Dr {{ number_format((float)($totals[$t]['debit'] ?? 0), 0) }}
                                    • Cr {{ number_format((float)($totals[$t]['credit'] ?? 0), 0) }}
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Filters --}}
            <div class="card mb-3">
                <div class="card-body">
                    <form method="GET" action="{{ route('reporting.chart_of_accounts.index') }}">
                        <div class="row g-2">

                            <div class="col-md-3">
                                <label class="form-label">Search</label>
                                <input class="form-control" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="code / name">
                            </div>

                            <div class="col-md-2">
                                <label class="form-label">Type</label>
                                <select class="form-control" name="type">
                                    <option value="">All</option>
                                    @foreach(['Asset','Liability','Equity','Income','Expense'] as $t)
                                        <option value="{{ $t }}" {{ ($filters['type'] ?? '')===$t?'selected':'' }}>{{ $t }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-2">
                                <label class="form-label">Time</label>
                                <select class="form-control" id="preset" name="preset">
                                    <option value="">Custom</option>
                                    <option value="today" {{ ($filters['preset'] ?? '')==='today'?'selected':'' }}>Today</option>
                                    <option value="month" {{ ($filters['preset'] ?? '')==='month'?'selected':'' }}>This Month</option>
                                    <option value="year" {{ ($filters['preset'] ?? '')==='year'?'selected':'' }}>This Year</option>
                                </select>
                            </div>

                            <div class="col-md-2">
                                <label class="form-label">From</label>
                                <input type="date" class="form-control" id="date_from" name="date_from" value="{{ $filters['date_from'] ?? '' }}">
                            </div>

                            <div class="col-md-2">
                                <label class="form-label">To</label>
                                <input type="date" class="form-control" id="date_to" name="date_to" value="{{ $filters['date_to'] ?? '' }}">
                            </div>

                            <div class="col-md-1">
                                <label class="form-label">Lang</label>
                                <select class="form-control" name="lang">
                                    <option value="en" {{ ($filters['lang'] ?? 'en')==='en'?'selected':'' }}>EN</option>
                                    <option value="ps" {{ ($filters['lang'] ?? '')==='ps'?'selected':'' }}>PS</option>
                                    <option value="dr" {{ ($filters['lang'] ?? '')==='dr'?'selected':'' }}>DR</option>
                                </select>
                            </div>

                            <div class="col-12 d-flex justify-content-end mt-2">
                                <button class="btn btn-primary"><i class="fa fa-filter"></i> Apply</button>
                            </div>

                        </div>
                    </form>
                </div>
            </div>

            {{-- Table --}}
            <div class="card">
                <div class="card-body table-responsive">
                    <table class="table table-bordered table-hover align-middle">
                        <thead>
                        <tr>
                            <th style="width:60px;">#</th>
                            <th style="width:140px;">Code</th>
                            <th>Name</th>
                            <th style="width:120px;">Type</th>
                            <th style="width:160px;" class="text-end">Debit</th>
                            <th style="width:160px;" class="text-end">Credit</th>
                            <th style="width:160px;" class="text-end">Balance</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($groups as $g)
                            @php
                                $h = $g->header;
                                $key = $g->key;
                                $open = $g->open ? '1' : '0';
                                $lang = $filters['lang'] ?? 'en';
                                $hname = $lang==='ps' ? ($h->title_ps ?: $h->title_en)
                                        : ($lang==='dr' ? ($h->title_dr ?: $h->title_en) : ($h->title_en ?: $h->title_ps));
                            @endphp

                            <tr class="table-light js-group" data-key="{{ $key }}" data-open="{{ $open }}" style="cursor:pointer;">
                                <td class="fw-bold js-icon">+</td>
                                <td class="fw-bold">—</td>
                                <td class="fw-bold">{{ $hname }}</td>
                                <td><span class="badge bg-dark">{{ $h->type }}</span></td>
                                <td class="text-end fw-bold">{{ number_format((float)$h->debit, 2) }}</td>
                                <td class="text-end fw-bold">{{ number_format((float)$h->credit, 2) }}</td>
                                <td class="text-end fw-bold">{{ number_format((float)$h->balance, 2) }}</td>
                            </tr>

                            @foreach($g->children as $a)
                                @php
                                    $name = $lang==='ps' ? ($a->title_ps ?: $a->title_en)
                                           : ($lang==='dr' ? ($a->title_dr ?: $a->title_en) : ($a->title_en ?: $a->title_ps));
                                @endphp
                                <tr class="js-child child-{{ $key }}" style="display:none;">
                                    <td></td>
                                    <td>{{ $a->code }}</td>
                                    <td style="padding-left:18px;">— {{ $name }}</td>
                                    <td>{{ $a->type }}</td>
                                    <td class="text-end">{{ number_format((float)$a->debit, 2) }}</td>
                                    <td class="text-end">{{ number_format((float)$a->credit, 2) }}</td>
                                    <td class="text-end fw-bold">{{ number_format((float)$a->balance, 2) }}</td>
                                </tr>
                            @endforeach
                        @empty
                            <tr><td colspan="7" class="text-center text-muted py-4">No data found.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</main>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Group toggle
    document.querySelectorAll('.js-group').forEach(g => {
        const key = g.dataset.key;
        const open = g.dataset.open === '1';
        const icon = g.querySelector('.js-icon');

        const show = () => {
            document.querySelectorAll('.child-' + key).forEach(r => r.style.display = '');
            icon.innerText = '−';
        };
        const hide = () => {
            document.querySelectorAll('.child-' + key).forEach(r => r.style.display = 'none');
            icon.innerText = '+';
        };

        if (open) show();

        g.addEventListener('click', () => {
            const rows = document.querySelectorAll('.child-' + key);
            const hidden = rows.length ? (rows[0].style.display === 'none') : true;
            hidden ? show() : hide();
        });
    });

    // Time preset => auto set dates
    const preset = document.getElementById('preset');
    const df = document.getElementById('date_from');
    const dt = document.getElementById('date_to');

    function pad(n){ return String(n).padStart(2,'0'); }
    function fmt(d){ return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate()); }

    preset?.addEventListener('change', () => {
        const now = new Date();
        if (preset.value === 'today') {
            df.value = fmt(now); dt.value = fmt(now);
        } else if (preset.value === 'month') {
            df.value = fmt(new Date(now.getFullYear(), now.getMonth(), 1));
            dt.value = fmt(new Date(now.getFullYear(), now.getMonth()+1, 0));
        } else if (preset.value === 'year') {
            df.value = fmt(new Date(now.getFullYear(), 0, 1));
            dt.value = fmt(new Date(now.getFullYear(), 11, 31));
        }
    });
});
</script>
@endsection