@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.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;
}

.ai-generated-content.long-content {
    max-height: 150px;
    overflow-y: auto;
}

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

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

.character-counter {
    font-size: 0.8rem;
    color: #6c757d;
}

.character-counter.warning {
    color: #ff9800;
}

.character-counter.danger {
    color: #dc3545;
}
</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</h4>
                    <div class="page-title-right">
                        <a href="{{ route('products.index') }}" class="btn btn-primary">Volver</a>
                    </div>
                </div>
            </div>
        </div>
            <!-- Default box -->
            <form action="" method="post" id="productForm" name="productForm" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="card mb-3">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label for="title">T&iacute;tulo</label>
                                                <input type="text" readonly name="title" id="title" class="form-control"
                                                       placeholder="Título" value="{{$product->DE_ARTI}}">
                                                <p class="error"></p>
                                                <small class="form-text text-muted">Este nombre no puede ser
                                                    modificado.</small>
                                            </div>
                                        </div>

                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label for="title">Slug</label>
                                                <input type="text" readonly name="slug" id="slug" class="form-control"
                                                       placeholder="Slug" value="{{$product->CO_ARTI}}">
                                                <p class="error"></p>
                                                <small class="form-text text-muted">El slug se genera automaticamente a
                                                    partir del nombre.</small>
                                            </div>
                                        </div>

                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label for="short_description">Descripción Corta</label>
                                                <textarea readonly name="short_description" id="short_description"
                                                          cols="30" rows="10" class="summernote"
                                                          placeholder="Descripción Corta">
                                                    {{$product->DE_ARTI}}
                                                </textarea>
                                                <small class="form-text text-muted">Este nombre no puede ser
                                                    modificado.</small>
                                            </div>
                                        </div>

                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label for="description">Descripci&oacute;n</label>
                                                <textarea readonly name="description" id="description" cols="30"
                                                          rows="10" class="summernote" placeholder="Descripción">
		    	                            	{{$product->PS_DETALLE}}
		    	                            </textarea>
                                                <small class="form-text text-muted">Este nombre no puede ser
                                                    modificado.</small>
                                            </div>
                                        </div>

                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label for="ai_description">
                                                    Descripci&oacute;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="form-text text-muted">
                                                    <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 class="col-md-12">
                                            <div class="mb-3">
                                                <label for="shipping_returns">Env&iacute;os y Devoluciones</label>
                                                <textarea readonly name="shipping_returns" id="shipping_returns"
                                                          cols="30"
                                                          rows="10" class="summernote" placeholder="Shipping & Returns">
		    	                            	{{$product->shipping_returns}}
		    	                            </textarea>
                                                <small class="form-text text-muted">Este campo no se puede
                                                    modificar.</small>
                                            </div>
                                        </div>

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

                            <div class="card mb-3">
                                <div class="card-body">
                                    <h2 class="h4 mb-3">Imagenes</h2>
                                    <div id="image" class="dropzone dz-clickable">
                                        <div class="dz-message needsclick">
                                            <br>Suelta los archivos aqui o haz clic para subirlos.<br><br>
                                        </div>
                                    </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 class="card mb-3">
                                <div class="card-body">
                                    <h2 class="h4 mb-3">Precios</h2>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label for="price">Precio</label>
                                                <input type="text" readonly name="price" id="price" class="form-control"
                                                       placeholder="Precio" value="{{$product->IM_UNITA}}">
                                                <small class="form-text text-muted">Este campo no se puede
                                                    modificar.</small>
                                                <p class="error"></p>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label for="compare_price">Comparar con el Precio</label>
                                                <input type="text" readonly name="compare_price" id="compare_price"
                                                       class="form-control" placeholder="Precio Comparativo"
                                                       value="{{$product->IM_WEB_UNI}}">
                                                <small class="form-text text-muted">Este campo no se puede
                                                    modificar.</small>
                                                <p class="error"></p>

                                                <p class="text-muted mt-3">
                                                    Para mostrar un precio reducido, el precio original del
                                                    producto a Comparar con el Precio.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h2 class="h4 mb-3">Inventario</h2>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="sku">SKU (Unidad de Mantenimiento de Stock)</label>
                                                <input type="text" readonly name="sku" id="sku" class="form-control"
                                                       placeholder="sku" value="{{$product->SKU}}">
                                                <small class="form-text text-muted">Este campo no se puede
                                                    modificar.</small>
                                                <p class="error"></p>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="barcode">Codigo de Barras</label>
                                                <input type="text" readonly name="barcode" id="barcode"
                                                       class="form-control"
                                                       placeholder="Código de Barras" value="{{$product->CO_BARRAS}}">
                                                <small class="form-text text-muted">Este campo no se puede
                                                    modificar.</small>
                                                <p class="error"></p>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="hidden" name="track_qty"
                                                           value="{{ $product->ZERO_VTA == 'S' ? 'Yes' : 'No' }}">
                                                    <input class="custom-control-input" type="checkbox" id="track_qty"
                                                           value="Yes"
                                                           {{ ($product->ZERO_VTA == 'S') ? 'checked' : '' }} disabled>
                                                    <label for="track_qty" class="custom-control-label">Controlar
                                                        Stock</label>
                                                    <small class="form-text text-muted">Este campo no se puede
                                                        modificar.</small>
                                                    <p class="error"></p>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <input type="number" min="0" readonly name="qty" id="qty"
                                                       class="form-control"
                                                       placeholder="Cantidad" value="{{$product->WW_STCK}}">
                                                <small class="form-text text-muted">Este campo no se puede
                                                    modificar.</small>
                                                <p class="error"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card mb-3">
                                <div class="card-body">
                                    <h2 class="h4 mb-3">Productos Relacionados</h2>
                                    <div class="mb-3">
                                        <select multiple class="related-product w-100" name="related_products[]"
                                                id="related_products" class="form-control">
                                            @if(!empty($relatedProducts))
                                                @foreach ($relatedProducts as $relProduct )
                                                    <option selected value="{{ $relProduct->CO_ARTI }}"> {{ $relProduct->DE_ARTI }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                        <p class="error"></p>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-md-4">
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h2 class="h4 mb-3">Estado del Producto</h2>
                                    <div class="mb-3">
                                        <input type="text" readonly class="form-control"
                                               value="{{ $product->WEB_VTA == 'S' ? 'Activo' : 'Inactivo' }}">
                                        <small class="form-text text-muted">Este campo no se puede modificar.</small>
                                        <p class="error"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <h2 class="h4  mb-3">Categor&iacute;as del Producto</h2>
                                    <div class="mb-3">
                                        <label for="category">Categor&iacute;a</label>
                                        <input type="text" readonly class="form-control"
                                               value="{{ $product->categoria ? $product->categoria->DE_CATEGOR : 'Sin categoría' }}">
                                        <small class="form-text text-muted">Este campo no se puede modificar.</small>
                                        <p class="error"></p>
                                    </div>

                                    <div class="mb-3">
                                        <label for="category">SubCategor&iacute;a</label>
                                        <input type="text" readonly class="form-control"
                                               value="{{ $product->subcategoria ? $product->subcategoria->DE_SUBCATE : 'Sin subcategoría' }}">
                                        <small class="form-text text-muted">Este campo no se puede modificar.</small>
                                        <p class="error"></p>
                                    </div>
                                </div>
                            </div>

                            <div class="card mb-3">
                                <div class="card-body">
                                    <h2 class="h4 mb-3">Marca del Producto</h2>
                                    <div class="mb-3">
                                        <select name="brand" id="brand" class="form-select">
                                            <option value="">Seleccione una Marca</option>
                                            <input type="text" readonly class="form-control"
                                                   value="{{ $product->marca ? $product->marca->DE_MARCA : 'Sin categoría' }}">
                                            <small class="form-text text-muted">Este campo no se puede modificar.</small>
                                            <p class="error"></p>
                                        </select>
                                        <p class="error"></p>

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

                            <div class="card mb-3">
                                <div class="card-body">
                                    <h2 class="h4 mb-3">Producto destacado</h2>
                                    <div class="mb-3">
                                        <select name="is_featured" id="is_featured" class="form-select">
                                            <option
                                                {{ ($product->is_featured == 'No')  ? 'selected' : '' }}   value="No">No
                                            </option>
                                            <option
                                                {{ ($product->is_featured == 'Yes') ? 'selected' : '' }}   value="Yes">
                                                Si
                                            </option>
                                        </select>
                                        <p class="error"></p>

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

                        </div>


                        <div class="col-md-8">
                            <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>
                                <button type="button" id="generateAiSeo" class="btn btn-success btn-sm">
                                    <i class="ri-brain-line me-1"></i>
                                    Generar SEO con IA
                                </button>
                            </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="{{ old('meta_title', $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</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="{{ old('meta_keywords', $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">{{ old('meta_description', $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</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)
                                        <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)
                                        <!-- 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>
                                            <button type="button" id="generateAiSeoHere" class="btn btn-success">
                                                <i class="ri-brain-line me-2"></i>
                                                Generar SEO con IA
                                            </button>
                                        </div>
                                        @endif

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

                    </div>

                    <div class="pb-5 pt-3">
                        <button type="submit" class="btn btn-primary">Actualizar</button>
                        <a href="{{ route('products.index') }}" class="btn btn-outline-dark ms-3">Cancelar</a>
                    </div>

            </form>
            <!-- /.card -->
        
@endsection

@section('customJs')

    <script>

        $('.related-product').select2({
            ajax: {
                url: '{{ route("products.getProducts") }}',
                dataType: 'json',
                tags: true,
                multiple: true,
                minimumInputLength: 3,
                processResults: function (data) {
                    return {
                        results: data.tags
                    };
                }
            }
        });

        // Summernote initialization for ai_description (editable field)
        $(document).ready(function() {
            $('.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);
                    }
                }
            });
        });

        $("#title").change(function () {
            element = $(this);
            $("button[type=submit]").prop('disabled', true);
            $.ajax({
                url: '{{ route("getSlug") }}',
                type: 'get',
                data: {title: element.val()},
                dataType: 'json',
                success: function (response) {
                    $("button[type=submit]").prop('disabled', false);
                    if (response["status"] == true) {
                        $("#slug").val(response["slug"]);
                    }
                }
            });
        });


        $("#productForm").submit(function (event) {
            event.preventDefault();

            // Sync Summernote content before submit
            $('.summernote-editable').each(function() {
                var content = $(this).summernote('code');
                $(this).val(content);
            });

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

            $.ajax({
                url: '{{ route("products.update", $product->CO_ARTI) }}',
                type: 'put',
                data: formArray,
                dataType: 'json',
                success: function (response) {

                    $("button[type=submit]").prop('disabled', false);
                    if (response['status'] == true) {

                        $("#title").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
                        $("#slug").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");

                        window.location.href = "{{ route('products.index')}}";

                    } else {
                        var errors = response['errors'];

                        //if (errors['title']) {
                        //	$('#title').addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['title']);
                        //} else {
                        //	$('#title').removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
                        //}

                        $(".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 () {
                    console.log("Something Went Wrong");
                }
            });
        });


        $("#category").change(function () {
            var category_id = $(this).val();
            $.ajax({
                url: '{{ route("product.subcategories.index") }}',
                type: 'get',
                data: {category_id: category_id},
                dataType: 'json',
                success: function (response) {
                    console.log(response);

                    $("#sub_category").find("option").not(":first").remove();
                    $.each(response["subCategories"], function (key, item) {
                        $("#sub_category").append(`<option value='${item.id}'> ${item.name} </option>`)
                    });
                },
                error: function () {
                    console.log("Something Went Wrong");
                }
            });
        });


        Dropzone.autoDiscover = false;
        const dropzone = $("#image").dropzone({
            url:  "{{ route('stock-images.update') }}",
            maxFiles: 10,
            params: {'co_arti' : '{{ $product->CO_ARTI }}'},
            paramName: 'image',
            addRemoveLinks: true,
            acceptedFiles: "image/jpeg,image/png,image/gif",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }, success: function(file, response){
                //$("#image_id").val(response.image_id);
                //console.log(response)

                //--------------------------------------------
                //From bootstrap.com/docs/5.0/components/card/
                //--------------------------------------------
                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);
            }
        });

        function deleteImage(id){

            if (confirm("Are you sure you want to delete this image?")) {
                $("#image-row-" + id).remove();
                $.ajax({
                    url: '{{ route('stock-images.destroy') }}',
                    type: 'DELETE',
                    data: {
                        id: id,
                        _token: $('meta[name="csrf-token"]').attr('content')  // Asegura enviar el token CSRF en la solicitud
                    },
                    success: function(response) {
                        Swal.fire('Éxito', response.message, 'success');
                    },
                    error: function(xhr) {
                        Swal.fire('Error', 'Error al eliminar la imagen', 'error');
                    }
                });
            }
        }

        // AI SEO Generation
        function generateAiSeo() {
            const generateBtn = $('#generateAiSeo, #generateAiSeoHere');

            // Show loading state
            generateBtn.prop('disabled', true).html('<i class="ri-loader-line fa-spin me-1"></i>Generando...');
            
            // Show extended loading message if it takes too long
            let retryMessageTimeout = setTimeout(() => {
                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) {
                    if (response.status) {
                        // Check if fallback was used
                        let title = '¡Éxito!';
                        let text = response.message || 'Contenido SEO generado exitosamente';
                        let icon = 'success';
                        
                        if (response.model_used && response.model_used === 'fallback/local') {
                            title = 'Contenido Generado';
                            icon = 'warning';
                        }
                        
                        Swal.fire({
                            icon: icon,
                            title: title,
                            text: text,
                            timer: 3000,
                            showConfirmButton: false
                        });
                        
                        // Reload page to show generated content
                        setTimeout(() => {
                            window.location.reload();
                        }, 3000);
                    } else {
                        throw new Error(response.message || 'Error desconocido');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error generating AI SEO:', xhr.responseText);
                    let errorMessage = 'Error al generar contenido SEO';
                    let footerMessage = '';
                    
                    if (xhr.status === 419) {
                        errorMessage = 'Sesión expirada. Por favor, refresque la página e intente nuevamente.';
                        footerMessage = 'Recargando página...';
                        setTimeout(() => {
                            window.location.reload();
                        }, 3000);
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        // Mostrar el mensaje real de la API
                        errorMessage = xhr.responseJSON.message;
                        
                        // Determinar footer según el tipo de error
                        if (errorMessage.includes('quota') || errorMessage.includes('billing')) {
                            footerMessage = 'Verifique su plan y límites de uso en el proveedor de IA';
                        } else if (errorMessage.includes('model') && errorMessage.includes('not found')) {
                            footerMessage = 'El modelo especificado no está disponible en su plan';
                        } else if (errorMessage.includes('API key')) {
                            footerMessage = 'Verifique su API key en Integraciones > IA';
                        } else {
                            footerMessage = 'Error del proveedor de IA: ' + (xhr.responseJSON.type || 'Desconocido');
                        }
                    } else if (xhr.status === 400) {
                        errorMessage = 'Servicio de IA no disponible. Verifique la configuración en Integraciones > IA.';
                        footerMessage = 'Error de configuración';
                    } else if (xhr.status === 500) {
                        errorMessage = 'Error interno del servidor. Verifique la API key de IA.';
                        footerMessage = 'Error del servidor';
                    }
                    
                    Swal.fire({
                        icon: 'error',
                        title: 'Error de IA',
                        html: '<p>' + errorMessage + '</p>',
                        footer: footerMessage,
                        width: 600,
                        confirmButtonText: 'Entendido'
                    });
                },
                complete: function() {
                    clearTimeout(retryMessageTimeout);
                    generateBtn.prop('disabled', false).html('<i class="ri-brain-line me-1"></i>Generar SEO con IA');
                }
            });
        }

        // Character counters for SEO fields
        function updateTitleCounter() {
            const title = $('#meta_title').val();
            const counter = $('#title-counter');
            const length = title.length;
            counter.text(length + '/60 caracteres');
            
            if (length > 60) {
                counter.removeClass('warning').addClass('danger');
            } else if (length > 50) {
                counter.removeClass('danger').addClass('warning');
            } else {
                counter.removeClass('warning danger');
            }
        }

        function updateDescriptionCounter() {
            const description = $('#meta_description').val();
            const counter = $('#description-counter');
            const length = description.length;
            counter.text(length + '/160 caracteres');
            
            if (length > 160) {
                counter.removeClass('warning').addClass('danger');
            } else if (length > 140) {
                counter.removeClass('danger').addClass('warning');
            } else {
                counter.removeClass('warning danger');
            }
        }

        // Initialize counters
        $('#meta_title').on('input', updateTitleCounter);
        $('#meta_description').on('input', updateDescriptionCounter);
        updateTitleCounter();
        updateDescriptionCounter();

        // Apply AI SEO to manual fields
        function applyAiSeoToManual() {
            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);
            }
            
            // Update character counters
            updateTitleCounter();
            updateDescriptionCounter();
            
            // Verificar si realmente se copiaron
            const copiedTitle = $('#meta_title').val();
            const copiedDescription = $('#meta_description').val();
            const copiedKeywords = $('#meta_keywords').val();
            
            console.log('Copied values:', { copiedTitle, copiedDescription, copiedKeywords }); // Debug
            
            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
                });
            }
        }

        // Event handlers
        $(document).on('click', '#generateAiSeo, #generateAiSeoHere', generateAiSeo);
        $(document).on('click', '#applyAiSeo', applyAiSeoToManual);

    </script>

@endsection