@extends('layouts.app')
@section('title','Expenses')
@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
  <div><h1 class="h4 mb-0">Expenses &mdash; {{ $month->format('F Y') }}</h1><div class="text-muted">Total: <b>@money($expenses->sum('amount'))</b></div></div>
  <form class="d-flex gap-2"><input type="month" name="month" value="{{ $month->format('Y-m') }}" class="form-control"><button class="btn btn-outline-primary">Go</button></form>
</div>
<div class="panel mb-3"><div class="panel-h">Add expense</div><div class="panel-b">
  <form method="post" action="{{ route('expenses.store') }}" class="row g-2">@csrf
    <div class="col-md-3"><input name="title" class="form-control" placeholder="What was it for?" required></div>
    <div class="col-md-2"><select name="category" class="form-select">@foreach(config('hitek.expense_categories') as $c)<option>{{ $c }}</option>@endforeach</select></div>
    <div class="col-md-2"><input type="number" step="0.01" min="0.01" name="amount" class="form-control" placeholder="Amount" required></div>
    <div class="col-md-2"><input type="date" name="expense_date" value="{{ today()->toDateString() }}" class="form-control" required></div>
    <div class="col-md-2"><input name="notes" class="form-control" placeholder="Notes"></div>
    <div class="col-md-1"><button class="btn btn-primary w-100">Add</button></div>
  </form></div></div>
<div class="panel table-responsive"><table class="table table-hover mb-0 align-middle">
  <thead><tr><th>Date</th><th>Title</th><th>Category</th><th>Notes</th><th class="text-end">Amount</th><th></th></tr></thead>
  <tbody>@forelse($expenses as $e)<tr><td>{{ $e->expense_date->format('M j') }}</td><td>{{ $e->title }}</td><td>{{ $e->category }}</td><td>{{ $e->notes }}</td><td class="text-end">@money($e->amount)</td>
    <td class="text-end"><form method="post" action="{{ route('expenses.destroy', $e) }}" data-confirm="Delete expense?">@csrf @method('DELETE')<button class="btn btn-sm btn-outline-danger"><i class="bi bi-x-lg"></i></button></form></td></tr>
  @empty<tr><td colspan="6" class="p-4 text-muted">No expenses this month.</td></tr>@endforelse</tbody></table></div>
@endsection