<x-app-layout>
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
            <a href="{{ route('categories.index') }}" class="text-slate-400 hover:text-teal-600 mr-3 sm:mr-4 transition">
                <i class="fas fa-arrow-left text-lg sm:text-xl"></i>
            </a>
            <div>
                <h2 class="text-xl sm:text-2xl font-bold text-slate-800">Edit Kategori</h2>
                <p class="text-slate-500 mt-1 text-sm">Ubah detail kategori</p>
            </div>
        </div>
        @if(($category->transactions_count ?? 0) == 0)
            <button type="button" onclick="document.getElementById('deleteModal').classList.remove('hidden')"
                    class="text-rose-500 hover:text-rose-700 transition">
                <i class="fas fa-trash text-lg"></i>
            </button>
        @endif
    </div>

    <div class="w-full max-w-2xl">
        <!-- Category Stats -->
        <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 sm:p-5 shadow-sm mb-6">
            <div class="flex items-center">
                <div class="w-10 h-10 sm:w-14 sm:h-14 rounded-xl flex items-center justify-center"
                     style="background-color: {{ $category->color }}15; color: {{ $category->color }};">
                    <i class="fas fa-{{ $category->icon ?? 'tag' }} text-lg sm:text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-slate-800">{{ $category->name }}</h3>
                    <p class="text-sm text-slate-500">
                        {{ $category->transactions_count ?? 0 }} transaksi
                        @if(isset($category->total_amount))
                            · Rp {{ number_format($category->total_amount, 0, ',', '.') }}
                        @endif
                    </p>
                </div>
                <div class="ml-auto">
                    <span class="px-3 py-1 rounded-full text-xs font-medium {{ $category->type === 'expense' ? 'bg-rose-50 text-rose-600' : 'bg-emerald-50 text-emerald-600' }}">
                        {{ $category->type === 'expense' ? 'Pengeluaran' : 'Pemasukan' }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Edit Form -->
        <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-sm">
            <form action="{{ route('categories.update', $category) }}" method="POST">
                @csrf
                @method('PUT')

                <div class="space-y-6">
                    <!-- Category Type -->
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">Tipe Kategori</label>
                        <div class="flex rounded-xl bg-slate-100 p-1">
                            <label class="flex-1">
                                <input type="radio" name="type" value="expense" class="sr-only peer" {{ old('type', $category->type) === 'expense' ? 'checked' : '' }}>
                                <div class="py-2.5 text-sm font-medium rounded-lg text-center transition cursor-pointer peer-checked:bg-white peer-checked:text-rose-600 peer-checked:shadow-md text-slate-500">
                                    <i class="fas fa-arrow-up mr-2"></i>Pengeluaran
                                </div>
                            </label>
                            <label class="flex-1">
                                <input type="radio" name="type" value="income" class="sr-only peer" {{ old('type', $category->type) === 'income' ? 'checked' : '' }}>
                                <div class="py-2.5 text-sm font-medium rounded-lg text-center transition cursor-pointer peer-checked:bg-white peer-checked:text-emerald-600 peer-checked:shadow-md text-slate-500">
                                    <i class="fas fa-arrow-down mr-2"></i>Pemasukan
                                </div>
                            </label>
                        </div>
                        @error('type') <p class="mt-1 text-sm text-rose-500">{{ $message }}</p> @enderror
                    </div>

                    <!-- Category Name -->
                    <div>
                        <label for="name" class="block text-sm font-medium text-slate-700 mb-2">Nama Kategori</label>
                        <input type="text" id="name" name="name" value="{{ old('name', $category->name) }}" required
                               placeholder="contoh: Makanan, Gaji, Transportasi"
                               class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500 placeholder-slate-400">
                        @error('name') <p class="mt-1 text-sm text-rose-500">{{ $message }}</p> @enderror
                    </div>

                    <!-- Parent Category -->
                    <div>
                        <label for="parent_id" class="block text-sm font-medium text-slate-700 mb-2">Kategori Induk</label>
                        <select id="parent_id" name="parent_id"
                                class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500">
                            <option value="">Tidak ada (Kategori utama)</option>
                            @foreach($categories ?? [] as $cat)
                                @if($cat->id !== $category->id)
                                    <option value="{{ $cat->id }}" {{ old('parent_id', $category->parent_id) == $cat->id ? 'selected' : '' }}>
                                        {{ $cat->name }}
                                    </option>
                                @endif
                            @endforeach
                        </select>
                    </div>

                    <!-- Icon & Color -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">Pilih Icon</label>
                            <div class="grid grid-cols-6 gap-2 p-3 bg-slate-50 rounded-xl border border-slate-200 max-h-48 overflow-y-auto" x-data="{ selected: '{{ old('icon', $category->icon ?? 'tag') }}' }">
                                <input type="hidden" name="icon" :value="selected">
                                @php
                                $icons = [
                                    ['tag', 'Tag'], ['wallet', 'Dompet'], ['coins', 'Koin'], ['money-bill-wave', 'Uang'], ['credit-card', 'Kartu'], ['piggy-bank', 'Celengan'],
                                    ['utensils', 'Makan'], ['mug-hot', 'Kopi'], ['cart-shopping', 'Belanja'], ['cookie-bite', 'Jajanan'], ['pizza-slice', 'Pizza'], ['ice-cream', 'Es Krim'],
                                    ['car', 'Mobil'], ['motorcycle', 'Motor'], ['bus', 'Bus'], ['gas-pump', 'Bensin'], ['road', 'Tol'], ['plane', 'Pesawat'],
                                    ['house', 'Rumah'], ['couch', 'Perabot'], ['hammer', 'Renovasi'], ['key', 'Kunci'], ['door-open', 'Pintu'], ['bed', 'Kamar'],
                                    ['bolt', 'Listrik'], ['droplet', 'Air'], ['wifi', 'Internet'], ['mobile-screen', 'HP'], ['tv', 'TV'], ['file-invoice-dollar', 'Tagihan'],
                                    ['bag-shopping', 'Tas'], ['shirt', 'Baju'], ['laptop', 'Laptop'], ['box-open', 'Paket'], ['gift', 'Hadiah'], ['gem', 'Perhiasan'],
                                    ['film', 'Film'], ['gamepad', 'Game'], ['music', 'Musik'], ['palette', 'Hobi'], ['ticket', 'Tiket'], ['umbrella-beach', 'Liburan'],
                                    ['heart-pulse', 'Sehat'], ['stethoscope', 'Dokter'], ['pills', 'Obat'], ['dumbbell', 'Gym'], ['spa', 'Spa'], ['capsules', 'Vitamin'],
                                    ['graduation-cap', 'Wisuda'], ['book', 'Buku'], ['school', 'Sekolah'], ['pen', 'Tulis'], ['chalkboard-user', 'Kursus'], ['microscope', 'Lab'],
                                    ['people-roof', 'Keluarga'], ['baby', 'Bayi'], ['paw', 'Hewan'], ['cake-candles', 'Ultah'], ['ring', 'Nikah'], ['hands-holding-child', 'Anak'],
                                    ['hand-holding-heart', 'Donasi'], ['mosque', 'Masjid'], ['church', 'Gereja'], ['handshake', 'Jabat'], ['users', 'Komunitas'], ['star', 'Bintang'],
                                    ['building-columns', 'Bank'], ['chart-line', 'Investasi'], ['percent', 'Bunga'], ['receipt', 'Pajak'], ['umbrella', 'Asuransi'], ['scale-balanced', 'Neraca'],
                                ];
                                @endphp
                                @foreach($icons as $icon)
                                    <button type="button"
                                            @click="selected = '{{ $icon[0] }}'"
                                            :class="selected === '{{ $icon[0] }}' ? 'bg-teal-500 text-white' : 'bg-white text-slate-600 hover:bg-slate-100'"
                                            class="w-10 h-10 rounded-lg flex items-center justify-center transition border border-slate-200"
                                            title="{{ $icon[1] }}">
                                        <i class="fas fa-{{ $icon[0] }}"></i>
                                    </button>
                                @endforeach
                            </div>
                        </div>
                        <div>
                            <label for="color" class="block text-sm font-medium text-slate-700 mb-2">Warna</label>
                            <div class="space-y-3">
                                <input type="color" id="color" name="color" value="{{ old('color', $category->color ?? '#14b8a6') }}"
                                       class="w-full h-14 bg-slate-50 border-slate-200 rounded-xl cursor-pointer">
                                <div class="grid grid-cols-8 gap-2">
                                    @php $colors = ['#EF4444', '#F97316', '#F59E0B', '#22C55E', '#14B8A6', '#3B82F6', '#8B5CF6', '#EC4899']; @endphp
                                    @foreach($colors as $color)
                                        <button type="button" onclick="document.getElementById('color').value='{{ $color }}'"
                                                class="w-8 h-8 rounded-lg border-2 border-white shadow-sm hover:scale-110 transition"
                                                style="background-color: {{ $color }}"></button>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Description -->
                    <div>
                        <label for="description" class="block text-sm font-medium text-slate-700 mb-2">Deskripsi</label>
                        <textarea id="description" name="description" rows="3"
                                  placeholder="Tambahkan deskripsi..."
                                  class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500 placeholder-slate-400">{{ old('description', $category->description) }}</textarea>
                    </div>

                    <!-- Active Status -->
                    <div class="flex items-center">
                        <input type="checkbox" id="is_active" name="is_active" value="1"
                               class="rounded border-slate-300 text-teal-600 focus:ring-teal-500"
                               {{ old('is_active', $category->is_active ?? true) ? 'checked' : '' }}>
                        <label for="is_active" class="ml-2 text-sm text-slate-700">
                            Aktif (tampilkan di daftar kategori)
                        </label>
                    </div>
                </div>

                <!-- Actions -->
                <div class="flex items-center justify-end space-x-4 mt-8 pt-6 border-t border-slate-100">
                    <a href="{{ route('categories.index') }}" class="px-5 py-2.5 text-slate-600 hover:text-slate-800 font-medium rounded-xl transition">
                        Batal
                    </a>
                    <button type="submit" class="px-6 py-2.5 bg-gradient-to-r from-teal-500 to-emerald-500 hover:from-teal-600 hover:to-emerald-600 text-white font-medium rounded-xl transition shadow-lg shadow-teal-500/30">
                        <i class="fas fa-save mr-2"></i>
                        Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete Modal -->
    @if(($category->transactions_count ?? 0) == 0)
        <div id="deleteModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen px-4">
                <div class="fixed inset-0 bg-black/50" onclick="document.getElementById('deleteModal').classList.add('hidden')"></div>
                <div class="relative bg-white rounded-2xl shadow-xl max-w-md w-full p-6">
                    <div class="w-14 h-14 bg-rose-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-trash text-rose-500 text-xl"></i>
                    </div>
                    <h3 class="text-lg font-bold text-slate-800 text-center mb-2">Hapus Kategori</h3>
                    <p class="text-slate-500 text-center mb-6">Yakin ingin menghapus "{{ $category->name }}"? Tindakan ini tidak dapat dibatalkan.</p>
                    <div class="flex justify-center space-x-4">
                        <button type="button" onclick="document.getElementById('deleteModal').classList.add('hidden')"
                                class="px-5 py-2.5 text-slate-600 hover:text-slate-800 font-medium transition">Batal</button>
                        <form action="{{ route('categories.destroy', $category) }}" method="POST" class="inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="px-5 py-2.5 bg-rose-500 hover:bg-rose-600 text-white font-medium rounded-xl transition">
                                Ya, Hapus
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endif
</x-app-layout>
