@php
$VerEditor =  auth()->user()->can('Mecánico IA - Visor') || auth()->user()->can('Mecánico IA - Editor')
@endphp
@if($VerEditor)
@extends('layouts/app')
@section('tituloModulo', 'CONSULTAS IA')
@section('contenido')
    <style>
        .small-text {
            font-size: 13px;
        }

        /* Estilos para el loader */
        #loader {
            display: none;
            position: fixed;
            z-index: 9999;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255, 0.8);
            text-align: center;
            font-family: Arial, sans-serif;
        }

        #loader .content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* Estilo del texto del loader */
        #loader h2 {
            font-size: 24px;
            color: #3498db; /* Mismo color que los círculos */
            font-weight: bold;
            margin-bottom: 20px;
        }

        #loader p {
            color: #3498db; /* Mismo color que los círculos */
            margin-top: 20px;
        }

        /* Estilo del spinner */
        #loader .spinner {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        #loader .spinner div {
            width: 50px;
            height: 50px;
            margin: 10px;
            background-color: #3498db;
            border-radius: 100%;
            animation: sk-bounce 1.4s infinite ease-in-out both;
        }

        @keyframes sk-bounce {
            0%, 100% { transform: scale(0.0); }
            50% { transform: scale(1.0); }
        }
    </style>
<div class="container mt-5">
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Conversaciones</h5>
                    <a href="{{ route('mecanico.ia.nueva_conversacion') }}" class="btn btn-success mb-3">Nueva Conversación</a>
                    <ul class="list-group list-group-flush small-text">
                        @if($conversaciones->isNotEmpty())
                            @foreach($conversaciones as $conversacion)
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <a href="{{ route('mecanico.ia.conversacion', ['id' => $conversacion->id]) }}">
                                        <strong>Pregunta: </strong>{{ Str::limit(optional($conversacion->preguntas->first())->pregunta_ia, 50) ?? 'No hay preguntas aún.' }}
                                    </a>
                                    <form action="{{ route('mecanico.ia.eliminar_conversacion', ['id' => $conversacion->id]) }}" method="POST" onsubmit="return confirm('¿Estás seguro de que deseas eliminar esta conversación?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm"><i class="fa-regular fa-trash-can"></i></button>
                                    </form>
                                </li>
                            @endforeach
                        @else
                            <li class="list-group-item">
                                No hay conversaciones disponibles.
                            </li>
                        @endif
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Consultas</h5>
                    <div id="chat-history" class="small-text">
                        @if($conversacion && $conversacion->preguntas->isNotEmpty())
                            @foreach($conversacion->preguntas as $pregunta)
                                <div class="mb-2">
                                    <strong>Pregunta:</strong> {{ $pregunta->pregunta_ia }}<br>
                                    <strong>Respuesta:</strong> {!!  $pregunta->respuesta_ia !!}
                                    </div>
                                @endforeach
                        @else
                            <div class="mb-2">
                                <p>No hay preguntas en esta conversación.</p>
                            </div>
                        @endif
                    </div>
                    <form id="question-form">
                        @csrf
                        <div class="row">
                            <div class="col-md-9">
                                <textarea class="form-control" id="question" name="question" placeholder="Escribe tu pregunta:" required></textarea>
                            </div>
                            <div class="col-md-3">
                                <button type="submit" id="btn" class="btn btn-primary">Consultar</button>
                            </div>
                        </div>
                    </form>
                    <div id="response" class="mt-4"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Loader -->
<div id="loader">
    <div class="content">
        <div class="spinner">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <h2>El Blog del auto</h2> <!-- Texto -->
        <p>Procesando, por favor espere...</p>
    </div>
</div>
<div id="response" class="mt-4" aria-live="polite"></div>
    <script>
        $(document).ready(function(){
            $('#question-form').on('submit', function(event){
                event.preventDefault();
                // Mostrar el loader
                document.getElementById('loader').style.display = 'block';
                // Deshabilitar el botón para evitar múltiples envíos
                document.getElementById('btn').disabled = true;
                var question = $('#question').val();

                $.ajax({
                    url: '{{ route('mecanico.ia.consultar') }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        question: question
                    },
                    success: function(response){
                        // Añadir la nueva pregunta y respuesta al historial
                        $('#chat-history').append('<div class="mb-2"><strong>Pregunta:</strong> ' + question + '<br><strong>Respuesta:</strong> ' + response.answer + '</div>');
                        $('#question').val(''); // Limpiar el campo de la pregunta
                    },
                    error: function(){
                        $('#response').html('<div class="alert alert-danger">Ha ocurrido un error. Inténtalo de nuevo.</div>');
                    },
                    complete: function() {
                        // Ocultar el loader
                        document.getElementById('loader').style.display = 'none';
                        // Habilitar el botón nuevamente
                        document.getElementById('btn').disabled = false;
                    }
                });
            });
        });
    </script>
@endsection
@endif