@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => 'Expense Management'])

<div id="alert">
    @include('components.alert')
</div>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <form role="form" method="POST" action="{{ route('expense-store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="card-header pb-0">
                        <div class="d-flex align-items-center justify-content-between">
                            <p class="mb-0">Expense Details</p>
                            <div>
                                <button type="submit" class="btn btn-primary btn-sm">Save</button>
                                <a href="{{ route('expense-list') }}" class="btn btn-secondary btn-sm mb-3">Cancel</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Expense Name -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="expense_name" class="form-control-label">Expense Name</label>
                                    <input class="form-control @error('expense_name') is-invalid @enderror" type="text"
                                        id="expense_name" name="expense_name" placeholder="Enter Expense Name"
                                        value="{{ old('expense_name') }}" required>
                                    @error('expense_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="category" class="form-control-label">Expense Category</label>
                                    <select class="form-select" name="category_id" id="category" required>
                                        <option value="" disabled selected>Select or type a new category</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>

                                    @error('category_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Expense Date -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="expense_date" class="form-control-label">Expense Date</label>
                                    <input class="form-control @error('expense_date') is-invalid @enderror" type="date"
                                        id="expense_date" name="expense_date" value="{{ old('expense_date') }}"
                                        required>
                                    @error('expense_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Expense Amount -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="amount" class="form-control-label">Amount</label>
                                    <input class="form-control @error('amount') is-invalid @enderror" type="number"
                                        id="amount" name="amount" step="0.01" placeholder="Enter Amount"
                                        value="{{ old('amount') }}" required>
                                    @error('amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Payment Method -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="payment_method" class="form-control-label">Payment Method</label>
                                    <select class="form-select @error('payment_method') is-invalid @enderror"
                                        name="payment_method" id="payment_method" required>
                                        <option value="" disabled selected>Select Payment Method</option>
                                        <option value="Cash" {{ old('payment_method') == 'Cash' ? 'selected' : '' }}>Cash
                                        </option>
                                        <option value="Bank Transfer" {{ old('payment_method') == 'Bank Transfer' ? 'selected' : '' }}>Bank Transfer</option>
                                        <option value="Credit Card" {{ old('payment_method') == 'Credit Card' ? 'selected' : '' }}>Credit Card</option>
                                    </select>
                                    @error('payment_method')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Description -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="description" class="form-control-label">Description</label>
                                    <textarea class="form-control @error('description') is-invalid @enderror"
                                        id="description" name="description" rows="1"
                                        placeholder="Enter a brief description of the expense">{{ old('description') }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Supporting Document Upload -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="expense_file" class="form-control-label">Supporting Document</label>
                                    <input class="form-control @error('expense_file') is-invalid @enderror" type="file"
                                        id="expense_file" name="expense_file">
                                    @error('expense_file')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Status -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="status" class="form-control-label">Status</label>
                                    <select class="form-select @error('status') is-invalid @enderror" name="status"
                                        id="status" required>
                                        <option value="Pending" {{ old('status') == 'Pending' ? 'selected' : '' }}>Pending
                                        </option>
                                        @if (auth()->user()->type == 1)
                                            <option value="Approved" {{ old('status') == 'Approved' ? 'selected' : '' }}>
                                                Approved</option>
                                            <option value="Rejected" {{ old('status') == 'Rejected' ? 'selected' : '' }}>
                                                Rejected</option>
                                        @endif
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
    @include('layouts.footers.auth.footer')
</div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function () {
            $('#category').select2({
                placeholder: "Select or type a new category",
                tags: true, 
                tokenSeparators: [','],
                createTag: function (params) {
                    return {
                        id: params.term, 
                        text: params.term 
                    };
                }
            });
        });
    </script>
@endpush