@extends('layouts.app')

@section('content')
<div class="max-w-2xl mx-auto" x-data="{
    selectedCurrency: '{{ old('currency', $expense->currency?->value ?? 'HKD') }}',
    currencySymbols: {
        'HKD': 'HK$',
        'IDR': 'Rp',
        'USD': '$'
    }
}">
    <!-- Back breadcrumb -->
    <div class="mb-6">
        <a href="{{ route('expenses.index') }}" class="inline-flex items-center gap-2 text-xs font-semibold text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white transition">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
            </svg>
            <span>Back to Living Cost Overview</span>
        </a>
    </div>

    <div class="rounded-2xl bg-white dark:bg-zinc-900 border border-zinc-200/80 dark:border-zinc-800 p-6 sm:p-8 shadow-xs">
        <div class="flex items-center justify-between pb-6 border-b border-zinc-100 dark:border-zinc-800">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-600 dark:text-amber-400 flex items-center justify-center font-bold font-mono-num text-sm"
                     x-text="currencySymbols[selectedCurrency] || '$'">
                </div>
                <div>
                    <h1 class="text-xl font-bold text-zinc-900 dark:text-white">Edit Expense</h1>
                    <p class="text-xs text-zinc-500 dark:text-zinc-400">Update transaction details, currency, or notes</p>
                </div>
            </div>

            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold ring-1 ring-inset {{ $expense->category->badgeClasses() }}">
                <span>{{ $expense->category->icon() }}</span>
                <span>{{ $expense->category->value }}</span>
            </span>
        </div>

        @if($errors->any())
            <div class="my-6 p-4 rounded-xl bg-rose-50 dark:bg-rose-950/40 border border-rose-200 dark:border-rose-900/50">
                <div class="flex items-center gap-2 text-rose-700 dark:text-rose-300 font-semibold text-xs mb-2">
                    <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
                    </svg>
                    <span>Please correct the following errors:</span>
                </div>
                <ul class="list-disc list-inside text-xs text-rose-600 dark:text-rose-400 space-y-1">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('expenses.update', $expense) }}" class="mt-6 space-y-5">
            @csrf
            @method('PUT')

            <!-- Currency Selection -->
            <div>
                <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-2">
                    Currency <span class="text-rose-500">*</span>
                </label>
                <div class="grid grid-cols-3 gap-3">
                    @foreach($currencies as $curr)
                        <label class="cursor-pointer">
                            <input type="radio"
                                   name="currency"
                                   value="{{ $curr->value }}"
                                   x-model="selectedCurrency"
                                   class="peer sr-only" />
                            <div class="p-3 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-950/50 peer-checked:border-rose-500 peer-checked:bg-rose-50/60 dark:peer-checked:bg-rose-950/40 peer-checked:ring-1 peer-checked:ring-rose-500 text-center transition">
                                <div class="text-base font-bold font-mono-num text-zinc-900 dark:text-white">{{ $curr->value }}</div>
                                <div class="text-xs text-zinc-500 mt-0.5">{{ $curr->symbol() }} • {{ $curr->label() }}</div>
                            </div>
                        </label>
                    @endforeach
                </div>
            </div>

            <!-- Amount & Date -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label for="amount" class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1">
                        Amount <span class="text-rose-500">*</span>
                    </label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center font-bold font-mono-num text-sm text-zinc-400"
                              x-text="currencySymbols[selectedCurrency] || '$'">
                        </span>
                        <input type="number"
                               id="amount"
                               name="amount"
                               step="any"
                               min="0.01"
                               value="{{ old('amount', $expense->amount) }}"
                               required
                               placeholder="0.00"
                               class="w-full rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 pl-14 pr-3.5 py-2.5 text-lg font-bold font-mono-num text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-rose-500 @error('amount') border-rose-500 @enderror" />
                    </div>
                </div>

                <div>
                    <label for="date" class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1">
                        Date <span class="text-rose-500">*</span>
                    </label>
                    <input type="date"
                           id="date"
                           name="date"
                           required
                           value="{{ old('date', $expense->date->format('Y-m-d')) }}"
                           class="w-full rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 px-3.5 py-2.5 text-sm font-mono-num text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-rose-500 @error('date') border-rose-500 @enderror" />
                </div>
            </div>

            <!-- Category -->
            <div>
                <label class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-2">
                    Category <span class="text-rose-500">*</span>
                </label>
                <div class="grid grid-cols-2 sm:grid-cols-5 gap-2">
                    @foreach($categories as $category)
                        <label class="cursor-pointer">
                            <input type="radio"
                                   name="category"
                                   value="{{ $category->value }}"
                                   class="peer sr-only"
                                   {{ old('category', $expense->category->value) === $category->value ? 'checked' : '' }} />
                            <div class="p-3 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-950/50 peer-checked:border-rose-500 peer-checked:bg-rose-50/60 dark:peer-checked:bg-rose-950/40 peer-checked:ring-1 peer-checked:ring-rose-500 text-center transition">
                                <div class="text-xl">{{ $category->icon() }}</div>
                                <div class="text-xs font-semibold text-zinc-800 dark:text-zinc-200 mt-1 truncate">{{ $category->value }}</div>
                            </div>
                        </label>
                    @endforeach
                </div>
            </div>

            <!-- Description / Item / Name -->
            <div>
                <label for="title" class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1">
                    Description / Item / Name <span class="text-rose-500">*</span>
                </label>
                <input type="text"
                       id="title"
                       name="title"
                       value="{{ old('title', $expense->title) }}"
                       required
                       placeholder="e.g. Supermarket groceries, Lunch with friends, Subway ride"
                       class="w-full rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 px-3.5 py-2.5 text-sm text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-rose-500 @error('title') border-rose-500 @enderror" />
            </div>

            <!-- Location & Payment Method -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label for="location" class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1">
                        Location <span class="text-zinc-400 font-normal">(Optional)</span>
                    </label>
                    <input type="text"
                           id="location"
                           name="location"
                           value="{{ old('location', $expense->location) }}"
                           placeholder="e.g. Central, Jakarta Selatan, Online"
                           class="w-full rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 px-3.5 py-2.5 text-sm text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-rose-500" />
                </div>

                <div>
                    <label for="payment_method" class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1">
                        Payment Method <span class="text-rose-500">*</span>
                    </label>
                    <select id="payment_method"
                            name="payment_method"
                            required
                            class="w-full rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 px-3 py-2.5 text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-rose-500">
                        @foreach($paymentMethods as $payment)
                            <option value="{{ $payment->value }}" {{ old('payment_method', $expense->payment_method) === $payment->value ? 'selected' : '' }}>
                                {{ $payment->value }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Detailed Notes -->
            <div>
                <label for="notes" class="block text-xs font-semibold text-zinc-700 dark:text-zinc-300 mb-1">
                    Notes / Itemized Breakdown <span class="text-zinc-400 font-normal">(Optional)</span>
                </label>
                <textarea id="notes"
                          name="notes"
                          rows="4"
                          placeholder="Detail your items here:&#10;- Item 1&#10;- Item 2&#10;- Item 3"
                          class="w-full rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 px-3.5 py-2.5 text-sm text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-rose-500">{{ old('notes', $expense->notes) }}</textarea>
            </div>

            <div class="flex items-center justify-between pt-4 border-t border-zinc-100 dark:border-zinc-800">
                <a href="{{ route('expenses.index') }}" class="px-4 py-2.5 rounded-xl border border-zinc-200 dark:border-zinc-700 text-sm font-semibold text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition">
                    Cancel
                </a>
                <button type="submit" class="px-6 py-2.5 rounded-xl bg-rose-600 hover:bg-rose-500 text-white font-semibold text-sm shadow-sm transition">
                    Update Expense
                </button>
            </div>
        </form>
    </div>
</div>
@endsection