@extends('admin.layouts.app')

@push('css')
<style>
.ai-coming-soon {
    background: #f8f9ff;
    border: 1px solid #e3e1fc;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 1rem;
    text-align: center;
}
</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 Nueva FAQ</h4>
            <div class="page-title-right">
                <a href="{{ route('faqs.index') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
	<form action="{{ route('faqs.store') }}" method="post" id="faqForm" name="faqForm">
		@csrf
			
			<!-- Nav tabs -->
			<div class="card">
				<div class="card-header p-0 pt-1">
					<ul class="nav nav-tabs" id="custom-tabs-faq-tab" role="tablist">
						<li class="nav-item">
							<a class="nav-link active" id="custom-tabs-faq-content-tab" data-bs-toggle="pill" href="#custom-tabs-faq-content" role="tab" aria-controls="custom-tabs-faq-content" aria-selected="true">
								<i class="ri-question-line"></i> Contenido
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="custom-tabs-faq-settings-tab" data-bs-toggle="pill" href="#custom-tabs-faq-settings" role="tab" aria-controls="custom-tabs-faq-settings" aria-selected="false">
								<i class="ri-settings-3-line"></i> Configuración
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="custom-tabs-faq-seo-tab" data-bs-toggle="pill" href="#custom-tabs-faq-seo" role="tab" aria-controls="custom-tabs-faq-seo" aria-selected="false">
								<i class="ri-search-line"></i> SEO
							</a>
						</li>
					</ul>
				</div>
				<div class="card-body">
					<div class="tab-content" id="custom-tabs-faq-tabContent">
						
						<!-- Tab 1: Contenido -->
						<div class="tab-pane fade show active" id="custom-tabs-faq-content" role="tabpanel" aria-labelledby="custom-tabs-faq-content-tab">
							<div class="row">
								<div class="col-md-8">
									<div class="card">
										<div class="card-header">
											<h3 class="card-title">Información de la FAQ</h3>
										</div>
										<div class="card-body">
											<div class="mb-3">
												<label for="name">Nombre/Título *</label>
												<input type="text" name="name" id="name" class="form-control" placeholder="Título de la FAQ" value="{{ old('name') }}" required>
												<small class="form-text text-muted">Ingrese el nombre de la FAQ. Este será utilizado para generar el slug automáticamente.</small>
												<p class="error"></p>
											</div>
											<div class="mb-3">
												<label for="slug">Slug</label>
												<input type="text" name="slug" id="slug" class="form-control" placeholder="URL amigable (se genera automáticamente)">
												<small class="form-text text-muted">El slug se genera automáticamente a partir del nombre o título.</small>
												<p class="error"></p>
											</div>
											<div class="mb-3">
												<label for="question">Pregunta *
													@if(aiIntegrationEnabled())
													<button type="button" class="btn btn-success btn-sm ms-2" onclick="openAiWriterForField('question')">
														<i class="ri-brain-line"></i> AI Writer
													</button>
													@endif
												</label>
												<textarea name="question" id="question" cols="30" rows="4" class="summernote" placeholder="Escriba la pregunta aquí">{{ old('question') }}</textarea>
												<small class="form-text text-muted">Escriba la pregunta que desea agregar a las FAQs.</small>
												<p class="error"></p>
											</div>
											<div class="mb-3">
												<label for="answer">Respuesta *
													@if(aiIntegrationEnabled())
													<button type="button" class="btn btn-success btn-sm ms-2" onclick="openAiWriterForField('answer')">
														<i class="ri-brain-line"></i> AI Writer
													</button>
													@endif
												</label>
												<textarea name="answer" id="answer" cols="30" rows="6" class="summernote" placeholder="Escriba la respuesta completa aquí">{{ old('answer') }}</textarea>
												<small class="form-text text-muted">Escriba la respuesta completa para la pregunta FAQ.</small>
												<p class="error"></p>
											</div>
										</div>
									</div>
								</div>
								<div class="col-md-4">
									<div class="card">
										<div class="card-header">
											<h3 class="card-title">Categoría</h3>
										</div>
										<div class="card-body">
											<div class="mb-3">
												<label for="faq_category_id">Categoría de FAQ *</label>
												<select class="form-select" id="faq_category_id" name="faq_category_id" required>
													<option value="">Seleccione una Categoría</option>
													@foreach($faq_categories as $faq_category)
														<option value="{{ $faq_category->id }}" {{ old('faq_category_id') == $faq_category->id ? 'selected' : '' }}>{{ $faq_category->name }}</option>
													@endforeach
												</select>
												<small class="form-text text-muted">Seleccione la categoría a la que pertenece esta FAQ.</small>
												<p class="error"></p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- Tab 2: Configuración -->
						<div class="tab-pane fade" id="custom-tabs-faq-settings" role="tabpanel" aria-labelledby="custom-tabs-faq-settings-tab">
							<div class="row">
								<div class="col-md-6">
									<div class="card">
										<div class="card-header">
											<h3 class="card-title">Estado de Publicación</h3>
										</div>
										<div class="card-body">
											<div class="mb-3">
												<label for="field_status">Estado *</label>
												<select name="status" id="field_status" class="form-select">
													<option value="1" {{ old('status', '1') == '1' ? 'selected' : '' }}>Activa</option>
													<option value="0" {{ old('status') == '0' ? 'selected' : '' }}>Inactiva</option>
												</select>
												<small class="form-text text-muted">Seleccione si esta FAQ estará activa o inactiva.</small>
											</div>
											<div class="mb-3">
												<label for="order">Orden</label>
												<input type="number" class="form-control" id="order" name="order" placeholder="0" value="{{ old('order', 0) }}" required>
												<small class="form-text text-muted">El orden determina la posición de esta FAQ en la lista. Un número más bajo aparecerá antes.</small>
											</div>
										</div>
									</div>
								</div>
								<div class="col-md-6">
									<div class="card">
										<div class="card-header">
											<h3 class="card-title">Información Adicional</h3>
										</div>
										<div class="card-body">
											<div class="alert alert-info">
												<i class="ri-information-line"></i> <strong>Consejos:</strong>
												<ul class="mb-0 mt-2">
													<li>Use un orden menor para FAQs más importantes</li>
													<li>Las FAQs inactivas no se mostrarán en el frontend</li>
													<li>Asigne una categoría adecuada para mejor organización</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- Tab 3: SEO -->
						<div class="tab-pane fade" id="custom-tabs-faq-seo" role="tabpanel" aria-labelledby="custom-tabs-faq-seo-tab">
							<div class="row">
								<div class="col-md-12">
									<div class="card">
										<div class="card-header">
											<h3 class="card-title">Optimización para Motores de Búsqueda</h3>
										</div>
										<div class="card-body">
											<div class="alert alert-info">
												<i class="ri-lightbulb-line"></i> <strong>Consejo:</strong> Optimice estos campos para mejorar la visibilidad de su FAQ en buscadores como Google.
											</div>
											<div class="row">
												<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="Título para resultados de búsqueda" value="{{ old('meta_title') }}">
														<small class="form-text text-muted">
															Máximo 60 caracteres recomendados. Si está vacío, se usará el nombre de la FAQ.
														</small>
													</div>
												</div>
												<div class="col-md-6">
													<div class="mb-3">
														<label for="meta_keywords">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="form-text text-muted">
															Palabras clave separadas por comas relacionadas con su FAQ.
														</small>
													</div>
												</div>
											</div>
											<div class="row">
												<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="Descripción breve y atractiva para resultados de búsqueda">{{ old('meta_description') }}</textarea>
														<small class="form-text text-muted">
															Máximo 160 caracteres recomendados. Si está vacía, se usará parte de la pregunta.
														</small>
													</div>
												</div>
											</div>
											
											<!-- AI Coming Soon Notice -->
											@if(aiIntegrationEnabled())
											<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 FAQ!</h6>
												<p class="text-muted mb-0">
													Una vez que crees la FAQ, podrás usar la inteligencia artificial para generar automáticamente contenido SEO optimizado.
													<br><small>Ve a "Editar" la FAQ para acceder a esta funcionalidad.</small>
												</p>
											</div>
											@endif
										</div>
									</div>
								</div>
							</div>
						</div>

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

		<div class="row">
			<div class="col-md-12">
				<div class="pb-5 pt-3">
					<button type="submit" class="btn btn-primary">Crear FAQ</button>
					<a href="{{ route('faqs.index') }}" class="btn btn-outline-dark ms-3">Cancelar</a>
				</div>
			</div>
		</div>
	</form>


@endsection

@section('customJs')

<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script>
    $(document).ready(function() {
        $('.summernote').summernote({
            height: 200,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ]
        });
    });

	// Generar slug automáticamente
	$("#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"]);
				}
			}
		});
	});

	// Enviar formulario
	$("#faqForm").submit(function(event){
		event.preventDefault();

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

		$.ajax({
			url: '{{ route("faqs.store") }}',
			type: 'post',
			data: formArray,
			dataType: 'json',
			success: function(response) {
				$("button[type=submit]").prop('disabled', false);
				if (response['status'] == true ){
					// Limpiar errores
					$(".error").removeClass('invalid-feedback').html("");
					$("input[type='text'], select, textarea").removeClass('is-invalid');

					window.location.href = "{{ route('faqs.index')}}";
				} else {
					var errors = response['errors'];

					$(".error").removeClass('invalid-feedback').html("");
					$("input[type='text'], select, textarea").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");
			}
		});
	});

	// Variable global para almacenar el contenido generado por IA
	let generatedAiContent = null;
	let currentAiField = 'both'; // 'question', 'answer', or 'both'
	
	// Nueva función para abrir AI Writer para un campo específico
	function openAiWriterForField(field) {
		currentAiField = field;
		$('#aiWriterModal').modal('show');
		
		// Auto-rellenar la categoría si ya está seleccionada
		const currentCategory = $('#faq_category_id').val();
		if (currentCategory) {
			$('#aiCategory').val(currentCategory);
		}
		
		// Actualizar el título del modal según el campo
		if (field === 'question') {
			$('#aiModalTitle').text('AI Writer - Generar Pregunta FAQ');
			$('#aiTopic').attr('placeholder', 'Ej: ¿Cómo realizar una devolución?');
		} else if (field === 'answer') {
			$('#aiModalTitle').text('AI Writer - Generar Respuesta FAQ');
			$('#aiTopic').attr('placeholder', 'Ej: Proceso detallado de devolución, requisitos y tiempos');
		} else {
			$('#aiModalTitle').text('AI Writer - Generador de FAQ');
			$('#aiTopic').attr('placeholder', 'Ej: ¿Cuánto tiempo tarda el envío? ó Políticas de devolución');
		}
	}
	
	// Mantener compatibilidad con el botón antiguo si existe
	$('#aiWriterBtn').on('click', function() {
		openAiWriterForField('both');
	});

	// Generar contenido con IA
	$('#generateAiContent').on('click', function() {
		const topic = $('#aiTopic').val().trim();
		
		if (!topic) {
			Swal.fire('Error', 'Por favor, ingresa un tema o pregunta para generar el contenido.', 'error');
			$('#aiTopic').focus();
			return;
		}
		
		const button = $(this);
		const originalText = button.html();
		
		// Mostrar estado de carga
		button.prop('disabled', true).html('<i class="ri-loader-line fa-spin"></i> Generando...');
		
		// Datos para enviar
		const data = {
			topic: topic,
			category_id: $('#aiCategory').val(),
			field: currentAiField, // Agregar el campo específico
			_token: $('meta[name="csrf-token"]').attr('content')
		};
		
		$.ajax({
			url: '{{ route("faqs.generate-ai-content") }}',
			type: 'POST',
			data: data,
			success: function(response) {
				if (response.status) {
					// Almacenar el contenido generado
					generatedAiContent = response.data;
					
					// Mostrar vista previa
					displayAiPreview(response.data);
					
					// Mostrar botón de aplicar
					$('#applyAiContent').show();
					
					// Mensaje de éxito
					$('#aiPreviewArea').prepend(`
						<div class="alert alert-success alert-dismissible fade show" role="alert">
							<i class="ri-checkbox-circle-line"></i> ¡Contenido generado exitosamente!
							<button type="button" class="btn-close" data-bs-dismiss="alert">
								<span>&times;</span>
							</button>
						</div>
					`);
				} else {
					Swal.fire('Error', response.message, 'error');
				}
			},
			error: function(xhr) {
				let errorMessage = 'Error al generar contenido con IA';
				if (xhr.responseJSON && xhr.responseJSON.message) {
					errorMessage = xhr.responseJSON.message;
				}
				Swal.fire('Error', errorMessage, 'error');
			},
			complete: function() {
				button.prop('disabled', false).html(originalText);
			}
		});
	});

	// Aplicar contenido generado por IA
	$('#applyAiContent').on('click', function() {
		if (!generatedAiContent) {
			Swal.fire('Atención', 'No hay contenido generado para aplicar', 'warning');
			return;
		}
		
		// Aplicar según el campo seleccionado
		if (currentAiField === 'question') {
			$('#question').summernote('code', generatedAiContent.question);
		} else if (currentAiField === 'answer') {
			$('#answer').summernote('code', generatedAiContent.answer);
		} else {
			// Aplicar todos los campos
			$('#question').summernote('code', generatedAiContent.question);
			$('#answer').summernote('code', generatedAiContent.answer);
			
			// Aplicar SEO solo cuando se generan ambos campos
			$('#meta_title').val(generatedAiContent.meta_title);
			$('#meta_description').val(generatedAiContent.meta_description);  
			$('#meta_keywords').val(generatedAiContent.meta_keywords);
		}
		
		// Generar nombre basado en la pregunta
		const questionText = $('<div>').html(generatedAiContent.question).text();
		const name = questionText.substring(0, 50);
		$('#name').val(name);
		
		// Generar slug del nombre
		$.ajax({
			url: '{{ route("getSlug") }}',
			type: 'get',
			data: {title: name},
			dataType: 'json',
			success: function(response) {
				if(response.status == true) {
					$("#slug").val(response.slug);
				}
			}
		});
		
		// Cerrar modal
		$('#aiWriterModal').modal('hide');
		
		// Mostrar mensaje de éxito
		$('<div class="alert alert-success alert-dismissible fade show" role="alert">' +
			'<i class="ri-checkbox-circle-line"></i> Contenido aplicado exitosamente. Revisa y ajusta según necesites.' +
			'<button type="button" class="btn-close" data-bs-dismiss="alert"><span>&times;</span></button>' +
			'</div>').prependTo('.container-fluid').delay(5000).fadeOut();
	});

	// Función para mostrar vista previa del contenido generado
	function displayAiPreview(data) {
		let previewHtml = '<div class="card"><div class="card-body">';
		
		// Mostrar solo los campos relevantes según currentAiField
		if (currentAiField === 'question' || currentAiField === 'both') {
			previewHtml += `
				<h6 class="text-primary"><i class="ri-question-line"></i> Pregunta:</h6>
				<p><strong>${data.question}</strong></p>
			`;
		}
		
		if (currentAiField === 'answer' || currentAiField === 'both') {
			previewHtml += `
				<h6 class="text-primary"><i class="ri-chat-quote-line"></i> Respuesta ${currentAiField === 'both' ? '(Vista previa)' : ''}:</h6>
				<div class="border p-2 mb-2" style="max-height: 200px; overflow-y: auto;">
					${data.answer.substring(0, 300)}${data.answer.length > 300 ? '...' : ''}
				</div>
			`;
		}
		
		// Mostrar SEO solo cuando se generan ambos campos
		if (currentAiField === 'both' && data.meta_title) {
			previewHtml += `
				<div class="row">
					<div class="col-md-6">
						<h6 class="text-primary"><i class="ri-search-line"></i> SEO Meta Title:</h6>
						<p><small>${data.meta_title}</small></p>
					</div>
					<div class="col-md-6">
						<h6 class="text-primary"><i class="ri-price-tag-lines"></i> Keywords:</h6>
						<p><small>${data.meta_keywords}</small></p>
					</div>
				</div>
				
				<h6 class="text-primary"><i class="ri-information-line"></i> Meta Description:</h6>
				<p><small>${data.meta_description}</small></p>
			`;
		}
		
		previewHtml += '</div></div>';
		
		$('#aiPreviewContent').html(previewHtml);
		$('#aiPreviewArea').show();
	}
</script>

<!-- 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-brain-line text-success"></i> <span id="aiModalTitle">AI Writer - Generador de FAQ</span>
				</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">
				<form id="aiGenerationForm">
					<div class="row">
						<div class="col-md-8">
							<div class="mb-3">
								<label for="aiTopic">Tema o Pregunta <span class="text-danger">*</span></label>
								<input type="text" class="form-control" id="aiTopic" name="topic" placeholder="Ej: ¿Cuánto tiempo tarda el envío? ó Políticas de devolución">
								<small class="form-text text-muted">Puede ser una pregunta específica o un tema general para generar la FAQ</small>
							</div>
						</div>
						<div class="col-md-4">
							<div class="mb-3">
								<label for="aiCategory">Categoría (opcional)</label>
								<select class="form-select" id="aiCategory" name="category_id">
									<option value="">Sin categoría específica</option>
									@foreach($faq_categories as $category)
										<option value="{{ $category->id }}">{{ $category->name }}</option>
									@endforeach
								</select>
							</div>
						</div>
					</div>
					
					<div class="alert alert-info">
						<i class="ri-information-line"></i>
						<strong>¿Cómo funciona?</strong> Nuestro AI Writer creará una pregunta natural y una respuesta completa basada en el tema que proporciones. También generará metadatos SEO optimizados.
					</div>
				</form>
				
				<!-- Preview Area -->
				<div id="aiPreviewArea" style="display: none;">
					<hr>
					<h6><i class="ri-eye-line"></i> Vista Previa del Contenido Generado</h6>
					<div id="aiPreviewContent">
						<!-- Generated content will appear here -->
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
					<i class="ri-close-line"></i> Cancelar
				</button>
				<button type="button" class="btn btn-success" id="generateAiContent">
					<i class="ri-brain-line"></i> Generar FAQ
				</button>
				<button type="button" class="btn btn-primary" id="applyAiContent" style="display: none;">
					<i class="ri-check-line"></i> Aplicar Contenido
				</button>
			</div>
		</div>
	</div>
</div>
@endif

@endsection