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

{% block stylesheets %}
    {{ parent() }}
    <style>
        .badge.estilo-etiqueta {
            background-color: white; 
            margin: 7px; 
            min-width:2rem; 
            font-size:0.8rem;
        }
        
        select {
			display: initial;
		}
    </style>
{% endblock %}


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

    <script type="text/javascript">
        $(document).ready(function(){
            $('.listadoAdjuntos-reload').hide();
            
            {#
                //console.log('(document).ready - abrir1'); 
                $('#modalLaoding').modal({dismissible: false,});
                $('#modalLaoding').modal('open');  
                //console.log('(document).ready - abrir2');  
            #}
            $('#modalAdjunto').modal({ 
                {# dismissible: false, #}
            });
            
            $('.btn-add-adj').click(function(e) {
                var form = $(".form_adjunto")[0];
                console.debug(form);
                var formData = new FormData(form);
                {# console.debug(formData); #}
                {# var url = form.attr('action'); #}
                var urlRequest = "{{ path('s_n_adjunto_notificacion_alta', { idView : notificacion.idView }) }}";
                // Verificar si el campo de archivo está vacío 
                if (formData.getAll("adjunto_notificacion[urlAdjunto][]").length == 0) {
                     swal({
                        icon: 'error',
                        title: 'Error',
                        text: 'Por favor, seleccione un archivo adjunto.',
                    });
                    {# alert('Por favor, seleccione un archivo adjunto'); #}
                    return; 
                }
                if (formData.getAll("adjunto_notificacion[urlAdjunto][]").length > 0){
                    $.ajax({
                        // The URL for the request
                        url: urlRequest,
                        processData: false,
                        contentType:false,
                        // The data to send (will be converted to a query string)
                        data: formData,
                        // Whether this is a POST or GET request
                        type: "POST",
                        // The type of data we expect back
                        dataType : "html",
                        beforeSend: function( xhr ) {
                            $('.listadoAdjuntos').hide();
                            $('.listadoAdjuntos-reload').show();
                        },
                    }) 
                    // Code to run if the request succeeds (is done);
                    // The response is passed to the function
                    .done(function( html,status,jqXHR ) {
                        $('.listadoAdjuntos').html(html);
                        $('.listadoAdjuntos').show();
                        $('.listadoAdjuntos-reload').hide();
                        //Vacio Input File
                        $(".form_adjunto")[0][0].value = "";
                        //Vacio Input Text
                        $(".form_adjunto")[0][1].value = "";
                    })
                    // Code to run if the request fails; the raw request and
                    // status codes are passed to the function
                    .fail(function(xhr, status, errorThrown ) {
                        var mensaje = xhr.getResponseHeader('errores');
                        mensaje = mensaje.replaceAll('ó','ó').replaceAll('ú','ú').replaceAll('á','á').replaceAll('ñ','ñ').replaceAll('é','é').replaceAll('<br>', '\n');
                        $('.listadoAdjuntos').html(xhr.responseText);
                        $('.listadoAdjuntos').show();
                        $('.listadoAdjuntos-reload').hide();
                        {# const wrapper = document.createElement('div');
                        wrapper.innerHTML = mensaje;  #}
                        swal({
                            title: "Archivos no subidos",
                            text: mensaje,
                            icon: "error",
                            buttons: "Aceptar",
                            dangerMode: true,
                        })
                    }); 
                }
            });
            $('#divSelect').hide();
            $('#divLoading').hide();
            $('#divFormulario').show();
        });

        function modificarEtiqueta(e) { 
            var etiquetasFiltro = $('.filtroEtiquetas');
            var agregar = false;
            //Seteo la clase identidad-color al hijo (span), de la Etiqueta (bagde) (valores para visual)
            if(e.currentTarget.children[0].attributes['class'].value.includes("identidad-color lighten-4 identidad-color-text"))
                e.currentTarget.children[0].attributes['class'].value = e.currentTarget.children[0].attributes['class'].value.replace(" identidad-color lighten-4 identidad-color-text",'');
            else
            {
                e.currentTarget.children[0].attributes['class'].value += " identidad-color lighten-4 identidad-color-text";
                agregar = true;
            }
            
            //Seteo el valor al input, del label de la etiqueta (select, normalmente oculto) (valores para visual)
            var label_etiqueta = e.currentTarget.dataset.label;
            var inputEtiquetas = $('#select_etiquetas').parent().children('input')[0];
            if(agregar)
            {
                if(inputEtiquetas.value.length > 0 )
                    inputEtiquetas.value += ', '+label_etiqueta;
                else
                    inputEtiquetas.value += label_etiqueta;
            }
            else
            {
                inputEtiquetas.value = inputEtiquetas.value.replace(', '+label_etiqueta,'');
                inputEtiquetas.value = inputEtiquetas.value.replace(label_etiqueta+', ','');
                inputEtiquetas.value = inputEtiquetas.value.replace(label_etiqueta,'');
            }
            //Seteo el valor (id) de la etiqueta seleccionada al select (valor para consulta)
            var id_etiqueta = e.currentTarget.dataset.id;
            var selectEtiquetas = $('#select_etiquetas');
            for (i=0;i<selectEtiquetas.children().length;i++)
            {
                if(selectEtiquetas.children()[i].text == id_etiqueta)
                {
                    selectEtiquetas.children()[i].selected = agregar;
                }
            }
        }

        function clickPublicar() {
            tipoSubmit.value = 'publicar';
        }

        function clickEliminar() {
            swal({
                title: "Borrar",
                text: "¿Está seguro que quiere borrar el material? \n Evalúe si lo que quiere es enviarlo a borrador",
                icon: "warning",
                buttons: true,
                dangerMode: true,
                })
                .then((aceptar) => {
                    if (aceptar) {
                        tipoSubmit.value = 'eliminar';
                        document.forms.notificacion.submit();
                    } 
                });
        }    
    </script>
{% endblock %}

{% block dialogos_modales %}

    <div id="modalAdjunto" class="modal">
        <div class="modal-content">
            {# <h4>
                Agregar adjunto
            </h4> #}
            {{ render(controller(
                'App\\Controller\\SN\\AdjuntoNotificacionController::altaAdjunto', { idView : notificacion.idView }
            )) }}
        </div>
        <div class="modal-footer">
            <a href="#" class="modal-close waves-effect waves-red btn-flat">
                Cancelar
            </a>
            <a href="#" class="modal-close waves-effect waves-green btn-flat btn-add-adj">
                Agregar Adjunto
            </a>
        </div>
    </div>

{% endblock %}

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="{{ path('main') }}">Inicio</a></li>
        <li><a href="{{ path('s_n_notificacion_index') }}">Material de Trabajo</a></li>
        <li><a class="active">Material</a></li>
    </ol>
{% endblock %}

{% block titulo_body %}
    <div style="display: flex;">
        <i class="material-icons medium left identidad-color-text">business_center</i>
        <h4 style="margin-top: 12px;">Material de Trabajo</h4>
        {% if constant('App\\Entity\\SN\\Notificacion::ESTADO_BORRADOR') in workflow_marked_places(notificacion) %}
            <span style="margin-top: 15px;margin-left: 5px;"><i><sub style="color:darkorange">{Borrador}</sub></i></span>
        {% elseif constant('App\\Entity\\SN\\Notificacion::ESTADO_ELIMINADO') in workflow_marked_places(notificacion)%}
            <span style="margin-top: 15px;margin-left: 5px;"><i><sub style="color:red">{Eliminado}</sub></i></span>
        {% else %}
            <span style="margin-top: 15px;margin-left: 5px;"><i><sub style="color:green">{Publicado}</sub></i></span>
        {% endif %}
    </div>
{% endblock %}

	
{% block body %}

    <div id="divLoading" class="card-panel">
        {% include 'procesando.html.twig' %}
    </div>
    <div id="divFormulario" hidden>
    {{ form_start(form) }} 
        <div class="card-panel">
            {% if is_granted(constant('App\\Security\\Voter\\NotificacionVoter::ACCESS_PRIVADO_EDIT'), notificacion) %}
            <div class="row" style="display: flex; align-items: center;">
                <div class="col s8">
                {{ form_row(form.asunto) }}
                </div>
                <div class="col s4">
                    <label>
                        {{ form_widget(form.estadoPrivado) }}
			            <span>{{ form.estadoPrivado.vars.label }}</span>
                    </label>
                </div>
            </div>
            {% else %}
                {{ form_row(form.asunto) }}
            {% endif %}
            <div class="row">
                <div class="col s8">
                    <div class="row">
                        <div class="col s12">
                            {# {{ form_label(form.textoCuerpo) }} #}
                            <h6>Descripción</h6>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col s12">
                            {{ form_widget(form.textoCuerpo) }}
                        </div>
                    </div>
                </div>
            
                <div class="col s4">
                    <div class="row">
                        <div class="col s9">
                            <h5>Archivos adjuntos</h5>
                        </div>
                        <div class="col s3">
                            <button class="btn-floating modal-trigger identidad-color dark-2" title="Agregar adjunto"
                                data-target="modalAdjunto" type="button">
                                <span class="material-icons">add</span>
                            </button>
                        </div>
                    </div>

                    <ul class="collection with-header listadoAdjuntos">
                        {{ include ('sn/adjunto_notificacion/_lis_adjuntos.html.twig', { adjuntos: notificacion.adjuntos }) }}
                    </ul>
                    <div class="preloader-wrapper small active listadoAdjuntos-reload">
                        <div class="spinner-layer spinner-blue-only">
                            <div class="circle-clipper left">
                                <div class="circle"></div>
                            </div>
                            <div class="gap-patch">
                                <div class="circle"></div>
                            </div>
                            <div class="circle-clipper right">
                                <div class="circle"></div>
                            </div>
                        </div>
                    </div>
                            
                </div>
            </div>
            
            <div class="row" style="padding-top:25px">
                <div class="col">
                    <h6 style="padding-left:5px"> {{ form.materialesEtiquetas.vars.label }}</h6>
                </div>
            </div>
            <div class="row">
                <div id="listadoEtiquetas" class="col" >
                    {% set tipoAreaActual = null %}  
                    {% for etiqueta in form.materialesEtiquetas.vars.choices|sort((a, b) => a.label <=> b.label)|sort((a, b) => a.data.tipo <=> b.data.tipo) %}
                        {% if tipoAreaActual != etiqueta.data.tipo  %}
                            {% if tipoAreaActual != null %} </div> {% endif %}
                            {% set tipoAreaActual = etiqueta.data.tipo %}  
                            <div id="div-{{etiqueta.data.tipo}}" class="row" 
                                style="margin:0px; padding:0px; display: flex;align-items: center;"> 
                                {% if etiqueta.data.tipo != areaUsuario.nombre %}
                                    <h8 style="padding-left:25px">{{etiqueta.data.tipo}}:</h8>
                                {% else %}
                                    {# <h8 style="padding-left:25px">TEMÁTICA:</h8> #}
                                    <span class="badge estilo-etiqueta identidad-color lighten-4 identidad-color-text">
                                        {{areaUsuario.nombre}}
                                    </span>
                                {% endif %}
                        {% endif %}
                        <button type="button" onclick="modificarEtiqueta(event)" data-id="{{etiqueta.value}}" 
                            data-label="{{etiqueta.label}}" style="border: none; background: none; background-color: transparent !important; padding:0px">
                            <span class="badge estilo-etiqueta 
                            {{(etiqueta.data in form.materialesEtiquetas.vars.data) ? 'identidad-color lighten-4 identidad-color-text' : '' }}">
                                {{etiqueta.label}}
                            </span>
                        </button>  
                    {% endfor %}
                    {% if tipoAreaActual != null  %} </div> {% endif %}
                </div>
                <div id="divSelect">
                    {{ form_widget(form.materialesEtiquetas,{'attr': {'style':'width: 300px;', 'onchange':'actualizarEtiquetas()'},  'id': 'select_etiquetas' }) }}
                    <label></label>
                </div>
            </div>
        </div>

        <div class="row" style="justify-content: space-between;">
            <div class="col right">
                <button class="btn identidad-color darken-2 guardarNoti right" onclick="clickPublicar()" {{ workflow_can(notificacion, 'publicar') ? "" : "disabled"}} >
                    Guardar y publicar
                    <i class="material-icons right">publish</i>
                </button>
            </div>                      
            <div class="col right">
                <button class="btn identidad-color darken-2 guardarNoti left" {{ workflow_can(notificacion, 'publicar') ? "" : "disabled"}}> 
                    Guardar como borrador
                    <i class="material-icons right">save</i>
                </button>
            </div>  
            <div class="col right">
                <button class="btn left red darken-2" {{ workflow_can(notificacion, 'eliminar') ? "" : "disabled"}} 
                    onclick="clickEliminar()" type="button">
                    Borrar
                    <i class="material-icons right">delete</i>
                </button>
            </div>
            <input type="hidden" name="tipoSubmit" id="tipoSubmit" value='guardar'>
        </div>
    {{ form_end(form) }}
    </div>

{% endblock %}