{include="header"}
<style>
    .container-narrow {
        margin: 0 auto;
        max-width: 700px;
    }
    .container-narrow > hr {
        margin: 30px 0;
    }

    /* Main marketing message and sign up button */
    .jumbotron {
        margin: 60px 0;
        text-align: center;
    }
    .jumbotron h1 {
        font-size: 72px;
        line-height: 1;
    }
    .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
    }

    /* Supporting marketing content */
    .marketing {
        margin: 60px 0;
    }
    .marketing p + h4 {
        margin-top: 28px;
    }

    .form-signin {
        max-width: 300px;
        padding: 19px 29px 29px;
        margin: 0 auto 20px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
        box-shadow: 0 1px 2px rgba(0,0,0,.05);
    }
    .form-signin .form-signin-heading,
    .form-signin .checkbox {
        margin-bottom: 10px;
    }
    .form-signin input[type="text"],
    .form-signin input[type="password"] {
        font-size: 16px;
        height: auto;
        margin-bottom: 15px;
        padding: 7px 9px;
    }
    .note-1 textarea{
        width:100px;  height: 100px; background:#FDFB8C; border: 1px solid #DEDC65; margin: 0 auto;width: 100px;
    }


    .note-2 textarea {
        width:100px;  height: 100px; background:#A5F88B; border: 1px solid #98E775; margin: 0 auto;width: 100px;
    }

    .note-3 textarea {
        width:100px;  height: 100px; background:#A6E3FC; border: 1px solid #75C5E7;margin: 0 auto;width: 100px;
    }

    .note-4 textarea {
        width:100px;  height: 100px; color: whitesmoke; background:#F95353; border: 1px solid #F83333;margin: 0 auto;width: 100px;
    }

    .draggable { width: 168px; height: 192px; padding: 0.5em; border:0; padding-top:10px; }
    .draggable textarea{ width: 150px; height: 150px; padding: 0.5em; }
    .draggable { text-align:center }
    .draggable img.pin{ margin-left: 10px;
                        margin-top: -35px;
                        position: absolute;
                        cursor:move;
                        height: 50px;
                        width: 50px;
    }
    .draggable img.delete{
                          margin-top: -10px;
                          position: absolute;
                          cursor: pointer;
    }
    .success_msg {
        position:absolute;
        right:10px;
        top:10px;
        padding:10px;
        background:black;
        opacity:0.7;
        color:#fff;
    }
</style>

<link rel="stylesheet" href="plugins/notas/view/jquery-ui-1.10.3.custom.css" />
<script src="plugins/notas/view/jquery-ui-1.10.3.custom.js"></script>


<script>   
    {loop="$fsc->resultados"}
        $(function () {
            $("#draggable-{$value->id}").draggable();  
            var b = {$value->alto}-16;
            var a = {$value->ancho}-2;
            $("#{$value->id}").innerWidth(a);
            $("#{$value->id}").height(b);
           
        });
    {/loop}

  function getText(textarea) {

        var id = textarea.id;
        var text = textarea.value;

        var modelo = '&idNota='+id+'&textoNota='+text;
        
        $.ajax({
            url: "{$fsc->url()}",
            type: "post",
            data: modelo,
            success: function (data) {
               //
            }
        });
    }
    
      function delete_nota(cod)
    {
        bootbox.confirm({
            message: '¿Realmente desea eliminar la nota '+cod+'?',
            title: '<b>Atención</b>',
            callback: function (result) {
                if (result) {
                    window.location.href = '{$fsc->url()}&delete=' + cod;
                }
            }
        });
    }
    function actualizaBD(id)
    {
       // var x = datos.pageX;
      //  var y = datos.pageY;
        var coordenadas = $("#draggable-"+id).offset();
        var y = coordenadas.top;
        var x = coordenadas.left;
        var ancho = $("#"+id).width(); // ancho de la nota
        var alto = $("#"+id).height(); // alto de la nota
        var kk = '&left='+x+'&top='+y+'&id='+id+'&coordenadas=1&ancho='+ancho+'&alto='+alto;
        
        $.ajax({
                type: 'post',
                url: '{$fsc->url()}',
                data: kk,
                // Mostramos un mensaje con la respuesta de PHP
                success: function (data) {
                        //
                }
            })
    }

    function muestra_oculta(id) {
        if (document.getElementById) { //se obtiene el id
            var el = document.getElementById(id); //se define la variable "el" igual a nuestro div
            el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
        }
       
    }
    window.onload = function () { //hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente
        muestra_oculta('contenido_a_mostrar'); //"contenido_a_mostrar" es el nombre de la etiqueta DIV que deseamos mostrar 
    }
    
    function comprobar(f){
        
        var usuario = document.getElementById('usuarios').value;
        
        if(usuario == "Ninguno")
        {
            alert("Tiene que seleccionar un usuario");
        }
    }
</script>

<div style="background-image: url('plugins/notas/view/board3.jpg'); width: 100%; height: 800px; margin-top: -15px;">
    <div class="container">

        <div class="text-right" style='margin-top:10px;'> <a href="#addnote" role="button" class="btn btn-success" data-toggle="modal">  <span class="glyphicon glyphicon-plus"></span>
                <span class="hidden-xs"></span>Nueva Nota</a></div><br/>
               

        {loop="$fsc->resultados"}
            <div id="draggable-{$value->id}" class="draggable note-{$value->color}" onchange="javascript:position(this)" style="position:absolute; left: {$value->_left}px; top: {$value->_top}px" onmouseup="actualizaBD({$value->id})">
                <img class="pin" src="plugins/notas/view/pin.png" alt="pin" />
                <img class="delete" src="plugins/notas/view/delete.png" alt="delete" onclick="delete_nota({$value->id})"/>
                <textarea id="{$value->id}" class="quick" style=" width: {$value->alto}; height: {$value->ancho};" onchange="javascript:getText(this)">{$value->message}</textarea>
            </div>
        {/loop}

    </div>    
</div>

<!-- FORMULARIO MODAL PARA AÑADIR NOTA -->
<div class="modal" id="addnote">
    <form action="{$fsc->url()}" method="post">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div style="width:94%;">
                    <p><a style='cursor: pointer;' onclick="muestra_oculta('contenido_a_mostrar')" title="">No es para mi</a></p>

                    <div id="contenido_a_mostrar">

                        <select name='usuarios' id="usuarios">
                            <option value="Ninguno">Seleccione un usuario...</option>
                            <option value="todos">Todos</option>
                            {loop="$fsc->usuarios"}
                            <option value="{$value->nick}">{$value->nick}</option>
                            {/loop}
                        </select>
                    </div>

                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="exampleFormControlTextarea1">Mensaje</label>
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" name="mensaje"></textarea>
                    </div>
                    <br/>

                    <b> Añada un color </b>
                    <br/>
                    <table style="width:100%;text-align: center;">

                        <tr>
                            <td> <input type="radio" name="color" value="1" checked /> </td>
                            <td> <input type="radio" name="color" value="2" />  </td>
                            <td> <input type="radio" name="color" value="3" />  </td>
                            <td> <input type="radio" name="color" value="4" />  </td>
                        </tr>

                        <tr>
                            <td> <div style="width:100px;  height: 100px; background:#FDFB8C; border: 1px solid #DEDC65; margin: 0 auto;width: 100px;">  </div> </td>
                            <td> <div style="width:100px;  height: 100px; background:#A5F88B; border: 1px solid #98E775; margin: 0 auto;width: 100px;"> </div> </td>
                            <td> <div style="width:100px;  height: 100px; background:#A6E3FC; border: 1px solid #75C5E7; margin: 0 auto;width: 100px;"> </div> </td>
                            <td> <div style="width:100px;  height: 100px; background:#F95353; border: 1px solid #F83333; margin: 0 auto;width: 100px;"> </div> </td>
                        </tr>

                    </table>

                    <br/>
                    <div class="modal-footer">
                        <button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
                        <input type="submit" name="guardar" id="guardar" class="btn btn-primary" value="Guardar"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</div>
{include="footer"}