{% extends base_template %}

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


    {% set hour_begin = app_twig.getSetting('startHourAllEmployee') %}
    {% set hour_end = app_twig.getSetting('endHourAllEmployee') %}

    <div class="">

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="box box-success">
                <div class="box-header">
                    <div class="">
                        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8" >
                            <span class="h2">Vista general <span class="hidden-sm hidden-xs"> fichajes todos los empleados  </span> </span>
                        </div>
                        <div id="dateCurrent2" class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center no-padding">
                            <div class="pull-right">
                            <a class="btn btn-info" href="{{ path('check_diario',{'start' : start|date_modify("- 1 day")|date("d-m-Y") }) }}" > <i class="fa fa-arrow-left" aria-hidden="true"></i></a>
                            <span class="h3"  id="dateCurrent" style="vertical-align: middle;" >
                               <span >{{   dias_semana[start|date("w")] }} </span>, {{  start|date(" d/m/Y") }}
                            </span>
                            {% if start|date("d-m-Y")| date('U') <= "now"|date("d-m-Y")| date('U')  %}
                                <a class="btn btn-info" href="{{ path('check_diario',{'start' : start|date_modify("+ 1 day")|date("d-m-Y") }) }}" > <i class="fa fa-arrow-right" aria-hidden="true"></i> </a>
                            {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>




    <div class="">
        <div class="col-xs-12 col-xs-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>Empleados</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 fecha = start %}

                {% for employee in staff %}
                    {% set scheduler_alt = 0 %}

                    {% if scheduler[employee.id] is defined %}
                        {% set scheduler_alt = app_twig.getScheduler((checkins[employee.id] is defined)?checkins[employee.id]:[],fecha,dias_semana[fecha|date('w')]|lower,scheduler[employee.id]) %}

                    {% endif %}


                    {%  set label_row = '<a href="' ~ path('check_calendario',{'id': employee.id})  ~'" >'~ employee.fullname ~'</a>' %}



                    {% set sumSeconds = 0 %}
                    {% if checkins[employee.id][fecha] is defined %}
                        {% set sumSeconds = app_twig.getTotalSecondsFromCheckins(checkins[employee.id][fecha]) %}
                    {% endif %}


                    {% if scheduler[employee.id] is defined %}
                        {% set difrenecia = sumSeconds - app_twig.getTotalSecondsFromScheduler(scheduler_alt,fecha,scheduler[employee.id]) %}
                    {% else %}
                        {% set difrenecia= 0  %}
                    {% endif %}

                    {% set legent_color ='' %}
                    {% if difrenecia < 0 %}
                        {% set legent_color = 'danger' %}
                    {% elseif difrenecia >= 0 and difrenecia < 1300 %}
                        {% set legent_color = 'success' %}
                    {% elseif difrenecia > 1300 %}
                        {% set legent_color = 'warning' %}
                    {% endif %}

                    {% set row_legend ='' %}
                    {% if scheduler[employee.id][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 %}

                    <div class="item-date" id="{{ employee.id }}" style="clear: both;">
                        {% set row_center='' %}
                        {% if scheduler[employee.id] is defined %}
                            {% if absence is defined and absence[employee.id][fecha|date('d-m-Y')] is defined and absence[employee.id][fecha|date('d-m-Y')] is not empty %}
                                {% set text = absence[employee.id][fecha|date('d-m-Y')]['name']|join('|')|trim %}
                                {% set row_center = app_twig.getHtmlScheduler(scheduler_alt,fecha,scheduler[employee.id],hour_begin,hour_end,text)|raw %}
                            {% else  %}
                                {% set row_center = app_twig.getHtmlScheduler(scheduler_alt,fecha,scheduler[employee.id],hour_begin,hour_end)|raw %}
                            {% endif  %}
                        {% endif %}


                        {% if checkins[employee.id] is defined %}
                            {% set row_center = row_center ~ app_twig.getHtmlCheckins(fecha,checkins[employee.id],hour_begin,hour_end)|raw %}
                        {% endif %}

                        {% include 'Admin/partials/check_row.html.twig' with {  'row_label': label_row, 'row_legend_color':legent_color,'row_legend': row_legend, 'row_center': row_center  , 'detaill_id': employee.id } %}
                        {% include 'Admin/partials/check_row_details.html.twig' with { 'label': label_row, 'legend_color':legent_color,'legend_html': row_legend  ,'id': employee.id, 'detaill_id': employee.id, 'checkinsByFechas': (checkins[employee.id] is defined)? checkins[employee.id]:[] } %}

                    </div>
                {% endfor %}
            </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;
            }
            .item-details:hover{
                background-color: #00a7d0;
            }


        </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>
            var urlData = "{{ path('check_diario') }}"

            $(function() {
                $('#dateCurrent').datepicker({ // Initialize the datepicker with your options
                    format: "dd-mm-yyyy",
                    language: "es",
                    weekStart: 1,
                    todayBtn: "linked",
                    autoclose: true,
                    todayHighlight: true,

                });

                $("#dateCurrent").datepicker("setDate", new Date('{{ start|date("m-d-Y")  }}'));
                $("#dateCurrent").datepicker().on('changeDate', function(fecha){
                    var formatted = $.datepicker.formatDate("dd-mm-yy", new Date(fecha.date));
                    window.location = urlData + '?start=' +formatted
                });

            });





            $(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)
                        }
                        //
                    });
                });
            })

        </script>


    {% endblock %}