{% extends base_template %}

{% block title %}{{ 'title_dashboard'|trans({}, 'SonataAdminBundle') }}{% endblock%}
{% block breadcrumb %}

{% endblock %}
{% set empleado = staff[id] %}
{% block sonata_top_nav_menu_right_extra %}



    <li class="text-danger bg-danger"> <a href="javascript:void(0)" onclick="toggleAutoclose();"><i class="fa fa-times-circle-o "></i> <span  class="hidden-sm hidden-xs">Cierres Forzados <span class="badge badge-pill  badge-danger">{{ app_twig.getAutoCloses(empleado.id,start,end)  }}</span></span></a></li>
        <li class="text-danger bg-danger"> <a href="javascript:void(0)" onclick="toggleSemana();"><i class="fa fa-times-circle-o "></i> <span  class="hidden-sm hidden-xs">Semanas</span></a></li>
    {% if empleado is defined and empleado.id > 0 %}
        <li><a href="{{ path('admin_app_staff_edit',{'id': empleado.id }) }}"><i class="fa fa-user text-success"></i> <span  class="hidden-sm hidden-xs">Ajustes empleado</span></a></li>
    {% endif %}
{% endblock %}


{% block sonata_admin_content %}

    {#
    {% set hour_begin = app_twig.getMinHourFromSckeduler(scheduler,'07:00') %}
    {% set hour_end = app_twig.getMaxHourFromSckeduler(scheduler,'23:00') %}
    #}
    {% set hour_begin = '00:00' %}
    {% set hour_end =  '23:00' %}


    {% include 'Admin/partials/check_filters.html.twig'  %}




    {% set checkinsByFechas = app_twig.getCheckinsPorFechas(checkins) %}
    {% set rangoFechas = app_twig.getFechasEntre(start,end) %}





    <div class="">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="box box-success">
                <div class="box-body no-padding">
                    <div class="table-calendar">
                        <div class="header text-center">
                            <div class="col-xs-6 col-sm-6  hidden-xs hidden-sm col-md-2 col-lg-2">
                                <div>Fechas</div>
                            </div>
                            <div class="col-xs-6 col-sm-6 hidden-xs hidden-sm  col-md-2 col-lg-2 right">
                                <div class="ctexto">Totales</div>
                            </div>

                            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 ctexto">
                                <div >
                                    {{app_twig.getHtmlHours(hour_begin,hour_end)|raw }}
                                </div>
                            </div>
                        </div>


                    {% set totalWeek = 0 %}
                    {% set totalRango = 0 %}
                    {% for fecha in rangoFechas %}

                        {% if (empleado.start_date is empty or fecha|date('U') >= empleado.start_date|date('U'))  and (empleado.end_date is empty or fecha|date <= empleado.end_date|date  ) %}

                            {% set scheduler_alt = app_twig.getScheduler(checkinsByFechas,fecha,dias_semana[fecha|date('w')]|lower,scheduler) %}
                            {%  set label_row =  fecha|date("d-m-Y") ~ '  <span class="hidden-md hidden-xs hidden-sm"> ' ~ dias_semana[fecha|date('w')] ~ '</span>' %}
                            {% set sumSeconds = 0 %}

                            {% if checkinsByFechas[fecha] is defined %}
                                {% set sumSeconds = app_twig.getTotalSecondsFromCheckins(checkinsByFechas[fecha]) %}
                                {% set totalWeek = totalWeek + sumSeconds %}
                            {% endif %}


                            {% set difrenecia = sumSeconds - app_twig.getTotalSecondsFromScheduler(scheduler_alt,fecha,scheduler) %}
                            {% set legent_color ='' %}
                            {% if difrenecia < 0 %}
                                {% set legent_color = 'danger' %}
                            {% elseif difrenecia >= 0 and difrenecia < 300 %}
                                {% set legent_color = 'success' %}
                            {% elseif difrenecia > 300 %}
                                {% set legent_color = 'warning' %}
                            {% endif %}

                            {% set row_legend ='' %}
                            {% if scheduler[dias_semana[fecha|date('w')]|lower] is defined %}
                                {% set row_legend =
                                        "%02d%s%02d%s%02d"|format( sumSeconds/3600, ':', (sumSeconds/60)%60, ':', sumSeconds%60)
                                        ~ '|' ~
                                ((difrenecia > 0)? '+':'-' ) ~ "%02d%s%02d%s%02d"|format( difrenecia|abs/3600, ':', (difrenecia|abs/60)%60, ':', difrenecia|abs%60)
                                %}
                            {% else %}
                                {% set row_legend =
                                "%02d%s%02d%s%02d"|format( sumSeconds/3600, ':', (sumSeconds/60)%60, ':', sumSeconds%60)

                                %}
                            {% endif %}

                            {% set auto_close = false %}
                            {% if checkinsByFechas[fecha] is defined %}
                                {% for i,v in checkinsByFechas[fecha] %}
                                    {% if v.auto_close == "1" %}
                                        {% set auto_close = true %}
                                    {% endif %}
                                {% endfor %}

                            {% endif %}




                            <div class=" item-date {{ (auto_close)? 'auto_close': '' }}" id="{{ fecha }}" style="clear: both;">

                                {% if absence is defined and absence[id][fecha|date('d-m-Y')] is defined and absence[id][fecha|date('d-m-Y')] is not empty %}
                                    {% set text = absence[id][fecha|date('d-m-Y')]['name']|join('|')|trim %}
                                    {% set row_center = app_twig.getHtmlScheduler(scheduler_alt,fecha,scheduler,hour_begin,hour_end,text)|raw %}
                                {% else  %}
                                    {% set row_center = app_twig.getHtmlScheduler(scheduler_alt,fecha,scheduler,hour_begin,hour_end)|raw %}
                                {% endif  %}




                                {% set row_center = row_center ~ app_twig.getHtmlCheckins(fecha,checkinsByFechas,hour_begin,hour_end)|raw %}

                                {% include 'Admin/partials/check_row.html.twig' with {  'row_label': label_row, 'row_legend_color':legent_color,'row_legend': row_legend, 'detaill_id': fecha, 'row_center': row_center   } %}

                                {% include 'Admin/partials/check_row_details.html.twig' with { 'label': label_row, 'legend_color':legent_color,'legend_html': row_legend  ,'detaill_id': fecha } %}

                            </div>

                            {% if(fecha|date('w') == 0 or loop.last)  %}
                                {% include '/Admin/partials/check_semanal.html.twig' with {'label': 'Semana ('~ fecha|date('W') ~')', 'total':  totalWeek } %}

                                {% set totalRango = totalRango + totalWeek  %}
                                {% set totalWeek=0  %}
                            {% endif %}
                        {% else %}

                        {% endif %}


                    {% endfor %}

                        {% include '/Admin/partials/check_semanal.html.twig' with {'label': 'TOTAL HORAS RANGO', 'total':  totalRango } %}

                    </div>
                </div>

            </div>
        </div>
    </div>
<!-- Modal HTML -->
<div id="remoteAction" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Content will be loaded here from "remote.php" file -->
        </div>
    </div>
</div>


{% endblock %}































{% block stylesheets %}
    {{ parent() }}
    <link id="bsdp-css" href="{{asset('/css/bootstrap-datepicker3.min.css')  }}"   rel="stylesheet">
    <style>
        .header{
            margin-bottom: 1px;
        }
        .itemAbsence {
            position: absolute;
            z-index: 0;
            background-color: #595959;
            height: 2em;
            text-align: center;
        }
        .itemCheckin{
            position: absolute;
            z-index: 0;
            background-color: rgba(0, 166, 90, 0.50);
            height: 2em;
            text-align: center;
        }

        .itemCheckinCurrent{
            position: absolute;
            z-index: 0;
            background-color: rgba(47, 33, 255, 0.5);
            height: 2em;
            text-align: center;
        }

        .itemInOut{
            position: absolute;
            z-index: 0;
            background-color: #dd4b39;
            height: 2em;
            text-align: center;

        }
        .item-horary{
            background-color: transparent;
            width: 100%;
            height: 2em;
        }

        .item-hour {
            box-sizing: border-box;
            position: relative;
            z-index: 0;
            background-color: #eee;
            border-right: black 1px solid;
            text-align: center;
            left: 0 !important;
            display: inline-block;
            color: black;
            font-weight: bold;
            min-height: 2em;
        }

        .ltexto{
            text-align: left;
            font-size: 1em;
        }
        .ctexto{
            text-align: center;
            margin: 0px;
            padding: 0px;
            font-size: 1em;
        }
        .rtexto{
            text-align: right;
            font-size: 1em;
        }

        .item-date,.item-week{
            border-top: 2px #eee solid !important;
            background-color: white;
        }
        .item-date,.item-week{
            margin-bottom: 1px;
            background-color: #d2d6de;

        }
        .item-date:hover{
            background-color: #b0d0cf;
            margin-bottom: 2px;
            z-index: 0;
        }

        [tooltip]:before {
            /* needed - do not touch */
            content: attr(tooltip);
            position: absolute;
            opacity: 0;

            /* customizable */
            transition: all 0.15s ease;
            padding: 10px;
            color: #333;
            border-radius: 10px;
            box-shadow: 2px 2px 1px silver;
        }

        [tooltip]:hover:before {
            /* needed - do not touch */
            opacity: 1;

            /* customizable */
            background: yellow;
            margin-top: -50px;
            margin-left: 20px;
            width: 200px;
        }

        [tooltip]:not([tooltip-persistent]):before {
            pointer-events: none;
        }

        .right{
            float: right;
        }

        .fechas a{
            font-weight: bold;
            font-size: 18px;
            text-decoration: underline;
            text-transform: capitalize;
        }
        .fechas a:hover{
            color: #00a65a;
            font-weight: bold;
            font-size: 18px;
            text-decoration: underline;
            text-transform: capitalize;
            cursor: pointer; cursor: hand;
        }
        .datepicker{z-index:1151 !important;}

        .content-wrapper {
            min-height: 1047px;
        }
        #datepicker > span:nth-child(1).input-group-addon {
            border-width: 1px 1px;
        }
    </style>


{% endblock %}


{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('/js/locales/bootstrap-datepicker.es.min.js') }}" charset="UTF-8"></script>
    <script>
        $(function() {
            $('#sandbox-container .input-daterange').datepicker({
                endDate: "Now",
                language: "es",
                daysOfWeekDisabled: "{{ dias_semana_no_laborales }}",
                daysOfWeekHighlighted: "{{ dias_semana_destacar }}",
                calendarWeeks: true,
                autoclose: true,
                todayHighlight: true,
                format: "dd-mm-yyyy"
            });



            $(".item-date").on('click',function(){
                var id = $(this).attr('id');

                 $(this).find('.col-item-horary').toggleClass('hidden-xs')

                $('#'+id+'-details').toggleClass('hidden');
                $('#'+id+'-icon').toggleClass('fa-plus-circle').toggleClass('fa-minus-circle');
            });


            $(".check-action").on('click', function(e){
                e.preventDefault();
                e.stopPropagation();
                $('#remoteAction').modal('show').find('.modal-content').load($(this).attr('href'));
            });
            $( document ).on('click',".check-action-delete",function(e){
                e.preventDefault();
                e.stopPropagation();

                if(confirm($(this).attr('data-confim')) == true){
                    $.get( $(this).attr('href'),function( response ) {
                        if(response.success){
                             window.location.reload();
                        }else{
                            console.log(response)
                        }

                    });
                }

            })

            $( document ).on('click','.check-action-submit',function(event){
                event.preventDefault(); //prevent default action
                var post_url = $("#CheckJsonCheckForm").attr("action"); //get form action url
                var form_data = $("#CheckJsonCheckForm").serialize(); //Encode form elements for submission
                $('#loading').show();
                $.post( post_url, form_data, function( response ) {



                    $('#loading').hide();
                    if(response.success){
                        window.location.reload();
                        console.log(response)
                    }else{
                        console.log(response)
                    }
                   //
                });
            });
        })



        function toggleAutoclose(){
            $('.item-date:not(.auto_close)').toggle('hide');
        }
        function toggleSemana(){
            $('.item-date').toggle('hide');
        }
    </script>



{% endblock %}