@extends('master.app')
@section('title','Accounts Receivable Summary')

@section('body')
@php
    $fmt = fn($n)=> number_format((float)$n,2);

    $fltCustomer = request('customer_id');
    $fltCurrency = request('currency_id');
    $onlyOpen    = request('only_open') == 1;

    $sumInv   = (float)($totals['invoice_total'] ?? 0);
    $sumRec   = (float)($totals['received_total'] ?? 0);
    $sumRet   = (float)($totals['return_total'] ?? 0);
    $sumOut   = (float)($totals['outstanding'] ?? 0);
    $sumOutB  = (float)($totals['outstanding_base'] ?? 0);
@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;
        --navy:#0f172a;
    }

    .ar, .ar *{ color: var(--text); }
    .ar .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-success{ background: rgba(22,163,74,.12); color:#166534 !important; border:1px solid rgba(22,163,74,.20); }
    .badge-soft-warning{ background: rgba(245,158,11,.18); color:#92400e !important; border:1px solid rgba(245,158,11,.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;
    }

    /* table */
    .table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .tblx{ border:1px solid var(--border); border-radius:16px; overflow:hidden; }
    .tblx thead th{
        background: var(--navy);
        color:#fff !important;
        font-size:12px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:.4px;
        white-space:nowrap;
        border-color: rgba(255,255,255,.14);
    }
    .tblx tbody tr:hover{ background: rgba(59,130,246,.06); }

    .mono{
        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{ font-weight:900; }
    .amt-neg{ color: var(--bad); }
    .amt-pos{ color: var(--text); }

    @media print{
        .app-sidebar, .app-header, .no-print{ display:none !important; }
        .cardx{ box-shadow:none; }
    }
</style>
@endpush

<main class="app-content ar 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-file-invoice-dollar"></i></div>
                    <div>
                        <h5>Accounts Receivable Summary</h5>
                        <div class="text-muted small">Invoices - Received - Returns</div>

                        <div class="chips">
                            <span class="chip"><i class="fa fa-users"></i> Customer: <b>{{ $fltCustomer ?: 'All' }}</b></span>
                            <span class="chip"><i class="fa fa-coins"></i> Currency: <b>{{ $fltCurrency ?: 'All' }}</b></span>
                            <span class="chip"><i class="fa fa-calendar"></i> {{ request('date_from') ?: '-' }} → {{ request('date_to') ?: '-' }}</span>
                            <span class="chip"><i class="fa {{ $onlyOpen ? 'fa-circle-check' : 'fa-circle' }}"></i> Only Open: <b>{{ $onlyOpen ? 'Yes' : 'No' }}</b></span>
                        </div>
                    </div>
                </div>

                <div class="d-flex flex-wrap gap-2 no-print">
                    <a target="_blank" class="btnx" href="{{ route('reporting.ar_summary.print', request()->query()) }}">
                        <i class="fa fa-print"></i> Print
                    </a>
                    <a class="btnx" href="{{ route('reporting.ar_summary.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-receipt"></i> Invoices</div>
                            <div class="val">{{ $fmt($sumInv) }}</div>
                            <div class="sub">Total billed amount</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="kpi">
                            <div class="label"><i class="fa fa-hand-holding-dollar"></i> Received</div>
                            <div class="val">{{ $fmt($sumRec) }}</div>
                            <div class="sub">Total collected</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="kpi">
                            <div class="label"><i class="fa fa-rotate-left"></i> Returns</div>
                            <div class="val">{{ $fmt($sumRet) }}</div>
                            <div class="sub">Total returns</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="kpi">
                            <div class="label"><i class="fa fa-circle-exclamation"></i> Outstanding (Base)</div>
                            <div class="val" style="color:{{ $sumOutB>=0 ? 'var(--text)' : 'var(--bad)' }}">
                                {{ $fmt($sumOutB) }}
                            </div>
                            <div class="sub">Converted to base currency</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Filters --}}
        <div class="cardx mb-3 no-print">
            <div class="topbar">
                <div class="fw-bold"><i class="fa fa-sliders me-2"></i>Filters</div>
                <div class="text-muted small">Filter by customer, currency, and date range</div>
            </div>

            <div class="p-3 filters">
                <form method="GET" action="{{ route('reporting.ar_summary.index') }}">
                    <div class="row g-2">

                        <div class="col-md-3">
                            <label>Customer</label>
                            <select name="customer_id" class="form-control select2">
                                <option value="">All Customers</option>
                                @foreach($customers as $c)
                                    <option value="{{ $c->id }}" {{ request('customer_id')==$c->id?'selected':'' }}>
                                        {{ $c->name ?? ('Customer #'.$c->id) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-2">
                            <label>Currency</label>
                            <select name="currency_id" class="form-control select2">
                                <option value="">All</option>
                                @foreach($currencies as $cur)
                                    <option value="{{ $cur->id }}" {{ request('currency_id')==$cur->id?'selected':'' }}>
                                        {{ $cur->title_en ?? $cur->title_ps ?? ('CUR #'.$cur->id) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-2">
                            <label>From</label>
                            <input type="date" name="date_from" value="{{ request('date_from') }}" class="form-control">
                        </div>

                        <div class="col-md-2">
                            <label>To</label>
                            <input type="date" name="date_to" value="{{ request('date_to') }}" class="form-control">
                        </div>

                        <div class="col-md-3 d-flex align-items-end gap-2">
                            <div class="form-check me-2" style="margin-bottom:8px;">
                                <input class="form-check-input" type="checkbox" name="only_open" value="1"
                                    {{ request('only_open')==1?'checked':'' }}>
                                <label class="form-check-label fw-bold">Only Open</label>
                            </div>

                            <button class="btn btn-primary btn-sm" style="border-radius:12px;">
                                <i class="fa fa-filter"></i> Apply
                            </button>
                            <a href="{{ route('reporting.ar_summary.index') }}" class="btn btn-light btn-sm" style="border-radius:12px;">
                                <i class="fa fa-rotate-left"></i> Reset
                            </a>
                        </div>

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

        {{-- Table --}}
        <div class="cardx">
            <div class="topbar">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <span class="badgex badge-soft-primary">
                        <i class="fa fa-table"></i> Summary Table
                    </span>
                    <span class="badgex badge-soft-dark">
                        <i class="fa fa-circle-dot"></i> Rows: {{ $rows->count() }}
                    </span>
                </div>
                <span class="chip"><i class="fa fa-circle-exclamation"></i> Outstanding = Invoices - Received - Returns</span>
            </div>

            <div class="p-3">
                <div class="table-responsive">
                    <table class="table table-sm table-bordered align-middle mb-0 tblx">
                        <thead>
                        <tr>
                            <th style="min-width:260px;">Customer</th>
                            <th style="min-width:140px;">Currency</th>
                            <th class="text-center" style="min-width:80px;">Inv</th>
                            <th class="text-end" style="min-width:150px;">Invoices</th>
                            <th class="text-end" style="min-width:150px;">Received</th>
                            <th class="text-end" style="min-width:150px;">Returns</th>
                            <th class="text-end" style="min-width:160px;">Outstanding</th>
                            <th class="text-end" style="min-width:190px;">Outstanding (Base)</th>
                        </tr>
                        </thead>

                        <tbody>
                        @forelse($rows as $r)
                            @php
                                $cust = $customerLookup[$r['customer_id']] ?? null;
                                $cur  = $currencyLookup[$r['currency_id']] ?? null;
                                $custName = $cust->name ?? ('Customer #'.$r['customer_id']);
                                $curName  = $cur->title_en ?? $cur->title_ps ?? ('CUR #'.($r['currency_id'] ?? 1));
                                $out = (float)$r['outstanding'];
                                $outBase = (float)$r['outstanding_base'];
                            @endphp
                            <tr>
                                <td>
                                    <div class="fw-bold">{{ $custName }}</div>
                                    <div class="text-muted small">
                                        <span class="mono">ID: {{ $r['customer_id'] }}</span>
                                    </div>
                                </td>
                                <td>
                                    <span class="badgex badge-soft-dark" style="padding:4px 10px;font-size:11px;">
                                        <i class="fa fa-coins"></i> {{ $curName }}
                                    </span>
                                </td>
                                <td class="text-center fw-bold">{{ $r['invoice_count'] }}</td>

                                <td class="text-end">{{ $fmt($r['invoice_total']) }}</td>
                                <td class="text-end">{{ $fmt($r['received_total']) }}</td>
                                <td class="text-end">{{ $fmt($r['return_total']) }}</td>

                                <td class="text-end amt {{ $out < 0 ? 'amt-neg' : 'amt-pos' }}">
                                    {{ $fmt($out) }}
                                </td>
                                <td class="text-end amt {{ $outBase < 0 ? 'amt-neg' : 'amt-pos' }}">
                                    {{ $fmt($outBase) }}
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="8" class="text-center text-muted py-4">No data found.</td></tr>
                        @endforelse
                        </tbody>

                        @if($rows->count())
                            <tfoot class="table-light">
                            <tr>
                                <th colspan="3" class="text-end">Totals</th>
                                <th class="text-end">{{ $fmt($sumInv) }}</th>
                                <th class="text-end">{{ $fmt($sumRec) }}</th>
                                <th class="text-end">{{ $fmt($sumRet) }}</th>
                                <th class="text-end">{{ $fmt($sumOut) }}</th>
                                <th class="text-end">{{ $fmt($sumOutB) }}</th>
                            </tr>
                            </tfoot>
                        @endif
                    </table>
                </div>
            </div>
        </div>

    </div>
</main>
@endsection