{% extends 'base.html.twig' %}
{% block stylesheets %}
    <link rel="stylesheet"
          href="{{ asset('assets/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/bower_components/fullcalendar/dist/fullcalendar.min.css') }}">
    <link rel="stylesheet" href=="{{ asset('assets/bower_components/fullcalendar/dist/fullcalendar.print.min.css') }}"
          media="print">
{% endblock stylesheets %}
{% block titulo %}Programa{% endblock %}
{% block subtitulo %}{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-md-6">
            <div class="box box-info">
                <div class="box-body">
                    <a href="{{ asset('images/programa.svg') }}" target="_blank"><img
                                src="{{ asset('images/programa.svg') }}" width="100%"></a>
                </div>
            </div>
            <div class="box box-success">
                <div class="box-header">
                    <h3 class="box-title">Ponencias confirmadas</h3>
                </div>
                <div class="box-body">
                    <div class="dataTables_wrapper form-inline dt-bootstrap">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="table-responsive">
                                    <table id="mitabla" class="table table-bordered table-striped dataTable"
                                           role="grid"
                                           aria-describedby="mitabla_info">
                                        <thead>
                                        <tr role="row">
                                            <th class="sorting_asc" tabindex="0" aria-controls="mitabla"
                                                rowspan="1"
                                                colspan="1" aria-sort="ascending">
                                                Título
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="mitabla" rowspan="1"
                                                colspan="1">
                                                Autores
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        {% for trabajo in trabajos %}
                                            {% if trabajo.publico %}
                                                <tr role="row" class="odd">
                                                    <td class="sorting_1">
                                                        <a href="#modal-{{ trabajo.id }}" data-toggle="modal">
                                                            {{ trabajo.titulo }}
                                                        </a>
                                                    </td>
                                                    <td>
                                                        <a href="{{ path('ver_perfil_publico', {'id': trabajo.autor.id | nzo_encrypt } ) }}">
                                                            {{ trabajo.autor.nombre }} {{ trabajo.autor.primerapellido }}
                                                        </a>
                                                        {% if trabajo.lista_coautores %}
                                                            , {{ trabajo.lista_coautores }}
                                                        {% endif %}
                                                    </td>
                                                </tr>


                                                <div class="modal fade" id="modal-{{ trabajo.id }}" tabindex="-1"
                                                     role="dialog"
                                                     aria-labelledby="comentarioModalLabel"
                                                     aria-hidden="true">
                                                    <div class="modal-dialog" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h4 class="modal-title"
                                                                    id="exampleModalLabel">{{ trabajo.titulo }}</h4>
                                                                <button type="button" class="close"
                                                                        data-dismiss="modal"
                                                                        aria-label="Cerrar">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                                <span>{{ trabajo.autor.nombre }} {{ trabajo.autor.primerapellido }}
                                                                    {% if trabajo.lista_coautores %}
                                                                        , {{ trabajo.lista_coautores }}
                                                                    {% endif %}
                                                            </span>
                                                            </div>
                                                            <div class="modal-body">

                                                                <p>
                                                                    <span class="label label-success">{{ trabajo.modalidad }}</span>
                                                                    <span class="label label-info">{{ trabajo.nivel }}</span>
                                                                    <span class="label label-warning">{{ trabajo.tema }}</span>
                                                                </p>
                                                                <hr/>
                                                                <p>{{ trabajo.resumen }}</p>
                                                                <p>Palabras claves: {{ trabajo.palabrasClaves }}</p>
                                                                {% if trabajo.bloque and agenda_publica %}
                                                                    <hr/>
                                                                    <div class="row">
                                                                        <div class="col-md-4">
                                                                            <i class="fa fa-calendar-check-o margin-r-5"></i> {{ trabajo.bloque.dia }}
                                                                        </div>
                                                                        <div class="col-md-4">
                                                                            <i class="fa fa-clock-o margin-r-5"></i> {{ trabajo.bloque.horaminutoscomienzo }}
                                                                        </div>
                                                                        <div class="col-md-4">
                                                                            <i class="fa fa-university margin-r-5"></i> {{ trabajo.bloque.lugar }}
                                                                        </div>
                                                                    </div>


                                                                {% endif %}
                                                            </div>
                                                            <div class="modal-footer">
                                                                {% if trabajo.archivoFinalPDF is not null %}
                                                                    <a href="{{ vich_uploader_asset(trabajo,'archivoFinalPDFFile') }}"
                                                                       class="btn btn-success pull-left"
                                                                       target="_blank">
                                                                        <i class="fa fa-file-pdf-o margin-r-5"></i>
                                                                        Resumen ejecutivo</a>
                                                                {% endif %}
                                                                <button type="button"
                                                                        class="btn btn-primary"
                                                                        data-dismiss="modal">
                                                                    Cerrar
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %}
                                        {% endfor %}

                                        </tbody>
                                        <tfoot>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <a href="{{ path('matriculacion_personal') }}" class="btn btn-block btn-flat btn-primary">Inscripción a
                talleres</a><br>
            <div class="box box-primary">
                <div class="box-body no-padding">
                    <!-- THE CALENDAR -->
                    <div id="calendar"></div>
                </div>
                <!-- /.box-body -->
            </div>
            <br>
            <a href="{{ path('programa_completo') }}" class="btn btn-block btn-flat btn-warning">Programa completo</a>
        </div>
    </div>



{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/bower_components/jquery-ui/jquery-ui.min.js') }}"></script>
    <script src="{{ asset('assets/bower_components/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('assets/bower_components/jquery-slimscroll/jquery.slimscroll.min.js') }}"></script>
    <script src="{{ asset('assets/bower_components/fastclick/lib/fastclick.js') }}"></script>
    <script src="{{ asset('assets/bower_components/moment/moment.js') }}"></script>
    <script src="{{ asset('assets/bower_components/fullcalendar/dist/fullcalendar.min.js') }}"></script>
    <script>
        $(function () {
            $('#mitabla').DataTable({
                stateSave: true,
                "language": {
                    "sProcessing": "Procesando...",
                    "sLengthMenu": "Mostrar _MENU_ registros",
                    "sZeroRecords": "No se encontraron resultados",
                    "sEmptyTable": "Ningún dato disponible en esta tabla",
                    "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                    "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                    "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                    "sInfoPostFix": "",
                    "sSearch": "Buscar:",
                    "sUrl": "",
                    "sInfoThousands": ",",
                    "sLoadingRecords": "Cargando...",
                    "oPaginate": {
                        "sFirst": "Primero",
                        "sLast": "Último",
                        "sNext": "Siguiente",
                        "sPrevious": "Anterior"
                    },
                    "oAria": {
                        "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                    }
                },
                "columns": [
                    {className: "filtrar"},
                    {className: "filtrar"},
                ],
                "initComplete": function () {
                    this.api().columns().every(function () {
                        var column = this;
                        if ($(column.header()).hasClass('filtrar')) {
                            var select = $('<select><option value=""></option></select>')
                                .appendTo($(column.footer()).empty())
                                .on('change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );

                                    column
                                        .search(val ? '^' + val + '$' : '', true, false)
                                        .draw();
                                });

                            column.data().unique().sort().each(function (d, j) {
                                select.append('<option value="' + d + '">' + d + '</option>')
                            });
                        }
                    });
                }
            });


        })
    </script>
    <script>
        $(function () {
            function init_events(ele) {
                ele.each(function () {

                    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                    // it doesn't need to have a start or end
                    var eventObject = {
                        title: $.trim($(this).text()) // use the element's text as the event title
                    }

                    // store the Event Object in the DOM element so we can get to it later
                    $(this).data('eventObject', eventObject)

                    // make the event draggable using jQuery UI
                    $(this).draggable({
                        zIndex: 1070,
                        revert: true, // will cause the event to go back to its
                        revertDuration: 0  //  original position after the drag
                    })

                })
            }

            init_events($('#external-events div.external-event'))

            /* initialize the calendar
             -----------------------------------------------------------------*/

            //Colores

            var color_1 = '#f39c12'
            var color_5 = '#00c0ef'
            var color_2 = '#00a65a'
            var color_3 = '#0073b7'

            //Date for the calendar events
            $('#calendar').fullCalendar({
                defaultDate: new Date(2019, 04, 03),
                allDaySlot: false,
                slotDuration: '00:15:00',
                minTime: '09:00:00',
                maxTime: '20:00:00',
                height: 650,

                header: {
                    left: 'prev,next',
                    center: '',
                    right: 'title'
                },
                //Eventos
                events: [
                    {% for trabajo in trabajos %}
                    {% if trabajo.publico and trabajo.bloque %}
                    {
                        title: '[{{ trabajo.autor.primerApellido }}] {{ trabajo.titulo | easyadmin_truncate(30) }}',
                        id: '{{ trabajo.id }}',
                        start: new Date(2019, 04, {{ trabajo.bloque.dia.fecha | date("d") }}, {{ trabajo.bloque.horaComienzo }}, {{ trabajo.bloque.minutosComienzo }}),
                        end: new Date(2019, 04, {{ trabajo.bloque.dia.fecha | date("d") }}, {{ trabajo.bloque.horaFin }}, {{ trabajo.bloque.minutosFin }}),
                        backgroundColor: color_{{ trabajo.modalidad.id }},
                        borderColor: color_{{ trabajo.modalidad.id }},
                        url: '#modal-{{ trabajo.id }}'
                    },
                    {% endif %}
                    {% endfor %}
                ],

                eventClick: function (event) {
                    $('#modal-' + event.id).modal("show");
                },

                editable: false,
                droppable: false, // this allows things to be dropped onto the calendar !!!

            })

            /* ADDING EVENTS */
            var currColor = '#3c8dbc' //Red by default
            //Color chooser button
            var colorChooser = $('#color-chooser-btn')
            $('#color-chooser > li > a').click(function (e) {
                e.preventDefault()
                //Save color
                currColor = $(this).css('color')
                //Add color effect to button
                $('#add-new-event').css({'background-color': currColor, 'border-color': currColor})
            })
            $('#add-new-event').click(function (e) {
                e.preventDefault()
                //Get value and make sure it is not null
                var val = $('#new-event').val()
                if (val.length == 0) {
                    return
                }

                //Create events
                var event = $('<div />')
                event.css({
                    'background-color': currColor,
                    'border-color': currColor,
                    'color': '#fff'
                }).addClass('external-event')
                event.html(val)
                $('#external-events').prepend(event)

                //Add draggable funtionality
                init_events(event)

                //Remove event from text input
                $('#new-event').val('')
            })
        })
    </script>
{% endblock javascripts %}