@extends('layouts.app')
@section('title', 'Reports · SakuApp')
@section('page-title', 'Reports')

@section('content')

    {{-- Filter bar --}}
    <div class="filter-bar">
        <form method="GET" action="{{ route('reports.index') }}" style="display:contents;">
            <div class="form-group">
                <label class="form-label" for="filter_type">Filter by</label>
                <select name="filter_type" id="filter_type" class="form-control" style="min-width:160px;">
                    <option value="">All time</option>
                    <option value="month_year" {{ ($filterType ?? '') == 'month_year' ? 'selected' : '' }}>Month + Year
                    </option>
                    <option value="year" {{ ($filterType ?? '') == 'year' ? 'selected' : '' }}>Year only</option>
                    <option value="custom" {{ ($filterType ?? '') == 'custom' ? 'selected' : '' }}>Custom range</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label" for="month">Month</label>
                <select name="month" id="month" class="form-control">
                    <option value="">—</option>
                    @for ($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}" {{ ($month ?? '') == $m ? 'selected' : '' }}>
                            {{ DateTime::createFromFormat('!m', $m)->format('M') }}</option>
                    @endfor
                </select>
            </div>
            <div class="form-group">
                <label class="form-label" for="year">Year</label>
                <select name="year" id="year" class="form-control">
                    <option value="">—</option>
                    @for ($y = now()->year; $y >= now()->year - 10; $y--)
                        <option value="{{ $y }}" {{ ($year ?? '') == $y ? 'selected' : '' }}>{{ $y }}
                        </option>
                    @endfor
                </select>
            </div>
            <div class="form-group">
                <label class="form-label" for="date_from">From</label>
                <input type="date" name="date_from" id="date_from" class="form-control" value="{{ $dateFrom ?? '' }}">
            </div>
            <div class="form-group">
                <label class="form-label" for="date_to">To</label>
                <input type="date" name="date_to" id="date_to" class="form-control" value="{{ $dateTo ?? '' }}">
            </div>
            <div class="form-group">
                <label class="form-label" style="opacity:0;">x</label>
                <div style="display:flex; gap:6px;">
                    <button type="submit" class="btn btn-primary">Apply</button>
                    <a href="{{ route('reports.index') }}" class="btn btn-ghost">Reset</a>
                </div>
            </div>
        </form>
    </div>

    {{-- Stats --}}
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-ico income"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M7 11l5-5m0 0l5 5m-5-5v12" />
                </svg></div>
            <div class="stat-lbl">Total Income</div>
            <div class="stat-val income">{{ number_format($totalIncome, 2) }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-ico expense"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 13l-5 5m0 0l-5-5m5 5V6" />
                </svg></div>
            <div class="stat-lbl">Total Expenses</div>
            <div class="stat-val expense">{{ number_format($totalExpense, 2) }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-ico balance"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
                </svg></div>
            <div class="stat-lbl">Balance</div>
            <div class="stat-val balance">{{ number_format($balance, 2) }}</div>
        </div>
    </div>

    {{-- Results table --}}
    <div class="tbl-card">
        <div class="tbl-head">
            <h2>Transactions</h2>
            <span style="font-size:.75rem; color:var(--t3);">{{ $transactions->total() }}
                result{{ $transactions->total() != 1 ? 's' : '' }}</span>
        </div>
        <div class="tbl-wrap">
            @if ($transactions->isEmpty())
                <div class="empty">
                    <div class="empty-ico">🔍</div>
                    <h3>No results found</h3>
                    <p>Try adjusting your filter criteria.</p>
                </div>
            @else
                <table>
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Description</th>
                            <th>Type</th>
                            <th class="text-right">Amount</th>
                            <th>Note</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($transactions as $txn)
                            <tr>
                                <td style="color:var(--t3); font-size:.77rem; white-space:nowrap;">
                                    {{ $txn->date->format('d M Y') }}</td>
                                <td style="font-weight:500; color:var(--t1);">{{ $txn->title }}</td>
                                <td><span class="badge badge-{{ $txn->type }}">{{ ucfirst($txn->type) }}</span></td>
                                <td class="text-right amt-{{ $txn->type }}">{{ number_format($txn->amount, 2) }}</td>
                                <td style="color:var(--t3); font-size:.79rem;">
                                    {{ $txn->note ? Str::limit($txn->note, 36) : '—' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif
        </div>
        @if ($transactions->hasPages())
            <div class="tbl-foot">
                <div class="pager">
                    @foreach ($transactions->getUrlRange(1, $transactions->lastPage()) as $page => $url)
                        @if ($page == $transactions->currentPage())
                            <span class="cur">{{ $page }}</span>
                        @else
                            <a href="{{ $url }}">{{ $page }}</a>
                        @endif
                    @endforeach
                </div>
            </div>
        @endif
    </div>
@endsection