@extends('admin.layouts.app')

@section('title', 'Expenses')

@section('content')
    <h1>Expenses</h1>

    <div style="background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:18px; margin-bottom:20px;">
        <form method="POST" action="{{ route('admin.expenses.store') }}"
              style="display:grid; grid-template-columns: 140px 160px 1fr 120px auto; gap:10px; align-items:end;">
            @csrf
            <div>
                <label for="expense_date">Date</label>
                <input type="date" id="expense_date" name="expense_date" value="{{ old('expense_date', now()->toDateString()) }}" style="margin:0;" required>
            </div>
            <div>
                <label for="category">Category</label>
                <select id="category" name="category" style="margin:0;" required>
                    @foreach ($categories as $category)
                        <option value="{{ $category }}" {{ old('category') === $category ? 'selected' : '' }}>{{ $category }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="description">Note (optional)</label>
                <input type="text" id="description" name="description" value="{{ old('description') }}" style="margin:0;">
            </div>
            <div>
                <label for="amount">Amount ($)</label>
                <input type="number" id="amount" name="amount" step="0.01" min="0.01" value="{{ old('amount') }}" style="margin:0;" required>
            </div>
            <button type="submit" class="btn">Add</button>
        </form>
    </div>

    <p style="color:var(--text-muted); font-size:13px; margin-bottom:12px;">
        This month so far: <strong style="color:var(--text);">${{ number_format($monthTotal, 2) }}</strong>
    </p>

    <table>
        <tr>
            <th>Date</th>
            <th>Category</th>
            <th>Note</th>
            <th>Amount</th>
            <th></th>
        </tr>
        @forelse ($expenses as $expense)
            <tr>
                <td>{{ $expense->expense_date->format('d/m/Y') }}</td>
                <td>{{ $expense->category }}</td>
                <td>{{ $expense->description ?? '—' }}</td>
                <td>${{ number_format($expense->amount, 2) }}</td>
                <td>
                    <form class="inline" method="POST" action="{{ route('admin.expenses.destroy', $expense) }}" onsubmit="return confirm('Delete this expense?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="link" style="background:none;border:none;color:#e46464;cursor:pointer;font-size:13px;padding:0;">Delete</button>
                    </form>
                </td>
            </tr>
        @empty
            <tr><td colspan="5">No expenses yet.</td></tr>
        @endforelse
    </table>

    <div style="margin-top:20px;">
        {{ $expenses->links() }}
    </div>
@endsection