<?php include_once "encabezado1.php"; ?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Compras</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>

                body {
            font-family: 'Poppins', sans-serif;
            color: #333;
        }

        /* Estilos del chat box */
        .chat-box {
            position: fixed;
            bottom: 0;
            right: 20px;
            width: 300px;
            background-color: #ffffff;
            border: 1px solid #ccc;
            border-radius: 8px 8px 0 0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            display: none;
            flex-direction: column;
            z-index: 1000;
        }

        .chat-header {
            background-color: #81d4fa;
            color: #01579b;
            padding: 10px;
            border-radius: 8px 8px 0 0;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
        }

        .chat-messages {
            padding: 10px;
            height: 200px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .chat-input {
            display: flex;
            border-top: 1px solid #ccc;
        }

        .chat-input input {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 0 0 0 8px;
        }

        .chat-input button {
            padding: 10px;
            background-color: #81d4fa;
            color: #01579b;
            border: none;
            border-radius: 0 0 8px 0;
            cursor: pointer;
        }

        .chat-toggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #81d4fa;
            color: #01579b;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f0f4f8;
            color: #333;
        }

        .container {
            background-color: #ffffffcc;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            margin-top: 30px;
            max-width: 90%;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;
        }

        /* Estilo del título sin la rayita */
        .table-title {
            font-size: 24px;
            font-weight: 500;
            color: #01579b;
            text-align: center;
            margin-bottom: 20px;
        }

        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        table {
            background-color: #ffffffcc;
            border-radius: 8px;
            width: 100%;
            min-width: 1200px;
            table-layout: auto;
        }

        table thead {
            background-color: #81d4fa;
            color: #01579b;
            font-weight: 500;
        }

        table thead th {
            border: none;
            position: relative;
            padding: 12px;
            font-size: 14px;
            transition: color 0.3s ease;
        }

        table thead th i {
            margin-right: 6px;
        }

        table tbody tr:hover {
            background-color: #e1f5fe;
            transition: background-color 0.3s ease;
            transform: scale(1.01);
        }

        table tbody td {
            padding: 10px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="table-title">Cómpras</h2>
        <div class="row">
            <div class="col">
                <?php
                    date_default_timezone_set("America/Lima");
                    include 'conexion1.php';
                    $conectar = mysqli_connect($servidor, $nombre, $clave, $base);
                    $sql = "SELECT * FROM gastos";
                    $result = mysqli_query($conectar, $sql);
                ?>
                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr class="table-info">
                                <th><i class="fas fa-id-badge"></i> ID</th>
                                <th><i class="fas fa-calendar-alt"></i> FECHA_REGISTRO</th>
                                <th><i class="fas fa-clock"></i> HORA_REGISTRO</th>
                                <th><i class="fas fa-file-alt"></i> TIPO_DOCUMENTO</th>
                                <th><i class="fas fa-hashtag"></i> SERIE_CORRELATIVO</th>
                                <th><i class="fas fa-calendar"></i> FECHA_EMISION</th>
                                <th><i class="fas fa-id-card"></i> DNI_RUC</th>
                                <th><i class="fas fa-user-tie"></i> NOMBRE_PROVEEDOR</th>
                                <th><i class="fas fa-map-marker-alt"></i> DIRECCION</th>
                                <th><i class="fas fa-barcode"></i> CODIGO_PRO_SER</th>
                                <th><i class="fas fa-box"></i> PRODUCTO_SERVICIO</th>
                                <th><i class="fas fa-sort-numeric-up"></i> CANTIDAD</th>
                                <th><i class="fas fa-dollar-sign"></i> SUB_TOTAL</th>
                                <th><i class="fas fa-percentage"></i> IGV</th>
                                <th><i class="fas fa-money-bill-wave"></i> IMPORTE_TOTAL</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php while($mostrar = mysqli_fetch_array($result)): ?>
                            <tr>
                                <td>💼 <?php echo $mostrar["ID"] ?></td>
                                <td>📅 <?php echo $mostrar["FECHA_REGISTRO"] ?></td>
                                <td>⏰ <?php echo $mostrar["HORA_REGISTRO"] ?></td>
                                <td>📄 <?php echo $mostrar["TIPO_DOCUMENTO"] ?></td>
                                <td>#️⃣ <?php echo $mostrar["SERIE_CORRELATIVO"] ?></td>
                                <td>📅 <?php echo $mostrar["FECHA_EMISION"] ?></td>
                                <td>🆔 <?php echo $mostrar["DNI_RUC"] ?></td>
                                <td>👔 <?php echo $mostrar["NOMBRE_PROVEEDOR"] ?></td>
                                <td>📍 <?php echo $mostrar["DIRECCION"] ?></td>
                                <td>🔖 <?php echo $mostrar["CODIGO_PRO_SER"] ?></td>
                                <td>📦 <?php echo $mostrar["PRODUCTO_SERVICIO"] ?></td>
                                <td>🔢 <?php echo $mostrar["CANTIDAD"] ?></td>
                                <td>💲 <?php echo $mostrar["SUB_TOTAL"] ?></td>
                                <td>🧾 <?php echo $mostrar["IGV"] ?></td>
                                <td>💵 <?php echo $mostrar["IMPORTE_TOTAL"] ?></td>
                            </tr>
                            <?php endwhile; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Chat box -->
<div class="chat-box" id="chatBox">
    <div class="chat-header" onclick="toggleChat()">Ayuda</div>
    <div class="chat-messages" id="chatMessages">
        <p><strong>Asistente:</strong> Hola, ¿cómo puedo ayudarte?</p>
    </div>
    <div class="chat-input">
        <input type="text" id="userInput" placeholder="Escribe tu mensaje...">
        <button onclick="sendMessage()">Enviar</button>
    </div>
</div>
<button class="chat-toggle" onclick="toggleChat()">
    <i class="fas fa-comments"></i>
</button>

<script>
    function toggleChat() {
        var chatBox = document.getElementById("chatBox");
        chatBox.style.display = chatBox.style.display === "none" ? "flex" : "none";
    }

    function sendMessage() {
        var userInput = document.getElementById("userInput").value;
        var chatMessages = document.getElementById("chatMessages");

        if (userInput.trim() !== "") {
            // Añadir el mensaje del usuario
            var userMessage = document.createElement("p");
            userMessage.innerHTML = "<strong>Tú:</strong> " + userInput;
            chatMessages.appendChild(userMessage);

            // Limpiar el campo de entrada
            document.getElementById("userInput").value = "";

            // Añadir una respuesta del asistente
            var assistantMessage = document.createElement("p");
            assistantMessage.innerHTML = "<strong>Asistente:</strong> En esta plataforma, se registran las compras que realizastes ";
            chatMessages.appendChild(assistantMessage);

            // Desplazar hacia abajo el chat
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
    }

    // Inicializar el chat box oculto
    document.addEventListener("DOMContentLoaded", function() {
        document.getElementById("chatBox").style.display = "none";
    });
</script>


    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>