@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.nav-tabs .nav-link {
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid transparent;
    background: none;
    color: #6c757d;
}

.nav-tabs .nav-link.active {
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    color: #495057;
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    isolation: isolate;
}

.tab-content {
    border: 1px solid #dee2e6;
    border-top: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    padding: 1.5rem;
    background: #fff;
}

.tab-icon {
    margin-right: 0.5rem;
}

.form-section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.help-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.form-actions {
    border-top: 1px solid #dee2e6;
    padding-top: 1.5rem;
    margin-top: 2rem;
    background: #f8f9fa;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Estilos para SEO con IA */
.ai-generated-content {
    background: #f8f9ff;
    border: 1px solid #e3e1fc;
    border-radius: 0.375rem;
    padding: 0.75rem;
    color: #495057;
    font-size: 0.9rem;
    line-height: 1.5;
    min-height: 45px;
}

.badge-sm {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
}

</style>
@endpush

@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Editar Producto: {{ $product->DE_ARTI }}</h4>
            <div class="page-title-right">
                <a href="{{ route('products.index') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        <form action="" method="post" id="productForm" name="productForm" enctype="multipart/form-data">
            
            <div class="card">
                <div class="card-body p-0">
                    
                    <!-- Navigation Tabs -->
                    <ul class="nav nav-tabs" id="productTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ (!isset($activeTab) || $activeTab == 'basic') ? 'active' : '' }}" id="basic-tab" data-bs-toggle="tab" data-bs-target="#basic" 
                                    type="button" role="tab" aria-controls="basic" aria-selected="{{ (!isset($activeTab) || $activeTab == 'basic') ? 'true' : 'false' }}">
                                <i class="ri-information-line tab-icon"></i>
                                Información Básica
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ (isset($activeTab) && $activeTab == 'categories') ? 'active' : '' }}" id="categories-tab" data-bs-toggle="tab" data-bs-target="#categories" 
                                    type="button" role="tab" aria-controls="categories" aria-selected="{{ (isset($activeTab) && $activeTab == 'categories') ? 'true' : 'false' }}">
                                <i class="ri-price-tag-lines tab-icon"></i>
                                Categorías
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ (isset($activeTab) && $activeTab == 'pricing') ? 'active' : '' }}" id="pricing-tab" data-bs-toggle="tab" data-bs-target="#pricing" 
                                    type="button" role="tab" aria-controls="pricing" aria-selected="{{ (isset($activeTab) && $activeTab == 'pricing') ? 'true' : 'false' }}">
                                <i class="ri-money-dollar-circle-line tab-icon"></i>
                                Precios y Stock
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ (isset($activeTab) && $activeTab == 'images') ? 'active' : '' }}" id="images-tab" data-bs-toggle="tab" data-bs-target="#images" 
                                    type="button" role="tab" aria-controls="images" aria-selected="{{ (isset($activeTab) && $activeTab == 'images') ? 'true' : 'false' }}">
                                <i class="ri-image-line tab-icon"></i>
                                Imágenes
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ (isset($activeTab) && $activeTab == 'featured') ? 'active' : '' }}" id="featured-tab" data-bs-toggle="tab" data-bs-target="#featured" 
                                    type="button" role="tab" aria-controls="featured" aria-selected="{{ (isset($activeTab) && $activeTab == 'featured') ? 'true' : 'false' }}">
                                <i class="ri-star-line tab-icon"></i>
                                Producto Destacado
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ (isset($activeTab) && $activeTab == 'related') ? 'active' : '' }}" id="related-tab" data-bs-toggle="tab" data-bs-target="#related" 
                                    type="button" role="tab" aria-controls="related" aria-selected="{{ (isset($activeTab) && $activeTab == 'related') ? 'true' : 'false' }}">
                                <i class="ri-link tab-icon"></i>
                                Productos Relacionados
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ (isset($activeTab) && $activeTab == 'seo') ? 'active' : '' }}" id="seo-tab" data-bs-toggle="tab" data-bs-target="#seo"
                                    type="button" role="tab" aria-controls="seo" aria-selected="{{ (isset($activeTab) && $activeTab == 'seo') ? 'true' : 'false' }}">
                                <i class="ri-search-line tab-icon"></i>
                                SEO
                                @if($product->ai_generated_at && ($product->ai_meta_title || $product->ai_meta_description))
                                <span class="badge bg-success badge-sm ms-1">IA</span>
                                @endif
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ (isset($activeTab) && $activeTab == 'mercadolibre') ? 'active' : '' }}" id="mercadolibre-tab" data-bs-toggle="tab" data-bs-target="#mercadolibre"
                                    type="button" role="tab" aria-controls="mercadolibre" aria-selected="{{ (isset($activeTab) && $activeTab == 'mercadolibre') ? 'true' : 'false' }}">
                                <i class="ri-shopping-bag-3-line tab-icon"></i>
                                MercadoLibre
                                @if(isset($meliPublications) && $meliPublications->count() > 0)
                                <span class="badge bg-warning badge-sm ms-1">{{ $meliPublications->count() }}</span>
                                @endif
                            </button>
                        </li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content" id="productTabContent">
                        
                        <!-- Información Básica -->
                        <div class="tab-pane fade {{ (!isset($activeTab) || $activeTab == 'basic') ? 'show active' : '' }}" id="basic" role="tabpanel" aria-labelledby="basic-tab">
                            <h5 class="form-section-title">
                                <i class="ri-information-line text-primary"></i>
                                Datos Principales del Producto
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="title" class="form-label">Título</label>
                                        <input type="text" readonly name="title" id="title" class="form-control"
                                               placeholder="Título" value="{{$product->DE_ARTI}}">
                                        <small class="help-text">
                                            <i class="ri-information-line"></i>
                                            Este nombre no puede ser modificado.
                                        </small>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="slug" class="form-label">Código/SKU</label>
                                        <input type="text" readonly name="slug" id="slug" class="form-control"
                                               placeholder="Slug" value="{{$product->CO_ARTI}}">
                                        <small class="help-text">
                                            <i class="ri-barcode-line"></i>
                                            Código único del producto
                                        </small>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="short_description" class="form-label">Descripción Corta</label>
                                        <textarea readonly name="short_description" id="short_description"
                                                  cols="30" rows="3" class="form-control"
                                                  placeholder="Descripción Corta">{{$product->DE_ARTI}}</textarea>
                                        <small class="help-text">
                                            <i class="ri-align-left"></i>
                                            Este campo viene del sistema de gestión
                                        </small>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="description" class="form-label">Descripción Completa</label>
                                        <textarea readonly name="description" id="description" cols="30"
                                                  rows="6" class="form-control" placeholder="Descripción">{{$product->PS_DETALLE}}</textarea>
                                        <small class="help-text">
                                            <i class="ri-align-justify"></i>
                                            Descripción detallada del producto
                                        </small>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="ai_description" class="form-label">
                                            Descripción Web (E-commerce)
                                            <span class="badge bg-success">Editable</span>
                                        </label>
                                        <textarea name="ai_description" id="ai_description" cols="30"
                                                  rows="10" class="summernote-editable"
                                                  placeholder="Descripción rica para el sitio web con formato HTML...">{{$product->ai_description}}</textarea>
                                        <small class="help-text">
                                            <i class="ri-information-line"></i>
                                            Esta descripción se mostrará en la página del producto en el tab "Descripción del Producto".
                                            Usa las herramientas del editor para dar formato (negritas, listas, tablas, etc.).
                                            <strong>Este campo NO se sobrescribe</strong> con las sincronizaciones del sistema de gestión.
                                        </small>
                                    </div>
                                </div>


                            </div>
                        </div>

                        <!-- Categorías -->
                        <div class="tab-pane fade {{ (isset($activeTab) && $activeTab == 'categories') ? 'show active' : '' }}" id="categories" role="tabpanel" aria-labelledby="categories-tab">
                            <h5 class="form-section-title">
                                <i class="ri-price-tag-lines text-info"></i>
                                Clasificación del Producto
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="alert alert-info">
                                        <i class="ri-information-line me-2"></i>
                                        La clasificación del producto determina dónde aparecerá en el catálogo y cómo los clientes lo encontrarán.
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="category" class="form-label">
                                            <i class="ri-folder-line text-primary"></i>
                                            Categoría Principal
                                        </label>
                                        <input type="text" readonly class="form-control form-control-lg" 
                                               value="{{ $product->categoria ? $product->categoria->DE_CATEGOR : 'Sin categoría' }}">
                                        <small class="help-text">
                                            Categoría principal del producto
                                        </small>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="sub_category" class="form-label">
                                            <i class="ri-folder-open-line text-info"></i>
                                            Subcategoría
                                        </label>
                                        <input type="text" readonly class="form-control form-control-lg" 
                                               value="{{ $product->subcategoria ? $product->subcategoria->DE_SUBCATE : 'Sin subcategoría' }}">
                                        <small class="help-text">
                                            Subcategoría específica
                                        </small>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="brand" class="form-label">
                                            <i class="ri-file-copy-lineright text-success"></i>
                                            Marca
                                        </label>
                                        <input type="text" readonly class="form-control form-control-lg" 
                                               value="{{ $product->marca ? $product->marca->DE_MARCA : 'Sin marca' }}">
                                        <small class="help-text">
                                            Marca o fabricante del producto
                                        </small>
                                    </div>
                                </div>
                                
                                <div class="col-md-12 mt-3">
                                    <div class="card bg-light">
                                        <div class="card-body">
                                            <h6 class="card-title">
                                                <i class="ri-organization-chart text-primary"></i>
                                                Jerarquía del Producto
                                            </h6>
                                            <p class="mb-0">
                                                <strong>Ruta:</strong> 
                                                @if($product->categoria)
                                                    <span class="badge bg-primary">{{ $product->categoria->DE_CATEGOR }}</span>
                                                @endif
                                                @if($product->subcategoria)
                                                    <i class="ri-arrow-right-s-line mx-2"></i>
                                                    <span class="badge bg-info">{{ $product->subcategoria->DE_SUBCATE }}</span>
                                                @endif
                                                @if($product->marca)
                                                    <i class="ri-arrow-right-s-line mx-2"></i>
                                                    <span class="badge bg-success">{{ $product->marca->DE_MARCA }}</span>
                                                @endif
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Precios y Stock -->
                        <div class="tab-pane fade {{ (isset($activeTab) && $activeTab == 'pricing') ? 'show active' : '' }}" id="pricing" role="tabpanel" aria-labelledby="pricing-tab">
                            <h5 class="form-section-title">
                                <i class="ri-money-dollar-circle-line text-success"></i>
                                Información de Precios y Stock
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Precio</label>
                                        <input type="text" readonly class="form-control" value="${{ number_format($product->VL_VENTA, 2) }}">
                                        <small class="help-text">Precio de venta</small>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Precio Comparativo</label>
                                        <input type="text" readonly class="form-control" value="${{ number_format($product->VL_COMPARA, 2) }}">
                                        <small class="help-text">Precio antes del descuento</small>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Stock Actual</label>
                                        <input type="text" readonly class="form-control" value="{{ $product->WW_STCK }}">
                                        <small class="help-text">Cantidad disponible</small>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Código de Barras</label>
                                        <input type="text" readonly class="form-control" value="{{ $product->CO_BARRAS }}">
                                        <small class="help-text">Código interno</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Imágenes -->
                        <div class="tab-pane fade {{ (isset($activeTab) && $activeTab == 'images') ? 'show active' : '' }}" id="images" role="tabpanel" aria-labelledby="images-tab">
                            <h5 class="form-section-title">
                                <i class="ri-image-line text-info"></i>
                                Galería de Imágenes del Producto
                            </h5>
                            
                            <div class="mb-3">
                                <div id="image" class="dropzone dz-clickable">
                                    <div class="dz-message needsclick">
                                        <i class="ri-upload-cloud-line ri-3x text-primary mb-3"></i>
                                        <h4>Arrastra y suelta las imágenes aquí</h4>
                                        <span class="note">o haz clic para seleccionar archivos</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row" id="product-gallery">
                                @if ($StockImages->isNotEmpty())
                                    @foreach ($StockImages as $image)
                                        <div class="col-md-3" id="image-row-{{ $image->id }}">
                                            <div class="card">
                                                <input type="hidden" name="image_array[]" value="{{ $image->id }}">
                                                <img src="{{ asset('/uploads/product/small/' . $image->image) }}" class="card-img-top" alt="">
                                                <div class="card-body">
                                                    <a href="javascript:void(0)" onclick="deleteImage({{ $image->id }})" class="btn btn-danger">Eliminar</a>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>

                        <!-- Productos Relacionados -->
                        <div class="tab-pane fade {{ (isset($activeTab) && $activeTab == 'related') ? 'show active' : '' }}" id="related" role="tabpanel" aria-labelledby="related-tab">
                            <h5 class="form-section-title">
                                <i class="ri-link text-warning"></i>
                                Productos Relacionados
                            </h5>
                            
                            <div class="mb-3">
                                <label class="form-label">Seleccionar Productos Relacionados</label>
                                <select multiple class="related-product w-100" name="related_products[]" id="related_products">
                                    @if (!empty($relatedProducts))
                                        @foreach ($relatedProducts as $relProduct)
                                            <option selected value="{{ $relProduct->CO_ARTI }}">{{ $relProduct->DE_ARTI }}</option>
                                        @endforeach
                                    @endif
                                </select>
                                <small class="help-text">
                                    <i class="ri-information-line"></i>
                                    Seleccione productos que complementen o sean similares a este
                                </small>
                            </div>
                        </div>

                        <!-- Producto Destacado -->
                        <div class="tab-pane fade {{ (isset($activeTab) && $activeTab == 'featured') ? 'show active' : '' }}" id="featured" role="tabpanel" aria-labelledby="featured-tab">
                            <h5 class="form-section-title">
                                <i class="ri-star-line text-warning"></i>
                                Configuración de Producto Destacado
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="alert alert-info">
                                        <i class="ri-information-line me-2"></i>
                                        Los productos destacados aparecen en la página principal y tienen mayor visibilidad en el catálogo.
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="is_featured" class="form-label">¿Destacar este producto?</label>
                                        <select name="is_featured" id="is_featured" class="form-select form-select-lg">
                                            <option value="No" {{ $product->is_featured == 'No' ? 'selected' : '' }}>No</option>
                                            <option value="Si" {{ $product->is_featured == 'Si' ? 'selected' : '' }}>Sí, destacar producto</option>
                                        </select>
                                        <small class="help-text">
                                            <i class="ri-star-line"></i>
                                            Seleccione "Sí" para mostrar este producto en la sección de destacados
                                        </small>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="featured_order" class="form-label">Orden</label>
                                        <input type="number"
                                               name="featured_order"
                                               id="featured_order"
                                               class="form-control form-control-lg"
                                               value="{{ $product->featured_order ?? 0 }}"
                                               min="0">
                                        <p class="error"></p>
                                        <small class="help-text">
                                            <i class="ri-sort-asc-numeric-down"></i>
                                            Orden de aparición en destacados (0 = automático)
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card bg-light">
                                        <div class="card-body">
                                            <h6 class="card-title">
                                                <i class="ri-line-chart-line text-primary"></i>
                                                Estado Actual
                                            </h6>
                                            @if($product->is_featured == 'Si')
                                                <p class="mb-0">
                                                    <span class="badge bg-success">
                                                        <i class="ri-star-line me-1"></i>
                                                        Producto Destacado
                                                    </span>
                                                    @if($product->featured_order > 0)
                                                        <span class="badge bg-info ms-2">
                                                            <i class="ri-sort-asc-numeric-down me-1"></i>
                                                            Orden: {{ $product->featured_order }}
                                                        </span>
                                                    @endif
                                                </p>
                                                <small class="text-muted">Este producto está visible en la sección de destacados</small>
                                            @else
                                                <p class="mb-0">
                                                    <span class="badge bg-secondary">
                                                        <i class="ri-star-line me-1"></i>
                                                        No Destacado
                                                    </span>
                                                </p>
                                                <small class="text-muted">Este producto no aparece en destacados</small>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- SEO -->
                        <div class="tab-pane fade {{ (isset($activeTab) && $activeTab == 'seo') ? 'show active' : '' }}" id="seo" role="tabpanel" aria-labelledby="seo-tab">

                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="form-section-title mb-0">
                                    <i class="ri-search-line text-success"></i>
                                    Optimización para Motores de Búsqueda
                                </h5>
                                @if(aiIntegrationEnabled())
                                <button type="button" id="generateAiSeo" class="btn btn-success btn-sm">
                                    <i class="ri-brain-line me-1"></i>
                                    Generar SEO con IA
                                </button>
                                @endif
                            </div>
                        
                        <!-- SEO Manual Section -->
                        <div class="mb-4">
                            <h6 class="text-primary">
                                <i class="ri-pencil-line me-1"></i>
                                Campos SEO Manuales
                            </h6>
                            <div class="row">
                                <!-- Meta Título -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="meta_title">Meta Título</label>
                                        <input type="text" name="meta_title" id="meta_title" class="form-control" 
                                               placeholder="Ejemplo: Compra los mejores productos en nuestra tienda" 
                                               value="{{ $product->meta_title }}" maxlength="60">
                                        <div class="d-flex justify-content-between">
                                            <small class="form-text text-muted">
                                                Este título aparecerá en los resultados de búsqueda.
                                            </small>
                                            <small class="character-counter" id="title-counter">0/60 caracteres</small>
                                        </div>
                                    </div>
                                </div>

                                <!-- Meta Palabras Clave -->
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="meta_keywords">Meta Palabras Clave</label>
                                        <input type="text" name="meta_keywords" id="meta_keywords" class="form-control" 
                                               placeholder="Ejemplo: tienda online, productos, calidad, envío rápido" 
                                               value="{{ $product->meta_keywords }}">
                                        <small class="form-text text-muted">
                                            Palabras clave separadas por comas, que describen el contenido de la página.
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Meta Descripción -->
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="meta_description">Meta Descripción</label>
                                        <textarea name="meta_description" id="meta_description" class="form-control" rows="3" 
                                                  placeholder="Ejemplo: Encuentra una amplia selección de productos de alta calidad en nuestra tienda online. Envío rápido y precios competitivos." 
                                                  maxlength="160">{{ $product->meta_description }}</textarea>
                                        <div class="d-flex justify-content-between">
                                            <small class="form-text text-muted">
                                                Esta descripción aparecerá en los resultados de búsqueda.
                                            </small>
                                            <small class="character-counter" id="description-counter">0/160 caracteres</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- SEO con IA Section -->
                        <div class="card">
                            <div class="card-header bg-light">
                                <h6 class="mb-0">
                                    <i class="ri-brain-line text-success me-2"></i>
                                    Generación de SEO con Inteligencia Artificial
                                    @if($product->ai_generated_at && ($product->ai_meta_title || $product->ai_meta_description))
                                    <span class="badge bg-success ms-2">Generado</span>
                                    @endif
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="ai-seo-section">
                                    
                                    @if($product->ai_generated_at && ($product->ai_meta_title || $product->ai_meta_description))
                                    <!-- Contenido generado por IA -->
                                    <div class="alert alert-success">
                                        <i class="ri-checkbox-circle-line me-2"></i>
                                        <strong>SEO generado con IA</strong> - 
                                        Última generación: {{ $product->ai_generated_at->format('d/m/Y H:i') }}
                                        @if($product->ai_model_used)
                                        <br><small>Modelo usado: {{ $product->ai_model_used }}</small>
                                        @endif
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label>Meta Título generado por IA</label>
                                                <div class="ai-generated-content">{{ $product->ai_meta_title }}</div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label>Alt Text para imagen</label>
                                                <div class="ai-generated-content">{{ $product->ai_alt_text }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label>Meta Descripción generada por IA</label>
                                                <div class="ai-generated-content">{{ $product->ai_meta_description }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label>Descripción de producto para SEO</label>
                                                <div class="ai-generated-content long-content">{{ $product->ai_description }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label>Palabras clave sugeridas</label>
                                                <div class="ai-generated-content">{{ $product->ai_keywords }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="d-flex justify-content-between align-items-center flex-wrap">
                                                <div class="mb-2">
                                                    <button type="button" class="btn btn-primary" id="applyAiSeo">
                                                        <i class="ri-file-copy-line me-1"></i>
                                                        Copiar a campos SEO manuales
                                                    </button>
                                                </div>
                                                <div class="form-check">
                                                    <input type="checkbox" name="ai_seo_enabled" id="ai_seo_enabled" class="form-check-input" 
                                                           {{ $product->ai_seo_enabled ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="ai_seo_enabled">
                                                        <strong>Usar SEO generado por IA en el frontend</strong>
                                                        <br><small class="text-muted">Cuando esté activado, se mostrará el contenido IA en lugar del manual</small>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    @else
                                    <!-- Sin contenido IA aún -->
                                    <div class="text-center py-4">
                                        <i class="ri-brain-line ri-3x text-muted mb-3"></i>
                                        <h5>No hay contenido SEO generado por IA</h5>
                                        <p class="text-muted">Haz clic en "Generar SEO con IA" para crear contenido optimizado automáticamente.</p>
                                        @if(aiIntegrationEnabled())
                                        <button type="button" id="generateAiSeoHere" class="btn btn-success">
                                            <i class="ri-brain-line me-2"></i>
                                            Generar SEO con IA
                                        </button>
                                        @endif
                                    </div>
                                    @endif

                                </div>
                            </div>
                        </div>
                        </div>

                        <!-- MercadoLibre -->
                        <div class="tab-pane fade {{ (isset($activeTab) && $activeTab == 'mercadolibre') ? 'show active' : '' }}" id="mercadolibre" role="tabpanel" aria-labelledby="mercadolibre-tab">
                            <h5 class="form-section-title">
                                <i class="ri-shopping-bag-3-line text-warning"></i>
                                Publicaciones en MercadoLibre
                            </h5>

                            @if(isset($meliPublications) && $meliPublications->count() > 0)
                                <div class="table-responsive">
                                    <table class="table table-hover table-striped align-middle mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th>ML ID</th>
                                                <th>Título</th>
                                                <th class="text-end">Precio</th>
                                                <th class="text-center">Stock</th>
                                                <th class="text-center">Estado</th>
                                                <th class="text-center">Tipo</th>
                                                <th class="text-center">Sync</th>
                                                <th width="80">Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($meliPublications as $pub)
                                            <tr>
                                                <td>
                                                    @if($pub->ml_id)
                                                        @if($pub->ml_link)
                                                            <a href="{{ $pub->ml_link }}" target="_blank" class="font-monospace small text-primary" title="Ver en ML">
                                                                {{ $pub->ml_id }} <i class="ri-external-link-line"></i>
                                                            </a>
                                                        @else
                                                            <span class="font-monospace small">{{ $pub->ml_id }}</span>
                                                        @endif
                                                    @else
                                                        <span class="text-muted">-</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <span title="{{ $pub->titu_publ }}">{{ \Illuminate\Support\Str::limit($pub->titu_publ, 45) }}</span>
                                                </td>
                                                <td class="text-end">
                                                    ${{ number_format($pub->prec_publ ?? 0, 2, ',', '.') }}
                                                </td>
                                                <td class="text-center">
                                                    <span class="{{ ($pub->stck_actu ?? 0) <= 0 ? 'text-danger fw-bold' : '' }}">
                                                        {{ $pub->stck_actu ?? 0 }}
                                                    </span>
                                                </td>
                                                <td class="text-center">
                                                    @switch($pub->estado)
                                                        @case('active')
                                                            <span class="badge bg-success">Activa</span>
                                                            @break
                                                        @case('paused')
                                                            <span class="badge bg-warning">Pausada</span>
                                                            @break
                                                        @case('closed')
                                                            <span class="badge bg-danger">Cerrada</span>
                                                            @break
                                                        @default
                                                            <span class="badge bg-secondary">Borrador</span>
                                                    @endswitch
                                                </td>
                                                <td class="text-center">
                                                    <span class="small">{{ $pub->tipo_publ ?? '-' }}</span>
                                                </td>
                                                <td class="text-center">
                                                    @if($pub->sincro == 1)
                                                        <i class="ri-checkbox-circle-fill text-success" title="Sincronizado"></i>
                                                    @elseif($pub->sincro == 2)
                                                        <i class="ri-error-warning-fill text-danger" title="Error"></i>
                                                    @else
                                                        <i class="ri-time-line text-muted" title="Pendiente"></i>
                                                    @endif
                                                </td>
                                                <td>
                                                    <a href="{{ route('admin.meli.publications.edit', $pub->id) }}" class="btn btn-sm btn-warning" title="Editar publicación">
                                                        <i class="ri-pencil-line"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                                {{-- Summary --}}
                                <div class="row mt-3">
                                    <div class="col-md-3">
                                        <div class="card bg-light mb-0">
                                            <div class="card-body py-2 px-3">
                                                <small class="text-muted d-block">Total publicaciones</small>
                                                <strong>{{ $meliPublications->count() }}</strong>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="card bg-light mb-0">
                                            <div class="card-body py-2 px-3">
                                                <small class="text-muted d-block">Activas</small>
                                                <strong class="text-success">{{ $meliPublications->where('estado', 'active')->count() }}</strong>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="card bg-light mb-0">
                                            <div class="card-body py-2 px-3">
                                                <small class="text-muted d-block">Pausadas</small>
                                                <strong class="text-warning">{{ $meliPublications->where('estado', 'paused')->count() }}</strong>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="card bg-light mb-0">
                                            <div class="card-body py-2 px-3">
                                                <small class="text-muted d-block">Borradores</small>
                                                <strong class="text-secondary">{{ $meliPublications->where('estado', 'draft')->count() }}</strong>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="text-center py-5">
                                    <i class="ri-shopping-bag-3-line d-block" style="font-size: 3rem; color: #adb5bd;"></i>
                                    <h5 class="text-muted mt-3">Sin publicaciones en MercadoLibre</h5>
                                    <p class="text-muted">Este producto no tiene publicaciones asociadas en ML.</p>
                                    <a href="{{ route('admin.meli.publications.create') }}" class="btn btn-primary btn-sm">
                                        <i class="ri-add-line me-1"></i> Crear Publicación
                                    </a>
                                </div>
                            @endif
                        </div>

                    </div>

                    <!-- Form Actions -->
                    <div class="form-actions">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <a href="{{ route('products.index') }}" class="btn btn-outline-secondary">
                                    <i class="ri-arrow-left-line"></i> Cancelar
                                </a>
                            </div>
                            <div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="ri-save-line"></i> Guardar Cambios
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>


@endsection

@push('js')
<!-- Select2 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
// Desactivar auto-discover de Dropzone ANTES de document.ready
Dropzone.autoDiscover = false;

$(document).ready(function() {
    // Inicializar Select2 para productos relacionados
    $('.related-product').select2({
        ajax: {
            url: '{{ route("products.getProducts") }}',
            dataType: 'json',
            tags: true,
            multiple: true,
            minimumInputLength: 2,
            processResults: function (data) {
                return {
                    results: data.tags
                };
            }
        }
    });

    // Summernote initialization for ai_description (editable field)
    $('.summernote-editable').summernote({
        height: 300,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'italic', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ],
        callbacks: {
            onBlur: function() {
                var content = $(this).summernote('code');
                $(this).val(content);
            },
            onChange: function(contents, $editable) {
                $(this).val(contents);
            }
        }
    });

    // Ensure Summernote syncs on blur
    $('#ai_description').on('summernote.blur', function() {
        var content = $(this).summernote('code');
        $(this).val(content);
    });

    // Also sync on any change
    $('#ai_description').on('summernote.change', function(we, contents, $editable) {
        $(this).val(contents);
    });

    // Configurar Dropzone
    const dropzone = $("#image").dropzone({
        init: function() {
            this.on('addedfile', function(file) {
                if (this.files.length > 1) {
                    this.removeFile(this.files[0]);
                }
            });
        },
        url: "{{ route('stock-images.update') }}",
        maxFiles: 10,
        paramName: 'image',
        params: {'co_arti': '{{ $product->CO_ARTI }}'},
        addRemoveLinks: true,
        acceptedFiles: "image/jpeg,image/png,image/gif",
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(file, response) {
            var html = `
                <div class="col-md-3" id="image-row-${response.image_id}">
                    <div class="card">
                        <input type="hidden" name="image_array[]" value="${response.image_id}">
                        <img src="${response.ImagePath}" class="card-img-top" alt="">
                        <div class="card-body">
                            <a href="javascript:void(0)" onclick="deleteImage(${response.image_id})" class="btn btn-danger">Eliminar</a>
                        </div>
                    </div>
                </div>`;
            $("#product-gallery").append(html);
        },
        complete: function(file) {
            this.removeFile(file);
        }
    });

    // Manejar envío del formulario
    $("#productForm").submit(function(event) {
        event.preventDefault();

        // Force sync Summernote content to textarea before serializing
        var summernoteContent = $('#ai_description').summernote('code');
        $('#ai_description').val(summernoteContent);

        var element = $(this);
        $("button[type=submit]").prop('disabled', true);

        $.ajax({
            url: '{{ route("products.update", $product->CO_ARTI) }}',
            type: 'put',
            data: element.serializeArray(),
            dataType: 'json',
            success: function(response) {
                $("button[type=submit]").prop('disabled', false);
                
                if (response["status"] == true) {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: response.message || 'Producto actualizado correctamente',
                        showConfirmButton: false,
                        timer: 1500
                    });
                    
                    // Redirigir después del mensaje
                    setTimeout(function() {
                        window.location.href = "{{ route('products.index') }}";
                    }, 1500);
                } else {
                    var errors = response['errors'];
                    $(".error").removeClass('invalid-feedback').html('');
                    $("input[type='text'], select, input[type='number']").removeClass('is-invalid');
                    
                    $.each(errors, function(key, value) {
                        $(`#${key}`).addClass('is-invalid')
                            .siblings('p')
                            .addClass('invalid-feedback')
                            .html(value);
                    });
                }
            },
            error: function(jqXHR, exception) {
                $("button[type=submit]").prop('disabled', false);
                console.error("Error al actualizar:", jqXHR.responseText);
                
                let errorMessage = 'Error al actualizar el producto';
                if (jqXHR.responseJSON && jqXHR.responseJSON.message) {
                    errorMessage = jqXHR.responseJSON.message;
                }
                
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: errorMessage
                });
            }
        });
    });
});

// Función para eliminar imagen
function deleteImage(id) {
    if (confirm("¿Estás seguro de eliminar esta imagen?")) {
        $.ajax({
            url: '{{ route("stock-images.destroy") }}',
            type: 'delete',
            data: {id: id},
            success: function(response) {
                if (response.status == true) {
                    $("#image-row-" + id).remove();
                } else {
                    Swal.fire('Error', response.message, 'error');
                }
            }
        });
    }
}

// Contador de caracteres para los campos SEO
function updateCharacterCount() {
    // Meta título
    var titleLength = $('#meta_title').val().length;
    $('#title-counter').text(titleLength + '/60 caracteres');
    if (titleLength > 60) {
        $('#title-counter').removeClass('text-muted').addClass('text-danger');
    } else if (titleLength > 50) {
        $('#title-counter').removeClass('text-muted').addClass('text-warning');
    } else {
        $('#title-counter').removeClass('text-warning text-danger').addClass('text-muted');
    }
    
    // Meta descripción
    var descLength = $('#meta_description').val().length;
    $('#description-counter').text(descLength + '/160 caracteres');
    if (descLength > 160) {
        $('#description-counter').removeClass('text-muted').addClass('text-danger');
    } else if (descLength > 150) {
        $('#description-counter').removeClass('text-muted').addClass('text-warning');
    } else {
        $('#description-counter').removeClass('text-warning text-danger').addClass('text-muted');
    }
}

// Llamar a la función al cargar la página
updateCharacterCount();

// Llamar a la función cuando cambie el contenido
$('#meta_title, #meta_description').on('input', updateCharacterCount);

// Click handler para generar SEO con IA (ambos botones)
$('#generateAiSeo, #generateAiSeoHere').on('click', function() {
    var generateBtn = $(this);
    var originalHtml = generateBtn.html();
    
    // Cambiar estado del botón
    generateBtn.prop('disabled', true);
    generateBtn.html('<i class="ri-loader-line fa-spin me-1"></i>Generando contenido SEO...');
    
    // Timer para mostrar mensaje de reintento
    var retryTimer = setTimeout(function() {
        generateBtn.html('<i class="ri-loader-line fa-spin me-1"></i>Generando... (reintentando con modelos alternativos)');
    }, 5000);
    
    $.ajax({
        url: '{{ route("products.generate-ai-seo", $product->CO_ARTI) }}',
        type: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            clearTimeout(retryTimer);
            
            if (response.status === true) {
                // Agregar badge IA al tab si no existe
                if (!$('#seo-tab .badge').length) {
                    $('#seo-tab').append('<span class="badge bg-success badge-sm ms-1">IA</span>');
                }
                
                // Recargar la página para mostrar el contenido generado
                Swal.fire({
                    icon: 'success',
                    title: '¡Éxito!',
                    text: response.message || 'Contenido SEO generado exitosamente',
                    timer: 2000,
                    showConfirmButton: false
                });
                
                setTimeout(() => {
                    // Mantener la pestaña SEO activa
                    window.location.href = window.location.href.split('#')[0] + '#seo';
                    window.location.reload();
                }, 2000);
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: response.message || 'No se pudo generar el contenido SEO.',
                    confirmButtonColor: '#dc3545'
                });
            }
        },
        error: function(xhr) {
            clearTimeout(retryTimer);
            
            var errorMessage = 'Error al conectar con el servicio de IA.';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            }
            
            Swal.fire({
                icon: 'error',
                title: 'Error de Conexión',
                text: errorMessage,
                confirmButtonColor: '#dc3545'
            });
        },
        complete: function() {
            // Restaurar botón
            generateBtn.prop('disabled', false);
            generateBtn.html(originalHtml);
        }
    });
});

// Click handler para copiar AI SEO a campos manuales
$('#applyAiSeo').on('click', function() {
    const aiMetaTitle = @json($product->ai_meta_title ?? '');
    const aiMetaDescription = @json($product->ai_meta_description ?? '');
    const aiKeywords = @json($product->ai_keywords ?? '');
    
    console.log('AI Data:', { aiMetaTitle, aiMetaDescription, aiKeywords }); // Debug
    
    if (aiMetaTitle) {
        $('#meta_title').val(aiMetaTitle);
    }
    
    if (aiMetaDescription) {
        $('#meta_description').val(aiMetaDescription);
    }
    
    if (aiKeywords) {
        $('#meta_keywords').val(aiKeywords);
    }
    
    // Actualizar contadores
    updateCharacterCount();
    
    if (aiMetaTitle || aiMetaDescription || aiKeywords) {
        Swal.fire({
            icon: 'success',
            title: 'Copiado',
            text: 'Contenido de IA copiado a los campos SEO manuales',
            timer: 1500,
            showConfirmButton: false
        });
    } else {
        Swal.fire({
            icon: 'warning',
            title: 'Sin contenido',
            text: 'No hay contenido de IA para copiar. Genera el SEO primero.',
            timer: 2000,
            showConfirmButton: false
        });
    }
});
</script>
@endpush