@extends('layouts.admin')

@section('admin-content')
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
    <div>
        <h2 style="font-size: 1.5rem; font-weight: 800;">Categorías de Productos</h2>
        <p style="color: var(--text-secondary); font-size: 0.9rem;">Organiza los vestidos, accesorios y prendas del catálogo por categorías.</p>
    </div>
    <button type="button" class="btn btn-primary btn-sm" onclick="openCategoryModal()">
        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
        Nueva Categoría
    </button>
</div>

@if($categories->isEmpty())
    <div style="text-align: center; padding: 3rem 1rem; color: var(--text-muted);">
        <p>No hay categorías registradas. Crea la primera categoría para organizar tus productos.</p>
    </div>
@else
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th style="width: 60px;">Icono</th>
                    <th>Nombre</th>
                    <th>Slug</th>
                    <th>Descripción</th>
                    <th style="text-align: center;">Productos</th>
                    <th style="text-align: center;">Estado</th>
                    <th style="text-align: right;">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($categories as $category)
                    <tr>
                        <td style="font-size: 1.4rem; text-align: center;">
                            {{ $category->icon ?: '🏷️' }}
                        </td>
                        <td>
                            <strong style="color: var(--text-primary);">{{ $category->name }}</strong>
                        </td>
                        <td>
                            <code style="font-size: 0.8rem; background: var(--border-color); padding: 0.2rem 0.4rem; border-radius: 4px;">{{ $category->slug }}</code>
                        </td>
                        <td style="color: var(--text-secondary); font-size: 0.85rem; max-width: 250px;">
                            {{ $category->description ?: 'Sin descripción' }}
                        </td>
                        <td style="text-align: center;">
                            <span class="badge badge-info">{{ $category->products_count }}</span>
                        </td>
                        <td style="text-align: center;">
                            @if($category->is_active)
                                <span class="badge badge-success">Activa</span>
                            @else
                                <span class="badge badge-warning">Inactiva</span>
                            @endif
                        </td>
                        <td style="text-align: right;">
                            <div style="display: inline-flex; gap: 0.5rem; justify-content: flex-end;">
                                <button type="button" class="btn btn-outline btn-sm" 
                                    onclick="editCategory({{ json_encode($category) }})" 
                                    title="Editar Categoría">
                                    Editar
                                </button>
                                <form action="{{ route('admin.categories.destroy', $category) }}" method="POST" onsubmit="return confirm('¿Eliminar la categoría \'{{ $category->name }}\'? Los productos asociados quedarán sin categoría.');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm" title="Eliminar">
                                        Eliminar
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endif

<!-- Modal para Crear / Editar Categoría -->
<div id="categoryModal" class="modal-overlay" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 9999; justify-content: center; align-items: center; padding: 1rem;">
    <div class="glass" style="background: var(--bg-card); width: 100%; max-width: 500px; border-radius: var(--radius-lg); padding: 2rem; border: 1px solid var(--border-color); box-shadow: var(--shadow-hover); position: relative;">
        <h3 id="modalTitle" style="font-size: 1.3rem; font-weight: 800; margin-bottom: 1.25rem;">Nueva Categoría</h3>
        
        <form id="categoryForm" action="{{ route('admin.categories.store') }}" method="POST">
            @csrf
            <input type="hidden" name="_method" id="formMethod" value="POST">
            
            <div class="form-group" style="margin-bottom: 1rem;">
                <label for="cat_name" class="form-label">Nombre de la Categoría *</label>
                <input type="text" id="cat_name" name="name" required class="form-control" placeholder="Ej. Vestidos de Gala">
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
                <div class="form-group">
                    <label for="cat_icon" class="form-label">Emoji / Icono</label>
                    <input type="text" id="cat_icon" name="icon" class="form-control" placeholder="Ej. 👗, 🎀, ✨">
                </div>
                <div class="form-group">
                    <label for="cat_sort_order" class="form-label">Orden de Visualización</label>
                    <input type="number" id="cat_sort_order" name="sort_order" class="form-control" value="0">
                </div>
            </div>

            <div class="form-group" style="margin-bottom: 1rem;">
                <label for="cat_description" class="form-label">Descripción</label>
                <textarea id="cat_description" name="description" rows="3" class="form-control" placeholder="Breve descripción de los artículos de esta categoría..."></textarea>
            </div>

            <div class="form-group" style="margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;">
                <input type="checkbox" id="cat_is_active" name="is_active" value="1" checked style="width: 18px; height: 18px; accent-color: var(--primary-color);">
                <label for="cat_is_active" style="cursor: pointer; font-size: 0.9rem; font-weight: 500;">Categoría Activa (visible en catálogo)</label>
            </div>

            <div style="display: flex; gap: 1rem; justify-content: flex-end;">
                <button type="button" class="btn btn-outline" onclick="closeCategoryModal()">Cancelar</button>
                <button type="submit" class="btn btn-primary" id="modalSubmitBtn">Guardar Categoría</button>
            </div>
        </form>
    </div>
</div>

<script>
function openCategoryModal() {
    document.getElementById('modalTitle').textContent = 'Nueva Categoría';
    document.getElementById('categoryForm').action = "{{ route('admin.categories.store') }}";
    document.getElementById('formMethod').value = 'POST';
    document.getElementById('cat_name').value = '';
    document.getElementById('cat_icon').value = '🏷️';
    document.getElementById('cat_sort_order').value = '0';
    document.getElementById('cat_description').value = '';
    document.getElementById('cat_is_active').checked = true;
    document.getElementById('modalSubmitBtn').textContent = 'Guardar Categoría';
    document.getElementById('categoryModal').style.display = 'flex';
}

function editCategory(category) {
    document.getElementById('modalTitle').textContent = 'Editar Categoría';
    document.getElementById('categoryForm').action = "/admin/categories/" + category.id;
    document.getElementById('formMethod').value = 'PUT';
    document.getElementById('cat_name').value = category.name || '';
    document.getElementById('cat_icon').value = category.icon || '';
    document.getElementById('cat_sort_order').value = category.sort_order || 0;
    document.getElementById('cat_description').value = category.description || '';
    document.getElementById('cat_is_active').checked = Boolean(category.is_active);
    document.getElementById('modalSubmitBtn').textContent = 'Actualizar Categoría';
    document.getElementById('categoryModal').style.display = 'flex';
}

function closeCategoryModal() {
    document.getElementById('categoryModal').style.display = 'none';
}

// Close modal when clicking outside
window.addEventListener('click', function(e) {
    const modal = document.getElementById('categoryModal');
    if (e.target === modal) {
        closeCategoryModal();
    }
});
</script>
@endsection