@extends('layouts.app')
@section('title', 'Expenses')

@section('content')
    <div class="page-head">
        <div><h1>Expenses</h1><p>{{ $expenses->total() }} expense(s) matching your filters. Approved expenses post to the ledger and appear on the P&amp;L.</p></div>
        <div class="page-actions">
            <a href="{{ route('reports.financial') }}" class="btn secondary">P&amp;L</a>
            <a href="{{ route('expenses.create') }}" class="btn">+ Record expense</a>
        </div>
    </div>

    <div class="grid grid-4 mb-2">
        @include('components.kpi', ['label' => 'Total', 'value' => money($totals['all']), 'variant' => 'info'])
        @include('components.kpi', ['label' => 'This month', 'value' => money($totals['thisMonth'])])
        @include('components.kpi', ['label' => 'Awaiting approval', 'value' => money($totals['pending']), 'variant' => $totals['pending'] ? 'warn' : ''])
        @include('components.kpi', ['label' => 'Approved', 'value' => money($totals['approved']), 'variant' => 'good'])
    </div>

    <form class="filters" method="GET">
        <div class="field" style="flex:2 1 240px;">
            <label>Search</label>
            <input type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Description, vendor, reference…">
        </div>
        <div class="field">
            <label>Status</label>
            <select name="status" data-auto-submit>
                <option value="">All</option>
                @foreach ($statuses as $s)
                    <option value="{{ $s }}" @selected(($filters['status'] ?? '') === $s)>{{ title_case_words($s) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Category</label>
            <select name="category" data-auto-submit>
                <option value="">All</option>
                @foreach ($categories as $c)
                    <option value="{{ $c }}" @selected(($filters['category'] ?? '') === $c)>{{ title_case_words($c) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>From</label>
            <input type="date" name="from" value="{{ $filters['from'] ?? '' }}">
        </div>
        <div class="field">
            <label>To</label>
            <input type="date" name="to" value="{{ $filters['to'] ?? '' }}">
        </div>
        <div class="field"><label>&nbsp;</label><button class="btn secondary" type="submit">Filter</button></div>
    </form>

    <div class="card">
        <div class="card-body" style="padding:0;">
            @if ($expenses->isEmpty())
                @include('components.empty-state', [
                    'icon' => '&#128184;',
                    'title' => 'No expenses recorded',
                    'message' => 'Until an expense is approved the profit & loss report shows zero costs and profit equal to revenue. Use the button above to record the first one.',
                ])
            @else
                <table class="data">
                    <thead>
                    <tr>
                        <th>Date</th><th>Description</th><th>Vendor</th><th>Category</th>
                        <th>Account</th><th>Paid by</th><th class="num">Amount</th>
                        <th>Status</th><th>By</th><th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($expenses as $expense)
                        <tr>
                            <td class="small nowrap">{{ $expense->expense_date?->format('d M Y') }}</td>
                            <td><a href="{{ route('expenses.show', $expense) }}">{{ \Illuminate\Support\Str::limit($expense->description, 44) }}</a>
                                @if ($expense->reference)<div class="tiny muted mono">{{ $expense->reference }}</div>@endif</td>
                            <td class="small">{{ $expense->vendor ?: '—' }}</td>
                            <td><span class="badge muted">{{ title_case_words($expense->category) }}</span></td>
                            <td class="small mono">{{ $expense->account?->code ?: '—' }}
                                <div class="tiny muted">{{ \Illuminate\Support\Str::limit($expense->account?->name ?? '', 20) }}</div></td>
                            <td class="small">{{ title_case_words($expense->payment_method ?? 'cash') }}</td>
                            <td class="num strong">{{ money($expense->amount) }}</td>
                            <td><span class="badge {{ status_color($expense->status) }}">
                                <span class="dot"></span>{{ title_case_words($expense->status) }}</span></td>
                            <td class="small">{{ $expense->recordedBy?->name ?: '—' }}</td>
                            <td class="right nowrap">
                                <a href="{{ route('expenses.show', $expense) }}" class="btn xs secondary">Open</a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            @endif
        </div>
        @if ($expenses->hasPages())<div class="card-foot">{{ $expenses->links('partials.pagination') }}</div>@endif
    </div>

    @if ($byCategory)
        <div class="card">
            <div class="card-head"><h3>By category</h3></div>
            <div class="card-body" style="padding:0;">
                <table class="data">
                    <thead><tr><th>Category</th><th class="num">Total</th><th class="num">Share</th></tr></thead>
                    <tbody>
                    @foreach ($byCategory as $category => $total)
                        <tr>
                            <td>{{ title_case_words($category) }}</td>
                            <td class="num strong">{{ money($total) }}</td>
                            <td class="num">
                                {{ $totals['all'] > 0 ? round($total / $totals['all'] * 100, 1) : 0 }}%
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
@endsection