@use('App\Enums\ExpenseCategory')
@use('App\Enums\Payments\PaymentMethod')
<x-admin-layout>
    <div class="mb-9">
        <div class="row g-3 mb-4">
            <div class="col-auto">
                <h2 class="mb-0">Add Expense Record</h2>
            </div>
        </div>

        <div class="card shadow-none border border-300 my-4" data-component-card="data-component-card">
            <div class="card-body p-0">
                <div class="p-4 code-to-copy">
                    <form action="{{ route('expenses.store') }}" method="POST" enctype="multipart/form-data"
                        x-data="{
                            imageUrl: null,
                            paymentMethod: '{{ old('payment_method', '') }}'
                        }">
                        @csrf
                        <div class="row g-3 mb-3">
                            <div class="col-sm-6 col-md-6">
                                <label class="form-label" for="date">Date <text class="text-danger">*</text></label>
                                <input class="form-control @error('date') is-invalid @enderror" id="date" name="date" type="date" value="{{ old('date', now()->format('Y-m-d')) }}" required />
                                @error('date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6 col-md-6">
                                <label class="form-label" for="description">Description <text class="text-danger">*</text></label>
                                <input class="form-control @error('description') is-invalid @enderror" id="description" name="description" type="text" value="{{ old('description') }}" placeholder="e.g. Office supplies" required />
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row g-3 mb-4">
                            <div class="col-sm-6 col-md-4">
                                <label class="form-label" for="category">Category <text class="text-danger">*</text></label>
                                <select class="form-select @error('category') is-invalid @enderror" id="category" name="category" required>
                                    <option value="">-- Select Category --</option>
                                    @foreach(ExpenseCategory::cases() as $categoryEnum)
                                        <option value="{{ $categoryEnum->value }}" {{ old('category') === $categoryEnum->value ? 'selected' : '' }}>{{ $categoryEnum->value }}</option>
                                    @endforeach
                                </select>
                                @error('category')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <label class="form-label" for="amount">Amount <text class="text-danger">*</text></label>
                                <input class="form-control @error('amount') is-invalid @enderror" id="amount" name="amount" type="number" step="0.01" min="0" value="{{ old('amount', 0) }}" required />
                                @error('amount')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <label class="form-label" for="payment_method">Payment Method <text class="text-danger">*</text></label>
                                <select class="form-select @error('payment_method') is-invalid @enderror"
                                    id="payment_method"
                                    name="payment_method"
                                    required
                                    x-model="paymentMethod">
                                    <option value="">-- Select Method --</option>
                                    @foreach(PaymentMethod::cases() as $method)
                                        <option value="{{ $method->value }}">{{ $method->value }}</option>
                                    @endforeach
                                </select>
                                @error('payment_method')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row g-3 mb-4" x-show="paymentMethod === 'Cheque'" x-cloak x-transition>
                            <div class="col-sm-6 col-md-4">
                                <label class="form-label" for="cheque_date">Cheque Date (Optional)</label>
                                <input class="form-control @error('cheque_date') is-invalid @enderror" id="cheque_date" name="cheque_date" type="date" value="{{ old('cheque_date') }}" />
                                <div class="form-text fs--1">Specify if the cheque is post-dated.</div>
                                @error('cheque_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row g-3 mb-4">
                            <div class="col-sm-6 col-md-4">
                                <label class="form-label" for="receipt">Receipt (Image only)</label>
                                <input class="form-control @error('receipt') is-invalid @enderror"
                                       id="receipt"
                                       name="receipt"
                                       type="file"
                                       accept="image/*"
                                       @change="const file = $el.files[0]; if (file) { imageUrl = URL.createObjectURL(file) }" />
                                <div class="form-text fs--1">Max size: 2MB. Allowed: JPG, PNG, GIF.</div>
                                @error('receipt')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-sm-6 col-md-4" x-show="imageUrl" x-cloak>
                                <div class="mt-2">
                                    <label class="form-label d-block">Preview:</label>
                                    <img :src="imageUrl" class="img-thumbnail" style="max-height: 150px;" alt="Receipt Preview">
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end">
                            <a href="{{ route('expenses.index') }}" class="btn btn-secondary me-2">Cancel</a>
                            <button type="submit" class="btn btn-primary">Save Expense</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const dateInputs = document.querySelectorAll('input[type="date"]');
            dateInputs.forEach(input => {
                input.addEventListener('focus', function() {
                    this.showPicker();
                });
            });
        });
    </script>

    <style>
        input[type="date"] {
            cursor: pointer;
        }
        input[type="date"]::-webkit-calendar-picker-indicator {
            cursor: pointer;
        }
    </style>
</x-admin-layout>