@extends('admin.layout')
@section('title', 'Categorías - Admin IMOZA')
@section('header', 'Categorías')

@section('content')
<div class="flex items-center justify-between mb-6">
    <p class="text-sm text-gray-500">{{ $categories->total() }} categorías</p>
    <button onclick="document.getElementById('modal-create').classList.remove('hidden')" class="px-4 py-2 bg-imoza-blue-dark text-white rounded-xl text-sm font-semibold hover:bg-imoza-blue-bright transition-colors">+ Nueva Categoría</button>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
    @forelse($categories as $cat)
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
        <div class="flex items-center justify-between mb-2">
            <h3 class="font-bold text-imoza-blue-dark">{{ $cat->name }}</h3>
            <span class="text-xs text-gray-400">{{ $cat->products_count }} productos</span>
        </div>
        <p class="text-sm text-gray-500 mb-4">{{ $cat->description ?: 'Sin descripción' }}</p>
        <div class="flex items-center gap-2">
            <button onclick="document.getElementById('modal-edit-{{ $cat->id }}').classList.remove('hidden')" class="text-xs font-semibold text-imoza-blue-bright hover:text-imoza-blue-dark">Editar</button>
            <form method="POST" action="{{ route('admin.categories.destroy', $cat) }}" onsubmit="return confirm('¿Eliminar?')">
                @csrf @method('DELETE')
                <button class="text-xs font-semibold text-red-400 hover:text-red-600">Eliminar</button>
            </form>
        </div>

        <div id="modal-edit-{{ $cat->id }}" class="hidden fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
            <div class="bg-white rounded-2xl shadow-2xl p-6 w-full max-w-md">
                <h3 class="font-bold text-lg text-imoza-blue-dark mb-4">Editar Categoría</h3>
                <form method="POST" action="{{ route('admin.categories.update', $cat) }}" enctype="multipart/form-data" class="space-y-4">
                    @csrf @method('PUT')
                    <input type="text" name="name" value="{{ $cat->name }}" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright outline-none" required>
                    <textarea name="description" rows="2" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright outline-none">{{ $cat->description }}</textarea>
                    <input type="file" name="image" accept="image/*" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none">
                    <div class="flex gap-2">
                        <button type="submit" class="flex-1 bg-imoza-blue-dark text-white py-2 rounded-xl font-semibold hover:bg-imoza-blue-bright">Guardar</button>
                        <button type="button" onclick="document.getElementById('modal-edit-{{ $cat->id }}').classList.add('hidden')" class="flex-1 bg-gray-100 text-gray-600 py-2 rounded-xl font-semibold hover:bg-gray-200">Cancelar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @empty
    <p class="text-gray-400 text-sm col-span-3 text-center py-8">No hay categorías creadas.</p>
    @endforelse
</div>

<div class="mt-6">{{ $categories->links() }}</div>

<div id="modal-create" class="hidden fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl p-6 w-full max-w-md">
        <h3 class="font-bold text-lg text-imoza-blue-dark mb-4">Nueva Categoría</h3>
        <form method="POST" action="{{ route('admin.categories.store') }}" enctype="multipart/form-data" class="space-y-4">
            @csrf
            <input type="text" name="name" placeholder="Nombre" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright outline-none" required>
            <textarea name="description" rows="2" placeholder="Descripción (opcional)" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-imoza-blue-bright outline-none"></textarea>
            <input type="file" name="image" accept="image/*" class="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none">
            <div class="flex gap-2">
                <button type="submit" class="flex-1 bg-imoza-blue-dark text-white py-2 rounded-xl font-semibold hover:bg-imoza-blue-bright">Crear</button>
                <button type="button" onclick="document.getElementById('modal-create').classList.add('hidden')" class="flex-1 bg-gray-100 text-gray-600 py-2 rounded-xl font-semibold hover:bg-gray-200">Cancelar</button>
            </div>
        </form>
    </div>
</div>
@endsection