<?php require __DIR__ . '/../../includes/navBar.php'; ?>

<link rel="stylesheet" href="css/chatbot.css">

<div class="container my-5">

    <div class="row justify-content-center">

        <div class="col-xl-9 col-lg-10">

            <div class="card card-rounded card-shadow border-0">

                <!-- HEADER -->

                <div class="card-header header-dark px-4 py-3">

                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">

                        <div>

                            <h4 class="mb-0 title-shadow">

                                <i class="fas fa-comment-dots me-"></i>
                                Asistente ByteCenter

                            </h4>

                            <small class="text-light opacity-75">

                                Asistente interno del sistema

                            </small>

                        </div>

                    </div>

                </div>

                <!-- BODY -->

                <div class="card-body p-0 bg-white">

                    <!-- CHAT -->

                    <div id="chat-box" class="chatbot-body">

                        <?php if (empty($_SESSION['chat_historial'])): ?>

                            <!-- MENSAJE INICIAL -->

                            <div class="mensaje-bot">

                                <div class="mensaje-contenido">

                                    ¡Hola! 👋<br><br>

                                    Soy el asistente interno de ByteCenter.<br>

                                    Puedo ayudarte a utilizar los módulos del sistema,
                                    explicar funcionalidades y guiarte en distintas acciones.

                                </div>

                            </div>

                        <?php else: ?>

                            <?php foreach ($_SESSION['chat_historial'] as $msg): ?>

                                <div class="<?= $msg['role'] === 'user' ? 'mensaje-user' : 'mensaje-bot' ?>">

                                    <div class="mensaje-contenido">

                                        <?= nl2br(htmlspecialchars($msg['content'])) ?>

                                    </div>

                                </div>

                            <?php endforeach; ?>

                        <?php endif; ?>

                    </div>

                    <!-- FOOTER -->

                    <div class="chatbot-footer border-top p-3">

                        <form id="chat-form" novalidate>

                            <div class="input-group">

                                <input
                                    type="text"
                                    id="mensaje"
                                    class="form-control"
                                    placeholder="Escriba una consulta..."
                                    autocomplete="off"
                                    required>

                                <button
                                    type="submit"
                                    class="btn btn-success">

                                    <i class="fas fa-paper-plane"></i>

                                </button>

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

<script src="js/chatbot.js"></script>