@extends('layouts.app')

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => 'Edit Expense'])
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <form method="POST" action="{{ route('expense-update', $expense->id) }}" 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 text-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 text-sm">Expense
                                        Name</label>
                                    <input class="form-control text-sm" type="text" id="expense_name"
                                        name="expense_name" value="{{ $expense->expense_name }}"
                                        placeholder="Enter Expense Name" required>
                                </div>
                            </div>

                            <!-- Category Dropdown -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="category" class="form-control-label text-sm">Expense
                                        Category</label>
                                    <select class="form-select select2 text-sm" name="category_id" id="category"
                                        required>
                                        <option value="" disabled>Select Category</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}" {{ $expense->category_id == $category->id ? 'selected' : '' }}>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Expense Date -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="expense_date" class="form-control-label text-sm">Expense
                                        Date</label>
                                    <input class="form-control text-sm" type="date" id="expense_date"
                                        name="expense_date"
                                        value="{{ \Carbon\Carbon::parse($expense->expense_date)->format('Y-m-d') }}"
                                        required>
                                </div>
                            </div>

                            <!-- Expense Amount -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="amount" class="form-control-label text-sm">Amount</label>
                                    <input class="form-control text-sm" type="number" id="amount" name="amount"
                                        step="0.01" value="{{ $expense->amount }}" placeholder="Enter Amount" required>
                                </div>
                            </div>

                            <!-- Payment Method -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="payment_method" class="form-control-label text-sm">Payment
                                        Method</label>
                                    <select class="form-select text-sm" name="payment_method" id="payment_method"
                                        required>
                                        <option value="" disabled>Select Payment Method</option>
                                        <option value="Cash" {{ $expense->payment_method == 'Cash' ? 'selected' : '' }}>
                                            Cash</option>
                                        <option value="Bank Transfer" {{ $expense->payment_method == 'Bank Transfer' ? 'selected' : '' }}>Bank Transfer</option>
                                        <option value="Credit Card" {{ $expense->payment_method == 'Credit Card' ? 'selected' : '' }}>Credit Card</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Description -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="description" class="form-control-label text-sm">Description</label>
                                    <textarea class="form-control text-sm" id="description" name="description" rows="1"
                                        placeholder="Enter a brief description of the expense">{{ $expense->description }}</textarea>
                                </div>
                            </div>

                            <!-- Supporting Document Upload -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="expense_file" class="form-control-label text-sm">Supporting
                                        Document</label>
                                    <input class="form-control text-sm" type="file" id="expense_file"
                                        name="expense_file">
                                    @if ($expense->expense_file)
                                         <p class="text-sm mt-2">Current File: <a
                                                href="{{ getFileUrl($file_path) }}" target="_blank">View
                                                Document</a></p>
                                    @endif
                                </div>
                            </div>

                            <!-- Status -->
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="status" class="form-control-label text-sm">Status</label>
                                    <select class="form-select text-sm" name="status" id="status" required>
                                        <option value="Pending" {{ $expense->status == 'Pending' ? 'selected' : '' }}>
                                            Pending</option>
                                        <option value="Approved" {{ $expense->status == 'Approved' ? 'selected' : '' }}>
                                            Approved</option>
                                        <option value="Rejected" {{ $expense->status == 'Rejected' ? 'selected' : '' }}>
                                            Rejected</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</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