@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">Edit 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.update', $expense->id) }}" method="POST" enctype="multipart/form-data"
                        x-data="{
                            imageUrl: null,
                            clearReceipt: false,
                            paymentMethod: '{{ old('payment_method', $expense->payment_method?->value ?? '') }}'
                        }">
                        @csrf
                        @method('PUT')
                        <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', $expense->date?->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', $expense->description) }}" 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', optional($expense->category)->value ?? $expense->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', $expense->amount) }}" 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', $expense->cheque_date?->format('Y-m-d')) }}" />
                                <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); clearReceipt = false }" />
                                <div class="form-text fs--1">Max size: 2MB. Allowed: JPG, PNG, GIF.</div>

                                <div class="mt-2" x-show="!imageUrl">
                                    @if($expense->receipt_path)
                                        <div class="d-flex align-items-center gap-2">
                                            <a href="{{ '/storage/' . $expense->receipt_path }}" target="_blank" class="text-primary fw-bold fs--1" x-show="!clearReceipt">
                                                <span class="fas fa-eye me-1"></span>View Current Receipt
                                            </a>
                                            <div class="form-check mb-0 ms-3">
                                                <input class="form-check-input" type="checkbox" name="clear_receipt" id="clear_receipt" value="1" x-model="clearReceipt">
                                                <label class="form-check-label fs--1 text-danger" for="clear_receipt">
                                                    Clear Current Receipt
                                                </label>
                                            </div>
                                        </div>
                                    @endif
                                </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 text-center border rounded p-2 bg-light shadow-sm position-relative">
                                    <label class="form-label d-block text-start">New Receipt Preview:</label>
                                    <img :src="imageUrl" class="img-fluid rounded" style="max-height: 150px;" alt="Receipt Preview">
                                    <button type="button" @click="imageUrl = null; $refs.receiptInput.value = ''" class="btn btn-link text-danger p-0 position-absolute top-0 end-0 me-2 mt-2">
                                        <span class="fas fa-times"></span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end align-items-center mb-0">
                            <div class="me-auto">
                                <button class="btn btn-link text-danger p-0 fw-bold" type="button" onclick="window.showConfirm('Delete Expense Record', 'Are you sure you want to delete this expense record?', 'warning', 'Delete').then(res => { if(res.isConfirmed) document.getElementById('delete-expense-form').submit(); })">Delete Expense</button>
                            </div>
                            <a href="{{ route('expenses.index') }}" class="btn btn-secondary me-2">Cancel</a>
                            <button type="submit" class="btn btn-primary">Update Expense</button>
                        </div>
                    </form>

                    <form id="delete-expense-form" action="{{ route('expenses.destroy', $expense->id) }}" method="POST" style="display: none;">
                        @csrf
                        @method('DELETE')
                    </form>
                </div>
            </div>
        </div>
    </div>

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