@extends('layouts.main')
@section('title', 'Add Expense')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item"><a href="{{ route('expenses.index') }}">Expenses</a></li>
    <li class="breadcrumb-item active">Add Expense</li>
@endsection

@section('content')

    <div class="row">
        <div class="col-lg-8 offset-lg-2">
            <div class="card-box">
                <h4 class="header-title mb-4">Add New Expense</h4>

                @if($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                <form action="{{ route('expenses.store') }}" method="POST">
                    @csrf

                    <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="category_id">Category <span class="text-danger">*</span></label>
                        <div class="col-md-9">
                            <select name="category_id" id="category_id" class="form-control select2" required>
                                <option value="">Select Category</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }} - {{ $category->description }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="amount">Amount (€) <span class="text-danger">*</span></label>
                        <div class="col-md-9">
                            <input type="number" step="0.01" min="0.01" class="form-control" id="amount" name="amount" 
                                   value="{{ old('amount') }}" placeholder="Enter amount" required>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="expense_date">Date <span class="text-danger">*</span></label>
                        <div class="col-md-9">
                            <input type="text" class="form-control datepicker" id="expense_date" name="expense_date" 
                                   value="{{ old('expense_date', date('Y-m-d')) }}" placeholder="Select date" required>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-3 col-form-label" for="description">Description</label>
                        <div class="col-md-9">
                            <textarea class="form-control" id="description" name="description" rows="3" 
                                      placeholder="Enter description (optional)">{{ old('description') }}</textarea>
                        </div>
                    </div>

                    <div class="form-group row mb-0">
                        <div class="col-md-9 offset-md-3">
                            <button type="submit" class="btn btn-primary">
                                <i class="fe-save mr-1"></i> Save Expense
                            </button>
                            <a href="{{ route('expenses.index') }}" class="btn btn-secondary">
                                <i class="fe-x mr-1"></i> Cancel
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('.select2').select2();
    
    $('.datepicker').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayHighlight: true
    });
});
</script>
@endpush