@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,
             paymentMethod: '{{ old('payment_method', '') }}'
         }">
        <!-- 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">Add Expense Record</h1>
                <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">Log a new business expense</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.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <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', now()->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') }}" 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') === $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', 0) }}" 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') }}" />
                            <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 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/*"
                                   @change="const file = $el.files[0]; if (file) { imageUrl = URL.createObjectURL(file) }" />
                            <p class="mt-1 text-[11px] text-zinc-400 dark:text-zinc-500">Max size: 2MB. Allowed: JPG, PNG, GIF.</p>
                            @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">Preview</label>
                            <img :src="imageUrl" class="max-h-32 rounded-xl border border-zinc-200 dark:border-zinc-800 shadow-sm" alt="Receipt Preview">
                        </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 justify-end 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>
                        Save Expense
                    </button>
                </div>
            </form>
        </div>
    </div>
</x-admin-layout>