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

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

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

{% 
    set tooltips = {
        'closing_at':'Fecha de cierre',
        'publish_at':'Fecha de publicación',
    } 
%}

{%
    set filters = {
        'create':'Fecha de creación (Create at)',
        'publish':'Fecha de publicación (Publish at)',
        'closing':'Fecha de cierre (Closing at)',
    } 
%}

{% set noShow = ['username','image_filename','image_create_at'] %}   

{% for field in requiredFields %}    
    {% if field not in activeFields %}    
        {% set noShow = noShow | merge([field | slice(2)]) %}
    {% endif %}      
{% endfor %}

{% block titulo %}Gestor Medios{% endblock %}
{% block lang %}{% endblock lang %}

{% 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 %}{% endblock bread %}

{% block oneOne %}               
    
    <section class="mainbar">
    
        <article class="tabs">
            <ul>
                <li><a href="#basicFilters" title="">Filtros</a></li>
                <li><a href="#fields" title="">Campos visibles</a></li>
                <li><a href="#export" title="">Exportar datos</a></li>
            </ul>
            <div class="panes" style="overflow:hidden;">
                <div id="basicFilters">
                    <form method="post" class="form" action="{{ url('backend-media-kit') }}">
                        <ul class="filters">       
                            <li>
                                <fieldset>
                                    <p class="head">Filtro por defecto (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>
                                        {% for k,v in filters %}
                                            <option {{ filter_predefined == k ? 'selected="selected"' : '' }} value="{{ k }}">{{ v }}</option>    
                                        {% endfor %}
                                    </select>              
                                </fieldset>
                                <fieldset>
                                    <p class="head">Canal</p>
                                    <select name="canal">                    
                                        <option value="">selecciona...</option>
                                        {% for c in canales %}
                                            <option {{ canal == c.id ? 'selected="selected"' : '' }} value="{{ c.id }}">{{ c.name_es }}</option>    
                                        {% endfor %}
                                    </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 or canal %}
                                        <input type="submit" name="reset" value="Reset" class="button bBlueFade" />
                                    {% endif %}
                                </fieldset>
                            </li>
                            <li>
                                <h3><span class="counterT">{{ numTotalItems }}</span> registros</h3>  
                                <a class="button bGreen" style="float:right;margin:16px;color:#fff;text-decoration: none" title="Crear nueva entrada" href="{{ url('backend-media-kit-create') }}">Nueva entrada</a>
                            </li>
                        </ul>
                    </form>                
                </div>
                <div id="fields" class="advancedFilters">
                    <form method="post" class="form" action="{{ url('backend-media-kit') }}">
                        <ul>
                        {% for field in allFields %}
                            <li>
                                <input type="checkbox" name="fieldsToShow[]" {{ field in activeFields ? 'checked="checked"' : '' }} value="{{ field }}" /> {{ field }}
                            </li>
                        {% endfor %}
                        </ul>
                        <br clear="all" />
                        <input class="button bBlue" style="font-size:11px" type="submit" style="margin:0" value="Actualizar campos" />
                    </form>            
                </div>            
                <div id="export" class="advancedFilters">
                    <form method="post" style="padding:10px;" class="form" action="{{ url('backend-media-kit') }}">
                        <input type="hidden" name="exportCsv" value="1" />                    
                        <input class="button bBlue" style="margin:0;font-size:11px" type="submit" value="CSV para excel" />
                    </form>                
                </div>
            </div>
        </article>    

        <br clear="left" />
        
        <article class="dinamic">            
            <div>
                {% if date_start or date_end or search or filter_predefined or canal %}
                    <strong>Filtros: </strong>
                {% endif %}
                {% if (date_start or date_end) and filter_predefined in 'create,publish,closing' %}
                    {% if date_start == date_end %}
                        <span>El {{ dateFormat(date_start) }}</span>
                    {% else %}
                        <span>Entre el {{ dateFormat(date_start) }} y el {{ dateFormat(date_end) }}</span>
                    {% endif %}                    
                {% endif %}                     
                {% if search %}
                    <span>{{ search }}</span>
                {% endif %}
                {% if filter_predefined is not empty %}
                    <span>{{ filters[filter_predefined] }}</span>
                {% endif %}                            
                <h2><b class="counterS">{{ numItems }}</b> {{ numItems == 1 ? 'registro seleccionado' : 'registros seleccionados' }}</h2>
            </div>        
        </article>

        {{ paginador | raw }} 
        
        <table class="grill blog">

            {% for row in items %}

                {% if loop.first %}
                    <thead>
                        <tr>
                            <td></td>
                            {% for k,v in row %}
                                {% 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 not in noShow %}
                            <td>                           
                                {% if k in 'create_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-media-kit-editable') }}" data-title="{{ k | replace({"_":" "}) | capitalize }}">
                                        {{ v  | date('d-m-Y H:i') }}
                                    </a>      
                                {% elseif k in 'publish_at,closing_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-media-kit-editable') }}" data-title="{{ k | replace({"_":" "}) | capitalize }}">
                                        {{ v  | date('d-m-Y') }}
                                    </a>                                     
                                {% elseif k in 'visibility' %}
                                    <a href="#" class="editable" id="{{ k }}" data-value="{{ v }}" data-showbuttons="false" data-source="[{value: 1, text: 'On'},{value: 0, text: 'Off'}]" data-type="select" data-pk="{{ row.id }}" data-url="{{ url('backend-media-kit-editable') }}" data-title="{{ k | replace({"_":" "}) | capitalize }}">
                                        {{ v == 1 ? 'Público' : 'Privado' }}
                                    </a> 
                                {% elseif k in 'state' %}
                                    <a href="#" class="editable" id="{{ k }}" data-value="{{ v }}" data-showbuttons="false" data-source="[{value: 1, text: 'On'},{value: 0, text: 'Off'}]" data-type="select" data-pk="{{ row.id }}" data-url="{{ url('backend-media-kit-editable') }}" data-title="{{ k | replace({"_":" "}) | capitalize }}">
                                        {{ v == 1 ? 'Activado' : 'Desactivado' }}
                                    </a>                                     
                                {% elseif k in 'title_es,title_en,slug_es,slug_en' %}
                                    <a href="#" class="editable" id="{{ k }}" data-type="text" data-pk="{{ row.id }}" data-url="{{ url('backend-media-kit-editable') }}" data-title="{{ k | replace({"_":" "}) | capitalize }}">
                                        {{ v }}
                                    </a>   
                                {% elseif k in 'description_es,description_en' %}
                                    <a style="overflow:hidden;display:block;height:20px;width:200px;" href="#" class="editable tooltip" title="{{ v }}" id="{{ k }}" data-type="textarea" data-pk="{{ row.id }}" data-url="{{ url('backend-media-kit-editable') }}" data-title="{{ k | replace({"_":" "}) | capitalize }}">
                                        {{ v }}
                                    </a> 
                                {% elseif k in 'categories' %}
                                    {{ v | replace({"-":" "}) | capitalize }}
                                {% else %}
                                    {{ v }}
                                {% endif %}
                            </td> 
                        {% endif %}
                    {% endfor %}   
                    <td class="edit">
                        <a class="iconEdit" href="{{ url('backend-media-kit-edit',{'id':row.id}) }}" title="Editar">
                            Editar
                        </a>                          
                    </td>  
                    <td class="delete">
                        <a class="iconDel" id="{{ row.id }}" href="{{ url('backend-media-kit-delete') }}" title="Eliminar">
                            Eliminar
                        </a>                          
                    </td>                 
                </tr>        

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

            {% endfor %}

        </table>

        {{ paginador | raw }}            

        <form name="order" method="post" action="{{ url('backend-media-kit') }}">
            <input type="hidden" name="order" value="" />
            <input type="hidden" name="mode" value="" />
        </form>
    
    </section>        
        
{% 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() {
            
            $(".tabs").tabs();
            
            $('.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 %}