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

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

{% block titulo %}Categorias{% endblock %}

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

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

{% block lang %}{% endblock lang %}
{% block cart %}{% endblock cart %}    
    
{% block oneOne %}      
    
    <div class="tabs" style="margin:20px;">
        <ul>
            <li><a href="#groups">Grupos</a></li>
            <li><a href="#editor">Editor de categorías</a></li>
            <li><a href="#groupeditor">Editor de grupos</a></li>
            <li><a href="#newcategory">Crear nueva categoría</a></li>
        </ul>
        <div id="groups">
            
            <div class="box">
                <h3>Grupos de categorías disponibles</h3> 
                <p class='info'>Haz clic sobre el nombre del grupo de categorías que quieras gestionar </p>
                {% if families | length %}

                    <ul class="familyList">
                    {% for family in families %}
                        <li>
                            <a href="{{ url('backend-categories',{'family_id':family.id}) }}#editor">
                                {{ family.name }} (id {{ family.id }})
                            </a>
                            <p>
                                {{ family.description }}
                            </p>
                        </li>
                    {% endfor %}
                    </ul>                    

                {% endif %}
            </div>   
            
            <div class="box">
                <h3>Nuevo grupo</h3> 
                <form method="post" name="newFamily" class="form" action="{{ url('backend-categories',{'family_id':currentFamily.id}) }}">
                    <fieldset name="name">
                        <label>Nombre</label>
                        <input type="text" name="name" id="name" value="" placeholder="nombre" />
                    </fieldset>
                    <fieldset name="description">
                        <label>Descripción</label>
                        <textarea name="description" id="description" placeholder="descripción"></textarea>
                    </fieldset>        
                    <fieldset>
                        <input type="hidden" name="newFamily" value="1" />
                        <input class="button bBlue" type="submit" value="Crear grupo" />
                    </fieldset>
                </form>        
            </div>            
            
        </div>
        <div id="editor">

            <div class="categoriesTree">
                <h3>{{ currentFamily.name }}</h3>

                {% if categories | length %}
                    <ul class="categoryList">
                        {% for L0 in categories %}
                            <li>
                                <span class="tooltip" title="Orden">{{ L0.priority }}</span>
                                <a data-id="{{ L0.id }}" href="">
                                    {{ L0.name_es }}
                                    <img data-webservice="{{ url('backend-categories-removeCategory') }}" class="deactivate tooltip-r" title="Eliminar" src="{{ IMAGES_URL }}backend/deactivate.png" width="16" height="16" />
                                </a>                        
                                {% if L0.children %}
                                    <ul>
                                    {% for L1 in L0.children %}
                                        <li>
                                            <span class="tooltip" title="Orden">{{ L1.priority }}</span>
                                            <a data-id="{{ L1.id }}" href="">
                                                {{ L1.name_es }}
                                                <img data-webservice="{{ url('backend-categories-removeCategory') }}" class="deactivate tooltip-r" title="Eliminar" src="{{ IMAGES_URL }}backend/deactivate.png" width="16" height="16" />
                                            </a>                                    
                                        {% if L1.children %}
                                            <ul>
                                            {% for L2 in L1.children %}
                                                <li>
                                                    <span class="tooltip" title="Orden">{{ L2.priority }}</span>
                                                    <a data-id="{{ L2.id }}" href="">
                                                        {{ L2.name_es }}
                                                        <img data-webservice="{{ url('backend-categories-removeCategory') }}" class="deactivate tooltip-r" title="Eliminar" src="{{ IMAGES_URL }}backend/deactivate.png" width="16" height="16" />
                                                    </a>
                                                {% if L2.children %}
                                                    <ul>
                                                    {% for L3 in L2.children %}
                                                        <li>
                                                            <span class="tooltip" title="Orden">{{ L3.priority }}</span>
                                                            <a data-id="{{ L3.id }}" href="">
                                                                {{ L3.name_es }}
                                                                <img data-webservice="{{ url('backend-categories-removeCategory') }}" class="deactivate tooltip-r" title="Eliminar" src="{{ IMAGES_URL }}backend/deactivate.png" width="16" height="16" />
                                                            </a>                                                    
                                                        {% if L3.children %}
                                                            <ul>                                        
                                                            {% for L4 in L3.children %}
                                                                <li>
                                                                    <span class="tooltip" title="Orden">{{ L4.priority }}</span>
                                                                    <a data-id="{{ L4.id }}" href="">
                                                                        {{ L4.name_es }}
                                                                        <img data-webservice="{{ url('backend-categories-removeCategory') }}" class="deactivate tooltip-r" title="Eliminar" src="{{ IMAGES_URL }}backend/deactivate.png" width="16" height="16" />
                                                                    </a>                                                            
                                                                    {% if L4.children %}
                                                                    <ul>                                                
                                                                    {% for L5 in L4.children %}
                                                                        <li>
                                                                            <span class="tooltip" title="Orden">{{ L5.priority }}</span>
                                                                            <a data-id="{{ L5.id }}" href="">
                                                                                {{ L5.name_es }}
                                                                                <img data-webservice="{{ url('backend-categories-removeCategory') }}" class="deactivate tooltip-r" title="Eliminar" src="{{ IMAGES_URL }}backend/deactivate.png" width="16" height="16" />
                                                                            </a>                                                                    
                                                                        </li>
                                                                    {% endfor %}
                                                                    </ul>
                                                                {% endif %} 
                                                                </li>
                                                            {% endfor %}
                                                            </ul>
                                                        {% endif %}
                                                        </li>
                                                    {% endfor %} 
                                                    </ul>
                                                {% endif %}
                                                </li>
                                            {% endfor %}
                                            </ul>
                                        {% endif %}
                                        </li>
                                    {% endfor %}
                                    </ul>
                                {% endif %}
                            </li>
                        {% endfor %}
                    </ul>                 
                {% else %}
                    <p>No hay categorías disponibles</p> 
                {% endif %}                
            </div>            
            
            {% if categories is not empty %}
            <div class="editCategory box">
                <h3 style="color:green">Editar categoría en:</h3>

                <h4>{{ currentFamily.name }}</h3>  
                
                    <hr />
                
                    <form method="post" name="editCategory" action="{{ url('backend-categories',{'family_id':currentFamily.id}) }}#editor" enctype="multipart/form-data">
                        <fieldset name="image">
                            <div id="image"></div>                            
                            <label>Imagen</label>
                            <input type="file" name="file" />                        
                        </fieldset>
                      <fieldset name="type">
                            <label>Tipo</label>
                            <input type="radio" name="type[]" value='content' /> CONTENT marketing<br />
                            <input type="radio" name="type[]" value='search' /> SEARCH marketing<br />
                            <input type="radio" name="type[]" value='push' /> PUSH marketing<br />
                            <input type="radio" name="type[]" value='event' /> EVENTS<br />
                            <input type="radio" name="type[]" value='social' /> SOCIAL media
                        </fieldset>                             
                        <fieldset name="category_id">
                            <label>Categoría</label>                    
                            <select name="category_id" data-webservice="{{ url('backend-categories-getCategory') }}">                    
                                <option value="">Selecciona categoría...</option>
                                {% for L0 in categories %}
                                    <option value="{{ L0.id }}">{{ L0.name_es }}</option>
                                        {% if L0.children %}
                                            {% for L1 in L0.children %}
                                                <option value="{{ L1.id }}">- {{ L1.name_es }}</option>
                                                {% if L1.children %}
                                                    {% for L2 in L1.children %}
                                                        <option value="{{ L2.id }}">- - {{ L2.name_es }}</option>
                                                        {% if L2.children %}
                                                            {% for L3 in L2.children %}
                                                                <option value="{{ L3.id }}">- - - {{ L3.name_es }}</option>
                                                                {% if L3.children %}
                                                                    {% for L4 in L3.children %}
                                                                        <option value="{{ L4.id }}">- - - - {{ L4.name_es }}</option>
                                                                        {% if L4.children %}
                                                                            {% for L5 in L4.children %}
                                                                                <option value="{{ L5.id }}">- - - - - {{ L5.name_es }}</option>
                                                                            {% endfor %}
                                                                        {% endif %} 
                                                                    {% endfor %}
                                                                {% endif %}
                                                            {% endfor %} 
                                                        {% endif %}
                                                    {% endfor %}
                                                {% endif %}
                                            {% endfor %}
                                        {% endif %}
                                {% endfor %}
                            </select>
                        </fieldset>      
                        <fieldset name="parent">
                            <label>Parent</label>                    
                            <select name="parent">                    
                                <option value="">Top</option>
                                {% for L0 in categories %}
                                    <option value="{{ L0.id }}">{{ L0.name_es }}</option>
                                        {% if L0.children %}
                                            {% for L1 in L0.children %}
                                                <option value="{{ L1.id }}">- {{ L1.name_es }}</option>
                                                {% if L1.children %}
                                                    {% for L2 in L1.children %}
                                                        <option value="{{ L2.id }}">- - {{ L2.name_es }}</option>
                                                        {% if L2.children %}
                                                            {% for L3 in L2.children %}
                                                                <option value="{{ L3.id }}">- - - {{ L3.name_es }}</option>
                                                                {% if L3.children %}
                                                                    {% for L4 in L3.children %}
                                                                        <option value="{{ L4.id }}">- - - - {{ L4.name_es }}</option>
                                                                        {% if L4.children %}
                                                                            {% for L5 in L4.children %}
                                                                                <option value="{{ L5.id }}">- - - - - {{ L5.name_es }}</option>
                                                                            {% endfor %}
                                                                        {% endif %} 
                                                                    {% endfor %}
                                                                {% endif %}
                                                            {% endfor %} 
                                                        {% endif %}
                                                    {% endfor %}
                                                {% endif %}
                                            {% endfor %}
                                        {% endif %}
                                {% endfor %}
                            </select>
                        </fieldset>                           
                        {% for k,lang in SESSION.langs %}
                            <fieldset name="{{ k == SESSION.default_lang ? 'name_es' : 'name_'~k }}">
                                <label>Ruta en {{ lang }}</label>
                                <p>Las rutas se emplean en los grupos del tipo categoría, para obtener el ID de una categoría mediante la url (Ruta)</p>
                                <input readonly="readonly" type="text" name="{{ k == SESSION.default_lang ? 'route_es' : 'route_'~k }}" />
                            </fieldset>                    
                        {% else %}
                            <fieldset name="name">
                                <label>Ruta</label>
                                <p>Las rutas se emplean en los grupos del tipo categoría, para obtener el ID de una categoría mediante la url (Ruta)</p>
                                <input readonly="readonly" type="text" name="route_es" />
                            </fieldset>                    
                        {% endfor %}                            
                        {% for k,lang in SESSION.langs %}
                            <fieldset name="{{ k == SESSION.default_lang ? 'name_es' : 'name_'~k }}">
                                <label>Nombre en {{ lang }}</label>
                                <input type="text" name="{{ k == SESSION.default_lang ? 'name_es' : 'name_'~k }}" placeholder="Nombre en {{ lang }}" />
                            </fieldset>                    
                        {% else %}
                            <fieldset name="name">
                                <label>Nombre</label>
                                <input type="text" name="name_es" placeholder="Nombre" />
                            </fieldset>                    
                        {% endfor %}
                        {% for k,lang in SESSION.langs %}
                            <fieldset name="{{ k == SESSION.default_lang ? 'slug_es' : 'slug_'~k }}">
                                <label>Slug en {{ lang }}</label>
                                <input type="text" name="{{ k == SESSION.default_lang ? 'slug_es' : 'slug_'~k }}" placeholder="Slug en {{ lang }}" />
                            </fieldset>                    
                        {% else %}
                            <fieldset name="slug">
                                <label>Slug (familia tipo categorías)</label>
                                <input type="text" name="slug_es" placeholder="slug" />
                            </fieldset>                  
                        {% endfor %}                                        
                        {% for k,lang in SESSION.langs %}
                            <fieldset name="{{ k == SESSION.default_lang ? 'description_es' : 'description_'~k }}">
                                <label>Description en {{ lang }}</label>
                                {#<input type="text" name="{{ k == SESSION.default_lang ? 'description' : 'description_'~k }}" placeholder="Descripcion en {{ lang }}" />#}
                                <textarea name="{{ k == SESSION.default_lang ? 'description_es' : 'description_'~k }}" placeholder="Descripcion en {{ lang }}"></textarea>
                            </fieldset>                    
                        {% else %}
                            <fieldset name="description">
                                <label>Descripción</label>
                                <textarea name="description_es" placeholder="Descripción"></textarea>
                            </fieldset>                    
                        {% endfor %} 
                        {% for k,lang in SESSION.langs %}
                            <fieldset name="{{ k == SESSION.default_lang ? 'url_es' : 'url_'~k }}">                                
                                <label>Url en {{ lang }}</label>
                                <p>El prefijo se añade automáticamente</p>
                                <input type="text" name="{{ k == SESSION.default_lang ? 'url_es' : 'url_'~k }}" placeholder="/" />
                            </fieldset>                    
                        {% else %}
                            <fieldset name="url">
                                <label>Url</label>
                                <input type="text" name="url_es" placeholder="/" />
                            </fieldset>                   
                        {% endfor %}                    
                        <fieldset name="access_level">
                            <label>Nivel de acceso</label>
                            <input type="checkbox" name="access_level[]" value='guest' /> No registrados
                            <input type="checkbox" name="access_level[]" value='1' /> Registrados
                            <input type="checkbox" name="access_level[]" value='2' /> Administradores
                            <input type="checkbox" name="access_level[]" value='3' /> SuperAdministradores
                        </fieldset> 
                        <fieldset name="priority">
                            <label>Orden</label>
                            <p>Indica un valor entero mayor a 0. Registros en el mismo nivel y valor, se ordenan por nombre</p>
                            <input type="text" name="priority" value="1" placeholder="orden" style="width: 40px" />
                        </fieldset>
                        <fieldset name="pages">
                            <label>Páginas</label>
                            <p>Indica las página donde NO debe aparecer o deja en blanco para que aparezca en todas</p>
                            <div style="height:220px;overflow:auto;font-size:12px;">
                            {% for page in routesPages %}
                                <input type="checkbox" name="pages[]" value="[{{ page }}]" /> {{ page }}<br />
                            {% endfor %}
                            </div>
                        </fieldset>                             
                        <fieldset>
                            <input type="hidden" name="editCategory" value="1" />
                            <input class="button bBlue" type="submit" value="Actualizar" />
                        </fieldset>
                    </form>
                </div>
            {% endif %}            
            
            <br clear="left" />
            
        </div>
        <div id="groupeditor">
        
            <div class="box">
                <h3>Editar grupo</h3> 
                <form method="post" name="editFamily" action="{{ url('backend-categories',{'family_id':currentFamily.id}) }}">
                    <fieldset name="parent">
                        <label>Grupo</label>                    
                        <select name="family_id" data-webservice="{{ url('backend-categories-getFamily') }}">                    
                            <option value="">Selecciona grupo...</option>
                            {% for family in families %}
                                <option value="{{ family.id }}">{{ family.name }}</option>
                            {% endfor %}                    
                        </select>
                    </fieldset>
                    <fieldset name="name">
                        <label>Nombre</label>
                        <input type="text" name="name" id="name" value="" placeholder="nombre" />
                    </fieldset>
                    <fieldset name="slug">
                        <label>Slug</label>
                        <p>Dejar en blanco para la generación automática a partir del nombre</p>
                        <input type="text" name="slug" id="slug" value="" placeholder="slug" />
                    </fieldset>               
                    <fieldset name="description">
                        <label>Descripción</label>
                        <textarea name="description" id="description" placeholder="descripción"></textarea>
                    </fieldset>        
                    <fieldset>
                        <input type="hidden" name="editFamily" value="1" />
                        <input class="button bBlue" type="submit" value="Actualizar grupo" />
                    </fieldset>
                </form>        
            </div>
        
        </div>          
            
        <div id="newcategory">

            <div class="box">
                <h3 style="color:green">Nueva categoría en:</h3>
                <h4>{{ currentFamily.name }}</h3> 
                <form method="post" name="newCategory" action="{{ url('backend-categories',{'family_id':currentFamily.id}) }}#editor">
                    <fieldset name="name">
                        <label>Nombre</label>
                        <input type="text" name="name_es" id="name" placeholder="nombre" />
                    </fieldset>
                    <fieldset name="slug">
                        <label>Slug</label>
                        <input type="text" name="slug_es" id="slug" value="" placeholder="slug" />
                    </fieldset>                   
                    <fieldset name="url">
                        <label>Url</label>
                        <input type="text" name="url_es" id="url" placeholder="url" />
                    </fieldset>                
                    <fieldset name="description">
                        <label>Descripción</label>
                        <textarea name="description_es" id="description" placeholder="descripción"></textarea>
                    </fieldset> 
                    <fieldset name="parent">
                        <label>Nivel superior</label>
                        <select name="parent">                    
                            <option value="0">Top</option>
                            {% for L0 in categories %}
                                <option value="{{ L0.id }}">{{ L0.name_es }}</option>
                                    {% if L0.children %}
                                        {% for L1 in L0.children %}
                                            <option value="{{ L1.id }}">- {{ L1.name_es }}</option>
                                            {% if L1.children %}
                                                {% for L2 in L1.children %}
                                                    <option value="{{ L2.id }}">- - {{ L2.name_es }}</option>
                                                    {% if L2.children %}
                                                        {% for L3 in L2.children %}
                                                            <option value="{{ L3.id }}">- - - {{ L3.name_es }}</option>
                                                            {% if L3.children %}
                                                                {% for L4 in L3.children %}
                                                                    <option value="{{ L4.id }}">- - - - {{ L4.name_es }}</option>
                                                                    {% if L4.children %}
                                                                        {% for L5 in L4.children %}
                                                                            <option value="{{ L5.id }}">- - - - - {{ L5.name_es }}</option>
                                                                        {% endfor %}
                                                                    {% endif %} 
                                                                {% endfor %}
                                                            {% endif %}
                                                        {% endfor %} 
                                                    {% endif %}
                                                {% endfor %}
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}
                            {% endfor %}
                        </select>
                    </fieldset>                 
                    <fieldset>
                        <input type="hidden" name="newCategory" value="1" />
                        <input class="button bBlue" type="submit" value="Crear registro" />
                    </fieldset>
                </form>
            </div>            

        </div>
            
    </div>



{% endblock oneOne %}


{% block javascript %}

    {{ parent() }}
    <script src="{{ SITE_URL }}js/jquery-ui-1.10.3.custom.min.js"></script>
    
    <script>
        
        $(function() {
            $(".tabs").tabs();
        });
        
    </script>    
    
{% endblock javascript %}