{% extends base_template %}
{% set options_calendar =  app_twig.getSettingByGroup('calendar_options_settings')  %}

{% block title %}{{ 'title_dashboard'|trans({}, 'SonataAdminBundle') }}{% endblock%}
{% block breadcrumb %}
    <span class="h2 pull-right no-padding no-margin">
    </span>
{% endblock %}



{% block sonata_top_nav_menu_right_extra %}
    {% if employee is defined and employee > 0 %}
        <li><a href="{{ path('admin_app_staff_edit',{'id': employee }) }}"><i class="fa fa-user text-success"></i> <span  class="hidden-sm hidden-xs">Ajustes empleado</span></a></li>
    {% endif %}
    <li><a href="{{ path('calendario_setting') }}"><i class="fa fa-calendar-check-o text-success"></i>  <span  class="hidden-sm hidden-xs">Ajustes calendario</span></a></li>
{% endblock %}

{% block sonata_admin_content %}
    <div class="">

        <div class="col-xs-12 col-md-12 col-lg-12">
            <div class="box box-success">
                <div class="box-header">
                    <div class="row">
                        <div class="col-md-8 col-lg-8" >
                            <span class="h1">Calendario anual  <span class="hidden-sm hidden-xs">Festivos, Vacaciones y Ausencias</span></span>
                        </div>
                        <div class="col-md-4 col-lg-4">
                            <select id="employee_select" data-url="{{ path('calendario_vacaciones') }}">
                                <option value="" > Todos los empleados</option>
                                {% for id,fullname in staff %}
                                    <option value="{{ id }}" {{ (employee == id)? 'selected' :'' }}> {{ fullname|title }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="box-body table-responsive no-padding">
                </div>
            </div>
        </div>
    </div>

    <div class="">
            <div class="col-xs-12 col-md-12 col-lg-12">
                <div class="box box-success">
                    <div class="box-body table-responsive no-padding">
                        <div id="calendar"></div>
                    </div>
                </div>
             </div>

            {% include 'Admin/Calendar/partials/box.html.twig' with { 'employee': employee, 'staff': staff, 'resumen': resumen } %}
    </div>


    <div class="modal modal-fade" id="event-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">
                        Formulario Absencias
                    </h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="event-index" value="">
                    <form class="form-horizontal">
                        <div class="form-group" id="empleados-form">
                            <label for="min-date" class="col-sm-4 control-label">Empleado</label>
                            <div class="col-sm-7">
                                <select name="event-employee" multiple type="text" class="form-control"id="">
                                    <option value="0">Para todos</option>
                                    {% for id,fullname in staff %}
                                        <option value="{{ id }}" {{ (employee == id)? 'selected' :'' }}> {{ fullname|title }}</option>
                                    {% endfor %}

                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="min-date" class="col-sm-4 control-label">Tipo de absencia</label>
                            <div class="col-sm-7">
                                <select name="event-name" type="text" class="form-control"id="">
                                    <option value="0">Selecciona un tipo de ausencia</option>
                                    {% set permisos = app_twig.getPermisos() %}
                                    {% for permiso in permisos %}
                                        <option value="{{ permiso.id }}">{{ permiso.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="min-date" class="col-sm-4 control-label">Descripción</label>
                            <div class="col-sm-7">
                                <input name="event-description" type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="min-date" class="col-sm-4 control-label">Fecha desde</label>
                            <div class="col-sm-7">
                                <div class="input-group input-daterange" data-provide="datepicker" >
                                    <input name="event-start-date" type="text" class="form-control" value=""  data-date-language="es" data-date-format="dd/mm/yyyy" data-date-today-btn="true">
                                    <span class="input-group-addon">A</span>
                                    <input name="event-end-date" type="text" class="form-control" value=""  data-date-language="es" data-date-format="dd/mm/yyyy">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="justified" class="col-sm-4 control-label">Justificada</label>
                            <div class="col-sm-7">
                                <input id="justified" name="event-justified" type="checkbox" class="form-control">
                                <span class="text-center">Por derecho, No recuperar las horas</span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger pull-left" data-dismiss="modal" id="delete-event">Borrar</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="save-event">
                        Guardar
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}






{% block stylesheets %}
    {{ parent() }}
        <link id="bsdp-css" href="{{asset('/css/bootstrap-year-calendar.min.css')  }}"   rel="stylesheet">
        <link id="bsdp-css" href="{{asset('/css/bootstrap-datepicker3.min.css')  }}"   rel="stylesheet">
        <style>

        </style>


{% endblock %}



{% block javascripts %}

        {{ parent()|replace({'/bundles/sonataadmin/vendor/jqueryui/ui/minified/jquery-ui.min.js':'','/bundles/sonataadmin/vendor/jqueryui/ui/minified/i18n/jquery-ui-i18n.min.js':''})|raw }}



        <script src="{{ asset('/js/bootstrap-year-calendar.min.js') }}"></script>
        <script src="{{ asset('/js/locales/bootstrap-datepicker.es.min.js') }}"></script>
        <script src="{{ asset('/js/lodash.min.js') }}"></script>


        <script>

            var employee = {{ (employee is not empty)?employee:0 }};
            var currentYear = parseInt('{{ year }}');
            var urldata = "{{ path('calendario_vacaciones') }}"
            var dataSource = [];
            var colorpicker = [];
            var options = {{ options_calendar|json_encode|raw }}
            var calendar = null;

            Calendar.locales['es'] = {
                days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
                daysShort: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"],
                daysMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
                months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
                monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
                weekShort: 'S',
                weekStart: 1
            };

            function changePamameterOnUrl(param,value) {


                var url = new URL(window.location.href);

                var query_string = url.search;

                var search_params = new URLSearchParams(query_string);

                search_params.delete(param);
                search_params.append(param, value);

                url.search = search_params.toString();
                var new_url = url.toString();
                return new_url
            }
            function editEvent(event) {

                var absence = 1;
                if(event.id && !employee){
                    return;
                }

                if(event.absence != undefined){
                    absence = event.absence;
                }
                $('#event-modal input[name="event-index"]').val(event ? event.id : '');
                $('#event-modal select[name="event-name"]').val(absence)

                $('#event-modal select[name="event-employee"]').val(employee)
                $('#event-modal select[name="event-employee"]').change();

                $('#event-modal select[name="event-name"]').change();
                $('#event-modal input[name="event-description"]').val(event ? event.description : '');
                $('#event-modal input[name="event-start-date"]').datepicker('setDate', event ? event.startDate :'');
                $('#event-modal input[name="event-end-date"]').datepicker('setDate', event ? event.endDate : '');

                if(event.justified == "true" || event.justified == "1"){
                    $('#event-modal input[name="event-justified"]')
                        .attr('checked',true).val(true)
                        .parent().addClass('checked')
                }else{
                    $('#event-modal input[name="event-justified"]')
                        .removeAttr('checked').val(false)
                        .parent().removeClass('checked')
                }



                    $('#event-modal').modal();
            }

            function deleteEvent(event) {

                var dataSource = calendar.getDataSource();
                var exist_item = false
                for(var i in dataSource) {
                    if(dataSource[i].id == event.id) {
                        exist_item = true
                        break;
                    }
                }
                if(exist_item){
                    $.post(urldata,event,function(data){
                        cargarCalendario(employee,currentYear)
                        setTimeout(function(){
                            window.location.reload(true)
                        },500
                        )
                    })
                }

            }

            function saveEvent() {
                var event = {
                    id: $('#event-modal input[name="event-index"]').val(),
                    absence: $('#event-modal select[name="event-name"]').val(),
                    description: $('#event-modal input[name="event-description"]').val(),
                    startDate: $('#event-modal input[name="event-start-date"]').datepicker('getDate'),
                    endDate: $('#event-modal input[name="event-end-date"]').datepicker('getDate'),
                    employee: $('#event-modal select[name="event-employee"]').val(),
                    justified: $('#event-modal input[name="event-justified"]').is(':checked')?1:0,
                    //employee: (!employee)?$('#event-modal select[name="event-employee"]').val():employee,
                    year: currentYear,
                }

                $.post(urldata,event,function(data){
                     window.location.reload(true);

                })


                $('#event-modal').modal('hide');
            }

            function cargarCalendario(employee,year) {
                $.getJSON("{{ path('calendario_vacaciones') }}",{'employee': employee, 'date': year}, function (data) {

                    dataSource = data.data

                    dataSource.map(function (item) {
                        item.startDate = new Date(item.startDate)
                        item.endDate = new Date(item.endDate )
                        return item
                    })

                    addDataSource( dataSource,true)
                })
            }

            function addDataSource (values,empty) {
                if(empty){
                    dataSource = []
                }else{
                    dataSource = calendar.getDataSource();

                    if(dataSource == undefined){
                        dataSource = []
                    }
                }

                dataSource = dataSource.concat(values)
                calendar.setDataSource(dataSource);
                $('body').trigger('dataSourceChanged');
            }

            function hasValueChanged() {
                //todo: comprobar si los datos han cambiado.

                return false;
            }
            $(function() {

                $("#employee_select").change(function () {

                    if(hasValueChanged()){
                       // guardarCambiosCalendario(employee,currentYear)
                    }

                    window.location.href = changePamameterOnUrl('employee', $(this).val());
                })

                var option_calendar = $.extend({}, options, {
                    enableContextMenu: false,
                    language: 'es',
                    clickDay: function (e) {
                        e.preventDefault()
                        e.stopPropagation()

                        if(e.events.length >= 1 && employee)
                        {
                            var event = e.events[0]
                            editEvent(event);
                        }else{
                            if(!employee && e.events.length > 0)
                            {
                                setTimeout(function () {
                                    $('#event-modal').modal('hide');
                                },10)
                            }
                        }

                    },
                    selectRange: function(e) {
                        editEvent({ startDate: e.startDate, endDate: e.endDate });
                    },
                    renderEnd: function (e) {

                        if(!$('#allowOverlap').prop('checked')) {
                            $('td.day').css('border','2px #f4f4f4 solid')
                        }
                    },

                    mouseOnDay: function(e) {
                        if(e.events.length > 0) {
                            var content = '';

                            for(var i in e.events) {
                                content += '<div class="event-tooltip-content">'
                                    + '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>'
                                    + '<div class="event-description">' + e.events[i].description + '</div>'
                                    + '</div>';
                            }

                            $(e.element).popover({
                                trigger: 'manual',
                                container: 'body',
                                html:true,
                                content: content
                            });

                            $(e.element).popover('show');
                        }
                    },
                    mouseOutDay: function(e) {
                        if(e.events.length > 0) {
                            $(e.element).popover('hide');
                        }
                    },
                    dayContextMenu: function(e) {
                        $(e.element).popover('hide');
                    },
                    yearChanged: function (e) {

                        $('body').trigger('calendar_year_changed')
                    }

                });

                calendar = new Calendar('#calendar',option_calendar);
                calendar.setYear(currentYear)

                cargarCalendario(employee,currentYear)

                $('#save-event').click(function() {
                    saveEvent();
                });
                $('#delete-event').click(function() {

                    if($('#event-modal input[name="event-index"]').val() != '')
                    {
                        var event = {
                            id: parseInt($('#event-modal input[name="event-index"]').val()),
                            absence: $('#event-modal select[name="event-name"]').val(),
                            description: $('#event-modal input[name="event-description"]').val(),
                            startDate: $('#event-modal input[name="event-start-date"]').datepicker('getDate'),
                            endDate: $('#event-modal input[name="event-end-date"]').datepicker('getDate'),
                            employee: employee,
                            year: currentYear,
                            action: 'delete'
                        }
                        deleteEvent(event);
                    }

                });

                $('body').on('calendar_year_changed',function() {
                    if(currentYear != calendar.getYear())
                    {
                         window.location.href = changePamameterOnUrl('year',calendar.getYear());
                    }
                })



                $('body').on('dataSourceChanged',function(){
                    //console.log('dataSourceChanged');
                });

            });

        </script>



{% endblock %}