@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;
    padding: 0.75rem 1rem;
}

.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;
}

.ai-coming-soon {
    background: #f8f9ff;
    border: 1px solid #e3e1fc;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 1rem;
    text-align: center;
}

.card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
}
</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">Crear Página</h4>
            <div class="page-title-right">
                <a href="{{ route('pages.index') }}" class="btn btn-primary">
                <i class="ri-arrow-left-line"></i> Volver
                </a>
            </div>
        </div>
    </div>
</div>
        <form action="" method="post" id="pageForm" name="pageForm">
            
            <div class="card">
                <div class="card-body p-0">
                    
                    <!-- Navigation Tabs -->
                    <ul class="nav nav-tabs" id="pageTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="basic-tab" data-bs-toggle="tab" data-bs-target="#basic" 
                                    type="button" role="tab" aria-controls="basic" aria-selected="true">
                                <i class="ri-information-line tab-icon"></i>
                                Información Básica
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="content-tab" data-bs-toggle="tab" data-bs-target="#content" 
                                    type="button" role="tab" aria-controls="content" aria-selected="false">
                                <i class="ri-file-text-line tab-icon"></i>
                                Contenido
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="seo-tab" data-bs-toggle="tab" data-bs-target="#seo" 
                                    type="button" role="tab" aria-controls="seo" aria-selected="false">
                                <i class="ri-search-line tab-icon"></i>
                                SEO
                            </button>
                        </li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content" id="pageTabContent">
                        
                        <!-- Tab 1: Información Básica -->
                        <div class="tab-pane fade show active" id="basic" role="tabpanel" aria-labelledby="basic-tab">
                            <h5 class="form-section-title">
                                <i class="ri-file-text-line text-primary"></i>
                                Información Principal de la Página
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Identificación</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="name" class="form-label">Nombre de la Página *</label>
                                                <input type="text" name="name" id="name" class="form-control" 
                                                       placeholder="Ej: Acerca de Nosotros, Contacto, Términos">
                                                <p class="error"></p>
                                                <small class="help-text">
                                                    Este nombre aparecerá en el menú y como título de la página
                                                </small>
                                            </div>

                                            <div class="mb-3">
                                                <label for="slug" class="form-label">URL/Slug *</label>
                                                <input type="text" readonly name="slug" id="slug" class="form-control" 
                                                       placeholder="Se genera automáticamente">
                                                <p class="error"></p>
                                                <small class="help-text">
                                                    URL amigable que se generará automáticamente. Ej: /acerca-de-nosotros
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Vista Previa</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="alert alert-info">
                                                <i class="ri-information-line"></i>
                                                <strong>Vista previa de la URL:</strong><br>
                                                <span class="text-primary">{{ url('/') }}/<span id="slug-preview">nombre-de-pagina</span></span>
                                            </div>
                                            <div class="alert alert-light">
                                                <h6><strong>Consejos:</strong></h6>
                                                <ul class="mb-0 small">
                                                    <li>Use nombres descriptivos y claros</li>
                                                    <li>El slug se genera automáticamente</li>
                                                    <li>Evite caracteres especiales en el nombre</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tab 2: Contenido -->
                        <div class="tab-pane fade" id="content" role="tabpanel" aria-labelledby="content-tab">
                            <h5 class="form-section-title">
                                <i class="ri-pencil-line text-info"></i>
                                Contenido de la Página
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-header d-flex justify-content-between align-items-center">
                                            <h3 class="card-title">Editor de Contenido</h3>
                                            <button type="button" class="btn btn-sm btn-info" id="aiWriterButton">
                                                <i class="ri-robot-line"></i> AI Writer
                                            </button>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="content" class="form-label">Contenido Principal</label>
                                                <textarea name="content" id="content" cols="30" rows="15" class="summernote" 
                                                          placeholder="Escriba aquí el contenido principal de la página..."></textarea>
                                                <small class="help-text">
                                                    Use el editor para formatear el texto, agregar imágenes, enlaces y otros elementos
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tab 3: SEO -->
                        <div class="tab-pane fade" id="seo" role="tabpanel" aria-labelledby="seo-tab">
                            <h5 class="form-section-title">
                                <i class="ri-search-line text-success"></i>
                                Optimización para Motores de Búsqueda
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Configuración SEO</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="alert alert-info">
                                                <i class="ri-lightbulb-line"></i> 
                                                <strong>Consejo:</strong> Optimiza estos campos para mejorar la visibilidad de tu página en buscadores como Google.
                                            </div>
                                            
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="meta_title" class="form-label">Meta Título</label>
                                                        <input type="text" name="meta_title" id="meta_title" class="form-control" 
                                                               placeholder="Ej: Acerca de Nosotros - Mi Empresa" 
                                                               value="{{ old('meta_title') }}">
                                                        <small class="help-text">
                                                            Máximo 60 caracteres. Este título aparecerá en los resultados de búsqueda.
                                                        </small>
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="meta_keywords" class="form-label">Palabras Clave</label>
                                                        <input type="text" name="meta_keywords" id="meta_keywords" class="form-control" 
                                                               placeholder="palabra1, palabra2, palabra3" 
                                                               value="{{ old('meta_keywords') }}">
                                                        <small class="help-text">
                                                            Palabras clave separadas por comas que describen el contenido de la página.
                                                        </small>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label for="meta_description" class="form-label">Meta Descripción</label>
                                                        <textarea name="meta_description" id="meta_description" class="form-control" rows="3" 
                                                                  placeholder="Descripción breve y atractiva para resultados de búsqueda">{{ old('meta_description') }}</textarea>
                                                        <small class="help-text">
                                                            Máximo 160 caracteres recomendados. Esta descripción aparecerá en los resultados de búsqueda.
                                                        </small>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <!-- AI Coming Soon Notice -->
                                            <div class="ai-coming-soon">
                                                <i class="ri-brain-line ri-2x text-primary mb-2"></i>
                                                <h6 class="text-primary">¡Generación SEO con IA disponible después de crear la página!</h6>
                                                <p class="text-muted mb-0">
                                                    Una vez que crees la página, podrás usar la inteligencia artificial para generar automáticamente contenido SEO optimizado.
                                                    <br><small>Ve a "Editar" la página para acceder a esta funcionalidad.</small>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- Actions -->
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="ri-save-line"></i> Crear Página
                                </button>
                                <a href="{{ route('pages.index') }}" class="btn btn-outline-secondary btn-lg ms-3">
                                    <i class="ri-close-line"></i> Cancelar
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </form>


<!-- AI Writer Modal -->
@if(aiIntegrationEnabled())
<div class="modal fade" id="aiWriterModal" tabindex="-1" role="dialog" aria-labelledby="aiWriterModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="aiWriterModalLabel">
                    <i class="ri-robot-line"></i> AI Writer - Generar Contenido
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="ri-information-line"></i> 
                    Ingrese un título para generar automáticamente el contenido completo de la página con IA.
                </div>
                
                <div class="mb-3">
                    <label for="aiPageTitle">Título de la Página</label>
                    <input type="text" id="aiPageTitle" class="form-control" 
                           placeholder="Ej: Acerca de Nosotros, Política de Privacidad, Términos y Condiciones">
                    <small class="text-muted">
                        El título debe ser descriptivo y claro sobre el contenido que desea generar
                    </small>
                </div>
                
                <div id="aiGenerationProgress" class="mt-3" style="display: none;">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Generando...</span>
                        </div>
                        <p class="mt-2">Generando contenido con IA, por favor espere...</p>
                    </div>
                </div>
                
                <div id="aiGeneratedContent" style="display: none;">
                    <h6 class="mt-3">Contenido Generado:</h6>
                    <div class="border p-3 rounded bg-light">
                        <h5 id="generatedTitle" class="mb-3"></h5>
                        <div id="generatedContent"></div>
                    </div>
                    
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label><strong>Meta Título:</strong></label>
                                <div id="generatedMetaTitle" class="text-muted"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label><strong>Palabras Clave:</strong></label>
                                <div id="generatedKeywords" class="text-muted"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label><strong>Meta Descripción:</strong></label>
                        <div id="generatedMetaDescription" class="text-muted"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="generateAiContent">
                    <i class="ri-magic-line"></i> Generar
                </button>
                <button type="button" class="btn btn-success" id="applyAiContent" style="display: none;">
                    <i class="ri-check-line"></i> Aplicar Contenido
                </button>
            </div>
        </div>
    </div>
</div>

@endif
@endsection

@section('customJs')
<script>
$(document).ready(function() {
    // Update slug preview when name changes
    $('#name').on('input', function() {
        const slug = $(this).val().toLowerCase()
            .replace(/[^a-z0-9\s-]/g, '')
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-')
            .trim('-');
        $('#slug-preview').text(slug || 'nombre-de-pagina');
    });
});

$("#pageForm").submit(function(event){
    event.preventDefault();
    var element = $(this);
    $("button[type=submit]").prop('disabled', true);
    
    $.ajax({
        url: '{{ route("pages.store") }}',
        type: 'post',
        data: element.serializeArray(),
        dataType: 'json',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response){
            $("button[type=submit]").prop('disabled', false);
            
            if (response["status"] == true) {
                Swal.fire(
                    '¡Éxito!',
                    response.message,
                    'success'
                ).then(() => {
                    window.location.href = "{{ route('pages.index')}}";
                });

                // Clear errors
                $(".error").removeClass('invalid-feedback').html("");
                $("input[type='text'], textarea").removeClass('is-invalid');

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

                // Clear previous errors
                $(".error").removeClass('invalid-feedback').html("");
                $("input[type='text'], textarea").removeClass('is-invalid');

                // Show new errors
                $.each(errors, function(key, value){
                    $(`#${key}`).addClass('is-invalid')
                    .siblings('.error')
                    .addClass('invalid-feedback')
                    .html(value);
                });

                Swal.fire(
                    'Error de Validación',
                    'Por favor, revise los campos marcados en rojo.',
                    'error'
                );
            }

        }, 
        error: function(jqXHR, exception){
            $("button[type=submit]").prop('disabled', false);
            Swal.fire(
                'Error',
                'Hubo un error al procesar la solicitud.',
                'error'
            );
        }
    });
});

$("#name").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"]);
                $('#slug-preview').text(response["slug"]);
            }
        },
        error: function() {
            $("button[type=submit]").prop('disabled', false);
        }
    });
});

// AI Writer functionality
let aiGeneratedData = null;

$('#aiWriterButton').click(function() {
    // Get the current name value and set it in the modal
    const currentName = $('#name').val();
    if (currentName) {
        $('#aiPageTitle').val(currentName);
    }
    $('#aiWriterModal').modal('show');
});

$('#generateAiContent').click(function() {
    const title = $('#aiPageTitle').val().trim();
    
    if (!title) {
        Swal.fire('Error', 'Por favor ingrese un título para la página', 'error');
        return;
    }
    
    // Show progress
    $('#aiGenerationProgress').show();
    $('#aiGeneratedContent').hide();
    $('#generateAiContent').prop('disabled', true);
    $('#applyAiContent').hide();
    
    $.ajax({
        url: '{{ route("pages.generateAiContent") }}',
        type: 'POST',
        data: {
            name: title,
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            $('#aiGenerationProgress').hide();
            $('#generateAiContent').prop('disabled', false);
            
            if (response.status) {
                aiGeneratedData = response.content;
                
                // Display generated content
                $('#generatedTitle').text(aiGeneratedData.name || title);
                $('#generatedContent').html(aiGeneratedData.content || '');
                $('#generatedMetaTitle').text(aiGeneratedData.meta_title || '');
                $('#generatedKeywords').text(aiGeneratedData.keywords || '');
                $('#generatedMetaDescription').text(aiGeneratedData.meta_description || '');
                
                $('#aiGeneratedContent').show();
                $('#applyAiContent').show();
            } else {
                Swal.fire('Error', response.message || 'Error al generar contenido', 'error');
            }
        },
        error: function(xhr) {
            $('#aiGenerationProgress').hide();
            $('#generateAiContent').prop('disabled', false);
            
            let errorMessage = 'Error al conectar con el servicio de IA';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            }
            
            Swal.fire('Error', errorMessage, 'error');
        }
    });
});

$('#applyAiContent').click(function() {
    if (!aiGeneratedData) return;
    
    // Apply generated content to form fields
    if (aiGeneratedData.name) {
        $('#name').val(aiGeneratedData.name).trigger('change');
    }
    
    if (aiGeneratedData.content) {
        $('#content').summernote('code', aiGeneratedData.content);
    }
    
    if (aiGeneratedData.meta_title) {
        $('#meta_title').val(aiGeneratedData.meta_title);
    }
    
    if (aiGeneratedData.keywords) {
        $('#meta_keywords').val(aiGeneratedData.keywords);
    }
    
    if (aiGeneratedData.meta_description) {
        $('#meta_description').val(aiGeneratedData.meta_description);
    }
    
    // Close modal
    $('#aiWriterModal').modal('hide');
    
    // Show success message
    Swal.fire({
        icon: 'success',
        title: 'Contenido Aplicado',
        text: 'El contenido generado por IA ha sido aplicado correctamente',
        showConfirmButton: false,
        timer: 2000
    });
});

// Reset modal when closed
$('#aiWriterModal').on('hidden.bs.modal', function() {
    $('#aiPageTitle').val('');
    $('#aiGenerationProgress').hide();
    $('#aiGeneratedContent').hide();
    $('#applyAiContent').hide();
    $('#generateAiContent').prop('disabled', false);
    aiGeneratedData = null;
});
</script>
@endsection