<?php
    include'../conectabanco.php';

    if ($_SERVER["REQUEST_METHOD"] === "POST") {
        $idmacduarte = $_POST["idmacduarte"] ?? "";
        $nome        = $_POST["nome"]        ?? "";
        $r           = $_POST["r"]           ?? "";
        $g           = $_POST["g"]           ?? "";
        $b           = $_POST["b"]           ?? "";
        $linhaum     = $_POST["linhaum"]     ?? "";
        $linhadois   = $_POST["linhadois"]   ?? "";

        if (!empty($idmacduarte) && !empty($nome)
            && !empty($r) && !empty($g)
            && !empty($b) && !empty($linhaum)
            && !empty($linhadois)
        ) {
            $sql = "INSERT INTO painelduarte (macduarte_idmacduarte, nome, ledr, ledg, ledb, linhaum, linhadois)
                    VALUES (:idmacduarte, :nome, :r, :g, :b, :linhaum, :linhadois)";

            $stmt = $conn->prepare($sql);
            $stmt->bindParam(":idmacduarte", $idmacduarte);
            $stmt->bindParam(":nome",        $nome);
            $stmt->bindParam(":r",           $r);
            $stmt->bindParam(":g",           $g);
            $stmt->bindParam(":b",           $b);
            $stmt->bindParam(":linhaum",     $linhaum);
            $stmt->bindParam(":linhadois",   $linhadois);
            $stmt->execute();
        } else {
            echo "<p class='erro'>Preencha todos os campos.</p>";
        }
    }
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Painel LED</title>
    <style>
        :root {
            --bg-page:       #0d0d0d;
            --bg-card:       #1a1a1a;
            --bg-input:      #111111;
            --border:        #2e2e2e;
            --verde:         #1a7a3a;
            --verde-hover:   #0f4e24;
            --verde-claro:   #2da84f;
            --branco:        #f0f0f0;
            --cinza:         #888888;
            --vermelho:      #e03535;
            --azul:          #3578e0;
            --texto:         #e8e8e8;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            background-color: var(--bg-page);
            color: var(--texto);
            padding: 30px 20px;
        }

        h1 {
            text-align: center;
            color: var(--verde-claro);
            font-size: 20px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 30px;
        }

        /* ===== Container ===== */
        .container {
            max-width: 640px;
            margin: 0 auto 30px auto;
            background-color: var(--bg-card);
            padding: 28px 30px;
            border-radius: 8px;
            border: 1px solid var(--border);
            border-top: 3px solid var(--verde);
        }

        /* ===== Formulário ===== */
        .container form {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        label {
            display: flex;
            flex-direction: column;
            gap: 5px;
            font-size: 13px;
            font-weight: bold;
            color: var(--cinza);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* Grupo de LEDs lado a lado */
        .led-group {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 12px;
        }

        .led-group label span {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
            vertical-align: middle;
        }

        .led-r span { background-color: var(--vermelho); }
        .led-g span { background-color: var(--verde-claro); }
        .led-b span { background-color: var(--azul); }

        input[type="text"],
        input[type="number"] {
            background-color: var(--bg-input);
            border: 1px solid var(--border);
            border-radius: 4px;
            color: var(--texto);
            font-size: 14px;
            padding: 8px 10px;
            width: 100%;
            transition: border-color 0.2s;
        }

        input[type="text"]:focus,
        input[type="number"]:focus {
            outline: none;
            border-color: var(--verde);
            box-shadow: 0 0 0 2px rgba(26, 122, 58, 0.25);
        }

        button[type="submit"] {
            align-self: flex-start;
            background-color: var(--verde);
            color: var(--branco);
            border: none;
            padding: 10px 28px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            letter-spacing: 0.04em;
            transition: background-color 0.2s;
        }

        button[type="submit"]:hover {
            background-color: var(--verde-hover);
        }

        .erro {
            background-color: rgba(224, 53, 53, 0.15);
            border: 1px solid var(--vermelho);
            color: #f08080;
            padding: 10px 14px;
            border-radius: 4px;
            font-size: 13px;
            margin-bottom: 10px;
        }

        /* ===== Tabela ===== */
        .container.tabela {
            max-width: 900px;
            overflow-x: auto;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            font-size: 13px;
        }

        th, td {
            border: 1px solid var(--border);
            padding: 10px 12px;
            text-align: center;
            white-space: nowrap;
        }

        th {
            background-color: var(--verde-hover);
            color: var(--branco);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: 12px;
        }

        tr:nth-child(even) td {
            background-color: #1f1f1f;
        }

        tr:nth-child(odd) td {
            background-color: var(--bg-card);
        }

        tr:hover td {
            background-color: #2a3d2e;
            color: var(--branco);
        }

        /* Bolinha de cor RGB na tabela */
        .led-preview {
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            vertical-align: middle;
            border: 1px solid #333;
        }
    </style>
</head>
<body>

<h1>Painel de Controle LED</h1>

<!-- Formulário -->
<div class="container">
    <form method="post" action="">
        <label>ID MAC
            <input type="text" name="idmacduarte" required>
        </label>
        <label>Nome
            <input type="text" name="nome" required>
        </label>

        <div class="led-group">
            <label class="led-r"><span></span>LED R (0–255)
                <input type="text" name="r" required>
            </label>
            <label class="led-g"><span></span>LED G (0–255)
                <input type="text" name="g" required>
            </label>
            <label class="led-b"><span></span>LED B (0–255)
                <input type="text" name="b" required>
            </label>
        </div>

        <label>Linha 1
            <input type="text" name="linhaum" required>
        </label>
        <label>Linha 2
            <input type="text" name="linhadois" required>
        </label>

        <button type="submit">Salvar</button>
    </form>
</div>

<!-- Tabela -->
<div class="container tabela">
    <table>
        <thead>
            <tr>
                <th>ID Painel</th>
                <th>ID MAC</th>
                <th>Nome</th>
                <th>R</th>
                <th>G</th>
                <th>B</th>
                <th>Cor</th>
                <th>Linha 1</th>
                <th>Linha 2</th>
            </tr>
        </thead>
        <tbody>
        <?php
        try {
            $sql = 'SELECT * FROM painelduarte';
            $resultado = $conn->query($sql);

            foreach ($resultado as $row) {
                $r_val = (int)$row[3];
                $g_val = (int)$row[4];
                $b_val = (int)$row[5];
                echo "<tr>";
                echo "<td>{$row[0]}</td>";
                echo "<td>{$row[1]}</td>";
                echo "<td>{$row[2]}</td>";
                echo "<td>{$r_val}</td>";
                echo "<td>{$g_val}</td>";
                echo "<td>{$b_val}</td>";
                echo "<td><span class='led-preview' style='background:rgb({$r_val},{$g_val},{$b_val})'></span></td>";
                echo "<td>{$row[6]}</td>";
                echo "<td>{$row[7]}</td>";
                echo "</tr>";
            }
        } catch (PDOException $erro) {
            echo "<tr><td colspan='9' style='color:#f08080'>" . $erro->getMessage() . "</td></tr>";
        }
        ?>
        </tbody>
    </table>
</div>

</body>
</html>