{% extends "@index/base.html.twig" %}

{% set page_id = 'backend' %}
{% set noindex = true %}
{% set oneColumn = true %}

{% block titulo %}Gestor de páginas{% endblock %}

{% block stylesheet %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ SITE_URL }}css/jquery-ui-1.10.3.custom.min.css" />
    <link rel="stylesheet" href="{{ SITE_URL }}css/jquery.plupload.queue.css" />
{% endblock stylesheet %}

{% block bread %}
    {{ breadCrumbs | raw }}
{% endblock bread %}

{% block lang %}{% endblock lang %}
    
{% block oneOne %}     
    {% if item.id %}
        <form method="post" action="{{ url('backend-pages-edit',{'id':item.id}) }}" class="form">
    {% else %}
        <form method="post" action="{{ url('backend-pages-create') }}" class="form">        
    {% endif %}
                
        <section class="editor pages">
            
            {# URL #}
            <fieldset>
                <label>Url</label>                
                <span class="pageUrl">{{ SITE_URL | slice(0,-1) }}</span><input type="text" name="url" value="{{ item.url }}" placeholder="/pagina-de-ejemplo.html" />
            </fieldset>
            {# CONTENT #}
            <fieldset>
                <label>Contenido</label>
                <textarea class="ckeditor" cols="80" id="description" name="content" rows="10">
                    {{ item.content }}
                </textarea>
            </fieldset>  
            {# METAS #}
            <fieldset>
                <label>Meta Title</label>                
                <input type="text" name="meta_title" value="{{ item.meta_title }}" />
            </fieldset>  
            <fieldset>
                <label>Meta Keywords</label>                
                <input type="text" name="meta_keywords" value="{{ item.meta_keywords }}" />
            </fieldset>  
            <fieldset>
                <label>Meta Description</label>                
                <textarea name="meta_description">{{ item.meta_keywords }}</textarea>
            </fieldset>  
        </section>
       
        <aside class="editor">

            <div class="box publishDate">
                <h3>Publicación</h3>
                <button class="bGreen">{{ item.id ? 'Actualizar' : 'Publicar'}}</button>
            </div>
                
            <div class="box">
                <h3>Opciones de publicación</h3>                
                <p class="field switch">
                    <input type="hidden" name="state" value="{{ item.id is empty ? 1 : item.state }}" />
                    <label class="cb-enable{{ item.state or item.id is empty ? " selected" : "" }}">
                        <span>Sí</span>
                    </label>
                    <label class="cb-disable{{ item.state ? "" : " selected" }}">
                        <span>No</span>
                    </label>            
                    <span style="padding-left:10px;">Publicación activada</span>
                </p>  
                <p class="field switch">
                    <input type="hidden" name="no_index" value="{{ item.id is empty ? 1 : item.no_index }}" />
                    <label class="cb-enable{{ item.no_index or item.id is empty ? " selected" : "" }}">
                        <span>Sí</span>
                    </label>
                    <label class="cb-disable{{ item.no_index ? "" : " selected" }}">
                        <span>No</span>
                    </label>            
                    <span style="padding-left:10px;">No indexar la página (noindex activado)</span>
                </p>                 
            </div>                     
            
            {% if item.id %}
                <input type="hidden" name="id" value="{{ item.id }}" />
            {% endif %}
            
            </form>                      

            <div class="box" style="overflow:hidden;">
                <h3>Imágenes</h3>
                <div class="tabs">
                    <ul>
                        <li><a href="#tabs-libreria">Librería General</a></li>
                        <li><a href="#tabs-libreria-pages">Categoría -Páginas-</a></li>
                        <li><a href="#tabs-upload">Cargador</a></li>
                    </ul>
                    <div id="tabs-libreria">
                        <p>
                            Estas viendo todas las imágenes de la librería.<br />
                            Imágenes disponibles para introducir en el contenido de la página. Sitúa el cursor sobre la imagen y pulsa sobre el tamaño que quieras insertar
                        </p>
                        {{ render("image","backend","renderImages",{'draggable': false }) }}
                    </div>
                    <div id="tabs-libreria-pages">
                        <p>
                            Imágenes clasificadas en la categorías -páginas-.<br />
                            Imágenes disponibles para introducir en el contenido de la página. Sitúa el cursor sobre la imagen y pulsa sobre el tamaño que quieras insertar
                        </p>
                        {{ render("image","backend","renderImages",{'categories':94,'draggable': false }) }}
                    </div>                        
                    <div id="tabs-upload">     
                        <section class="renderImages"></section>
                        <div id="html5_uploader">You browser doesn't support native upload. Try Firefox 3 or Safari 4.</div>
                    </div>
                </div>                                  
            </div>                  
                
        </aside>
    

{% endblock oneOne %}
    
{% block javascript %}

    {{ parent() }}
    <script src="{{ SITE_URL }}js/ckeditor_standard/ckeditor.js"></script>
    <script src="{{ SITE_URL }}js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="{{ SITE_URL }}js/jquery-ui-timepicker-addon.js"></script>
    <script src="{{ SITE_URL }}js/drag-and-drop.js"></script>
    
    <script>
        
        $(function() {
            
            $( ".tabs" ).tabs();
            
            //http://jqueryui.com/datepicker/
            //http://trentrichardson.com/examples/timepicker/
            $( "#datepicker" ).datetimepicker({
                dayNamesMin: [ "Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa" ],
                monthNames: [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" ],
                firstDay: 1,
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                numberOfMonths: 1,
                showOtherMonths: true,
                selectOtherMonths: true,
                onClose: function(dateText, inst) {
                    //alert(dateText);
                },                
            });
            
            
            
            $(".cb-enable").click(function(){
                var parent = $(this).parents('.switch');
                $('.cb-disable',parent).removeClass('selected');
                $(this).addClass('selected');
                $(parent).find('input').val(1);
            });
            $(".cb-disable").click(function(){
                var parent = $(this).parents('.switch');
                $('.cb-enable',parent).removeClass('selected');
                $(this).addClass('selected');
                $(parent).find('input').val(0);
            });            

            $("#html5_uploader").pluploadQueue({
                // General settings
                runtimes : 'html5',
                {# parent y parent_id para tabla imageRelations y categories_id para tabla categoryRelations #}
                url : '{{ url('backend-image-upload',{'parent':'page','parent_id':item.id,'categories_id':94}) }}',
                max_file_size : '10mb',
                chunk_size : '1mb',
                rename: true,
                unique_names : true,
                dragdrop : true,
                views: {
                    list: true,
                    thumbs: true, // Show thumbs
                    active: 'thumbs'
                },
                filters : [
                    {title : "Image files", extensions : "jpg,jpeg,gif,png"},
                ],
                init : {
                    FileUploaded: function(up, file, info) { //called when file has finished uploading 
                        //obtengo la miniatura de la imagen
                        $.ajax({
                            type: "POST",
                            url: '{{ url('backend-image-render-box') }}',
                            async:false,
                            data: {
                                id : info.response,
                            },                            
                            dataType: 'html',
                            success: function(data){
                                $('#tabs-upload > section').prepend(data);
                            }
                        });
                        
                    },                    
                    UploadComplete: function(up, files) {
                        // Called when all files are either uploaded or failed
                        $.getScript("/js/drag-and-drop.js");
                    },                    
                }            
            });            
            
            
        });
        
    </script>    
    
{% endblock javascript %}