@extends('layouts.app')
@section('title', 'Categories')
@section('page-title', '🏷️ Category Management')
@section('page-subtitle', 'Organise clients, schedules & content by category')

@section('content')
<div class="max-w-4xl mx-auto space-y-5">

    @if(session('success'))
    <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)"
         class="flex items-center justify-between gap-3 bg-green-50 border border-green-200 rounded-2xl px-4 py-3 text-sm text-green-700">
        <span>{{ session('success') }}</span>
        <button @click="show = false" class="text-green-500 hover:text-green-700 text-lg leading-none">✕</button>
    </div>
    @endif

    {{-- Add form --}}
    <div class="cat-card overflow-hidden" x-data="{ open: {{ $errors->any() ? 'true' : 'false' }} }">
        <div class="flex items-center gap-3 px-5 py-4 border-b border-pink-50">
            <button type="button" @click="open = !open"
                    class="btn-sakura text-xs"
                    x-text="open ? '✕ Close' : '＋ Add New Category'">
            </button>
        </div>

        <div x-show="open" x-transition style="display:none">
            <form action="{{ route('client-categories.store') }}" method="POST"
                  class="p-5 grid grid-cols-2 sm:grid-cols-4 gap-3 items-end border-b border-pink-50">
                @csrf
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Name <span class="text-pink-400">*</span></label>
                    <input type="text" name="name" required maxlength="100"
                           placeholder="e.g. Susu Formula"
                           class="input-soft" value="{{ old('name') }}">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Parent (optional)</label>
                    <select name="parent_id" class="input-soft">
                        <option value="">— Root category —</option>
                        @foreach($parents as $p)
                        <option value="{{ $p->id }}" {{ old('parent_id') == $p->id ? 'selected' : '' }}>
                            {{ $p->icon }} {{ $p->name }}
                        </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Icon (emoji)</label>
                    <input type="text" name="icon" maxlength="10" placeholder="🏷️"
                           class="input-soft" value="{{ old('icon') }}">
                </div>
                <div class="flex items-end gap-2">
                    <div class="flex-1">
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Color</label>
                        <input type="color" name="color" value="{{ old('color', '#FFB7C5') }}"
                               class="w-full h-[42px] rounded-2xl border border-pink-200 cursor-pointer p-1 bg-white">
                    </div>
                    <button type="submit" class="btn-sakura px-4 py-2.5 shrink-0 text-sm">Add</button>
                </div>
            </form>
        </div>
    </div>

    {{-- List --}}
    <div class="cat-card overflow-hidden">
        <div class="flex items-center gap-3 px-5 py-4 border-b border-pink-50">
            <span class="text-xl">🗂️</span>
            <h2 class="font-bold text-gray-700">All Categories</h2>
            <span class="ml-auto text-xs bg-pink-100 text-pink-600 font-semibold px-2.5 py-0.5 rounded-full">
                {{ $categories->count() }} total
            </span>
        </div>


        @php $roots = $categories->whereNull('parent_id'); @endphp

        @forelse($roots as $root)
        <div x-data="{ editing: false }" class="border-b border-pink-50 last:border-0">
            {{-- Root row --}}
            <div class="flex items-center gap-3 px-5 py-3 hover:bg-pink-50/40 transition-colors">
                <span class="text-xl w-7 text-center shrink-0">{{ $root->icon ?: '🏷️' }}</span>
                @if($root->color)
                <span class="w-3 h-3 rounded-full shrink-0" style="background:{{ $root->color }}"></span>
                @endif
                <div class="flex-1 min-w-0">
                    <div class="font-semibold text-gray-700 text-sm">{{ $root->name }}</div>
                    <div class="text-xs text-gray-400">{{ $root->children->count() }} sub · {{ $root->clients_count }} client(s)</div>
                </div>
                <div class="flex gap-2 shrink-0">
                    <button @click="editing = !editing"
                            class="text-xs px-3 py-1.5 rounded-full border border-blue-200 text-blue-500 hover:bg-blue-50">
                        ✏️ Edit
                    </button>
                    @unless($root->is_system)
                    <form action="{{ route('client-categories.destroy', $root) }}" method="POST"
                          onsubmit="return confirm('Remove this category? Its children will be promoted.')">
                        @csrf @method('DELETE')
                        <button class="text-xs px-3 py-1.5 rounded-full border border-red-100 text-red-400 hover:bg-red-50">
                            🗑️
                        </button>
                    </form>
                    @endunless
                </div>
            </div>

            {{-- Edit form --}}
            <div x-show="editing" x-transition style="display:none"
                 class="px-5 py-4 bg-pink-50/30 border-t border-pink-50">
                <form action="{{ route('client-categories.update', $root) }}" method="POST"
                      class="grid grid-cols-2 sm:grid-cols-4 gap-3 items-end">
                    @csrf @method('PUT')
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Name</label>
                        <input type="text" name="name" required value="{{ $root->name }}" class="input-soft">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Parent</label>
                        <select name="parent_id" class="input-soft">
                            <option value="">— Root —</option>
                            @foreach($parents as $p)
                            @if($p->id !== $root->id)
                            <option value="{{ $p->id }}" {{ $root->parent_id == $p->id ? 'selected' : '' }}>
                                {{ $p->icon }} {{ $p->name }}
                            </option>
                            @endif
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Icon</label>
                        <input type="text" name="icon" value="{{ $root->icon }}" maxlength="10" class="input-soft">
                    </div>
                    <div class="flex items-end gap-2">
                        <div class="flex-1">
                            <label class="block text-xs font-semibold text-gray-600 mb-1">Color</label>
                            <input type="color" name="color" value="{{ $root->color ?: '#FFB7C5' }}"
                                   class="w-full h-[42px] rounded-2xl border border-pink-200 cursor-pointer p-1 bg-white">
                        </div>
                        <button type="submit" class="btn-sakura px-3 py-2.5 text-sm shrink-0">Save</button>
                    </div>
                </form>
            </div>

            {{-- Children --}}
            @foreach($root->children as $child)
            <div x-data="{ editingC: false }">
                <div class="flex items-center gap-3 px-5 py-2.5 pl-12 border-t border-pink-50/60 hover:bg-pink-50/20 transition-colors">
                    <span class="text-base w-6 text-center shrink-0">{{ $child->icon ?: '↳' }}</span>
                    @if($child->color)
                    <span class="w-2.5 h-2.5 rounded-full shrink-0" style="background:{{ $child->color }}"></span>
                    @endif
                    <div class="flex-1 min-w-0">
                        <div class="text-sm font-medium text-gray-600">↳ {{ $child->name }}</div>
                        <div class="text-xs text-gray-400">{{ $child->clients_count }} client(s)</div>
                    </div>
                    <div class="flex gap-2 shrink-0">
                        <button @click="editingC = !editingC"
                                class="text-xs px-2.5 py-1 rounded-full border border-blue-200 text-blue-500 hover:bg-blue-50">
                            ✏️
                        </button>
                        @unless($child->is_system)
                        <form action="{{ route('client-categories.destroy', $child) }}" method="POST"
                              onsubmit="return confirm('Remove subcategory?')">
                            @csrf @method('DELETE')
                            <button class="text-xs px-2.5 py-1 rounded-full border border-red-100 text-red-400 hover:bg-red-50">
                                🗑️
                            </button>
                        </form>
                        @endunless
                    </div>
                </div>
                <div x-show="editingC" x-transition style="display:none"
                     class="px-5 py-4 pl-12 bg-pink-50/20 border-t border-pink-50/60">
                    <form action="{{ route('client-categories.update', $child) }}" method="POST"
                          class="grid grid-cols-2 sm:grid-cols-4 gap-3 items-end">
                        @csrf @method('PUT')
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1">Name</label>
                            <input type="text" name="name" required value="{{ $child->name }}" class="input-soft">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1">Parent</label>
                            <select name="parent_id" class="input-soft">
                                <option value="">— Root —</option>
                                @foreach($parents as $p)
                                @if($p->id !== $child->id)
                                <option value="{{ $p->id }}" {{ $child->parent_id == $p->id ? 'selected' : '' }}>
                                    {{ $p->icon }} {{ $p->name }}
                                </option>
                                @endif
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1">Icon</label>
                            <input type="text" name="icon" value="{{ $child->icon }}" maxlength="10" class="input-soft">
                        </div>
                        <div class="flex items-end gap-2">
                            <div class="flex-1">
                                <label class="block text-xs font-semibold text-gray-600 mb-1">Color</label>
                                <input type="color" name="color" value="{{ $child->color ?: '#FFB7C5' }}"
                                       class="w-full h-[42px] rounded-2xl border border-pink-200 cursor-pointer p-1 bg-white">
                            </div>
                            <button type="submit" class="btn-sakura px-3 py-2.5 text-sm shrink-0">Save</button>
                        </div>
                    </form>
                </div>
            </div>
            @endforeach
        </div>
        @empty
        <div class="text-center py-14 text-gray-400">
            <div class="text-4xl mb-2">🏷️</div>
            <p class="text-sm">No categories yet. Add your first one above.</p>
        </div>
        @endforelse
    </div>
</div>
@endsection