@extends('layouts.app')

@section('content')
    <div class="max-w-3xl mx-auto p-6 bg-white shadow rounded">
        <h1 class="text-3xl font-bold mb-6">Add Extra Expense</h1>

        <form action="{{ route('extra_expenses.store') }}" method="POST">
            @csrf
            <div class="mb-4">
                <label for="amount" class="block text-sm font-semibold">Amount</label>
                <input type="number" step="0.01" name="amount" id="amount" class="w-full p-3 border border-gray-300 rounded" required>
            </div>

            <div class="mb-4">
                <label for="description" class="block text-sm font-semibold">Description (Optional)</label>
                <textarea name="description" id="description" class="w-full p-3 border border-gray-300 rounded"></textarea>
            </div>

            <div class="mb-4">
                <label for="expense_date" class="block text-sm font-semibold">Expense Date</label>
                <input type="date" name="expense_date" id="expense_date" class="w-full p-3 border border-gray-300 rounded" required>
            </div>

            <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">Add Expense</button>
        </form>
    </div>
@endsection