{% 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="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">Personalización del calendario</span>
                    </div>
                    <div class="col-md-4 col-lg-4">
                        <div class="btn-group pull-right" role="group" aria-label="...">
                            <div class="btn-group" role="group">
                                <button id="preview" type="button" class="btn btn-info" ><i class="fa fa-eye"></i>  Previsualizar</button>
                            </div>
                            <div class="btn-group" role="group">
                                <button id="save" type="button" class="btn btn-success "><i class="fa fa-save"></i>  Guardar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <div class="row">


        <div class="col-lg-7 col-md-7">
            {% include 'Admin/Calendar/partials/parameters.html.twig' with {'parameters': options_calendar} %}
        </div>
        <div class="col-lg-5 col-md-5">
            {% include 'Admin/Calendar/partials/type_absence.html.twig' with {'items': types_absence} %}
        </div>

    </div>


    <div class="panel panel-default" style="margin:10px;">
        <div class="panel-heading">Calendar</div>
        <div class="panel-body">
            <div id="calendar" class="calendar"></div>
        </div>
    </div>
{% endblock %}






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

    <style>


    </style>


{% endblock %}


{% block javascripts %}

    {{ parent() }}


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


        <script type="text/javascript" class="publish">

            var currentYear = new Date().getFullYear();
            var urldata = "{{ path('calendario_fixture') }}"
            var dataSource = [];
            var colorpicker = [];
            var options = {{ options_calendar|json_encode|raw }}

            $(function() {

                $('body').on('parameters-changed',function () {

                    $('#calendar').data('calendar').setLanguage($('#language').val());
                    if($('#style').val() == 'border') {
                        $('#calendar').data('calendar').setStyle('border');
                        $('#roundRangeLimits').prop('disabled', true);
                        $('#alwaysHalfDay').prop('disabled', true);
                    }
                    else {
                        $('#calendar').data('calendar').setStyle('background');
                        $('#roundRangeLimits').prop('disabled', false);
                        $('#alwaysHalfDay').prop('disabled', false);
                    }

                    $('#calendar').data('calendar').setAllowOverlap($('#allowOverlap').prop('checked'));
                    $('#calendar').data('calendar').setEnableRangeSelection($('#enableRangeSelection').prop('checked'));
                    $('#calendar').data('calendar').setDisplayWeekNumber($('#displayWeekNumber').prop('checked'));
                    $('#calendar').data('calendar').setRoundRangeLimits($('#roundRangeLimits').prop('checked'));
                    $('#calendar').data('calendar').setAlwaysHalfDay($('#alwaysHalfDay').prop('checked'));
                })



                $("#save").on('click',function () {

                    var parameters = {
                        'language': $('#language').val(),

                        'style': $('#style').val(),
                        'allowOverlap': $('#allowOverlap').prop('checked'),
                        'enableRangeSelection': $('#enableRangeSelection').prop('checked'),
                        'displayWeekNumber': $('#displayWeekNumber').prop('checked'),
                        'roundRangeLimits': $('#roundRangeLimits').prop('checked'),
                        'alwaysHalfHay': $('#alwaysHalfDay').prop('checked')
                    }

                    $.post( urldata,{'parameters': parameters, 'colors': colorpicker}, function( data ) {
                        alert("Actualizado")
                    });

                })



                $('select[name="colorpicker"]')
                    .simplecolorpicker({picker: true, })
                    .on('change', function(e) {
                        $(document.body).css('background-color', $('select[name="colorpicker"]').val());

                        var index = colorpicker.indexOf(_.find(colorpicker, { 'id': $(this).attr('data-id')}))

                        if (index > -1) {
                            colorpicker.splice(index, 1);
                        }

                        colorpicker.push({'id': $(this).attr('data-id'), 'color': $(this).val()})

                     });

                $("#preview").on('click',function() {

                    if(colorpicker.length > 0){
                        changeColorToData()
                    }

                    $('body').trigger('parameters-changed')
                })


                function changeColorToData() {

                    colorpicker.forEach(function (item) {
                        var index = dataSource.indexOf(_.find(dataSource, { id: item.id }))
                        if (index > -1) {
                            dataSource[index].color = item.color
                        }
                    })

                    $('#calendar').data('calendar').setDataSource(dataSource);

                }


                var option_calendar = $.extend({}, options, {
                    border: true,
                    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-location">' + e.events[i].note + '</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');
                        }
                    },
                    renderEnd: function () {
                        if(!$('#allowOverlap').prop('checked')) {
                            $('td.day').css('border','2px #f4f4f4 solid');
                        }
                    }

                });
                $('#calendar').calendar(option_calendar);





              function addDataSource (values) {
                  dataSource = $('#calendar').data('calendar').getDataSource();

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


                dataSource = dataSource.concat(values)

                $('#calendar').data('calendar').setDataSource(dataSource);


              }

              $.get(urldata,null,function (dataSource) {
                  dataSource.map(function (item) {
                      item.startDate = new Date(item.startDate )
                      item.endDate = new Date(item.endDate )
                      return item
                  })
                  addDataSource( dataSource)
              })

            });




    </script>




{% endblock %}