<?php
declare(strict_types=1);

include 'sesion.php';
include 'concha.php';
include 'concha_extras.php';

if (isset($conn) && $conn instanceof mysqli) {
    $conn->set_charset('utf8mb4');
} else {
    $conn = new mysqli($host, $usuario, $contra, $basedatos);
    if ($conn->connect_error) {
        die('Error de conexión: ' . $conn->connect_error);
    }
    $conn->set_charset('utf8mb4');
}

$mensaje = '';
$colorFinal = '#ffffff';
$id = 0;

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $colorPost = isset($_POST['yui-picker-hex']) ? trim((string)$_POST['yui-picker-hex']) : '';
    $id = isset($_POST['ID']) ? (int)$_POST['ID'] : 0;

    $colorPost = ltrim($colorPost, '#');

    if (preg_match('/^[A-Fa-f0-9]{6}$/', $colorPost) && $id > 0) {
        $colorFinal = '#' . $colorPost;

        $stmt = $conn->prepare("UPDATE categorias SET color = ? WHERE ID = ?");
        if ($stmt) {
            $stmt->bind_param('si', $colorFinal, $id);

            if ($stmt->execute()) {
                $mensaje = 'EL COLOR FUE CAMBIADO';
            } else {
                $mensaje = 'NO SE PUDO ACTUALIZAR EL COLOR';
            }

            $stmt->close();
        } else {
            $mensaje = 'ERROR AL PREPARAR LA CONSULTA';
        }
    } else {
        $mensaje = 'DATOS INVÁLIDOS';
    }
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Panel de Administracion">
    <meta name="author" content="<?php echo htmlspecialchars((string)$nombresitio, ENT_QUOTES, 'UTF-8'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title><?php echo htmlspecialchars((string)$nombresitio, ENT_QUOTES, 'UTF-8'); ?> - Panel de Administracion</title>

    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900&display=swap" rel="stylesheet">
    <link rel="shortcut icon" href="" type="image/x-icon">
    <link rel="apple-touch-icon" href="">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

    <style>
        .carousel-cell {
            width: 66%;
            margin-right: 5px;
        }

        .display-flex {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        * {
            border-radius: 0 !important;
        }

        body {
            background: #e4e4e4;
        }

        .btn, a, h1, h2, h3, h4, h5, h6, b {
            font-family: 'Montserrat', sans-serif;
        }

        .btn, h1, h2, h3, h4, h5, h6 {
            font-weight: 600;
        }

        .navbar {
            position: relative;
            min-height: 50px;
            padding-bottom: 20px;
        }

        .btn-primary {
            color: #fff !important;
            background-color: #0066FF;
            border-color: #0066FF;
        }

        .page-header {
            margin: 0;
            padding: 1em;
            background-color: #0066FF;
            border: 0;
            text-align: center;
        }

        .page-header h2 {
            color: #ffffff;
            font-weight: bold;
        }

        .bloqueAzul {
            text-align: center;
        }

        .bloqueAzul .div {
            border: 1px solid #e4e4e4;
            background-color: #fff;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        .far {
            color: #0066FF;
        }

        .faso {
            color: #fff;
        }

        .colorAzul h3 {
            color: #0066FF;
        }
    </style>

    <script>
        function ventanaSecundaria(URL) {
            window.open(URL, "ventana1", "width=550,height=450,scrollbars=NO");
        }
    </script>
</head>
<body>

    <div class="container" style="background-color:#F1F2ED;">
        <?php
        if ($estiloweb == 9 || $estiloweb == 85 || $estiloweb == 86) {
            include 'menu_estilo9.php';
        } else {
            include 'menu.php';
        }
        ?>
    </div>

    <div
        role="main"
        class="container pt-3"
        style="background-color:#fff;min-height:80vh;<?php if ($estiloweb == 9 || $estiloweb == 85 || $estiloweb == 86) { echo 'margin-top:120px;'; } ?>"
    >
        <div class="page-header" style="text-align:center;">
            <h2><?php echo isset($idioma_100116) ? htmlspecialchars((string)$idioma_100116, ENT_QUOTES, 'UTF-8') : 'Administración'; ?></h2>
        </div>

        <div class="col-12 my-3 text-center">
            <p class="Estilo41" align="center">
                <?php echo htmlspecialchars($mensaje, ENT_QUOTES, 'UTF-8'); ?><br><br>
            </p>

            <table width="30%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="<?php echo htmlspecialchars($colorFinal, ENT_QUOTES, 'UTF-8'); ?>">
                <tr>
                    <td>&nbsp;</td>
                </tr>
            </table>

            <p align="center">
                <a href="agregar_cat.php" class="Estilo29">Volver</a>
            </p>

            <p align="center" class="Estilo41">&nbsp;</p>
        </div>
    </div>

    <script>
        // setTimeout(function(){ window.history.back() }, 1000);
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

    <script>
        window.setTimeout(function () {
            $('.grid').isotope({
                itemSelector: '.grid-item'
            });
            console.log('qwe');
        }, 3000);

        function ventanaSecundaria56(URL) {
            window.open(URL, "ventana1", "width=960,height=630,scrollbars=NO");
        }
    </script>

    <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>

</body>
</html>