@extends('adminlte::page')

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

@section('content_header')
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
        <div>
            <h1 class="mb-1 fw-bold">Categorías</h1>
            <p class="mb-0 text-muted">
                Organiza las categorías de los productos de la tienda.
            </p>
        </div>

        <a href="{{ route('store.home') }}" target="_blank" class="btn btn-outline-primary">
            <i class="bi bi-box-arrow-up-right me-1"></i>
            Ver tienda
        </a>
    </div>
@stop

@section('content')
    <div
        id="categoryManager"
        class="category-manager pb-4"
        data-index-url="{{ route('admin.categories.index') }}"
        data-store-url="{{ route('admin.categories.store') }}"
        data-update-url="{{ route('admin.categories.update', ['category' => '__ID__']) }}"
        data-toggle-url="{{ route('admin.categories.toggle-status', ['category' => '__ID__']) }}"
        data-delete-url="{{ route('admin.categories.destroy', ['category' => '__ID__']) }}"
    >
        <section class="category-banner">
            <div>
                <span class="category-banner-label">
                    <i class="bi bi-tags-fill"></i>
                    Catálogo COMPRIS
                </span>

                <h2>Administra tus categorías</h2>

                <p>
                    Crea y organiza las secciones que utilizarán tus productos digitales.
                </p>
            </div>

            <div class="category-banner-icon">
                <i class="bi bi-grid-1x2-fill"></i>
            </div>
        </section>

        <section class="category-statistics">
            <article class="stat-card">
                <span class="stat-icon stat-purple">
                    <i class="bi bi-collection-fill"></i>
                </span>

                <div>
                    <small>Total de categorías</small>
                    <strong id="totalCategories">0</strong>
                </div>
            </article>

            <article class="stat-card">
                <span class="stat-icon stat-green">
                    <i class="bi bi-check-circle-fill"></i>
                </span>

                <div>
                    <small>Categorías activas</small>
                    <strong id="activeCategories">0</strong>
                </div>
            </article>

            <article class="stat-card">
                <span class="stat-icon stat-orange">
                    <i class="bi bi-pause-circle-fill"></i>
                </span>

                <div>
                    <small>Categorías inactivas</small>
                    <strong id="inactiveCategories">0</strong>
                </div>
            </article>
        </section>

        <div class="row g-4">
            <div class="col-xl-4">
                <section class="category-panel category-form-panel" id="categoryFormPanel">
                    <div class="panel-heading">
                        <div class="panel-icon">
                            <i class="bi bi-plus-lg"></i>
                        </div>

                        <div>
                            <h3 id="formTitle">Nueva categoría</h3>
                            <p id="formSubtitle">Completa los datos de la categoría.</p>
                        </div>
                    </div>

                    <form
                        id="categoryForm"
                        enctype="multipart/form-data"
                        autocomplete="off"
                        novalidate
                    >
                        @csrf

                        <input type="hidden" id="categoryId">

                        <div class="image-upload-wrapper">
                            <div id="imagePreview" class="category-image-preview">
                                <img id="previewImage" src="" alt="Vista previa" hidden>

                                <div id="previewPlaceholder" class="image-placeholder">
                                    <i class="bi bi-image"></i>
                                    <span>Imagen de categoría</span>
                                </div>
                            </div>

                            <label for="categoryImage" class="image-upload-button">
                                <i class="bi bi-cloud-arrow-up-fill"></i>
                                Seleccionar imagen
                            </label>

                            <input
                                type="file"
                                name="image"
                                id="categoryImage"
                                accept=".jpg,.jpeg,.png,.webp"
                                hidden
                            >

                            <small>JPG, PNG o WEBP. Máximo 2 MB.</small>
                        </div>

                        <div class="form-group-modern">
                            <label for="categoryName">
                                Nombre de la categoría
                                <span>*</span>
                            </label>

                            <div class="input-modern">
                                <i class="bi bi-tag"></i>

                                <input
                                    type="text"
                                    name="name"
                                    id="categoryName"
                                    maxlength="100"
                                    placeholder="Ejemplo: Sistemas web"
                                    required
                                >
                            </div>
                        </div>

                        <div class="form-group-modern">
                            <label for="categoryDescription">Descripción</label>

                            <textarea
                                name="description"
                                id="categoryDescription"
                                rows="4"
                                maxlength="1000"
                                placeholder="Describe brevemente esta categoría..."
                            ></textarea>

                            <div class="character-counter">
                                <span id="descriptionCounter">0</span>/1000
                            </div>
                        </div>

                        <div class="status-switch-card">
                            <div>
                                <strong>Estado de la categoría</strong>
                                <small>La categoría aparecerá en la tienda.</small>
                            </div>

                            <div class="form-check form-switch">
                                <input
                                    class="form-check-input"
                                    type="checkbox"
                                    name="is_active"
                                    id="categoryStatus"
                                    value="1"
                                    checked
                                >
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="submit" id="saveCategoryButton" class="save-button">
                                <i class="bi bi-check-lg"></i>
                                <span>Guardar categoría</span>
                            </button>

                            <button type="button" id="cancelEditButton" class="cancel-button" hidden>
                                <i class="bi bi-x-lg"></i>
                                Cancelar edición
                            </button>
                        </div>
                    </form>
                </section>
            </div>

            <div class="col-xl-8">
                <section class="category-panel">
                    <div class="list-heading">
                        <div>
                            <h3>Categorías registradas</h3>
                            <p>Gestiona las categorías sin recargar la página.</p>
                        </div>

                        <label class="category-search">
                            <i class="bi bi-search"></i>

                            <input
                                type="search"
                                id="categorySearch"
                                placeholder="Buscar categoría..."
                                autocomplete="off"
                            >
                        </label>
                    </div>

                    <div id="categoriesLoading" class="category-loading">
                        <div class="loading-spinner"></div>
                        <span>Cargando categorías...</span>
                    </div>

                    <div id="categoriesGrid" class="categories-grid"></div>

                    <div id="categoriesEmpty" class="categories-empty" hidden>
                        <span>
                            <i class="bi bi-inboxes"></i>
                        </span>

                        <h4>No hay categorías</h4>
                        <p>Crea la primera categoría utilizando el formulario.</p>
                    </div>
                </section>
            </div>
        </div>
    </div>
@stop

@section('css')
    @vite('resources/js/admin-categories.js')
@stop