@extends('layouts.app')
@section('title', 'Add Expense')
@section('page-title', 'Add 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;">Add New Expense</h5>
</div>

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

    @if($errors->any())
        <div class="alert alert-danger rounded-3 small py-2 mb-3">
            <i class="bi bi-exclamation-circle me-1"></i> {{ $errors->first() }}
        </div>
    @endif

    <form method="POST" action="{{ route('expenses.store') }}" enctype="multipart/form-data" novalidate>
    @csrf

    <div class="row g-3">
        <div class="col-sm-6">
            <label class="form-label fw-500">Date <span class="text-danger">*</span></label>
            <input type="date" name="date" class="form-control"
                   value="{{ old('date', date('Y-m-d')) }}" required>
        </div>
        <div class="col-sm-6">
            <label class="form-label fw-500">Amount (₦) <span class="text-danger">*</span></label>
            <div class="input-group">
                <span class="input-group-text bg-light">₦</span>
                <input type="number" name="amount" class="form-control"
                       value="{{ old('amount') }}" placeholder="0.00"
                       min="0" step="0.01" required>
            </div>
        </div>
        <div class="col-12">
            <label class="form-label fw-500">Category <span class="text-danger">*</span></label>
            <select name="category" class="form-select" required>
                <option value="">— Select category —</option>
                @foreach(\App\Models\Expense::CATEGORIES as $value => $label)
                    <option value="{{ $value }}" {{ old('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') }}"
                   placeholder="e.g. Office rent for July 2025">
        </div>
        <div class="col-12">
            <label class="form-label fw-500">Receipt (optional)</label>
            <input type="file" name="receipt" class="form-control"
                   accept="image/*,.pdf">
            <div class="form-text">JPG, PNG or PDF, max 2MB</div>
        </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-plus-lg me-2"></i>Add Expense
        </button>
        <a href="{{ route('expenses.index') }}" class="btn btn-outline-secondary fw-600">Cancel</a>
    </div>
    </form>
</div>
</div>
</div>
@endsection
