@extends('layouts.app')

@section('title', 'Categorías')

@section('content')
<div x-data="{
    showCreate: false,
    editId: null,
    editName: '',
    editColor: '#0EA5E9',
    editIcon: 'fa-tag',
    openEdit(cat) {
        this.editId = cat.id;
        this.editName = cat.name;
        this.editColor = cat.color;
        this.editIcon = cat.icon;
    },
    closeEdit() { this.editId = null; }
}">

    {{-- Cabecera --}}
    <div class="mb-6 flex flex-wrap items-center justify-between gap-4">
        <p class="text-sm text-gray-600 dark:text-gray-400">
            Clasifica tus enlaces con una categoría única.
        </p>
        <x-button type="button" @click="showCreate = !showCreate">
            <i class="fa-solid fa-plus"></i> Nueva categoría
        </x-button>
    </div>

    {{-- Formulario crear --}}
    <div x-show="showCreate" x-cloak class="mb-6">
        <x-card>
            <h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">Nueva categoría</h3>
            <form method="POST" action="{{ route('categories.store') }}" class="grid gap-4 sm:grid-cols-3">
                @csrf
                <div>
                    <x-label for="name">Nombre *</x-label>
                    <x-input id="name" name="name" type="text" value="{{ old('name') }}" required maxlength="80" />
                    <x-error for="name" />
                </div>
                <div>
                    <x-label for="color">Color</x-label>
                    <input id="color" name="color" type="color" value="{{ old('color', '#0EA5E9') }}"
                        class="mt-1 h-10 w-full cursor-pointer rounded-lg border border-gray-300 p-1 dark:border-white/10" />
                </div>
                <div>
                    <x-label for="icon">Icono FA</x-label>
                    <x-input id="icon" name="icon" type="text" value="{{ old('icon', 'fa-tag') }}" placeholder="fa-tag" maxlength="40" />
                </div>
                <div class="sm:col-span-3 flex justify-end gap-3">
                    <x-button type="button" variant="secondary" @click="showCreate = false">Cancelar</x-button>
                    <x-button type="submit"><i class="fa-solid fa-floppy-disk"></i> Guardar</x-button>
                </div>
            </form>
        </x-card>
    </div>

    {{-- Lista --}}
    @if ($categories->isEmpty())
        <x-card class="flex flex-col items-center justify-center py-16 text-center">
            <i class="fa-solid fa-tags text-5xl text-gray-300 dark:text-gray-600"></i>
            <p class="mt-4 text-base font-medium text-gray-700 dark:text-gray-300">Crea tu primera categoría.</p>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Las categorías te ayudan a clasificar tus enlaces por tema.</p>
        </x-card>
    @else
        <x-card>
            <ul class="divide-y divide-gray-100 dark:divide-white/10">
                @foreach ($categories as $category)
                    <li class="py-3">
                        {{-- Vista normal --}}
                        <div x-show="editId !== {{ $category->id }}" class="flex flex-wrap items-center justify-between gap-3">
                            <div class="flex items-center gap-3">
                                <span class="flex size-9 items-center justify-center rounded-lg text-white text-sm"
                                      style="background-color: {{ $category->color }}">
                                    <i class="fa-solid {{ $category->icon ?? 'fa-tag' }}"></i>
                                </span>
                                <div>
                                    <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $category->name }}</p>
                                    <p class="text-xs text-gray-400">{{ $category->links_count }} {{ Str::plural('enlace', $category->links_count) }}</p>
                                </div>
                            </div>
                            <div class="flex items-center gap-2">
                                <button type="button"
                                        @click="openEdit({{ json_encode(['id' => $category->id, 'name' => $category->name, 'color' => $category->color, 'icon' => $category->icon]) }})"
                                        class="rounded px-2 py-1 text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                                    <i class="fa-solid fa-pen"></i> Editar
                                </button>
                                <form method="POST" action="{{ route('categories.destroy', $category) }}"
                                      onsubmit="return confirm('¿Eliminar la categoría «{{ addslashes($category->name) }}»? Los enlaces quedarán sin categoría.')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="rounded px-2 py-1 text-xs text-red-400 hover:text-red-600">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>

                        {{-- Formulario editar inline --}}
                        <div x-show="editId === {{ $category->id }}" x-cloak>
                            <form method="POST" action="{{ route('categories.update', $category) }}"
                                  class="grid gap-4 sm:grid-cols-3">
                                @csrf
                                @method('PUT')
                                <div>
                                    <x-label>Nombre *</x-label>
                                    <x-input name="name" type="text" required maxlength="80" x-model="editName" />
                                </div>
                                <div>
                                    <x-label>Color</x-label>
                                    <input name="color" type="color" x-model="editColor"
                                        class="mt-1 h-10 w-full cursor-pointer rounded-lg border border-gray-300 p-1 dark:border-white/10" />
                                </div>
                                <div>
                                    <x-label>Icono FA</x-label>
                                    <x-input name="icon" type="text" x-model="editIcon" placeholder="fa-tag" maxlength="40" />
                                </div>
                                <div class="sm:col-span-3 flex justify-end gap-3">
                                    <x-button type="button" variant="secondary" @click="closeEdit()">Cancelar</x-button>
                                    <x-button type="submit"><i class="fa-solid fa-floppy-disk"></i> Guardar</x-button>
                                </div>
                            </form>
                        </div>
                    </li>
                @endforeach
            </ul>
        </x-card>
    @endif
</div>
@endsection