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

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

{% set page = page > 0 ? page : 1 %} 

{% 
    set tooltips = {
        'routename':'Identificador único para el Router. Se usa internamente para vincular 
                la ruta con el registro en la base de datos. Además se puede usar internamente 
                en el framework para llamar a la url mediante {{ url("page-1") }} y para crear
                plantillas específicas para la página en cuestión, por ejemplo: page-1.html.twig',
        'category_id':'Si este campo, category_name y category_family tienen contenido, indica que
                hay una categoría enlazando con la url de esta página',
        'template':'Por defecto, sino se ha creado una plantilla, la página usa la plantilla genérica
                page.html.twig. No obstante, se puede usar una plantilla específica para mejorar las
                prestaciones de manera independiente'
    } 
%}

{%
    set filters = {
        'today':'Hoy',
        'yesterday':'Ayer',
        'last_days':'Últimos días',
        'last_items':'Últimos registros',
        'active_items':'Registros activos',
        'updated_items':'Registros por revisar',
    } 
%}

{% set noShow = ['null','null'] %}   

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

{% block search %}{% endblock %}
{% block lang %}{% 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/jqueryui-editable.css" />
{% endblock stylesheet %}

{% block bread %}

    {{ breadCrumbs | raw }}

    <form method="post" class="form" action="{{ url('backend-pages') }}">
        <ul class="filters">       
            <li>
                <fieldset>
                    <p class="head">Filtro por fecha de registro (Create at)</p>
                    <input type="text" id="from" name="date_start" value="{{ date_start ? date_start | date('d-m-Y') : '' }}" placeholder="Fecha inicio rango" />
                    <input type="text" id="to" name="date_end" value="{{ date_end ? date_end | date('d-m-Y') : '' }}" placeholder="Fecha fin rango" />
                </fieldset>
                <fieldset>
                    <p class="head">Buscador</p>
                    <input type="text" name="search" value="{{ search }}" placeholder="Texto a buscar" />                    
                </fieldset>
                <fieldset>
                    <p class="head">Filtro predefinido</p>
                    <select name="filter_predefined">                    
                        <option value="">selecciona...</option>
                        <optgroup label="Por fecha de registro">
                            <option {{ filter_predefined == 'today' ? 'selected="selected"' : '' }} value="today">Hoy</option>
                            <option {{ filter_predefined == 'yesterday' ? 'selected="selected"' : '' }} value="yesterday">Ayer</option>
                            <option {{ filter_predefined == 'last_days' ? 'selected="selected"' : '' }} value="last_days">Últimos días</option>
                        </optgroup>
                        <optgroup label="Varios">
                            <option {{ filter_predefined == 'last_items' ? 'selected="selected"' : '' }} value="last_items">100 últimos registros</option>
                            <option {{ filter_predefined == 'active_items' ? 'selected="selected"' : '' }} value="active_items">Registros activos</option>
                            <option {{ filter_predefined == 'updated_items' ? 'selected="selected"' : '' }} value="updated_items">Registros por revisar</option>
                        </optgroup>
                    </select>              
                </fieldset>
                <fieldset>
                    <p class="head">&nbsp;</p>
                    <input type="submit" value="Filtrar" class="button bGreen" />
                    {% if date_start or date_end or search or filter_predefined %}
                        <input type="submit" name="reset" value="Reset" class="button bRed" />
                    {% endif %}
                </fieldset>
            </li>
            <li>
                <h3><span class="counterT">{{ numTotalItems }}</span> {{ numTotalItems == 1 ? 'Página' : 'Páginas' }}</h3>            
            </li>
        </ul>
    </form>

{% endblock bread %}

{% block oneOne %}               
    
    <article class="dinamic">
        <a class="button bGreen" style="color:#fff;text-decoration: none" title="Crear nueva entrada" href="{{ url('backend-pages-create') }}">Nueva entrada</a>
        <div>
            {% if date_start or date_end or search or filter_predefined %}
                <strong>Filtros: </strong>
            {% endif %}
            {% if (date_start or date_end) and filter_predefined not in 'today,yesterday' %}
                <span>Entre el {{ dateFormat(date_start) }} y el {{ dateFormat(date_end) }}</span>
            {% endif %}
            {% if search %}
                <span>{{ search }}</span>
            {% endif %}
            {% if filter_predefined is not empty and filter_predefined != 'last_days' %}
                <span>{{ filters[filter_predefined] }}</span>
            {% endif %}                            
            <h2><span class="counterS">{{ numItems }}</span> {{ numItems == 1 ? 'página seleccionada' : 'páginas seleccionadas' }}</h2>
        </div>        
    </article>
    
    <table class="grill blog">

        {% for row in items %}

            {% if loop.first %}
                <thead>
                    <tr>
                        <td></td>
                        {% for k,v in row %}
                            {% if k == 'id' %}
                                <td data-order="routename" class="tooltip" title="{{ tooltips['routename'] }}">
                                    <span data-mode="ASC" {{ order == 'id' ~ ' ASC' ? 'class="current"' : '' }}></span>
                                    <span data-mode="DESC" {{ order == 'id' ~ ' DESC' ? 'class="current"' : '' }}></span>
                                    Route Name
                                </td>
                                <td class="tooltip" title="{{ tooltips['template'] }}">
                                    Template
                                </td>
                            {% endif %}
                            {% if k not in noShow %}
                                <td data-order="{{ k }}" class="tooltip" title="{{ tooltips[k] }}">
                                    <span data-mode="ASC" {{ order == k ~ ' ASC' ? 'class="current"' : '' }}></span>
                                    <span data-mode="DESC" {{ order == k ~ ' DESC' ? 'class="current"' : '' }}></span>
                                    {{ k | replace({"_":" "}) | capitalize }}
                                </td>
                            {% endif %}
                        {% endfor %}                        
                        <td></td>
                        <td></td>
                    </tr>
                    </thead>
            {% endif %}

            {{ loop.first ? '<tbody>' : '' }}                    

            <tr>
                <td>{{ loop.index + ((page-1) * limit) }}</td>
                {% for k,v in row %}
                    {% if k == 'id' %}
                        <td>
                            page-{{ row.id }}
                        </td>
                        <td>
                            {% set page_file = ROOT_DIR ~ 'src/IndexBundle/views/page-' ~ row.id ~ '.html.twig' %}
                            {% if file_exists(page_file) %}
                                page-{{ row.id }}.html.twig
                            {% else %}
                                page.html.twig
                            {% endif %}
                        </td>                        
                    {% endif %}                
                    {% if k not in noShow %}
                        <td>                           
                            {% if k in 'create_at,update_at' %}
                                <a href="#" class="editable" id="{{ k }}" data-format="yyyy-mm-dd" data-viewformat="dd-mm-yyyy" data-type="date" data-pk="{{ row.id }}" data-url="{{ url('backend-pages-editable') }}" data-title="Introduce {{ k | replace({"_":" "}) | capitalize }}">
                                    {{ v  | date('d-m-Y H:i') }}
                                </a>                           
                            {% elseif k in 'state' %}
                                <a href="#" class="editable" id="{{ k }}" data-value="{{ v }}" data-showbuttons="false" data-source="[{value: 0, text: 'Inactive'},{value: 1, text: 'Active'}]" data-type="select" data-pk="{{ row.id }}" data-url="{{ url('backend-pages-editable') }}" data-title="Introduce {{ k | replace({"_":" "}) | capitalize }}">
                                    {{ v == 1 ? 'Active' : '<span style="color:red">Inactive</span>' }}
                                </a>  
                            {% elseif k in 'url' %}
                                <a href="#" class="editable" id="{{ k }}" data-type="textarea" data-pk="{{ row.id }}" data-url="{{ url('backend-pages-editable') }}" data-title="Introduce {{ k | replace({"_":" "}) | capitalize }}">
                                    {{ v }}
                                </a>                                
                            {% else %}
                                {{ v }}
                            {% endif %}
                        </td> 
                    {% endif %}
                {% endfor %}   
                <td class="edit">
                    <a class="iconEdit" href="{{ url('backend-pages-edit',{'id':row.id}) }}" title="Editar">
                        Editar
                    </a>                          
                </td>  
                <td class="delete">
                    <a class="iconDel" id="{{ row.id }}" href="{{ url('backend-pages-delete') }}" title="Eliminar">
                        Eliminar
                    </a>                          
                </td>                 
            </tr>        

            {{ loop.last ? '</tbody>' : '' }}

        {% endfor %}
    
    </table>

    {{ paginador | raw }}            

    <form name="order" method="post" action="{{ url('backend-pages') }}">
        <input type="hidden" name="order" value="" />
        <input type="hidden" name="mode" value="" />
    </form>

    <small class="version">Versión: 1.0</small>
    
{% endblock oneOne %}

{% block javascript %} 

    {{ parent() }}

    <script src="{{ SITE_URL }}js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
    <script src="{{ SITE_URL }}js/jqueryui-editable.js" type="text/javascript"></script>
    
    <script>
        
        
        $(function() {
            
            $('.editable').editable({
                placement: 'top', // top|right|bottom|left
                params: function(params) {
                    params.reg_date = $(this).data('reg_date');
                    return params;
                },   
                ajaxOptions: {
                    dataType: 'json'
                },                
                success: function(response, newValue) {      
                    if(response.status == 'error') return response.msg;
                    if(response !== 'ok'){
                        alert('Error');
                    }
                }                
            });            
            
            
            $( "#from" ).datepicker({
                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( selectedDate ) {
                    $( "#to" ).datepicker( "option", "minDate", selectedDate );
                }
            });
            $( "#to" ).datepicker({
                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( selectedDate ) {
                    $( "#from" ).datepicker( "option", "maxDate", selectedDate );
                }
            });
        });
    </script>        
        
    
{% endblock javascript %}