{% extends 'base.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <style>
        .badge.estilo-etiqueta {
            background-color: white; 
            margin: 7px; 
            min-width:2rem; 
            font-size:0.8rem;
        }
    </style>
{% endblock %}

{% block javascripts_base %}
    function initDateFormat( datePicker ) {
        {# console.debug(datePicker); #}
        var selectedDate = ( typeof datePicker.date === 'undefined' || datePicker.date === null ) ? datePicker.options.defaultDate : datePicker.date;
        var shortWeekdays = datePicker.options.i18n.weekdaysShort; 
        var shortMonths = datePicker.options.i18n.monthsShort; 
        var day     = selectedDate.getDate();
        var weekday = shortWeekdays[ selectedDate.getDay() ];
        var month   = shortMonths[ selectedDate.getMonth() ];

        var formattedDate = weekday + ', ' + day + ' ' + month;
        document.querySelector(".datepicker-date-display .date-text").innerHTML = formattedDate;
        document.querySelector(".datepicker-date-display .year-text").innerHTML = selectedDate.getFullYear();
    }
{% endblock %}

{% block js_document_ready %}
    
    //defino variable para fecha actual
    var currentdate = new Date();
    var datetime = "Extraído el: " + currentdate.getDate() + "/"
        + (currentdate.getMonth()+1)  + "/"
        + currentdate.getFullYear() + "   " 
        + currentdate.getHours() + ":" 
        + currentdate.getMinutes() + ":"
        + currentdate.getSeconds();

    $('#datatable').dataTable({
        createdRow: function(row, data, dataIndex) {
                    if (data['estadoNotificacion'].indexOf('Prioritario')!=-1) {
                        {# $(row).css({"background-color":"red"}); #}
                       {#  $(row).addClass('identidad-color lighten-5'); #}
                    }
                },

        filter : false,
        language: {
           "url": "//cdn.datatables.net/plug-ins/1.12.1/i18n/es-ES.json"
        },
        aLengthMenu: "",
        bAutoWidth: false,
        "columns": [
            { "data": "asunto",
            render: function(data, type, row, meta) {
                let string_compacto = "";
                if(data != null)
                {
                    tooltiptext = data;
                    string_compacto = data.length >= 70 ? data.substring(0, 70)+"..." : data;
                }
                else
                {tooltiptext = "";}
                let string_final = "<div title='"+tooltiptext+"'>";
                if(row['estadoNotificacion'].indexOf('Privado')!=-1)
                    {string_final += '<i class="material-symbols-outlined" style="font-size: 28px;" title="Material con acceso limitado">privacy_tip</i> ';}
                string_final += string_compacto;
                if(row['estadoNotificacion'].indexOf('Borrador')!=-1)
                    {string_final += ' <i><sub style="color:darkorange">{Borrador}</sub></i>';}
                
                string_final += '</div>';
                return string_final;
            }
            },
            { "data": "etiquetas" },
            {# { "data": "estadoNotificacion" }, #}
            { "data": "fechaHoraPublicacion"},
            { 
                "data": "acciones" ,
                render: function(data, type, row, meta) {
                    if (type === 'display') {
                        $botones = [
                            ' <a href="',
                            data['ver'],
                            '" class="btn-floating btn-flat identidad-color darken-2" title="Ver Material">',
                            '<i class="material-icons">visibility</i>',
                            '</a> ',
                        ].join('');
                        if(data['editar']!=null)
                        {
                            $botones += [
                                ' <a href="',
                                data['editar'],
                                '" class="btn-floating btn-flat identidad-color darken-2" title="Editar Material">',
                                '<i class="material-icons">edit</i>',
                                '</a>',
                            ].join('');
                        }
                        if(data['publicar']!=null)
                        {
                            $botones += [
                            ' <button data-url="',data['publicar'],
                            '" onclick="clickPublicar(event)" class="btn-floating btn-flat identidad-color darken-2" title="Publicar Material">',
                            '<i class="material-icons">publish</i>',
                            '</button>',
                            ].join('');
                        }
                        return $botones;
                    }
                    return data;
                },
            },
        ],
        order:  [[ {{ app.session.get(constant('App\\Controller\\SN\\NotificacionController::FORM_CONSULTA_MATERIAL_ORDER_COL')) ?? 2 }} ,
        '{{app.session.get(constant('App\\Controller\\SN\\NotificacionController::FORM_CONSULTA_MATERIAL_ORDER_DIR')) ?? 'desc'}}']],
        columnDefs: [
            // These are the column name variables that will be sent to the server
            { 
                "name": "asunto",   
                "targets": 0,
            },
            { 
                "name": "etiquetas",   
                "searchable": false, 
                "orderable": false,  
                "targets": 1 
            },
            {# { 
                "name": "estadoNotificacion",  
                "targets": 2 
            }, #}
            { 
                "name": "fechaHoraPublicacion",  
                "targets": 2 
            },
            { 
                "searchable": false, 
                "orderable": false,  
                "targets": 3 
            },
        ],
        "displayStart": {{ app.session.get(constant('App\\Controller\\SN\\NotificacionController::FORM_CONSULTA_MATERIAL_START')) ?? 0 }},
        serverSide: true,
        processing: true,
        ajax: {
            url: '{{ path('materiales_datos') }}',
            type: 'POST'
        }
        ,
        fnDrawCallback: function( oSettings ) {
            // Ocultar columnas si no esta seteada el numero de acta
            $('#datatable tbody tr').each(function() {
                var fechaCell1 = $(this).find('td:eq(1)'); // Columna de etiquetas en la tabla
                var fechaCell2 = $(this).find('td:eq(2)'); // Columna de fechas en la tabla
                fechaCell1.addClass("hide-on-small-only");
                fechaCell2.addClass("hide-on-small-only");
            });
        }
    });

    // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
    {# $('.modal1').modal(); #}
    $('select').formSelect(); 
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">

        $(document).ready(function(){
            $('.datepicker').datepicker({
                autoClose: true,
                showClearBtn: true,
                format: 'dd/mm/yyyy',
                container: 'body',
                {# defaultDate: p_defaultDate, #}
                {# yearRange: p_yearRange, #}
                {# maxDate: p_maxDate, #}
                {# setDefaultDate: p_setDefaultDate, #}
                onDraw: function () {
                    // materialize select dropdown not proper working on mobile and tablets so we make it browser default select
                    $('.datepicker-container').find('.datepicker-select').addClass('browser-default');
                    $(".datepicker-container .select-dropdown.dropdown-trigger").remove()
                },
                onOpen: function (p) {
                    var instance = M.Datepicker.getInstance(this.el);
                    var d = instance.el.value.split(/[^0-9]/);
                    var newDate = new Date(d[2], d[1] - 1, d[0]);
                    instance.setDate(newDate);
                    initDateFormat(instance);
                },
                i18n: {
                    cancel:	'Cancelar',
                    clear: 'Limpiar',
                    done: 'Aceptar',
                    weekdays: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
                    weekdaysShort: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
                    weekdaysAbbrev: ["D", "L", "M", "M", "J", "V", "S"],
                    today: 'Hoy',
                    months: [
                        'Enero',
                        'Febrero',
                        'Marzo',
                        'Abril',
                        'Mayo',
                        'Junio',
                        'Julio',
                        'Agosto',
                        'Septiembre',
                        'Octubre',
                        'Noviembre',
                        'Diciembre'
                    ],
                    monthsShort: [
                        'Enero',
                        'Febrero',
                        'Marzo',
                        'Abril',
                        'Mayo',
                        'Junio',
                        'Julio',
                        'Agosto',
                        'Septiembre',
                        'Octubre',
                        'Noviembre',
                        'Diciembre'
                    ],
                }
            });
            
            cargarClasesFiltroEtiquetas();
            divFiltroEtiquetas.style.display='';
            
            
        });

        function cargarClasesFiltroEtiquetas() {
            var inputs = document.getElementsByName('notificacion_busqueda[etiquetas][]');
            inputs.forEach(function(etiqueta,i){
                etiqueta.classList.add('checkBadge');
                etiqueta.onclick = function name(params) {
                    var botonLimpiarEtiquetas = $('#botonLimpiarEtiquetas');
                    var activo = $(divFiltroEtiquetas).children().children('input:checked').length > 0 ? false : true
                    if(activo == false)
                    {
                        $('#botonLimpiarEtiquetas').children()[0].classList.remove('identidad-color');
                        $('#botonLimpiarEtiquetas').children()[0].classList.remove('lighten-4');
                        $('#botonLimpiarEtiquetas').children()[0].classList.remove('identidad-color-text');
                    }
                    else
                    {
                        $('#botonLimpiarEtiquetas').children()[0].classList.add('identidad-color');
                        $('#botonLimpiarEtiquetas').children()[0].classList.add('lighten-4');
                        $('#botonLimpiarEtiquetas').children()[0].classList.add('identidad-color-text');
                    }  
                    //Submit busqueda
                    boton.click();
                    };
                }
            );
        }
         
        function limpiarEtiquetas(e) { 
            var botonLimpiarEtiquetas = $('#botonLimpiarEtiquetas');
            botonLimpiarEtiquetas.children()[0].classList.add('identidad-color');
            botonLimpiarEtiquetas.children()[0].classList.add('lighten-4');
            botonLimpiarEtiquetas.children()[0].classList.add('identidad-color-text');
            var inputs = document.getElementsByName('notificacion_busqueda[etiquetas][]');
            inputs.forEach(function(etiqueta,i){etiqueta.checked = false;});  
            //Submit busqueda
            boton.click();
        }

        function clickPublicar(e) { 
            $url_publicar=e.currentTarget.dataset.url;
            swal({
                    title: "Publicar",
                    text: "¿Está seguro que quiere publicar el material?",
                    icon: "warning",
                    buttons: true,
                    })
                    .then((aceptar) => {
                    if (aceptar) {
                        window.location.href = $url_publicar;                        
                        } 
                });
        }
    </script>
    <style>
        table.dataTable.display tbody tr.identidad-color.lighten-5 > .sorting_1 {
            background-color: var(--cdlmag-prioritario) !important;
        }
    </style>
{% endblock %}

{% block titulo_body %}
    <i class="material-icons medium left identidad-color-text">business_center</i>
    <h4 style="margin-top: 12px;">Material de Trabajo</h4>
{% endblock %}

{% block titulo_acciones_body %}
    {% if is_granted(constant('App\\Security\\Voter\\NotificacionVoter::ACCESS_CREATE'),null) %}
    <a href="{{ path('s_n_notificacion_new') }}" class="btn-large identidad-color white-text darken-2 waves-effect waves-light " 
        style="margin-top: 12px; float:right">
        <i class="material-icons right">save</i>
        Nuevo Material
    </a>
    {% endif %}
{% endblock %}

{% block body %}

    <div class="card">
        <div class="card-content">
            {{ form_start(form) }}
                {% if (not is_granted('ROLE_CONSEJO')) and (not is_granted('ROLE_MUGE')) %}
                    <div class="row">
                        <div class="col">
                            <h7 class="left" style="padding-top: 10px; margin-right: 10px;">FILTRAR POR:</h7>
                        </div>
                        <div id="divFiltroEtiquetas" class="col right" style="max-width:90%; display:none">
                            {% for formEtiqueta in form.etiquetas.children %}
                                <label>
                                    {{ form_widget(formEtiqueta) }}
                                    <span class="badge estilo-etiqueta">
                                        {{form.etiquetas.vars.choices[formEtiqueta.vars.value].label}} 
                                    </span>
                                </label>
                            {% endfor %}
                            <button type="button" onclick="limpiarEtiquetas(event)" id="botonLimpiarEtiquetas" 
                                style="border:none; background-color:transparent !important; padding:0px">
                                <span class="badge estilo-etiqueta  
                                    {{(form.etiquetas.vars.value == [] ) ? 'identidad-color lighten-4 identidad-color-text' : '' }}">
                                    VER TODAS
                                </span>
                        </div>
                    </div>
                {% endif %}
                <div class="row">
                    <div class="input-field col s12 m6 l6">
                        {{ form_widget(form.textoBusqueda) }}
                        {{ form_label(form.textoBusqueda) }}
                    </div>
                    <div class="input-field col s12 m2 l2">
                        {{ form_label(form.fechaHoraPublicacionDesde) }}
                        {{ form_widget(form.fechaHoraPublicacionDesde) }}
                    </div>
                    <div class="input-field col s12 m2 l2">
                        {{ form_label(form.fechaHoraPublicacionHasta) }}
                        {{ form_widget(form.fechaHoraPublicacionHasta) }}
                    </div>
                    <div class="input-field col s12 m2 l2">
                        {{ form_widget(form.estadoNotificacion) }}
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col m2 s12 l2">
                        <button id="boton" class="btn identidad-color darken-2 waves-effect waves-light col s12" type="submit" >Buscar<i class="material-icons right">search</i></button>
                    </div>
                    <div class="input-field col m2 s12 l2">
                        <a id="botonLimpiar" href="{{ path('s_n_notificacion_limpiar_index') }}"
                            class="limpiar btn orange darken-2 waves-effect waves-light col s12" type="" >
                                Limpiar<i class="material-icons right">close</i>
                        </a>
                    </div>
                    {% if is_granted(constant('App\\Security\\Voter\\NotificacionVoter::ACCESS_CREATE'),null) %}
                        <div class="input-field col m2 s12 l2 right" style="width:auto">
                            <a href="{{ path('s_n_notificacion_borradores_index') }}"
                                class="" type="" > 
                                <span class="" style="color:red;">
                                    Cantidad de borradores: {{cantidad_borradores}}
                                </span>
                            </a>
                        </div>
                    {% endif %}
                </div>
            {{ form_end(form) }}
        </div>
    </div>
{# </div> #}



<br>
    <table id="datatable" class="display">
        <thead>
            <tr>
                <th>Asunto</th>
                <th class="hide-on-small-only">Etiquetas</th>
                {# <th>Estado</th> #}
                <th class="hide-on-small-only">Fecha - Hora Publicación</th>
                <th class="not-export-col">Acciones</th>
          </tr>
        </thead>

        <tbody> 

        </tbody>
    </table>

{% endblock %}