@extends('layouts.app')

@section('title', 'Expenses')
@section('page-title', 'Expenses')

@section('content')
<div class="page-header">
    <div>
        <h1>Expenses</h1>
        <p class="breadcrumb mb-0">Track your business expenses</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('expense.categories') }}" class="btn btn-outline-secondary">
            <i class="bi bi-tags me-1"></i> Categories
        </a>
        <a href="{{ route('expenses.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-lg me-1"></i> Add Expense
        </a>
    </div>
</div>

{{-- Filter Bar --}}
<form method="GET" action="{{ route('expenses.index') }}" class="filter-bar mb-4">
    <label class="text-muted fw-500 small me-1">Filter:</label>
    <select name="month" class="form-select form-select-sm" style="width:160px;">
        <option value="">All Months</option>
        @foreach(range(1,12) as $m)
            <option value="{{ $m }}" {{ $month == $m ? 'selected' : '' }}>
                {{ \Carbon\Carbon::create(null, $m)->format('F') }}
            </option>
        @endforeach
    </select>
    <select name="year" class="form-select form-select-sm" style="width:110px;">
        <option value="">All Years</option>
        @foreach(range(now()->year - 2, now()->year + 1) as $y)
            <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
        @endforeach
    </select>
    <button type="submit" class="btn btn-primary btn-sm">Apply</button>
    @if($month || $year)
        <a href="{{ route('expenses.index') }}" class="btn btn-outline-secondary btn-sm">Clear</a>
    @endif
</form>

<div class="table-card">
    @if($expenses->count())
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Category</th>
                    <th>Amount</th>
                    <th>Date</th>
                    <th>Note</th>
                    <th width="120">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($expenses as $expense)
                <tr>
                    <td class="text-muted">{{ $expenses->firstItem() + $loop->index }}</td>
                    <td>
                        <span class="badge bg-light text-dark border">{{ $expense->category->name }}</span>
                    </td>
                    <td class="fw-600 text-danger">৳{{ number_format($expense->amount, 2) }}</td>
                    <td>{{ $expense->date->format('d M Y') }}</td>
                    <td class="text-muted">{{ Str::limit($expense->note, 60) ?? '—' }}</td>
                    <td>
                        <div class="action-btns">
                            <a href="{{ route('expenses.edit', $expense->id) }}"
                               class="btn btn-sm btn-outline-primary btn-icon" title="Edit">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <form action="{{ route('expenses.destroy', $expense->id) }}" method="POST"
                                  onsubmit="return confirm('Delete this expense?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-outline-danger btn-icon">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="px-4 py-3 d-flex justify-content-between align-items-center border-top">
        <small class="text-muted">Showing {{ $expenses->firstItem() }}–{{ $expenses->lastItem() }} of {{ $expenses->total() }} records</small>
        {{ $expenses->links() }}
    </div>
    @else
    <div class="empty-state">
        <div class="empty-icon"><i class="bi bi-arrow-down-circle"></i></div>
        <p>No expenses found. <a href="{{ route('expenses.create') }}">Add an expense</a>.</p>
    </div>
    @endif
</div>
@endsection