@use('App\Enums\ExpenseCategory')
@use('App\Enums\Payments\PaymentMethod')
<x-admin-layout>
    <div class="max-w-3xl mx-auto space-y-6"
         x-data="{
             imageUrl: null,
             clearReceipt: false,
             paymentMethod: '{{ old('payment_method', $expense->payment_method?->value ?? '') }}'
         }">
        <!-- Page Header -->
        <div class="flex items-center gap-3">
            <a href="{{ route('expenses.index') }}"
               class="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">Edit Expense Record</h1>
                <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">Update this expense entry</p>
            </div>
        </div>

        <div class="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/20">
                <h2 class="text-sm font-bold text-zinc-800 dark:text-zinc-200">Expense Details</h2>
            </div>

            <form action="{{ route('expenses.update', $expense->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="p-6 space-y-4">
                    <!-- Row 1: Date & Description -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5" for="date">
                                Date <span class="text-rose-500">*</span>
                            </label>
                            <input class="w-full px-3 py-2 text-xs bg-white dark:bg-zinc-950 border @error('date') border-rose-400 dark:border-rose-600 @else border-zinc-200 dark:border-zinc-800 @enderror rounded-xl text-zinc-800 dark:text-zinc-200 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors cursor-pointer"
                                   id="date" name="date" type="date"
                                   value="{{ old('date', $expense->date?->format('Y-m-d')) }}"
                                   required />
                            @error('date')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5" for="description">
                                Description <span class="text-rose-500">*</span>
                            </label>
                            <input class="w-full px-3 py-2 text-xs bg-white dark:bg-zinc-950 border @error('description') border-rose-400 dark:border-rose-600 @else border-zinc-200 dark:border-zinc-800 @enderror rounded-xl text-zinc-800 dark:text-zinc-200 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors"
                                   id="description" name="description" type="text"
                                   value="{{ old('description', $expense->description) }}"
                                   placeholder="e.g. Office supplies" required />
                            @error('description')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Row 2: Category, Amount, Payment Method -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5" for="category">
                                Category <span class="text-rose-500">*</span>
                            </label>
                            <select class="w-full px-3 py-2 text-xs bg-white dark:bg-zinc-950 border @error('category') border-rose-400 dark:border-rose-600 @else border-zinc-200 dark:border-zinc-800 @enderror rounded-xl text-zinc-800 dark:text-zinc-200 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors cursor-pointer"
                                    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')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5" for="amount">
                                Amount <span class="text-rose-500">*</span>
                            </label>
                            <div class="flex">
                                <span class="inline-flex items-center px-3 py-2 text-xs font-bold text-zinc-600 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800 border border-r-0 border-zinc-200 dark:border-zinc-800 rounded-l-xl">$</span>
                                <input class="flex-1 rounded-l-none rounded-r-xl px-3 py-2 text-xs bg-white dark:bg-zinc-950 border @error('amount') border-rose-400 dark:border-rose-600 @else border-zinc-200 dark:border-zinc-800 @enderror text-zinc-800 dark:text-zinc-200 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors"
                                       id="amount" name="amount" type="number" step="0.01" min="0"
                                       value="{{ old('amount', $expense->amount) }}" required />
                            </div>
                            @error('amount')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5" for="payment_method">
                                Payment Method <span class="text-rose-500">*</span>
                            </label>
                            <select class="w-full px-3 py-2 text-xs bg-white dark:bg-zinc-950 border @error('payment_method') border-rose-400 dark:border-rose-600 @else border-zinc-200 dark:border-zinc-800 @enderror rounded-xl text-zinc-800 dark:text-zinc-200 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors cursor-pointer"
                                    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')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Cheque Date (conditional) -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4"
                         x-show="paymentMethod === 'Cheque'" x-cloak x-transition>
                        <div>
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5" for="cheque_date">
                                Cheque Date <span class="text-zinc-400 font-normal">(Optional)</span>
                            </label>
                            <input class="w-full px-3 py-2 text-xs bg-white dark:bg-zinc-950 border @error('cheque_date') border-rose-400 dark:border-rose-600 @else border-zinc-200 dark:border-zinc-800 @enderror rounded-xl text-zinc-800 dark:text-zinc-200 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors cursor-pointer"
                                   id="cheque_date" name="cheque_date" type="date"
                                   value="{{ old('cheque_date', $expense->cheque_date?->format('Y-m-d')) }}" />
                            <p class="mt-1 text-[11px] text-zinc-400 dark:text-zinc-500">Specify if the cheque is post-dated.</p>
                            @error('cheque_date')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Receipt Upload -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5" for="receipt">
                                Receipt <span class="text-zinc-400 font-normal">(Image only)</span>
                            </label>
                            <input class="w-full px-3 py-2 text-xs bg-white dark:bg-zinc-950 border @error('receipt') border-rose-400 dark:border-rose-600 @else border-zinc-200 dark:border-zinc-800 @enderror rounded-xl text-zinc-600 dark:text-zinc-400 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500 transition-colors file:mr-2 file:text-xs file:font-semibold file:py-1 file:px-3 file:rounded-lg file:bg-zinc-100 file:text-zinc-700 file:border-0 file:cursor-pointer hover:file:bg-zinc-200 dark:file:bg-zinc-800 dark:file:text-zinc-300"
                                   id="receipt" name="receipt" type="file" accept="image/*"
                                   x-ref="receiptInput"
                                   @change="const file = $el.files[0]; if (file) { imageUrl = URL.createObjectURL(file); clearReceipt = false }" />
                            <p class="mt-1 text-[11px] text-zinc-400 dark:text-zinc-500">Max size: 2MB. Allowed: JPG, PNG, GIF.</p>

                            @if($expense->receipt_path)
                                <div class="mt-2 flex items-center gap-3" x-show="!imageUrl">
                                    <a href="{{ '/storage/' . $expense->receipt_path }}" target="_blank"
                                       class="inline-flex items-center gap-1.5 text-[11px] font-semibold text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-colors"
                                       x-show="!clearReceipt">
                                        <span class="uil uil-eye"></span> View Current Receipt
                                    </a>
                                    <label class="flex items-center gap-1.5 cursor-pointer">
                                        <input type="checkbox" name="clear_receipt" id="clear_receipt" value="1" x-model="clearReceipt"
                                               class="w-3.5 h-3.5 rounded border-zinc-300 dark:border-zinc-700 text-rose-500 focus:ring-rose-500 cursor-pointer">
                                        <span class="text-[11px] font-semibold text-rose-500 dark:text-rose-400">Clear Current Receipt</span>
                                    </label>
                                </div>
                            @endif

                            @error('receipt')
                                <p class="mt-1 text-[11px] text-rose-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Receipt Preview -->
                        <div x-show="imageUrl" x-cloak x-transition>
                            <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1.5">New Receipt Preview</label>
                            <div class="relative inline-block">
                                <img :src="imageUrl" class="max-h-32 rounded-xl border border-zinc-200 dark:border-zinc-800 shadow-sm" alt="Receipt Preview">
                                <button type="button"
                                        @click="imageUrl = null; $refs.receiptInput.value = ''"
                                        class="absolute top-1 right-1 w-6 h-6 bg-rose-500 text-white rounded-full flex items-center justify-center cursor-pointer hover:bg-rose-600 transition-colors">
                                    <span class="uil uil-times text-[10px]"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="px-6 py-4 border-t border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/20 flex items-center justify-between">
                    <button class="text-xs font-semibold text-rose-500 hover:text-rose-700 dark:hover:text-rose-400 transition-colors cursor-pointer"
                            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(); })">
                        <span class="uil uil-trash mr-1"></span> Delete Expense
                    </button>
                    <div class="flex items-center gap-2">
                        <a href="{{ route('expenses.index') }}"
                           class="inline-flex items-center gap-1.5 px-4 py-2 bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-zinc-700 dark:text-zinc-300 font-semibold text-xs rounded-xl transition-colors cursor-pointer">
                            Cancel
                        </a>
                        <button type="submit"
                                class="inline-flex items-center gap-1.5 px-5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold text-xs rounded-xl shadow-sm transition-all cursor-pointer">
                            <span class="uil uil-save"></span>
                            Update Expense
                        </button>
                    </div>
                </div>
            </form>

            <form id="delete-expense-form" action="{{ route('expenses.destroy', $expense->id) }}" method="POST" class="hidden">
                @csrf
                @method('DELETE')
            </form>
        </div>
    </div>
</x-admin-layout>