<?php include 'sesion.php'; ?>
<?php include 'concha.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="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<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.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<style type="text/css">
    *{
        border-radius: 0 !important;
    }

    body {
        background-image: url(../fondeux.jpg);
    }

    .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:#0066FF;
    }

    .colorAzul h3{
        color:#0066FF;
    }

    textarea {
        width: 100%;
        min-height: 250px;
    }

    .barra-editor{
        margin: 10px 0 12px 0;
        padding: 10px;
        background: #f7f7f7;
        border: 1px solid #dcdcdc;
    }

    .btn-galeria{
        background: #0066FF;
        color: #fff;
        border: 1px solid #0066FF;
        padding: 8px 14px;
        cursor: pointer;
        display: inline-block;
        text-decoration: none;
    }

    .btn-galeria:hover{
        background: #0052cc;
        color: #fff;
        text-decoration: none;
    }

    #cineGaleriaOverlay{
        display: none;
        position: fixed;
        z-index: 999999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.88);
    }

    #cineGaleriaBox{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 92%;
        height: 88%;
        transform: translate(-50%, -50%);
        background: #111;
        box-shadow: 0 0 25px rgba(0,0,0,0.45);
        overflow: hidden;
    }

    #cineGaleriaCerrar{
        position: absolute;
        right: 15px;
        top: 8px;
        z-index: 20;
        color: #fff;
        font-size: 34px;
        line-height: 34px;
        text-decoration: none;
        cursor: pointer;
        font-family: Arial, sans-serif;
    }

    #cineGaleriaCerrar:hover{
        color: #cccccc;
        text-decoration: none;
    }

    #cineGaleriaFrame{
        width: 100%;
        height: 100%;
        border: 0;
        background: #fff;
    }
</style>

<script type="text/javascript">
var textareaActiva = '';

function abrirGaleriaCine(idTextarea){
    textareaActiva = idTextarea;
    var frame = document.getElementById('cineGaleriaFrame');
    frame.src = 'galeria_de_medios.php?modo=popup&campo=' + encodeURIComponent(idTextarea);
    document.getElementById('cineGaleriaOverlay').style.display = 'block';
    document.body.style.overflow = 'hidden';
}

function cerrarGaleriaCine(){
    document.getElementById('cineGaleriaOverlay').style.display = 'none';
    document.getElementById('cineGaleriaFrame').src = '';
    document.body.style.overflow = 'auto';
}

function insertarTextoEnEditor(idTextarea, texto){
    var textarea = document.getElementById(idTextarea);
    if (!textarea) return;

    if (typeof CKEDITOR !== 'undefined') {
        for (var instancia in CKEDITOR.instances) {
            if (CKEDITOR.instances.hasOwnProperty(instancia)) {
                if (CKEDITOR.instances[instancia].element.$.id === idTextarea) {
                    CKEDITOR.instances[instancia].insertText(texto);
                    return;
                }
            }
        }
    }

    textarea.focus();

    if (document.selection) {
        var sel = document.selection.createRange();
        sel.text = texto;
    } else if (typeof textarea.selectionStart !== 'undefined') {
        var startPos = textarea.selectionStart;
        var endPos = textarea.selectionEnd;
        var valor = textarea.value;

        textarea.value = valor.substring(0, startPos) + texto + valor.substring(endPos, valor.length);
        textarea.selectionStart = startPos + texto.length;
        textarea.selectionEnd = startPos + texto.length;
    } else {
        textarea.value += texto;
    }
}

function recibirImagenGaleria(url, campo){
    var idTextarea = campo ? campo : textareaActiva;
    if (!idTextarea || !url) return;

    var shortcode = '[img]' + url + '[/img]';
    insertarTextoEnEditor(idTextarea, shortcode);
    cerrarGaleriaCine();
}

document.addEventListener('keydown', function(e){
    if (e.key === 'Escape') {
        cerrarGaleriaCine();
    }
});
</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_100414 ?></h2>
    </div>

    <div class="col-12 pt-3">

        <?php
        $sql = "SELECT * FROM modulos";
        $consulta = $conn->query($sql);
        while ($row = $consulta->fetch_assoc())
        {
            $ID_b = $row["ID"];
            $nombre_m = $row["titulo"];
            $texto_m = $row["texto"];
        ?>
        <form id="form1_<?php echo $ID_b ?>" name="form1_<?php echo $ID_b ?>" method="post" action="form_editar_modulo.php">
            <div class="col-12 p-2">
                <div class="border p-2 form-group">

                    <input type="hidden" name="ID" value="<?php echo $ID_b ?>">

                    <label for="titulo_<?php echo $ID_b ?>">Título</label>
                    <input class="form-control mb-1" id="titulo_<?php echo $ID_b ?>" name="titulo" type="text" value="<?php echo htmlspecialchars($nombre_m, ENT_QUOTES, 'UTF-8') ?>">

                    <label for="texto_<?php echo $ID_b ?>">Texto</label>

                    <div class="barra-editor">
                        <a href="javascript:void(0);" class="btn-galeria" onclick="abrirGaleriaCine('texto_<?php echo $ID_b ?>');">
                            Abrir galería
                        </a>
                    </div>

                    <textarea class="form-control mb-1 ckeditor" name="texto" id="texto_<?php echo $ID_b ?>" cols="15" rows="5"><?php echo htmlspecialchars($texto_m, ENT_NOQUOTES, 'UTF-8') ?></textarea>

                    <ul class="d-flex justify-content-around mt-3">
                        <li><input class="btn btn-outline-primary" type="submit" value="<?php echo $idioma_100066 ?>"></li>
                        <li><a class="btn btn-link" href="borrar_modulo.php?ID=<?php echo $ID_b ?>"><?php echo $idioma_100234 ?></a></li>
                    </ul>

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

    </div>

    <div class="row">
        <div class="col-12 text-center mb-3">
            <a class="btn btn-primary" href="index.php"><?php echo $idioma_100252 ?></a>
        </div>
    </div>

</div>

<div id="cineGaleriaOverlay">
    <div id="cineGaleriaBox">
        <a href="javascript:void(0);" id="cineGaleriaCerrar" onclick="cerrarGaleriaCine()">×</a>
        <iframe id="cineGaleriaFrame" src=""></iframe>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<script type="text/javascript">
window.setInterval(function(){
    if ($('.grid').length) {
        $('.grid').isotope({
            itemSelector: '.grid-item'
        });
    }
}, 500);
</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>
<script type="text/javascript" src="https://recursos.radiosnethosting.com/ckeditor/ckeditor.js"></script>

</body>
</html>