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

{% block stylesheets %}
    {{ parent() }}
    <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)
                {
                    string_compacto = data.length >= 30 ? data.substring(0, 30)+"..." : data;
                    tooltiptext = data;
                }
                else
                {tooltiptext = "";}
                let string_final = '<div title="'+tooltiptext+'">'+string_compacto;
                string_final += '</div>';
                return string_final;
            }
            },
            { "data": "etiquetas" },
            { "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" target="_blank">',
                            '<i class="material-icons">visibility</i>',
                            '</a> ',
                        ].join('');
                        if(data['confirmar'] != null)
                        {
                            $botones += [
                            ' <button data-url="',data['confirmar'],
                            '" onclick="clickConfirmarIndividual(event)" class="btn-floating btn-flat identidad-color darken-2" title="Confirmar Material">',
                            '<i class="material-icons">publish</i>',
                            '</button>',
                            ].join('');
                        }
                        if(data['quitar'] != null)
                        {
                            $botones += [
                            ' <button data-url="',data['quitar'],
                            '" onclick="clickQuitarIndividual(event)" class="btn-floating btn-flat identidad-color darken-2" title="Quitar Material">',
                            '<i class="material-icons">delete</i>',
                            '</button>',
                            ].join('');
                        }
                        return $botones;
                    }
                    return data;
                },
            },
        ],
        order:  [[ {{ app.session.get(constant('App\\Controller\\OD\\MaterialSesionController::FORM_CONSULTA_MATERIAL_SESION_ORDER_COL')) ?? 2 }} ,
        '{{app.session.get(constant('App\\Controller\\OD\\MaterialSesionController::FORM_CONSULTA_MATERIAL_SESION_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\\OD\\MaterialSesionController::FORM_CONSULTA_MATERIAL_SESION_START')) ?? 0 }},
        serverSide: true,
        processing: true,
        ajax: {
            url: '{{ path('materiales_sesion_datos', {'idView' : sesion.idView}) }}',
            type: 'POST'
        }
    });

    // 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">

        var materiales = [];
        $(document).ready(function(){
            $('.datepicker').datepicker({
                autoClose: true,
                showClearBtn: true,
                format: 'dd/mm/yyyy',
                container: 'body',
                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('material_sesion_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('material_sesion_busqueda[etiquetas][]');
            inputs.forEach(function(etiqueta,i){etiqueta.checked = false;});  
            //Submit busqueda
            boton.click();
        }

        
        function clickVolver(e) { 
            $url_confirmar=e.currentTarget.dataset.url;
            window.location.href = $url_confirmar;                        
        }


        function clickConfirmarIndividual(e) { 
            var url_confirmar=e.currentTarget.dataset.url;
            var botonConfirmar=e.currentTarget;
            swal({
                title: "Confirmar",
                text: "¿Está seguro que quiere confirmar el material para la sesión?",
                icon: "warning",
                buttons: true,
                })
                .then((aceptar) => {
                    if (aceptar) {
                        $.ajax({
                            // The URL for the request
                            url: url_confirmar,
                            // The data to send (will be converted to a query string)
                            // Whether this is a POST or GET request
                            type: "POST",
                            // The type of data we expect back
                            dataType : "json",
                        })
                        // Code to run if the request succeeds (is done);
                        // The response is passed to the function
                        .done(function( json ) {
                            swal({
                                icon: 'success',
                                title: 'Éxito',
                                text: 'Éxito en la confirmación del material a la sesión',
                            });
                            botonConfirmar.children[0].textContent = "delete";
                            botonConfirmar.title = "Quitar Material";
                            botonConfirmar.onclick = clickQuitarIndividual;
                            botonConfirmar.dataset['url'] = botonConfirmar.dataset['url'].replace('agregar','del')
                        })
                        // Code to run if the request fails; the raw request and
                        // status codes are passed to the function
                        .fail(function( xhr, status, errorThrown ) {
                            swal({
                                icon: 'error',
                                title: 'Error',
                                text: 'Falló en la confirmación del material a la sesión',
                            });
                        });                        
                    } 
                });
        }

        function clickQuitarIndividual(e) { 
            var url_confirmar=e.currentTarget.dataset.url;
            var botonQuitar=e.currentTarget;
            swal({
                title: "Quitar",
                text: "¿Está seguro que quiere quitar el material de la sesión?",
                icon: "warning",
                buttons: true,
                })
                .then((aceptar) => {
                    if (aceptar) {
                        $.ajax({
                            // The URL for the request
                            url: url_confirmar,
                            // The data to send (will be converted to a query string)
                            // Whether this is a POST or GET request
                            type: "POST",
                            // The type of data we expect back
                            dataType : "json",
                        })
                        // Code to run if the request succeeds (is done);
                        // The response is passed to the function
                        .done(function( json ) {
                            swal({
                                icon: 'success',
                                title: 'Éxito',
                                text: 'Éxito en la quita del material a la sesión',
                            });
                            botonQuitar.children[0].textContent = "publish";
                            botonQuitar.title = "Confirmar Material";
                            botonQuitar.onclick = clickConfirmarIndividual;
                            botonQuitar.dataset['url'] = botonQuitar.dataset['url'].replace('del','agregar')
                        })
                        // Code to run if the request fails; the raw request and
                        // status codes are passed to the function
                        .fail(function( xhr, status, errorThrown ) {
                            swal({
                                icon: 'error',
                                title: 'Error',
                                text: 'Falló en la quita del material a la sesión',
                            });
                        });                        
                    } 
                });
        }
    </script>
    <style>
        table.dataTable.display tbody tr.identidad-color.lighten-5 > .sorting_1 {
            background-color: var(--cdlmag-prioritario) !important;
        }
    </style>
{% endblock %}

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="{{ path('main') }}">Inicio</a></li>
        <li><a href="{{ path('historial') }}">Historial de Sesiones</a></li>
        <li><a href="{{ path('orden', { idView: sesion.idView }) }}">Sesion del día - {{ sesion.fechaSesion|date('d/m/Y') }}</a></li>
        {# <li><a href="{{ path('orden', { idView: sesion.idView }) }}">Orden del día</a></li> #}
        <li><a class="active">Selección de Material de Trabajo</a></li>
    </ol>
{% endblock %}

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

{% block titulo_acciones_body %}
    {% if is_granted(constant('App\\Security\\Voter\\SesionVoter::ACCESS_EDIT'),sesion) %}
    {# <button onclick="clickConfirmar(event)" class="btn-large identidad-color white-text darken-2 waves-effect waves-light" title="Confirmar Materiales"
        data-url="{{ path('agregar_materiales_de_o_d_sesion_', {'idView': sesion.idView}) }}">
        <i class="material-icons right">save</i>Confirmar Materiales
    </button> #}
    <button onclick="clickVolver(event)" class="btn-large identidad-color white-text darken-2 waves-effect waves-light" title="Volver a Orden del Día"
        data-url="{{ path('agregar_materiales_de_o_d_sesion_', {'idView': sesion.idView}) }}">
        <i class="material-icons right">save</i>Volver al orden del día
    </button>
    {% endif %}
{% endblock %}

{% block body %}

    <div class="card">
        <div class="card-content">
            {{ form_start(form) }}
                <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>
                        </a>
                    </div>
                </div>
                <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>
                <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('o_d_material_sesion_limpiar_index', {'idView' : sesion.idView}) }}"
                            class="limpiar btn orange darken-2 waves-effect waves-light col s12" type="" >
                                Limpiar<i class="material-icons right">close</i>
                        </a>
                    </div>
                </div>
            {{ form_end(form) }}
        </div>
    </div>


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

        <tbody> 

        </tbody>
    </table>

{% endblock %}