@extends('layouts.app')

@section('content')
<div class="max-w-2xl mx-auto" x-data="{
    selectedCurrency: '{{ old('currency', $activeCurrency->value) }}',
    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 gap-3 pb-6 border-b border-zinc-100 dark:border-zinc-800">
            <div class="w-10 h-10 rounded-xl bg-rose-500/10 text-rose-600 dark:text-rose-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">Log an Expense</h1>
                <p class="text-xs text-zinc-500 dark:text-zinc-400">Record a new transaction in HKD, IDR, or USD</p>
            </div>
        </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.store') }}" class="mt-6 space-y-5">
            @csrf

            <!-- 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') }}"
                               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', $defaultDate) }}"
                           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', 'Food') === $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') }}"
                       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') }}"
                           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.5 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', 'Octopus') === $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="For groceries, shopping, or group bills, 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') }}</textarea>
                <p class="text-[11px] text-zinc-400 mt-1">Useful for keeping receipts or listing itemized grocery breakdowns.</p>
            </div>

            <div class="flex items-center justify-end gap-3 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">
                    Save Expense
                </button>
            </div>
        </form>
    </div>
</div>
@endsection