<?php
require_once "conexion.php";

 if (isset($_GET["sup_id"])) {
        $condicion = $_GET["sup_id"];
    } else {
        $condicion = "1"; // Condici�n por defecto si no se ha enviado nada por GET
    }
$sup_id = $condicion; // Reemplaza esto con el valor real de sup_id

$sql = "SELECT p.p_id, p.p_code, p.p_name, p.category_id, pts.sell_price, pts.taxrate_id, pts.purchase_price, pts.quantity_in_stock, categorys.category_name, taxrates.taxrate, taxrates.taxrate_name
        FROM products p
        LEFT JOIN product_to_store pts ON p.p_id = pts.product_id
		JOIN categorys ON p.category_id = categorys.category_id
		JOIN taxrates ON pts.taxrate_id = taxrates.taxrate_id
        WHERE pts.sup_id = $sup_id
		ORDER BY p.category_id";

$result = $conn->query($sql);
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Consulta de Productos</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }

        .editable {
            position: relative;
            background-color: #99CCCC;
            border: 1px solid #ccc;
            padding: 3px;
        }

        .editable input {
            width: 100%;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 3px;
        }

        /* Estilo para sombrear el texto editable */
        .editable.editing {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <?php
    if ($result->num_rows > 0) {
        echo "<table>";
        echo "<thead>";
        echo "<tr>";
        echo "<th>ID</th>";
        echo "<th>Codigo</th>";
		echo "<th>Nombre</th>";
        echo "<th>Categoria</th>";
		echo "<th>Impuesto</th>";
        echo "<th>Precio final con utilidad</th>";
        echo "<th>Precio neto venta</th>";
        echo "<th>Cantidad en Stock</th>";
        echo "</tr>";
        echo "</thead>";
        echo "<tbody>";
        while ($row = $result->fetch_assoc()) {
            echo "<tr>";
            echo "<td>" . $row["p_id"] . "</td>";
            echo "<td data-column='p_code' data-id='" . $row["p_id"] . "'>" . $row["p_code"] . "</td>";
            echo "<td data-column='p_name' data-id='" . $row["p_id"] . "'>" . $row["p_name"] . "</td>";
			echo "<td data-column='category_name' data-id='" . $row["p_id"] . "'>" . $row["category_name"] . "</td>";
			echo "<td data-column='taxrate_name' data-id='" . $row["p_id"] . "'>" . $row["taxrate_name"] . "</td>";
            echo "<td data-column='sell_price' data-id='" . $row["p_id"] . "'>" . ((($row["sell_price"] * $row["taxrate"]) /100) + $row["sell_price"]) . "</td>";
            echo "<td class='editable' data-column='sell_price' data-id='" . $row["p_id"] . "'>" . $row["sell_price"] . "</td>";
            echo "<td data-column='quantity_in_stock' data-id='" . $row["p_id"] . "'>" . $row["quantity_in_stock"] . "</td>";
            echo "</tr>";
        }
        echo "</tbody>";
        echo "</table>";
    } else {
        echo "No se encontraron registros.";
    }

    $conn->close();
    ?>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll(".editable").forEach(function (element) {
                element.addEventListener("click", function () {
                    var originalContent = this.textContent;
                    this.innerHTML = "<input type='text' value='" + originalContent + "' />";
                    var inputElement = this.querySelector("input");
                    inputElement.focus();

                    inputElement.addEventListener("keypress", function (e) {
                        if (e.which == 13) {
                            var newContent = inputElement.value;
                            var column = element.dataset.column;
                            var id = element.dataset.id;

                            // Aqu� realizamos la actualizaci�n usando AJAX
                            $.ajax({
                                type: "POST",
                                url: "update_product.php",
                                data: { id: id, column: column, newContent: newContent },
                                success: function (data) {
                                    // Despu�s de la actualizaci�n, actualizamos el contenido en la celda
                                    element.textContent = newContent;
                                },
                                error: function () {
                                    // Manejar errores si es necesario
                                    alert("Error al actualizar. Intentelo de nuevo.");
                                }
                            });
                        }
                    });

                    inputElement.addEventListener("blur", function () {
                        // Si el usuario hace clic fuera del cuadro de entrada, restauramos el contenido original
                        element.textContent = originalContent;
                    });
                });
            });
        });
    </script>
</body>
</html>
