@extends('layouts.admin')
@section('title','Expenses')
@section('page-title','Expense Records')
@section('content')
<div class="page-header">
    <h1>Expenses</h1>
    <div style="display:flex;gap:.5rem;">
        <a href="{{ route('admin.accounting.categories') }}" class="btn btn-outline btn-sm">🏷 Categories</a>
        <a href="{{ route('admin.accounting.expenses.create') }}" class="btn btn-danger">+ Record Expense</a>
    </div>
</div>
<div class="filter-bar">
    <form method="GET" style="display:flex;gap:.75rem;flex-wrap:wrap;width:100%;">
        <input type="text" name="search" placeholder="Search title…" value="{{ request('search') }}" style="flex:1;min-width:180px;">
        <select name="category">
            <option value="">All Categories</option>
            @foreach($categories as $cat)
            <option value="{{ $cat->id }}" {{ request('category')==$cat->id?'selected':'' }}>{{ $cat->icon }} {{ $cat->name }}</option>
            @endforeach
        </select>
        <input type="month" name="month" value="{{ request('month') }}">
        <button type="submit" class="btn btn-primary btn-sm">Filter</button>
        <a href="{{ route('admin.accounting.expenses') }}" class="btn btn-outline btn-sm">Reset</a>
    </form>
</div>
<div class="card">
    <div class="card-header">
        <span style="font-weight:600;">Total: <span style="color:#dc2626;">₵{{ number_format($total,2) }}</span></span>
    </div>
    <div style="overflow-x:auto;">
        <table>
            <thead><tr><th>Title</th><th>Category</th><th>Date</th><th>Vendor</th><th>Payment</th><th style="text-align:right;">Amount</th><th>Actions</th></tr></thead>
            <tbody>
            @forelse($expenses as $e)
            <tr>
                <td style="font-weight:500;">{{ $e->title }}</td>
                <td>
                    @if($e->category)
                    <span style="background:{{ $e->category->color }}22;color:{{ $e->category->color }};padding:.15rem .5rem;border-radius:.25rem;font-size:.8rem;border:1px solid {{ $e->category->color }}44;">
                        {{ $e->category->icon }} {{ $e->category->name }}
                    </span>
                    @else
                    <span style="color:#7A6058;font-size:.85rem;">—</span>
                    @endif
                </td>
                <td style="font-size:.85rem;color:#7A6058;">{{ $e->expense_date->format('M j, Y') }}</td>
                <td style="font-size:.85rem;">{{ $e->vendor ?? '—' }}</td>
                <td style="font-size:.85rem;">{{ ucfirst(str_replace('_',' ',$e->payment_method)) }}</td>
                <td style="text-align:right;font-weight:700;color:#dc2626;">₵{{ number_format($e->amount,2) }}</td>
                <td>
                    <a href="{{ route('admin.accounting.expenses.edit',$e) }}" class="btn btn-outline btn-sm">Edit</a>
                    <form method="POST" action="{{ route('admin.accounting.expenses.destroy',$e) }}" style="display:inline;" onsubmit="return confirm('Delete this expense?')">
                        @csrf @method('DELETE')
                        <button class="btn btn-danger btn-sm">Del</button>
                    </form>
                </td>
            </tr>
            @empty
            <tr><td colspan="7" style="text-align:center;color:#7A6058;padding:2rem;">No expenses found.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if($expenses->hasPages())
    <div style="padding:1rem 1.5rem;">{{ $expenses->links() }}</div>
    @endif
</div>
@endsection