@extends('master.app')
@section('title', 'Cash Flow Statement')

@section('body')
@php
    $lang = $filters['lang'] ?? 'en';

    $name = function($x) use ($lang){
        if(!$x) return '';
        if($lang==='ps') return $x->title_ps ?: ($x->title_en ?: '');
        if($lang==='dr') return $x->title_dr ?: ($x->title_en ?: '');
        return $x->title_en ?: ($x->title_ps ?: '');
    };

    $fmt = fn($n)=> number_format((float)$n,2);
    $netChange = (float)($totals['net_change'] ?? 0);

    $roleMeta = function($label){
        $label = strtolower($label);
        if(str_contains($label,'oper')) return ['cls'=>'badge-soft-primary','icon'=>'fa-briefcase','txt'=>'Operating'];
        if(str_contains($label,'invest')) return ['cls'=>'badge-soft-warning','icon'=>'fa-chart-column','txt'=>'Investing'];
        if(str_contains($label,'financ')) return ['cls'=>'badge-soft-info','icon'=>'fa-coins','txt'=>'Financing'];
        return ['cls'=>'badge-soft-dark','icon'=>'fa-layer-group','txt'=>$label];
    };
@endphp

@push('styles')
<style>
    /* ✅ Remove bottom horizontal scrollbar */
    html, body { overflow-x: hidden !important; }
    .app-content, main, .container-fluid { overflow-x:hidden !important; max-width:100%; }
    .row{ max-width:100%; }

    :root{
        --border:#e5e7eb;
        --text:#111827;
        --muted:#6b7280;
        --bg:#f8fafc;
        --card:#ffffff;
        --shadow: 0 10px 22px rgba(0,0,0,.06);
        --good:#16a34a;
        --bad:#dc2626;
    }
    .cf, .cf *{ color:var(--text); }
    .cf .text-muted{ color:var(--muted) !important; }

    .wrap{ padding:10px 6px 26px; }
    .cardx{
        background:var(--card);
        border:1px solid var(--border);
        border-radius:16px;
        box-shadow:var(--shadow);
        overflow:hidden;
    }
    .topbar{
        padding:14px 16px;
        border-bottom:1px solid var(--border);
        background: linear-gradient(180deg, #fff, var(--bg));
        display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px;
    }
    .brand{ display:flex; align-items:center; gap:12px; }
    .brand .ico{
        width:42px;height:42px;border-radius:14px;
        display:flex;align-items:center;justify-content:center;
        background: rgba(17,24,39,.06);
        border:1px solid rgba(17,24,39,.08);
    }
    .brand h5{ margin:0; font-weight:900; }
    .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
    .chip{
        display:inline-flex; align-items:center; gap:8px;
        font-size:12px; font-weight:800;
        padding:6px 10px;
        border-radius:999px;
        background:#fff;
        border:1px solid var(--border);
        white-space:nowrap;
    }
    .btnx{
        display:inline-flex; align-items:center; gap:8px;
        border:1px solid var(--border) !important;
        border-radius:12px !important;
        background:#fff !important;
        padding:8px 12px !important;
        font-weight:800;
        white-space:nowrap;
    }

    .kpi{
        border:1px solid var(--border);
        border-radius:16px;
        background:#fff;
        padding:12px;
        height:100%;
    }
    .kpi .label{ font-size:12px; color:var(--muted); font-weight:800; display:flex; align-items:center; gap:8px; }
    .kpi .val{ font-size:18px; font-weight:900; margin-top:6px; }
    .kpi .sub{ font-size:12px; color:var(--muted); margin-top:4px; }

    /* badges */
    .badge-soft-primary{ background: rgba(59,130,246,.14); color:#1d4ed8 !important; border:1px solid rgba(59,130,246,.22); }
    .badge-soft-warning{ background: rgba(245,158,11,.18); color:#92400e !important; border:1px solid rgba(245,158,11,.26); }
    .badge-soft-info{ background: rgba(56,189,248,.18); color:#0369a1 !important; border:1px solid rgba(56,189,248,.26); }
    .badge-soft-dark{ background: rgba(17,24,39,.10); color:#111827 !important; border:1px solid rgba(17,24,39,.16); }

    .badgex{
        display:inline-flex; align-items:center; gap:8px;
        padding:6px 10px;
        border-radius:999px;
        font-size:12px;
        font-weight:900;
        white-space:nowrap;
    }

    .filters label{ font-size:12px; color:var(--muted); font-weight:800; margin-bottom:6px; }
    .filters .form-control, .filters .input-group-text{
        border-radius:12px !important;
        border-color: var(--border) !important;
        min-height: 40px;
    }

    /* sections */
    .secx{
        border:1px solid var(--border);
        border-radius:16px;
        background:#fff;
        overflow:hidden;
        box-shadow: 0 10px 22px rgba(0,0,0,.05);
    }
    .secx-h{
        padding:12px 14px;
        display:flex; justify-content:space-between; align-items:center; gap:10px;
        cursor:pointer;
        background: linear-gradient(180deg, #fff, var(--bg));
        border-bottom:1px solid var(--border);
    }
    .secx-h .left{ display:flex; align-items:center; gap:10px; font-weight:900; }
    .chev{
        width:28px;height:28px;border-radius:10px;
        display:flex;align-items:center;justify-content:center;
        background: rgba(17,24,39,.06);
        border:1px solid rgba(17,24,39,.08);
    }
    .secx.open .chev i{ transform: rotate(90deg); }
    .secx-b{ display:none; }
    .secx.open .secx-b{ display:block; }

    .pill{
        display:inline-flex; align-items:center; gap:6px;
        border-radius:999px; padding:6px 10px;
        border:1px solid var(--border);
        background:#fff;
        font-size:12px; font-weight:900; white-space:nowrap;
    }
    .pill.pos{ border-color: rgba(22,163,74,.25); background: rgba(22,163,74,.08); color:#14532d; }
    .pill.neg{ border-color: rgba(220,38,38,.25); background: rgba(220,38,38,.08); color:#7f1d1d; }

    .table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .tblx thead th{
        font-size:12px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:.4px;
        background:#0f172a;
        color:#fff;
        white-space:nowrap;
    }
    .keycode{
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
        font-size:12px;
        padding:3px 8px;
        border-radius:999px;
        background: rgba(17,24,39,.06);
        border:1px solid rgba(17,24,39,.10);
        display:inline-block;
    }
    .amt-neg{ color: var(--bad); font-weight:900; }
    .amt-pos{ color: var(--text); font-weight:900; }
</style>
@endpush

<main class="app-content cf wrap">
    <div class="container-fluid px-2">

        {{-- Header --}}
        <div class="cardx mb-3">
            <div class="topbar">
                <div class="brand">
                    <div class="ico"><i class="fa fa-water"></i></div>
                    <div>
                        <h5>Cash Flow Statement</h5>
                        <div class="text-muted small">
                            Period: <b>{{ $from }}</b> to <b>{{ $to }}</b> • Beginning Cash ({{ $beginDate }})
                        </div>
                        <div class="chips">
                            <span class="chip"><i class="fa fa-calendar"></i> {{ $from }} → {{ $to }}</span>
                            <span class="chip"><i class="fa fa-language"></i> {{ strtoupper($lang) }}</span>
                            <span class="chip"><i class="fa fa-building-columns"></i> Cash + Bank</span>
                        </div>
                    </div>
                </div>

                <div class="d-flex flex-wrap gap-2">
                    <a target="_blank" class="btnx" href="{{ route('reporting.cash_flow.print', request()->query()) }}">
                        <i class="fa fa-print"></i> Print
                    </a>
                    <a class="btnx" href="{{ route('reporting.cash_flow.index') }}">
                        <i class="fa fa-rotate-left"></i> Reset
                    </a>
                </div>
            </div>

            <div class="p-3">
                <div class="row g-2">
                    <div class="col-md-3">
                        <div class="kpi">
                            <div class="label"><i class="fa fa-play"></i> Beginning Cash</div>
                            <div class="val">{{ $fmt($totals['begin'] ?? 0) }}</div>
                            <div class="sub">Start position</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="kpi">
                            <div class="label"><i class="fa fa-right-left"></i> Net Cash Flow (Sum)</div>
                            <div class="val">{{ $fmt($totals['net_flow'] ?? 0) }}</div>
                            <div class="sub">Operating + Investing + Financing</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="kpi">
                            <div class="label"><i class="fa fa-arrow-trend-up"></i> Net Change (End - Begin)</div>
                            <div class="val" style="color:{{ $netChange>=0 ? 'var(--good)' : 'var(--bad)' }}">
                                {{ $fmt($netChange) }}
                            </div>
                            <div class="sub">End position difference</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="kpi">
                            <div class="label"><i class="fa fa-stop"></i> Ending Cash</div>
                            <div class="val">{{ $fmt($totals['end'] ?? 0) }}</div>
                            <div class="sub">Cash & bank balance</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Filters --}}
        <div class="cardx mb-3">
            <div class="topbar">
                <div class="fw-bold"><i class="fa fa-sliders me-2"></i>Filters</div>
                <div class="text-muted small">Click each section to expand details</div>
            </div>

            <div class="p-3 filters">
                <form method="GET" action="{{ route('reporting.cash_flow.index') }}">
                    <div class="row g-2">
                        <div class="col-md-3">
                            <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="key/name/source/category">
                            </div>
                        </div>

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

                        <div class="col-md-2">
                            <label>Source</label>
                            <select class="form-control" name="source">
                                <option value="all"  {{ ($filters['source'] ?? 'all')==='all'?'selected':'' }}>Cash + Bank</option>
                                <option value="cash" {{ ($filters['source'] ?? '')==='cash'?'selected':'' }}>Cash Only</option>
                                <option value="bank" {{ ($filters['source'] ?? '')==='bank'?'selected':'' }}>Bank Only</option>
                            </select>
                        </div>

                        <div class="col-md-2">
                            <label>Category</label>
                            <select class="form-control" name="category">
                                <option value="" {{ ($filters['category'] ?? '')===''?'selected':'' }}>All</option>
                                <option value="Operating" {{ ($filters['category'] ?? '')==='Operating'?'selected':'' }}>Operating</option>
                                <option value="Investing" {{ ($filters['category'] ?? '')==='Investing'?'selected':'' }}>Investing</option>
                                <option value="Financing" {{ ($filters['category'] ?? '')==='Financing'?'selected':'' }}>Financing</option>
                            </select>
                        </div>

                        <div class="col-md-1">
                            <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>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>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 gap-2 mt-2">
                            <button class="btn btn-primary"><i class="fa fa-filter me-1"></i> Apply</button>
                            <a class="btn btn-light" href="{{ route('reporting.cash_flow.index') }}">
                                <i class="fa fa-rotate-left me-1"></i> Reset
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- Sections + Summary --}}
        <div class="row g-3">
            <div class="col-lg-8">
                @forelse($sections as $sec)
                    @php
                        $m = $roleMeta($name($sec) ?: ($sec->title_en ?? ''));
                    @endphp

                    <div class="secx mb-3">
                        <div class="secx-h">
                            <div class="left">
                                <div class="chev"><i class="fa fa-chevron-right"></i></div>

                                <span class="badgex {{ $m['cls'] }}">
                                    <i class="fa {{ $m['icon'] }}"></i> {{ $m['txt'] }}
                                </span>

                                <i class="fa {{ $sec->icon }}"></i>
                                <span>{{ $name($sec) }}</span>
                            </div>

                            <div class="d-flex align-items-center gap-2 flex-wrap justify-content-end">
                                <span class="pill"><i class="fa fa-arrow-down"></i> In: {{ $fmt($sec->in) }}</span>
                                <span class="pill"><i class="fa fa-arrow-up"></i> Out: {{ $fmt($sec->out) }}</span>
                                <span class="pill {{ $sec->net>=0 ? 'pos':'neg' }}">
                                    <i class="fa fa-right-left"></i> Net: {{ $fmt($sec->net) }}
                                </span>
                            </div>
                        </div>

                        <div class="secx-b">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover align-middle mb-0 tblx">
                                    <thead>
                                    <tr>
                                        <th style="width:170px;">Key</th>
                                        <th>Name</th>
                                        <th style="width:90px;">Source</th>
                                        <th class="text-end" style="width:170px;">In</th>
                                        <th class="text-end" style="width:170px;">Out</th>
                                        <th class="text-end" style="width:170px;">Net</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @forelse($sec->lines as $l)
                                        @php $n = (float)$l->net; @endphp
                                        <tr>
                                            <td><span class="keycode">{{ $l->key }}</span></td>
                                            <td class="text-muted fw-bold">{{ $name($l) }}</td>
                                            <td>
                                                <span class="badgex badge-soft-dark" style="padding:4px 8px;font-size:11px;">
                                                    <i class="fa {{ $l->source==='bank' ? 'fa-building-columns':'fa-money-bill-wave' }}"></i>
                                                    {{ strtoupper($l->source) }}
                                                </span>
                                            </td>
                                            <td class="text-end">{{ $fmt($l->in) }}</td>
                                            <td class="text-end">{{ $fmt($l->out) }}</td>
                                            <td class="text-end">
                                                <span class="{{ $n < 0 ? 'amt-neg' : 'amt-pos' }}">{{ $fmt($n) }}</span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr><td colspan="6" class="text-center text-muted py-3">No data</td></tr>
                                    @endforelse
                                    </tbody>
                                    <tfoot class="table-light">
                                    <tr>
                                        <th colspan="3" class="text-end">Total</th>
                                        <th class="text-end">{{ $fmt($sec->in) }}</th>
                                        <th class="text-end">{{ $fmt($sec->out) }}</th>
                                        <th class="text-end">{{ $fmt($sec->net) }}</th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="alert alert-light border">
                        No cash/bank movements found for this period.
                    </div>
                @endforelse
            </div>

            <div class="col-lg-4">
                <div class="cardx">
                    <div class="topbar">
                        <div class="fw-bold"><i class="fa fa-bolt me-2"></i>Summary</div>
                        <span class="chip"><i class="fa fa-circle-info"></i> Cash Position</span>
                    </div>

                    <div class="p-3">
                        <div class="d-flex justify-content-between py-2" style="border-bottom:1px dashed var(--border);">
                            <div class="text-muted fw-bold">Beginning Cash</div>
                            <div class="fw-bold">{{ $fmt($totals['begin'] ?? 0) }}</div>
                        </div>
                        <div class="d-flex justify-content-between py-2" style="border-bottom:1px dashed var(--border);">
                            <div class="text-muted fw-bold">Net Cash Flow (Sum)</div>
                            <div class="fw-bold">{{ $fmt($totals['net_flow'] ?? 0) }}</div>
                        </div>
                        <div class="d-flex justify-content-between py-2" style="border-bottom:1px dashed var(--border);">
                            <div class="text-muted fw-bold">Net Change (End - Begin)</div>
                            <div class="fw-bold" style="color:{{ $netChange>=0 ? 'var(--good)' : 'var(--bad)' }}">
                                {{ $fmt($netChange) }}
                            </div>
                        </div>
                        <div class="d-flex justify-content-between py-2">
                            <div class="text-muted fw-bold">Ending Cash</div>
                            <div class="fw-bold">{{ $fmt($totals['end'] ?? 0) }}</div>
                        </div>

                        <div class="text-muted small mt-3">
                            Note: Categories are auto-mapped (cash_types keywords). Banks default to <b>Operating</b>.
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</main>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // accordion
    document.querySelectorAll('.secx').forEach(sec => {
        sec.querySelector('.secx-h')?.addEventListener('click', () => sec.classList.toggle('open'));
    });
    document.querySelectorAll('.secx')[0]?.classList.add('open');

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