<?php include 'sesion.php'; ?>
<?php include 'concha.php'; ?>
<?php include 'tiny.php'; ?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="Panel de Administracion">
    <meta name="author" content="<?php echo $nombresitio; ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title><?php echo $nombresitio; ?> - 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" crossorigin="anonymous">
    <link rel="stylesheet" href="">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 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-image: url(../fondeux.jpg);
            background-position: top center;
            background-repeat: repeat-x;
            background-color: #EBEBEB;
            height: 100%;
        }

        .btn, a, h1, h2, h3, h4, h5, h6, b, label, p, input, select {
            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;
            margin: 0;
        }

        .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;
        }

        .grid-item {
            border: 1px solid #ccc;
            background: #fff;
        }

        .titulo-categoria {
            word-break: break-word;
        }

        .bloque-separador {
            border-top: 1px solid #ddd;
            margin-top: 20px;
            padding-top: 20px;
        }

        .acciones-links a {
            color: #0066FF;
            font-weight: 600;
            text-decoration: none;
        }

        .acciones-links a:hover {
            text-decoration: underline;
        }
    </style>

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

<body>
    <div class="container" style="background-color:#F1F2ED;">
        <?php include 'menu.php'; ?>
    </div>

    <div role="main" style="background-color:#fff;" class="container pt-3">
        <div class="page-header" style="text-align:center;">
            <h2><?php echo $idioma_100224; ?></h2>
        </div>

        <div class="row my-3">
            <div class="col-12">
                <form id="form1" name="form1" method="post" action="form_agregar_cat.php" enctype="multipart/form-data">
                    <div class="form-group">
                        <label><?php echo $idioma_100225; ?></label>
                        <input class="form-control" type="text" name="nombre" id="nombre" />
                    </div>

                    <div>
                        <input type="submit" name="button" id="button" value="CREAR LA CATEGORIA" class="btn btn-primary" />
                    </div>

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

            <div class="col-12">
                <p>EN LA SECCIÓN INFERIOR DE ESTA PAGINA PODRAS VER TODAS LAS CATEGORIAS QUE TIENES CREADAS EN TU PORTAL.</p>
                <p>SI QUIERES COLOCAR LAS NOTICIAS DE ALGUNA DE ESTAS CATEGORIAS EN EL HOME,TIENES 4 FORMAS DIFERENTES PARA MOSTRARLAS.</p>
                <p>A CONTINUACIÓN PODRAS VER LOS 4 ESTILOS, CADA UNO TIENE UNA CANTIDAD DIFERENTES DE NOTICIAS Y TAMBIEN CAMBIA EL TAMAÑO DE LAS FOTOS</p>
                <hr>

                <div class="row">
                    <div class="text-center col-6 mb-3">
                        <img src="estilo1.PNG" class="img-fluid" />
                    </div>
                    <div class="text-center col-6 mb-3">
                        <img src="estilo2.PNG" class="img-fluid" />
                    </div>
                    <div class="text-center col-6 mb-3">
                        <img src="estilo3.PNG" class="img-fluid" />
                    </div>
                    <div class="text-center col-6 mb-3">
                        <img src="estilo4.PNG" class="img-fluid" />
                    </div>
                </div>

                <hr>

                <p>SI QUIERES COLOCAR UNA CATEGORIA CON NOTICIAS EN EL HOME DE LA WEB, SELECCIONA UN NUMERO EN EL CAMPO "ESTILO ACTUAL" DE LA CATEGORÍA QUE QUIERAS COLOCAR.</p>
                <p>EL CAMPO LUGAR DETERMINA QUE CATEGORIA SALE PRIMERA EN EL ORDEN.</p>
            </div>
        </div>

        <h1>CATEGORÍAS CREADAS</h1>

        <div class="grid row">
            <?php
            $sql = "SELECT * FROM categorias ORDER BY nombre";
            $consulta = $conn->query($sql);

            while ($row = $consulta->fetch_assoc()) {
                $ID_p      = (int)$row["ID"];
                $nombre    = $row["nombre"];
                $color_cat = $row["color"];
                $home      = (int)$row["home"];
                $orden     = (int)$row["orden"];
            ?>
                <div class="grid-item p-4 mb-3 col-md-6">
                    <ul class="mb-3 p-0 d-flex justify-content-between align-items-center">
                        <li class="pr-2">
                            <h3 class="m-0 titulo-categoria" style="color:<?php echo htmlspecialchars($color_cat, ENT_QUOTES, 'UTF-8'); ?>;">
                                <?php echo htmlspecialchars($nombre, ENT_QUOTES, 'UTF-8'); ?>
                            </h3>
                        </li>
                        <li>
                            <a class="btn btn-primary" href="paleta_cat.php?ID=<?php echo $ID_p; ?>">
                                <?php echo $idioma_100226; ?>
                            </a>
                        </li>
                    </ul>

                    <form method="post" action="form_dar_lugar_cat.php">
                        <input name="ID_p" type="hidden" value="<?php echo $ID_p; ?>" />

                        <div class="form-group">
                            <label for="orden_<?php echo $ID_p; ?>">
                                <?php echo $idioma_100227; ?> <?php echo $idioma_100231; ?> <?php echo $orden; ?>
                            </label>
                            <select class="form-control" id="orden_<?php echo $ID_p; ?>" name="orden">
                                <?php
                                for ($i = 1; $i <= 20; $i++) {
                                    $selected = ($orden === $i) ? ' selected="selected"' : '';
                                    echo '<option value="' . $i . '"' . $selected . '>' . $i . '</option>';
                                }
                                ?>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="home_<?php echo $ID_p; ?>">
                                <?php
                                if ($home === 0) {
                                    echo 'NO APARECE EN HOME';
                                } else {
                                    echo 'EN HOME (estilo ' . $home . ')';
                                }
                                ?>
                            </label>
                            <select class="form-control" id="home_<?php echo $ID_p; ?>" name="home">
                                <option value="1" <?php if ($home === 1) echo 'selected="selected"'; ?>>1</option>
                                <option value="2" <?php if ($home === 2) echo 'selected="selected"'; ?>>2</option>
                                <option value="3" <?php if ($home === 3) echo 'selected="selected"'; ?>>3</option>
                                <option value="4" <?php if ($home === 4) echo 'selected="selected"'; ?>>4</option>
                                <option value="5" <?php if ($home === 5) echo 'selected="selected"'; ?>><?php echo $idioma_100230; ?></option>
                            </select>
                        </div>

                        <div class="form-group">
                            <input class="btn btn-primary" type="submit" name="button2" value="<?php echo $idioma_100232; ?>" />
                        </div>
                    </form>

                    <div class="bloque-separador">
                        <form method="post" action="form_cambiar_nombre_cat.php">
                            <input type="hidden" name="ID_p" value="<?php echo $ID_p; ?>">

                            <div class="form-group">
                                <label for="nuevo_nombre_<?php echo $ID_p; ?>">Cambiar nombre de la categoría</label>
                                <input
                                    type="text"
                                    class="form-control"
                                    id="nuevo_nombre_<?php echo $ID_p; ?>"
                                    name="nombre"
                                    value="<?php echo htmlspecialchars($nombre, ENT_QUOTES, 'UTF-8'); ?>"
                                    required
                                >
                                <small class="form-text text-muted">La ID queda igual, solo cambia el nombre.</small>
                            </div>

                            <div class="form-group mb-0">
                                <input type="submit" class="btn btn-primary" value="GUARDAR NUEVO NOMBRE">
                            </div>
                        </form>
                    </div>

                    <ul class="m-0 p-0 d-flex justify-content-around acciones-links bloque-separador">
                        <li>
                            <a href="quitar_cat_en_home.php?ID=<?php echo $ID_p; ?>">
                                <?php echo $idioma_100233; ?>
                            </a>
                        </li>
                        <li>
                            <a href="borrar_cat.php?ID=<?php echo $ID_p; ?>" onclick="return confirm('¿Seguro que deseas borrar esta categoría?');">
                                <?php echo $idioma_100264; ?>
                            </a>
                        </li>
                    </ul>
                </div>
            <?php
            }

            $consulta->free_result();
            ?>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

    <script type="text/javascript">
        window.setInterval(function () {
            $('.grid').isotope({
                itemSelector: '.grid-item'
            });
        }, 500);
    </script>

    <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" crossorigin="anonymous"></script>
</body>
</html>