@extends('layouts.app')
@section('title', 'Edit Expense')
@section('page-title', 'Edit Expense')

@section('content')

<div class="d-flex align-items-center gap-3 mb-4">
    <a href="{{ route('expenses.index') }}" class="btn btn-sm btn-light"><i class="bi bi-arrow-left"></i></a>
    <h5 class="fw-700 mb-0" style="color:#1e293b;">Edit Expense</h5>
</div>

<div class="row justify-content-start">
<div class="col-lg-6">
<div class="card table-card p-4">

    <form method="POST" action="{{ route('expenses.update', $expense) }}" novalidate>
    @csrf @method('PUT')

    <div class="row g-3">
        <div class="col-sm-6">
            <label class="form-label fw-500">Date</label>
            <input type="date" name="date" class="form-control"
                   value="{{ old('date', $expense->date->format('Y-m-d')) }}" required>
        </div>
        <div class="col-sm-6">
            <label class="form-label fw-500">Amount (₦)</label>
            <div class="input-group">
                <span class="input-group-text bg-light">₦</span>
                <input type="number" name="amount" class="form-control"
                       value="{{ old('amount', $expense->amount) }}" min="0" step="0.01" required>
            </div>
        </div>
        <div class="col-12">
            <label class="form-label fw-500">Category</label>
            <select name="category" class="form-select" required>
                @foreach(\App\Models\Expense::CATEGORIES as $value => $label)
                    <option value="{{ $value }}" {{ old('category', $expense->category) === $value ? 'selected' : '' }}>
                        {{ $label }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-12">
            <label class="form-label fw-500">Description</label>
            <input type="text" name="description" class="form-control"
                   value="{{ old('description', $expense->description) }}">
        </div>
    </div>

    <div class="d-flex gap-2 mt-4">
        <button type="submit" class="btn fw-600" style="background:#00a651;color:white;">
            <i class="bi bi-check-lg me-2"></i>Save Changes
        </button>
        <a href="{{ route('expenses.index') }}" class="btn btn-outline-secondary fw-600">Cancel</a>
    </div>
    </form>
</div>
</div>
</div>
@endsection