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

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

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

    :root{ --border:#e5e7eb; --text:#111827; --muted:#6b7280; --bg:#f8fafc; --card:#fff; --navy:#0f172a; }
    .ts, .ts *{ color:var(--text); }
    .ts .text-muted{ color:var(--muted)!important; }
    .cardx{ background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 10px 22px rgba(0,0,0,.06); }
    .topbar{ padding:14px 16px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,#fff,var(--bg));
        display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
    .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); }
    .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; }

    .table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .tbl thead th{ background:var(--navy); color:#fff!important; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
</style>
@endpush

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

        <div class="cardx mb-3">
            <div class="topbar">
                <div>
                    <div class="d-flex flex-wrap gap-2">
                        <span class="chip"><i class="fa fa-percent"></i> Tax Summary</span>
                        <span class="chip"><i class="fa fa-calendar"></i> {{ $filters['mode'] ?? 'monthly' }} • {{ $filters['year'] }}</span>
                        <span class="chip"><i class="fa fa-coins"></i> Currency: {{ $filters['currency_id'] ?: 'All' }}</span>
                    </div>
                    <div class="text-muted small mt-2">Source: <b>texes</b> table (amount * ex_rate for base)</div>
                </div>

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

            <div class="p-3">
                <div class="row g-2">
                    <div class="col-md-4">
                        <div class="kpi">
                            <div class="label"><i class="fa fa-list-check"></i> Records</div>
                            <div class="val">{{ (int)($totals['count'] ?? 0) }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="kpi">
                            <div class="label"><i class="fa fa-money-bill-wave"></i> Total Amount</div>
                            <div class="val">{{ $fmt($totals['amount'] ?? 0) }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="kpi">
                            <div class="label"><i class="fa fa-scale-balanced"></i> Total Base</div>
                            <div class="val">{{ $fmt($totals['base'] ?? 0) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Filters --}}
        <div class="cardx mb-3">
            <div class="topbar">
                <div class="fw-bold"><i class="fa fa-sliders"></i> Filters</div>
                <span class="chip"><i class="fa fa-circle-info"></i> Monthly or Annual</span>
            </div>
            <div class="p-3">
                <form method="GET" action="{{ route('reporting.reporting.tax_summary.index') }}" class="row g-2">
                    <div class="col-md-2">
                        <label class="small text-muted">Mode</label>
                        <select name="mode" class="form-control">
                            <option value="monthly" {{ ($filters['mode']??'monthly')=='monthly'?'selected':'' }}>Monthly</option>
                            <option value="annual"  {{ ($filters['mode']??'monthly')=='annual'?'selected':'' }}>Annual</option>
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="small text-muted">Year</label>
                        <input type="number" name="year" class="form-control" value="{{ $filters['year'] ?? date('Y') }}">
                    </div>

                    <div class="col-md-2">
                        <label class="small text-muted">Month (optional)</label>
                        <select name="month" class="form-control">
                            <option value="0">All Months</option>
                            @for($m=1;$m<=12;$m++)
                                <option value="{{ $m }}" {{ (int)($filters['month']??0)===$m?'selected':'' }}>
                                    {{ date('M', mktime(0,0,0,$m,1)) }} ({{ $m }})
                                </option>
                            @endfor
                        </select>
                        <div class="text-muted small mt-1">Only affects data filter, not annual mode.</div>
                    </div>

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

                    <div class="col-md-2">
                        <label class="small text-muted">Status (optional)</label>
                        <input type="text" name="status" class="form-control" value="{{ $filters['status'] ?? '' }}" placeholder="e.g. 1">
                    </div>

                    <div class="col-md-1 d-flex align-items-end">
                        <button class="btn btn-primary w-100" style="border-radius:12px;">
                            <i class="fa fa-filter"></i>
                        </button>
                    </div>

                    <div class="col-12 mt-1">
                        <label class="form-check">
                            <input class="form-check-input" type="checkbox" name="detail" value="1" {{ ($filters['detail']??0)==1?'checked':'' }}>
                            <span class="form-check-label fw-bold">Show Detail List</span>
                        </label>
                    </div>
                </form>
            </div>
        </div>

        {{-- Summary Table --}}
        <div class="cardx">
            <div class="topbar">
                <div class="fw-bold"><i class="fa fa-table"></i> Summary</div>
                <span class="chip"><i class="fa fa-circle-dot"></i> Rows: {{ $rows->count() }}</span>
            </div>

            <div class="p-3 table-responsive">
                <table class="table table-sm table-bordered align-middle mb-0 tbl">
                    <thead>
                        <tr>
                            <th>Period</th>
                            <th>Currency</th>
                            <th class="text-center">Count</th>
                            <th class="text-end">Total Amount</th>
                            <th class="text-end">Total Base</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($rows as $r)
                            @php
                                $cur = $currencyLookup[$r['currency_id']] ?? null;
                                $curName = $cur->title_en ?? $cur->title_ps ?? ('CUR #'.$r['currency_id']);
                            @endphp
                            <tr>
                                <td class="fw-bold">{{ $r['period'] }}</td>
                                <td>{{ $curName }}</td>
                                <td class="text-center fw-bold">{{ $r['count'] }}</td>
                                <td class="text-end">{{ $fmt($r['total_amount']) }}</td>
                                <td class="text-end fw-bold">{{ $fmt($r['total_base']) }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="text-center text-muted py-4">No data found.</td></tr>
                        @endforelse
                    </tbody>
                    @if($rows->count())
                        <tfoot class="table-light">
                            <tr>
                                <th colspan="2" class="text-end">Totals</th>
                                <th class="text-center">{{ (int)($totals['count']??0) }}</th>
                                <th class="text-end">{{ $fmt($totals['amount']??0) }}</th>
                                <th class="text-end">{{ $fmt($totals['base']??0) }}</th>
                            </tr>
                        </tfoot>
                    @endif
                </table>
            </div>
        </div>

        {{-- Detail List --}}
        @if(($filters['detail']??0)==1)
            <div class="cardx mt-3">
                <div class="topbar">
                    <div class="fw-bold"><i class="fa fa-list"></i> Detail</div>
                    <span class="chip"><i class="fa fa-circle-dot"></i> {{ $detail->count() }} rows</span>
                </div>
                <div class="p-3 table-responsive">
                    <table class="table table-sm table-bordered align-middle mb-0">
                        <thead class="table-dark">
                            <tr>
                                <th>Date</th>
                                <th>Title</th>
                                <th>Currency</th>
                                <th class="text-end">Amount</th>
                                <th class="text-end">Ex Rate</th>
                                <th class="text-end">Base</th>
                                <th class="text-center">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                        @forelse($detail as $d)
                            @php
                                $cur = $currencyLookup[$d->currency_id] ?? null;
                                $curName = $cur->title_en ?? $cur->title_ps ?? ('CUR #'.$d->currency_id);
                                $ex = (float)($d->ex_rate ?: 1);
                                $base = (float)$d->amount * $ex;
                            @endphp
                            <tr>
                                <td>{{ $d->date }}</td>
                                <td class="fw-bold">{{ $d->title }}</td>
                                <td>{{ $curName }}</td>
                                <td class="text-end">{{ $fmt($d->amount) }}</td>
                                <td class="text-end">{{ $fmt($ex) }}</td>
                                <td class="text-end fw-bold">{{ $fmt($base) }}</td>
                                <td class="text-center">{{ $d->status }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="text-center text-muted py-4">No detail rows.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        @endif

    </div>
</main>
@endsection