@extends('master.app')
@section('title', 'Trial Balance')

@section('body')
<style>
    :root{
        --tb-bg:#0b1220;
        --tb-card:#0f1a2c;
        --tb-card2:#0f223a;
        --tb-text:#e5e7eb;
        --tb-muted:#9ca3af;
        --tb-border:rgba(255,255,255,.08);
        --tb-glow:rgba(99,102,241,.22);
        --tb-good:#22c55e;
        --tb-bad:#ef4444;
        --tb-info:#38bdf8;
        --tb-gold:#f6c343;
    }
    .tb-wrap{ padding: 10px 4px 30px; }
    .tb-hero{
        background:
            radial-gradient(900px 500px at 10% 10%, rgba(99,102,241,.25), transparent 60%),
            radial-gradient(900px 500px at 90% 30%, rgba(56,189,248,.18), transparent 60%),
            linear-gradient(180deg, var(--tb-bg), #070b14 70%);
        border:1px solid var(--tb-border);
        border-radius:18px;
        overflow:hidden;
        box-shadow:0 20px 60px rgba(0,0,0,.45);
        color:var(--tb-text);
    }
    .tb-hero .tb-top{
        padding:16px 18px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
    }
    .tb-title{
        display:flex; align-items:center; gap:12px;
    }
    .tb-title .icon{
        width:42px;height:42px;border-radius:14px;
        display:flex;align-items:center;justify-content:center;
        background: linear-gradient(145deg, rgba(99,102,241,.25), rgba(56,189,248,.15));
        border:1px solid var(--tb-border);
        box-shadow: 0 0 0 6px rgba(99,102,241,.08);
        flex:0 0 auto;
    }
    .tb-title h5{ margin:0; font-weight:700; letter-spacing:.2px; }
    .tb-title small{ color:var(--tb-muted); }

    .tb-actions{ display:flex; gap:10px; flex-wrap:wrap; }
    .tb-btn{
        border:1px solid var(--tb-border) !important;
        background: rgba(255,255,255,.06) !important;
        color: var(--tb-text) !important;
        border-radius:12px !important;
        padding:8px 12px !important;
        font-weight:600;
        display:inline-flex; align-items:center; gap:8px;
    }
    .tb-btn:hover{ background: rgba(255,255,255,.10) !important; }

    .tb-kpis{ padding: 0 18px 16px; }
    .tb-kpi{
        border:1px solid var(--tb-border);
        background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
        border-radius:16px;
        padding:14px 14px;
        height:100%;
        box-shadow: 0 10px 30px rgba(0,0,0,.22);
    }
    .tb-kpi .kpi-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .tb-kpi .kpi-name{ color:var(--tb-muted); font-size:12px; }
    .tb-kpi .kpi-val{ font-size:20px; font-weight:800; margin-top:6px; }
    .tb-pill{
        display:inline-flex; align-items:center; gap:6px;
        border-radius:999px; padding:5px 10px;
        border:1px solid var(--tb-border);
        background: rgba(255,255,255,.06);
        font-size:12px; font-weight:700;
        color: var(--tb-text);
        white-space:nowrap;
    }
    .tb-pill.good{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); color: #bbf7d0; }
    .tb-pill.bad{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); color: #fecaca; }

    .tb-panel{
        border:1px solid var(--tb-border);
        border-radius:18px;
        background:#fff;
        overflow:hidden;
        box-shadow:0 18px 50px rgba(0,0,0,.18);
    }
    .tb-panel .tb-panel-head{
        padding:14px 16px;
        background: linear-gradient(180deg, #ffffff, #f7f7fb);
        border-bottom:1px solid #e5e7eb;
        display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
    .tb-panel .tb-panel-head .left{
        display:flex; align-items:center; gap:10px;
        color:#111827;
        font-weight:800;
    }
    .tb-panel .tb-panel-body{ padding:14px 16px; }

    .tb-table thead th{
        position:sticky; top:0; z-index:1;
        background:#f9fafb;
    }
    .tb-group{
        background: linear-gradient(180deg, #f8fafc, #eef2ff);
        cursor:pointer;
    }
    .tb-group .chev{
        width:28px; height:28px; border-radius:10px;
        display:flex; align-items:center; justify-content:center;
        background:#fff;
        border:1px solid #e5e7eb;
    }
    .tb-muted{ color:#6b7280; }
    .tb-badge{
        border-radius:999px; padding:6px 10px;
        font-weight:800; font-size:12px;
        border:1px solid #e5e7eb;
        background:#fff;
        display:inline-flex; align-items:center; gap:6px;
        white-space:nowrap;
    }
    .tb-badge.asset{ border-color:#dbeafe; background:#eff6ff; color:#1d4ed8; }
    .tb-badge.liability{ border-color:#fee2e2; background:#fff1f2; color:#be123c; }
    .tb-badge.equity{ border-color:#e9d5ff; background:#faf5ff; color:#6d28d9; }
    .tb-badge.income{ border-color:#dcfce7; background:#f0fdf4; color:#15803d; }
    .tb-badge.expense{ border-color:#ffedd5; background:#fff7ed; color:#c2410c; }
</style>

@php
    $ok = abs((float)$totals['diff']) < 0.01;
@endphp

<main class="app-content tb-wrap">

    {{-- HERO HEADER --}}
    <div class="tb-hero mb-3">
        <div class="tb-top">
            <div class="tb-title">
                <div class="icon">
                    <i class="fa fa-scale-balanced" style="font-size:18px;"></i>
                </div>
                <div>
                    <h5>Trial Balance</h5>
                    <small>Virtual Accounts from current modules • Base currency supported</small>
                </div>
            </div>

            <div class="tb-actions">
                <a target="_blank" class="tb-btn" href="{{ route('reporting.trial_balance.print', request()->query()) }}">
                    <i class="fa fa-print"></i> Print
                </a>
                <a class="tb-btn" href="{{ route('reporting.trial_balance.index') }}">
                    <i class="fa fa-rotate"></i> Reset
                </a>
            </div>
        </div>

        <div class="tb-kpis">
            <div class="row g-2">
                <div class="col-md-4">
                    <div class="tb-kpi">
                        <div class="kpi-top">
                            <div class="kpi-name"><i class="fa fa-arrow-up-short-wide"></i> Total Debit</div>
                            <span class="tb-pill"><i class="fa fa-coins"></i> Base</span>
                        </div>
                        <div class="kpi-val">{{ number_format((float)$totals['debit'], 2) }}</div>
                        <div class="tb-muted" style="font-size:12px; margin-top:6px;">
                            Sum of all Debit balances
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="tb-kpi">
                        <div class="kpi-top">
                            <div class="kpi-name"><i class="fa fa-arrow-down-wide-short"></i> Total Credit</div>
                            <span class="tb-pill"><i class="fa fa-coins"></i> Base</span>
                        </div>
                        <div class="kpi-val">{{ number_format((float)$totals['credit'], 2) }}</div>
                        <div class="tb-muted" style="font-size:12px; margin-top:6px;">
                            Sum of all Credit balances
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="tb-kpi">
                        <div class="kpi-top">
                            <div class="kpi-name"><i class="fa fa-circle-half-stroke"></i> Difference (Dr - Cr)</div>
                            <span class="tb-pill {{ $ok ? 'good' : 'bad' }}">
                                <i class="fa {{ $ok ? 'fa-circle-check' : 'fa-triangle-exclamation' }}"></i>
                                {{ $ok ? 'Balanced' : 'Not Balanced' }}
                            </span>
                        </div>
                        <div class="kpi-val" style="color:{{ $ok ? 'var(--tb-good)' : 'var(--tb-bad)' }}">
                            {{ number_format((float)$totals['diff'], 2) }}
                        </div>
                        <div class="tb-muted" style="font-size:12px; margin-top:6px;">
                            If not balanced, check missing mappings or wrong ex_rate.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- FILTER PANEL --}}
    <div class="tb-panel mb-3">
        <div class="tb-panel-head">
            <div class="left">
                <i class="fa fa-sliders"></i> Filters
            </div>
            <div class="tb-muted" style="font-size:12px;">
                Tip: Click on group row to expand accounts
            </div>
        </div>
        <div class="tb-panel-body">
            <form method="GET" action="{{ route('reporting.trial_balance.index') }}">
                <div class="row g-2">

                    <div class="col-md-3">
                        <label class="form-label">Search</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fa fa-magnifying-glass"></i></span>
                            <input class="form-control" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="account name / key">
                        </div>
                    </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-md-2">
                        <label class="form-label">Status</label>
                        <select class="form-control" name="status">
                            <option value="" {{ ($filters['status'] ?? '')===''?'selected':'' }}>All</option>
                            <option value="1" {{ ($filters['status'] ?? '')==='1'?'selected':'' }}>Active</option>
                            <option value="0" {{ ($filters['status'] ?? '')==='0'?'selected':'' }}>Inactive</option>
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="form-label">Show Zero</label>
                        <select class="form-control" name="show_zero">
                            <option value="0" {{ ($filters['show_zero'] ?? '0')==='0'?'selected':'' }}>No</option>
                            <option value="1" {{ ($filters['show_zero'] ?? '')==='1'?'selected':'' }}>Yes</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>
                        <a class="btn btn-light ms-2" href="{{ route('reporting.trial_balance.index') }}">
                            <i class="fa fa-rotate-left"></i> Reset
                        </a>
                    </div>

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

    {{-- TABLE --}}
    <div class="card">
        <div class="card-body table-responsive">
            @php
                $lang = $filters['lang'] ?? 'en';
                $name = function($r) use ($lang){
                    if($lang==='ps') return $r->title_ps ?: ($r->title_en ?: '');
                    if($lang==='dr') return $r->title_dr ?: ($r->title_en ?: '');
                    return $r->title_en ?: ($r->title_ps ?: '');
                };
                $badgeClass = function($type){
                    return match($type){
                        'Asset' => 'asset',
                        'Liability' => 'liability',
                        'Equity' => 'equity',
                        'Income' => 'income',
                        'Expense' => 'expense',
                        default => 'asset'
                    };
                };
                $typeIcon = function($type){
                    return match($type){
                        'Asset' => 'fa-building-columns',
                        'Liability' => 'fa-hand-holding-dollar',
                        'Equity' => 'fa-gem',
                        'Income' => 'fa-arrow-trend-up',
                        'Expense' => 'fa-receipt',
                        default => 'fa-circle'
                    };
                };
            @endphp

            <table class="table table-bordered table-hover align-middle tb-table">
                <thead>
                <tr>
                    <th style="width:62px;">#</th>
                    <th>Account</th>
                    <th style="width:140px;">Type</th>
                    <th class="text-end" style="width:160px;">Opening</th>
                    <th class="text-end" style="width:150px;">Period Dr</th>
                    <th class="text-end" style="width:150px;">Period Cr</th>
                    <th class="text-end" style="width:160px;">Trial Debit</th>
                    <th class="text-end" style="width:160px;">Trial Credit</th>
                </tr>
                </thead>

                <tbody>
                @forelse($groups as $g)
                    <tr class="tb-group js-group" data-key="{{ $g->type }}">
                        <td>
                            <div class="chev">
                                <i class="fa fa-chevron-right js-icon"></i>
                            </div>
                        </td>
                        <td class="fw-bold">
                            <i class="fa {{ $typeIcon($g->type) }} me-2"></i>
                            {{ $g->type }} Group
                            <span class="tb-muted ms-2" style="font-size:12px;">
                                ({{ $g->items->count() }} accounts)
                            </span>
                        </td>
                        <td>
                            <span class="tb-badge {{ $badgeClass($g->type) }}">
                                <i class="fa {{ $typeIcon($g->type) }}"></i> {{ $g->type }}
                            </span>
                        </td>
                        <td class="text-end tb-muted">—</td>
                        <td class="text-end tb-muted">—</td>
                        <td class="text-end tb-muted">—</td>
                        <td class="text-end fw-bold">{{ number_format((float)$g->total_debit, 2) }}</td>
                        <td class="text-end fw-bold">{{ number_format((float)$g->total_credit, 2) }}</td>
                    </tr>

                    @foreach($g->items as $r)
                        <tr class="js-child child-{{ $g->type }}" style="display:none;">
                            <td></td>
                            <td>
                                <div class="fw-semibold">{{ $r->key }}</div>
                                <div class="tb-muted" style="font-size:12px;">{{ $name($r) }}</div>
                            </td>
                            <td>
                                <span class="tb-badge {{ $badgeClass($r->type) }}">
                                    <i class="fa {{ $typeIcon($r->type) }}"></i> {{ $r->type }}
                                </span>
                            </td>
                            <td class="text-end">{{ number_format((float)$r->opening, 2) }}</td>
                            <td class="text-end">{{ number_format((float)$r->period_debit, 2) }}</td>
                            <td class="text-end">{{ number_format((float)$r->period_credit, 2) }}</td>
                            <td class="text-end fw-bold">{{ number_format((float)$r->tb_debit, 2) }}</td>
                            <td class="text-end fw-bold">{{ number_format((float)$r->tb_credit, 2) }}</td>
                        </tr>
                    @endforeach

                @empty
                    <tr><td colspan="8" class="text-center text-muted py-4">No data found.</td></tr>
                @endforelse
                </tbody>

                <tfoot class="table-light">
                <tr>
                    <th colspan="6" class="text-end">Grand Totals</th>
                    <th class="text-end">{{ number_format((float)$totals['debit'], 2) }}</th>
                    <th class="text-end">{{ number_format((float)$totals['credit'], 2) }}</th>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

</main>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Expand/Collapse groups
    document.querySelectorAll('.js-group').forEach(g => {
        const key = g.dataset.key;
        const icon = g.querySelector('.js-icon');

        const show = () => {
            document.querySelectorAll('.child-' + key).forEach(r => r.style.display = '');
            icon.classList.remove('fa-chevron-right');
            icon.classList.add('fa-chevron-down');
        };
        const hide = () => {
            document.querySelectorAll('.child-' + key).forEach(r => r.style.display = 'none');
            icon.classList.add('fa-chevron-right');
            icon.classList.remove('fa-chevron-down');
        };

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

    // preset dates helper
    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