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

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

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

{% block titulo_acciones_body %}
    {% if is_granted(constant('App\\Security\\Voter\\SesionVoter::ACCESS_CREATE')) %}
        <a href="{{ path('app_o_d_sesion_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">add</i>
            Nueva Sesión
        </a>
    {% endif %}
{% endblock %}

{% block body %}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <ul id="lista" class="collection resalt">
            {% for sesion in sesiones %}
                <li class="collection-item" style="line-height: 2.5rem;">
                    <div>
                        <a href="{{ path('orden', { idView: sesion.idView }) }}">
                            Sesión del {{ sesion.fechaSesion|date('d/m/Y') }}
                        </a>
                        {{ constant('App\\Entity\\OD\\Sesion::VIEW_ESTADO')[sesion.estadoSesion]['show_label'] | raw }}
                        
                        {% if is_granted(constant('App\\Security\\Voter\\SesionVoter::ACCESS_EDIT'), sesion) %}
                            <div class="secondary-content" >
                                <a href="{{ path('app_o_d_sesion_edit', { idView: sesion.idView }) }}" class="btn-floating btn-flat identidad-color darken-2" title="Editar Material">
                                    <i class="material-icons">edit</i>
                                </a>
                            </div>
                        {% endif %}
                    </div>
                </li>
            {% endfor %}
        </ul>
        <div style="display: flex;">
            <button id="botonBuscarMas" class="btn identidad-color darken-2 waves-effect waves-light col s12"
                onClick="getmoredata()">Cargar más sesiones</button>
            <div id="loader" 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>
        
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript"> 
        window.__isFetching = false;
        window.__offset = 20;
        window.__hasMoreData = true;
        $(loader).hide();

        $(window).scroll(function () {
            if(($(window).scrollTop() + $(window).height()) >= $(document).height() - 300){

                if(!window.__isFetching && window.__hasMoreData) {
                    getmoredata();
                    }
                }
            }
        )

        function getmoredata() {
            window.__isFetching = true;
            $(loader).show();
            $(botonBuscarMas).prop( "disabled", true );
            $.ajax({
                type: "GET",
                // NOTE, you can pass current offset here in url
                url: "{{ path('cargaHistorialSegmentado') }}"+"/"+window.__offset,
                dataType: "json",
                cache: false,
                success: function (response) {
                    for (data in response.data) {
                        var fechaFormateada =  response.data[data]['fecha']['date'].replaceAll('-','/').split(' ')[0].split("/").reverse().join("/");
                        var path= "{{ path('orden', { idView: 1 }) }}".replace('1',response.data[data]['idView']);
                        var labelFecha = "<li class='collection-item' style='line-height: 2.5rem;'><div><a href="+path+">Sesión del "+fechaFormateada+"</a> ";
                        
                        //Opcion de enviar si se puede editar la sesion
                        if (response.data[data]['editar'])
                        {
                            labelFecha = labelFecha + response.data[data]['estado'];
                            var path2= "{{ path('app_o_d_sesion_edit', { idView: 1 }) }}".replace('1',response.data[data]['idView']);
                            labelFecha = labelFecha + "<div class='secondary-content' >";
                            labelFecha = labelFecha + "<a href="+path2+" class='btn-floating btn-flat identidad-color darken-2' title='Editar Material'>";
                            labelFecha = labelFecha + "<i class='material-icons'>edit</i></a></div>";
                        }        
                        {# 
                        //Opcion de enviar el html del boton editar sesion (revisar ruta)
                        labelFecha = labelFecha + response.data[data]['editar'];
                        #}

                        labelFecha = labelFecha + "</div></li>";
                        var elementoLista = $(labelFecha);
                        $(lista).append(elementoLista);
                    }
                    //console.log(response);
                    //console.log(response.data);

                    // Note that here, server side response must have next offset and hasMoreData attribut.
                    window.__isFetching = false;
                    $(loader).hide();
                    $(botonBuscarMas).prop( "disabled", false );
                    window.__hasMoreData = response.hasMoreData;
                    window.__offset = response.offset
                    if(!window.__hasMoreData)
                    {
                        $(botonBuscarMas).prop( "disabled", true );
                        $(botonBuscarMas).hide();
                    }

                },
                error: function (response) {
                    console.log(response);
                }
            });
        }

    </script>
 {% endblock %}