{% extends '::base.html.twig' %}
{% block dashboard %}
    <style>
        .double-scroll {
            width: 100%;
            margin-bottom: 40px;
        }

        /* pager wrapper, div */
        .pager {
            padding-left: 0;
            margin: 0;
            text-align: left;
            list-style: none;
        }

        /* pager wrapper, in thead/tfoot */
        td.pager {
            background-color: #e6eeee;
        }

        /* pager navigation arrows */
        .pager img {
            vertical-align: middle;
            margin-right: 2px;
        }

        /* pager output text */
        .pager .pagedisplay {
            font-size: 14px;
            font-weight: bold;
            padding: 0 5px 0 5px;
            width: 50px;
            text-align: center;
        }

        /*** loading ajax indeterminate progress indicator ***/
        #tablesorterPagerLoading {
            background: rgba(255, 255, 255, 0.8) url(icons/loading.gif) center center no-repeat;
            position: absolute;
            z-index: 1000;
        }

        /*** css used when "updateArrows" option is true ***/
        /* the pager itself gets a disabled class when the number of rows is less than the size */
        .pager.disabled {
            display: none;
        }

        /* hide or fade out pager arrows when the first or last row is visible */
        .pager img.disabled {
            /* visibility: hidden */
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

        .tablesorter-pager select {
            margin: 0;
            padding: 0;
            width: 50px;
        }

        .wrapper {
            padding-bottom: 50px;
        }

        .header {
            background: #000000;
        }

        .header .container {
            padding-bottom: 20px;
        }

        .header .container h1 {
            color: #FFF;
            line-height: 50px;
            margin-top: 30px;
            margin-bottom: 0;
        }

        .header .container h3 {
            color: #E0E0E0;
            font-size: 16px;
            margin-top: -5px;
        }

        .header .container h3 a {
            color: #66aacc;
        }

        .header .container h3 a:hover {
            color: #b3d5e6;
        }

        .top-menu {
            position: absolute;
            z-index: 9999;
        }

        .top-menu .nav-list {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid #CCC;
            margin: 20px;
            position: fixed;
            right: 0;
        }

        pre, .well {
            background: #FFFFFF;
        }

        .syntax-container {
            background: #FCFCFC;
            -webkit-border-radius: 7px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 7px;
            -moz-background-clip: padding;
            border-radius: 7px;
            background-clip: padding-box;
            border: 1px solid #e3e3e3;
            margin-bottom: 30px;
            padding-bottom: 20px;
        }

        .isloading-wrapper.isloading-right {
            margin-left: 10px;
        }

        .isloading-overlay {
            position: relative;
            text-align: center;
        }

        .isloading-overlay .isloading-wrapper {
            background: #FFFFFF;
            -webkit-border-radius: 7px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 7px;
            -moz-background-clip: padding;
            border-radius: 7px;
            background-clip: padding-box;
            display: inline-block;
            margin: 0 auto;
            padding: 10px 20px;
            top: 10%;
            z-index: 9000;
        }

        /*Glyphicon Spinner*/
        .glyphicon-spin {
            -animation: spin .9s infinite linear;
            -webkit-animation: spin2 .9s infinite linear;
        }

        @-webkit-keyframes spin2 {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            from {
                transform: scale(1) rotate(0deg);
            }
            to {
                transform: scale(1) rotate(360deg);
            }
        }

        #menuTop {
            margin-top: 30px;
        }

        body {
             /*margin-top: 80px;*/
        }

        h1 {
            font-size: 18px;
            text-align: center;
            font-weight: 600;
        }

    
        /*color de cabecera de tabla*/
        .tablesorter-header-inner, table.tablesorter thead tr th, .tablesorter-filter {
            color: #fff;
            background-color: #307aba;
            border-color: #dedede;
            font-weight: normal;
        }

        table.tablesorter thead tr th {

            height: 40px;
        }

        .tablesorter-blue .headerSortUp, .tablesorter-blue .tablesorter-headerSortUp, .tablesorter-blue .tablesorter-headerAsc {
            background-color: #307aba;
        }

        .tablesorter-blue .headerSortDown, .tablesorter-blue .tablesorter-headerSortDown, .tablesorter-blue .tablesorter-headerDesc {
            background-color: #307aba;
        }

        .tablesorter-blue .tablesorter-filter-row td {
            background: #307aba;
        }

        input[type="search"] {
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }
        .clsDatePicker {
            z-index: 100000;
        }
        table th{
            {#text-transform: uppercase;#}
            font-weight: bold;
            font-size: 12px;
        }
        
        table td{
            {#text-transform: uppercase;#}
            font-weight: normal;
            font-size: 12px;
        }        

        .commentList {
            padding:0;
            list-style:none;
            max-height:100px;
            overflow:auto;
        }
        .commentList li {
            margin:0;
            margin-top:10px;
        }
        .commentList li > div {
            display:table-cell;
        }       
        .commentText p {
            margin:0;
        }
        .sub-text {
            color:#aaa;
            font-family:verdana;
            font-size:11px;
        }
        /********************************************************************/
        .panel.with-nav-tabs .panel-heading{
            padding: 5px 5px 0 5px;
        }
        .panel.with-nav-tabs .nav-tabs{
            border-bottom: none;
        }
        .panel.with-nav-tabs .nav-justified{
            margin-bottom: -1px;
        }
        /*** PANEL PRIMARY ***/
        .with-nav-tabs.panel-primary .nav-tabs > li > a,
        .with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
            color: #fff;
        }
        .with-nav-tabs.panel-primary .nav-tabs > .open > a,
        .with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
        .with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
            color: #fff;
            background-color: #3071a9;
            border-color: transparent;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.active > a,
        .with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
            color: #428bca;
            background-color: #fff;
            border-color: #428bca;
            border-bottom-color: transparent;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
            background-color: #428bca;
            border-color: #3071a9;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
            color: #fff;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
            background-color: #3071a9;
        }
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
        .with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
            background-color: #4a9fe9;
        }
        /********************************************************************/
        input {
            -webkit-appearance: textfield;
            background-color: white;
            color: #1b1b1b;
            font-weight: lighter;
            -webkit-rtl-ordering: logical;
            cursor: text;
            padding: 1px;
            border-width: 1px;
            border-style: solid;
            border-color: #1B1B1B !important;
            border-image: initial;
        }
        .dataTables_length select {
            width: 60px;
        }
        .dataTables_length label {
            font-weight: normal;
        }
        table.dataTable thead th{
            border-bottom: 1px solid #3071a9 !important;
        }
        table.dataTable tfoot th{
            border-top: 1px solid #3071a9 !important;
        }
        .dataTables_scroll{
            border: 1px solid #3071a9 !important;
        }
        div.dt-buttons {
            position: relative !important;
            float: right !important;
            margin-right: -5px !important;
        }
        .header_dt{
            color: #fff;
            background-color: #428bca;
            border-color: #3071a9 !important;
        }
        .highcharts-graph {
            filter: url(#glow);
        }

        .list-group-item {
            position: relative;
            display: block;
            padding: 2px 5px !important;
            margin-bottom: -1px;
            background-color: #fff;
            border: 1px solid #ddd;
        }
        .Resizer {
            padding: 0;
            margin: 0;
            top: 0;
            left: 0;
        }

        .contentWindow{
            position: absolute;
            background-color: #B4E0DE;
        }

        .resizer{
            position: absolute;
            z-index: 100;
            background-color: #4E6160;
        }

        .verticalResizer{
            cursor: ns-resize;
        }

        .horizontalResizer{
            cursor: ew-resize;
        }
        .panel .panel-primary {
            min-height: 100px;
            max-height: 300px;
            height: 300px;
            overflow-y: scroll;
            overflow-x: scroll;
        }
        .nav-link.active {
            font-weight: bold;
        }

        .badge {
            font-size: 85%;
        }

        .gradiente {
          height: 100px;
          background-color: #428BCA; /* For browsers that do not support gradients */
          background-image: linear-gradient(0deg, #428BCA, #031A48);
        }
        .text-center {
            text-align: center;
        }

        .text-primary {
            color: #428bca;
        }

        .center-block {
          margin: auto;
          display: block;
        }
        .title-jornada{
            text-align: center;
            background: #1c3d71;
            color: #fff;
            height: 30px;
            padding: 7px;
            margin-bottom: 10px;
        }
        .title-dia{
            text-align: center;
            background: #4875bd;
            color: #fff;
            height: 30px;
            padding: 7px;
            margin-bottom: 10px;
        }
        .list-activity{
            border: solid 0.1em;
            margin: 0.5em;
            padding: 0.5em;
            border-color: #4875bd;
            width: 100%;
        }

        input[data-readonly] {
          pointer-events: none;
          cursor: not-allowed;
          background-color: #eee;
          opacity: 1;
        }

        select[data-readonly] {
          pointer-events: none;
          cursor: not-allowed;
          background-color: #eee;
          opacity: 1;
        }

        .blue-color {
            color:blue;
        }

        .red-color {
            color:red;
        }

        .class-readonly{
          pointer-events: none;
          cursor: not-allowed;
          background-color: #eee;
          opacity: 1;
        }

        .select-area{
            width: 100%;
        }
        .select-area .select2-arrow {
            background: white !important;
            background-image: none !important;
            border-left: none !important;
            margin-top: 5px !important;
        }
        .select-area .select2-choice{
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        }
        .select-area .select2-choice:focus{
            border-color:#66afe9;
            outline:0;
            -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
            box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
        }

    </style>
    <script src="{{ asset('js/jquery.form.js') }}"></script>
    <script src="{{ asset('js/jquery.isloading.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.doubleScroll.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tableExport.js') }}"></script>
    <script src="{{ asset('js/jquery.base64.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/multiselect.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/jquery.confirm.js') }}"></script> 
    <script type="text/javascript" src="{{ asset('js/jquery.inputmask.js') }}"></script> 
    <script type="text/javascript" src="{{ asset('js/jquery.inputmask.numeric.extensions.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/jquery.confirm.js') }}"></script>   
    <script>

        $(function(){     
            
            $(".select-area").select2({
                placeholder: "Elegir...",
                allowClear: true
            }); 

            $.fn.dataTable.moment( 'YYYY-MMM' );
            $('#fechaInicio').datepicker({
                dateFormat: 'yy-mm-dd',
            });

            $('.solo_numeros').on('input', function (e) {
                if (!/^[0-9]*$/i.test(this.value)) {
                    this.value = this.value.replace(/[^0-9]+/ig,"");
                }
            }); 
            
            var totales = JSON.parse($("#totales").val());
            //DATOS BASICOS
            {%for site in sites%}
                //datos basicos  
                $("#proyecto").val('{{site.proyecto}}');
                buscarSitio('{{site.proyecto}}','{{site.idsitio}}','{{site.sitio}}');  
                $("#asp").val('{{site.asp}}');
                $("#sitio").val('{{site.idsitio}}');
                $("#sitioId").val('{{site.codigo}}'); 
                $("#fechaInicio").val('{{site.fechaInicio}}'); 
                buscarCrew('{{site.asp}}','{{site.crew}}');
                $("#cantidad_jornadas").val('{{site.jornadas}}'); 
                //CARGAR LAS JORNADAS
                var cantidad_jornadas = '{{site.jornadas}}';
                $("#cantidadJornadasOriginal").val(cantidad_jornadas);
                $(".contenedor_data").empty();                
                for (var i = 1; i <= cantidad_jornadas; i++){
                    var buscarTotalJornada = totales.filter(el => el.jornada == i);
                    var isActiveItem = buscarTotalJornada[0].isActiveItem;
                    var onOff = "fa fa-toggle-on";
                    var readOnly = "";
                    if (isActiveItem==1){
                        var onOff = "fa fa-toggle-off";
                        var readOnly = "class-readonly";
                    }
                    $(".contenedor_data").append('<div class="row cont_jornada_'+i+'">'+
                        '<div class="col-md-12 title-jornada" style="text-align: center;">'+
                            '<label>JOURNEY: '+i+'</label>'+
                            '<input required class="isActiveItemJornada form-control" type="hidden" id="isActiveItemJornada_'+i+'" name="isActiveItemJornada[]" data-jornada="'+i+'" readonly value="'+isActiveItem+'">'+  
                            '<span id="inactivar_jornada_'+i+'" onclick="inactivarJornada('+i+')"><i id="ina_jornada_'+i+'" class="'+onOff+'" style="margin-left: 10px;"></i></span>'+ 
                        '</div></div>'+
                        '<div class="row cont_jornada_'+i+'">'+
                            '<div class="col-md-3" style="text-align: center;"></div>'+
                            '<div class="col-md-1" style="text-align: right;">'+
                                '<span><i id="menos_dias" data-jornada='+i+' class="fa fa-minus"></i></span>'+
                            '</div>'+
                            '<div class="col-md-4" style="text-align: center;">'+
                                '<input required class="center-block cantidad_dia solo_numeros form-control" type="text" id="cantidad_dia'+i+'" name="cantidad_dia[]" data-jornada="'+i+'" placeholder="Enter the number of days" style="width: 480px;" readonly>'+
                            '</div>'+
                            '<div class="col-md-1" style="text-align: left;">'+
                                '<span><i id="mas_dias" data-jornada='+i+' class="fa fa-plus"></i></span>'+
                            '</div>'+
                            '<div class="col-md-3" style="text-align: center;"></div>'+
                        '</div></div>'+
                        '<div class="row contenedor_dias_'+i+'" style="margin: 4px 0 0 0;"></div>');
                }
                i++;
            {%endfor%}

            //RECORRER LOS DIAS
            {%for detail_day in detail_days%}
                var cantidad_dia = '{{detail_day.dia}}';                
                var cantidad_jornadas = $("#cantidad_jornadas").val();
                var isActiveItem = '{{detail_day.isActiveItem}}';
                var onOff = "fa fa-toggle-on";
                var readOnly = "";
                if (isActiveItem==1){
                    var onOff = "fa fa-toggle-off";
                    var readOnly = "class-readonly";
                }
                for (var j = 1; j <= cantidad_jornadas; j++){
                    if (j=='{{detail_day.jornada}}'){
                        $("#cantidad_dia"+j).val(cantidad_dia);
                        for (var d = 1; d <= cantidad_dia; d++){                             
                            $(".contenedor_dias_"+j).append('<div class="row cont_dias_'+j+'_'+d+'">'+
                                '<div class="col-md-12 title-dia" style="text-align: center;">'+
                                    '<label>DAY: '+d+'</label>'+
                                    '<input required class="isActiveItemDia form-control" type="hidden" id="isActiveItemDia_'+j+'_'+d+'" name="isActiveItemDia[]" data-jornada="'+j+'" data-dia="'+d+'" readonly value="'+isActiveItem+'">'+  
                                    '<span id="inactivar_dia_'+j+'_'+d+'" onclick="inactivarDia('+j+','+d+')"><i id="ina_dia_'+j+'_'+d+'" class="'+onOff+'" style="margin-left: 10px;"></i></span>'+ 
                                '</div></div>'+
                                '<div class="row cont_dias_'+j+'_'+d+'">'+
                                    '<div class="col-md-4" style="text-align: center;"></div>'+
                                    '<div class="col-md-4" style="text-align: center;">'+
                                        '<input required class="center-block cantidad_actividades cantidad_actividades_'+j+' solo_numeros form-control" type="text" id="cantidad_actividades_'+j+'_'+d+'" name="cantidad_actividades[]" data-jornada="'+j+'" data-dia="'+d+'" placeholder="Enter the number of activities"  style="width: 480px;" readonly>'+
                                    '</div>'+
                                    '<div class="col-md-1" style="text-align: left;">'+
                                        '<span><i id="mas_act" data-jornada='+j+' data-dia='+d+' class="fa fa-plus"></i></span>'+
                                    '</div>'+
                                    '<div class="col-md-3" style="text-align: center;"></div>'+
                                '</div></div>'+
                            '<div class="row contenedor_actividad_'+j+'_'+d+'" style="margin: 4px 0 10px 0px;""></div>');  
                        }
                    }
                }
            {%endfor%}

            //RECORRER LAS ACTIVIDADES
            var detail = JSON.parse($("#detail").val());
            let ca;
            //console.log(detail,"prueba");
            {%for detail_act in detail_acts%}
                var cantidad_actividades = '{{detail_act.actividades}}';
                var jornada = '{{detail_act.jornada}}';
                var dia = '{{detail_act.dia}}';
                $(".contenedor_actividad_"+jornada+"_"+dia).empty();
                $(".contenedor_actividad_"+jornada+"_"+dia).addClass('list-activity');
                $("#cantidad_actividades_"+jornada+"_"+dia).val(cantidad_actividades);
                ca = detail.filter(el => el.jornada == jornada && el.dia == dia);  
                var i = 0;              
                $.each(ca, function(key,value) {
                    i++;
                    var idCa = value.id;
                    var rubroCa = value.rubro;
                    var areaCa = value.area;
                    let rubroSelected;
                    {%for rubro in rubros%}
                        if (rubroCa=='{{rubro.valor}}'){
                            rubroSelected+= '<option value="{{rubro.valor}}" selected>{{rubro.valor}}</option>';
                        }else{
                            rubroSelected+= '<option value="{{rubro.valor}}">{{rubro.valor}}</option>';
                        }                    
                    {%endfor%}
                    let areaSelected;
                    {%for area in areas%}
                        if (areaCa=='{{area.id}}'){
                            areaSelected+= '<option value="{{area.id}}" selected>{{area.valor}}</option>';
                        }else{
                            areaSelected+= '<option value="{{area.id}}">{{area.valor}}</option>';
                        }                    
                    {%endfor%}
                    var area = value.area;
                    var actCa = value.actividad;                    
                    var cant = value.cantidad;
                    var total = value.total;
                    var tiempo_horas = value.tiempo_horas;
                    var isActiveItem = value.isActiveItem;
                    var onOff = "fa fa-toggle-on";
                    var readOnly = "";
                    if (isActiveItem==1){
                        var onOff = "fa fa-toggle-off";
                        var readOnly = "class-readonly";
                    }
                    $(".contenedor_actividad_"+jornada+"_"+dia).append('<div class="row muestra_actividad_'+jornada+'_'+dia+'_'+i+'">'+
                         '<input type="hidden" id="id" name="id[]" value="'+idCa+'">'+
                         '<input type="hidden" id="jornada" name="jornada[]" value="'+jornada+'">'+
                         '<input type="hidden" id="dia" name="dia[]" value="'+dia+'">'+
                         '<input type="hidden" id="numero_actividad" name="numero_actividad[]" value="'+i+'">'+
                         '<div class="col-md-2 col-sm-3 col-xs-12">'+
                            '<div class="form-group">'+
                                '<label>Rubro</label>'+
                                '<select required class="'+readOnly+'" id="rubro_'+jornada+'_'+dia+'_'+i+'" name="rubro[]" data-jornada="'+jornada+'" data-dia="'+dia+'" data-actividad="'+i+'" >'+
                                    '<option value="">ALL</option>'+
                                    rubroSelected+
                                '</select>'+                               
                            '</div>'+
                        '</div>'+
                        '<div class="col-md-2 col-sm-3 col-xs-12">'+
                            '<div class="form-group">'+
                                '<label>Área</label>'+
                                '<select required class="get-list-actividad select-area area" '+readOnly+'" type="text" id="area_'+jornada+'_'+dia+'_'+i+'" name="area[]" data-jornada="'+jornada+'" data-dia="'+dia+'" data-actividad="'+i+'">'+
                                    '<option value="">ALL</option>'+
                                    areaSelected+
                                '</select>'+ 
                            '</div>'+
                        '</div>'+
                        '<div class="col-md-3 col-sm-3 col-xs-12">'+
                            '<div class="form-group">'+
                                '<label>Activity</label>'+
                                '<select required class="select-actividad '+readOnly+'" id="actividad_'+jornada+'_'+dia+'_'+i+'" name="actividad[]" data-jornada="'+jornada+'" data-dia="'+dia+'" data-actividad="'+i+'">'+
                                    '<option value="">ALL</option>'+
                                '</select>'+                               
                            '</div>'+
                        '</div>'+
                        '<div class="col-md-1 col-sm-3 col-xs-12">'+
                            '<div class="form-group">'+
                                '<label>Qty</label>'+
                                '<input type="hidden" id="tiempo_horas_'+jornada+'_'+dia+'_'+i+'" name="tiempo_horas_[]" data-jornada="'+jornada+'" data-dia="'+dia+'" data-actividad="'+i+'" value="'+tiempo_horas+'">'+
                                '<input required class="cantidad solo_numeros form-control '+readOnly+'" type="text" id="cantidad_'+jornada+'_'+dia+'_'+i+'" name="cantidad[]" data-jornada="'+jornada+'" data-dia="'+dia+'" data-actividad="'+i+'" value="'+cant+'">'+                                  
                            '</div>'+
                        '</div>'+
                        '<div class="col-md-2 col-sm-3 col-xs-12">'+
                            '<div class="form-group">'+
                                '<label>Total</label>'+
                                '<input required class="total solo_numeros form-control" type="text" id="total_'+jornada+'_'+dia+'_'+i+'" name="total[]" data-jornada="'+jornada+'" data-dia="'+dia+'" data-actividad="'+i+'" readonly value="'+total+'">'+                                  
                            '</div>'+
                        '</div>'+
                        '<div class="col-md-1 col-sm-3 col-xs-12">'+
                            '<div class="form-group" style="margin-top: 30px;">'+
                                '<span id="delete_act_'+jornada+'_'+dia+'_'+i+'" onclick="deleteAct('+idCa+','+jornada+','+dia+','+i+')"><i class="fa fa-trash red-color" style="margin: 0px 10px 0 0;"></i></span>'+     
                            '</div>'+
                        '</div>'+
                        '<div class="col-md-1 col-sm-3 col-xs-12">'+
                            '<div class="form-group" style="margin-top: 30px;">'+
                                '<input required class="isActiveItem form-control" type="hidden" id="isActiveItem_'+jornada+'_'+dia+'_'+i+'" name="isActiveItem[]" data-jornada="'+jornada+'" data-dia="'+dia+'" data-actividad="'+i+'" readonly value="'+isActiveItem+'">'+  
                                '<span id="inactivar_act_'+jornada+'_'+dia+'_'+i+'" onclick="inactivarAct('+idCa+','+jornada+','+dia+','+i+','+isActiveItem+')"><i id="ina_act_'+jornada+'_'+dia+'_'+i+'" class="'+onOff+' blue-color"></i></span>'+                                 
                            '</div>'+
                        '</div>'+
                    '</div>');
                    buscarAct(rubroCa,actCa,jornada,dia,i);
                    $("#area_"+jornada+"_"+dia+"_"+i).select2({
                        placeholder: "Elegir...",
                        allowClear: true
                    }); 
                });
            {%endfor%}
            
            //AGREGAR MAS DIAS A UNA JORNADA
            $('#mas_dias').live( "click", function() {
                var j = $(this).attr('data-jornada');                
                var cantidad_dia = $("#cantidad_dia"+j).val();
                var d = cantidad_dia? parseInt(cantidad_dia) + 1 : 1;
                $(".contenedor_dias_"+j).append('<div class="row cont_dias_'+j+'_'+d+'">'+
                    '<div class="col-md-12 title-dia" style="text-align: center;">'+
                        '<label>DAY: '+d+'</label>'+
                        '<input required class="isActiveItemDia form-control" type="hidden" id="isActiveItemDia_'+j+'_'+d+'" name="isActiveItemDia[]" data-jornada="'+j+'" data-dia="'+d+'" readonly value="0">'+ 
                            '<span id="inactivar_dia_'+j+'_'+d+'" onclick="inactivarDia('+j+','+d+')"><i id="ina_dia_'+j+'_'+d+'" class="fa fa-toggle-on" style="margin-left: 10px;"></i></span>'+ 
                    '</div></div>'+
                    '<div class="row cont_dias_'+j+'_'+d+'">'+
                        '<div class="col-md-4" style="text-align: center;"></div>'+                        
                        '<div class="col-md-4" style="text-align: center;">'+
                            '<input required class="center-block cantidad_actividades cantidad_actividades_'+j+' solo_numeros form-control" type="text" id="cantidad_actividades_'+j+'_'+d+'" name="cantidad_actividades[]" data-jornada="'+j+'" data-dia="'+d+'" placeholder="Enter the number of activities"  style="width: 480px;" value="0" readonly>'+
                        '</div>'+
                        '<div class="col-md-1" style="text-align: left;">'+
                            '<span><i id="mas_act" data-jornada='+j+' data-dia='+d+' class="fa fa-plus"></i></span>'+
                        '</div>'+
                        '<div class="col-md-3" style="text-align: center;"></div>'+
                    '</div></div>'+
                '<div class="row contenedor_actividad_'+j+'_'+d+'" style="margin: 4px 0 10px 0px;""></div>');
                $("#cantidad_dia"+j).val(d);
            });

            //ELIMINAR ULTIMO DIA A UNA JORNADA
            $('#menos_dias').live( "click", function() {
                var j = $(this).attr('data-jornada');                
                var cantidad_dia = $("#cantidad_dia"+j).val();
                if (cantidad_dia >= 1){
                    var d = parseInt(cantidad_dia) - 1;
                    var data = {
                        idsitio: '{{idsitio}}',
                        jornada: j,
                        dia: cantidad_dia
                    };    
                    $("<div></div>").dialog( {
                        buttons: [{
                            text: "Are you sure?",
                            click: function() {
                                $.isLoading({text: "Loading..."});
                                $.ajax({
                                    type: "POST",
                                    url: "{{path('actSitios_deleteDiaJornadaSitio',{'idproyectos':idproyectos,'idmodule':idmodule})}}",
                                    data: data,
                                    success: function(data){
                                        if (data.respuesta=='Ok'){
                                            $(".cont_dias_"+j+'_'+cantidad_dia).remove();
                                            $(".contenedor_actividad_"+j+'_'+cantidad_dia).remove();
                                            $("#cantidad_dia"+j).val(d);
                                            swal("Information!", "Day deleted successfully", "success");
                                        }else{
                                            swal("Error!", "Error", "error");
                                        }
                                    }
                                });
                                $( this ).remove();
                                $.isLoading('hide');
                            }
                        },
                        {
                            text: "Cancel",
                            click: function() {
                                $( this ).remove();
                            }
                        }
                        ],
                        close: function (event, ui) { $(this).remove(); },
                        resizable: false,
                        title: 'Confirm',
                        modal: true
                    }).text('Are you sure to delete?').parent().addClass("alert");
                }
            });

            //AGREGAR UN ACTIVIDAD A UN DIA DE UNA JORNADA
            $('#mas_act').live('click', function(){
                var jornada = $(this).attr('data-jornada'); 
                var dia = $(this).attr('data-dia');  
                var cantAct = $("#cantidad_actividades_"+jornada+"_"+dia).val();              
                var i = parseInt(cantAct) + 1;
                var idCa = "'NO'";
                $(".contenedor_actividad_"+jornada+"_"+dia).addClass('list-activity');
                $(".contenedor_actividad_"+jornada+"_"+dia).append('<div class="row muestra_actividad_'+jornada+'_'+dia+'_'+i+'">'+
                         '<input type="hidden" id="id" name="id[]" value="">'+
                         '<input type="hidden" id="jornada" name="jornada[]" value="'+jornada+'">'+
                         '<input type="hidden" id="dia" name="dia[]" value="'+dia+'">'+
                         '<input type="hidden" id="numero_actividad" name="numero_actividad[]" value="'+i+'">'+
                         '<div class="col-md-2 col-sm-3 col-xs-12">'+
                            '<div class="form-group">'+
                                '<label>Rubro</label>'+
                                '<select required id="rubro_'+jornada+'_'+dia+'_'+i+'" name="rubro[]" data-jornada="'+jornada+'" data-dia="'+dia+'" data-actividad="'+i+'">'+
                                    '<option value="">ALL</option>'+
                                    {%for rubro in rubros%}
                                        '<option value="{{rubro.valor}}">{{rubro.valor}}</option>'+
                                    {%endfor%}
                                '</select>'+                               
                            '</div>'+
                        '</div>'+
                        '<div class="col-md-2 col-sm-3 col-xs-12">'+
                            '<div class="form-group">'+
                                '<label>Área</label>'+
                                '<select required class="get-list-actividad select-area area" id="area_'+jornada+'_'+dia+'_'+i+'" name="area[]" data-jornada="'+jornada+'" data-dia="'+dia+'" data-actividad="'+i+'">'+
                                    '<option value="">ALL</option>'+
                                    {%for area in areas%}
                                        '<option value="{{area.id}}">{{area.valor}}</option>'+
                                    {%endfor%}
                                '</select>'+ 
                            '</div>'+
                        '</div>'+
                        '<div class="col-md-3 col-sm-3 col-xs-12">'+
                            '<div class="form-group">'+
                                '<label>Activity</label>'+
                                '<select required class="select-actividad" id="actividad_'+jornada+'_'+dia+'_'+i+'" name="actividad[]" data-jornada="'+jornada+'" data-dia="'+dia+'" data-actividad="'+i+'">'+
                                    '<option value="">ALL</option>'+
                                '</select>'+                               
                            '</div>'+
                        '</div>'+
                        '<div class="col-md-1 col-sm-3 col-xs-12">'+
                            '<div class="form-group">'+
                                '<label>Qty</label>'+
                                '<input type="hidden" id="tiempo_horas_'+jornada+'_'+dia+'_'+i+'" name="tiempo_horas_[]" data-jornada="'+jornada+'" data-dia="'+dia+'" data-actividad="'+i+'">'+
                                '<input required class="cantidad solo_numeros form-control" type="text" id="cantidad_'+jornada+'_'+dia+'_'+i+'" name="cantidad[]" data-jornada="'+jornada+'" data-dia="'+dia+'" data-actividad="'+i+'">'+                                  
                            '</div>'+
                        '</div>'+
                        '<div class="col-md-2 col-sm-3 col-xs-12">'+
                            '<div class="form-group">'+
                                '<label>Total</label>'+
                                '<input required class="total solo_numeros form-control" type="text" id="total_'+jornada+'_'+dia+'_'+i+'" name="total[]" data-jornada="'+jornada+'" data-dia="'+dia+'" data-actividad="'+i+'" readonly>'+                                  
                            '</div>'+
                        '</div>'+
                        '<div class="col-md-1 col-sm-3 col-xs-12">'+
                            '<div class="form-group" style="margin-top: 30px;">'+
                                '<span id="delete_act_'+jornada+'_'+dia+'_'+i+'" onclick="deleteAct('+idCa+','+jornada+','+dia+','+i+')"><i class="fa fa-trash red-color"></i></span>'+                                  
                            '</div>'+
                        '</div>'+
                        '<div class="col-md-1 col-sm-3 col-xs-12">'+
                            '<div class="form-group" style="margin-top: 30px;">'+
                                '<input required class="isActiveItem form-control" type="hidden" id="isActiveItem_'+jornada+'_'+dia+'_'+i+'" name="isActiveItem[]" data-jornada="'+jornada+'" data-dia="'+dia+'" data-actividad="'+i+'" readonly value="0">'+  
                                '<span id="inactivar_act_'+jornada+'_'+dia+'_'+i+'" onclick="inactivarAct('+idCa+','+jornada+','+dia+','+i+')"><i id="ina_act_'+jornada+'_'+dia+'_'+i+'" class="fa fa-toggle-on blue-color"></i></span>'+                                  
                            '</div>'+
                        '</div>'+
                    '</div>');
                $("#cantidad_actividades_"+jornada+"_"+dia).val(i);
                $("#area_"+jornada+"_"+dia+"_"+i).select2({
                    placeholder: "Elegir...",
                    allowClear: true
                });
            });

            //AGREGAR UNA NUEVA JORNADA
            
            $('#mas_jornada').on('click', function(){
                var cantidad_jornadas = $("#cantidad_jornadas").val();
                var i = parseInt(cantidad_jornadas) + 1;
                $(".contenedor_data").append('<div class=" cont_jornada_'+i+'">'+
                    '<div class="col-md-12 title-jornada" style="text-align: center;">'+
                        '<label>JOURNEY: '+i+'</label>'+
                        '<input required class="isActiveItemJornada form-control" type="hidden" id="isActiveItemJornada_'+i+'" name="isActiveItemJornada[]" data-jornada="'+i+'" readonly value="0">'+  
                        '<span id="inactivar_jornada_'+i+'" onclick="inactivarJornada('+i+')"><i id="ina_jornada_'+i+'" class="fa fa-toggle-on" style="margin-left: 10px;"></i></span>'+ 
                    '</div></div>'+
                    '<div class="row cont_jornada_'+i+'">'+
                        '<div class="col-md-3" style="text-align: center;"></div>'+
                        '<div class="col-md-1" style="text-align: right;">'+
                            '<span><i id="menos_dias" data-jornada='+i+' class="fa fa-minus"></i></span>'+
                        '</div>'+
                        '<div class="col-md-4" style="text-align: center;">'+
                            '<input required class="center-block cantidad_dia solo_numeros form-control" type="text" id="cantidad_dia'+i+'" name="cantidad_dia[]" data-jornada="'+i+'"  style="width: 480px;" data-readonly value="">'+
                        '</div>'+
                        '<div class="col-md-1" style="text-align: left;">'+
                            '<span><i id="mas_dias" data-jornada='+i+' class="fa fa-plus"></i></span>'+
                        '</div>'+
                        '<div class="col-md-3" style="text-align: center;"></div>'+
                    '</div></div>'+
                    '<div class="row contenedor_dias_'+i+'" style="margin: 4px 0 0 0;"></div>');
                 $("#cantidad_jornadas").val(i);
            });

            
            //ELIMINAR LA ULTIMA JORNADA
            $('#menos_jornada').on('click', function(){
                var jornada = $("#cantidad_jornadas").val();
                if (jornada >= 1){
                    var data = {
                        idsitio: '{{idsitio}}',
                        jornada: jornada
                    };        
                    $("<div></div>").dialog( {
                        buttons: [{
                            text: "Are you sure?",
                            click: function() {
                                $.isLoading({text: "Loading..."});
                                $.ajax({
                                    type: "POST",
                                    url: "{{path('actSitios_deleteJornadaSitio',{'idproyectos':idproyectos,'idmodule':idmodule})}}",
                                    data: data,
                                    success: function(data){
                                        if (data.respuesta=='Ok'){                                            
                                            swal("Information!", "Deleted successfully", "success");
                                            $(".contenedor_dias_"+jornada).remove();
                                            $(".cont_jornada_"+jornada).remove();
                                            var i = parseInt(jornada) - 1;
                                            if (i==0){
                                                $("#cantidad_jornadas").val("");
                                            }else{
                                                $("#cantidad_jornadas").val(i);
                                            }
                                        }else{
                                            swal("Error!", "Error", "error");
                                        }
                                    }
                                });
                                $( this ).remove();
                                $.isLoading('hide');
                            }
                        },
                        {
                            text: "Cancel",
                            click: function() {
                                $( this ).remove();
                            }
                        }
                        ],
                        close: function (event, ui) { $(this).remove(); },
                        resizable: false,
                        title: 'Confirm',
                        modal: true
                    }).text('Are you sure to delete?').parent().addClass("alert");           
                    
                }
            });

            //BUSCAR ACTIVIDADES
            $(".get-list-actividad").live('change', function(){
                var actividades = [];
                var area = $(this).val();
                $('select[name="actividad[]"]').map(function() {
                    if (this.value!=""){
                        var j = $(this).attr('data-jornada');
                        var d = $(this).attr('data-dia');
                        var a = $(this).attr('data-actividad');
                        var ar = $("#area_"+j+"_"+d+"_"+a).val();
                        actividades.push({'actividad': this.value,'area': ar});
                    }
                });
                var jornada = $(this).attr('data-jornada');
                var dia = $(this).attr('data-dia');
                var actividad = $(this).attr('data-actividad');
                var rubro = $("#rubro_"+jornada+"_"+dia+"_"+actividad).val();
                var buscar = actividades.filter(el => el.area == area);
                //console.log('buscar filtrando',buscar,'area',area,'rubro',rubro);     
                var data = {
                    rubro: rubro,
                    area: $(this).val(),
                    actividades: buscar
                };         
                $("#actividad_"+jornada+"_"+dia+"_"+actividad+" option").remove();
                $("#actividad_"+jornada+"_"+dia+"_"+actividad).append('<option value="">ALL</option>');
                if ($(this).val()!=''){                    
                    $.getJSON('{{path('actSitios_llenarSelectActividad',{'idproyectos':idproyectos,'idmodule':idmodule})}}', data, function (data){
                        var registros = data.registros;
                        for (var i = 0; i < registros.length; i++){
                            $("#actividad_"+jornada+"_"+dia+"_"+actividad).append('<option value="' + registros[i]['id'] + '" data-tiempo="'+registros[i]['tiempo_horas']+'">' + registros[i]['valor'] + '</option>');

                        }
                    });
                }
            }); 

            //CARGAR TOTAL HORAS POR ACTIVIDAD
            $(".select-actividad").live('change', function(){
                var jornada = $(this).attr('data-jornada');
                var dia = $(this).attr('data-dia');
                var actividad = $(this).attr('data-actividad');
                var tiempo_horas = $(this).find(':selected').data('tiempo');
                $("#tiempo_horas_"+jornada+"_"+dia+"_"+actividad).val(tiempo_horas);
                $("#cantidad_"+jornada+"_"+dia+"_"+actividad).removeAttr('disabled');
                //REFRESCAR LA CANTIDAD
                var cantidad = $("#cantidad_"+jornada+"_"+dia+"_"+actividad).val();
                var tiempo_horas = $("#tiempo_horas_"+jornada+"_"+dia+"_"+actividad).val();
                var total = cantidad * tiempo_horas;
                $("#total_"+jornada+"_"+dia+"_"+actividad).val(total.toFixed(2));
                var totalPorDias = $("#cantidad_actividades_"+jornada+"_"+dia).val();
                var acumuladorTotal = Number(0);
                for (var i = 1; i <=totalPorDias; i++) { 
                    acumuladorTotal+= Number($("#total_"+jornada+"_"+dia+"_"+i).val());
                }
                if(acumuladorTotal>8){
                    swal("Alert!", "The total exceeds 8 hours", "error");
                }     
            }); 

            //ACTUALIZAR TOTAL
            $(".cantidad").live('change', function(){
                var jornada = $(this).attr('data-jornada');
                var dia = $(this).attr('data-dia');
                var actividad = $(this).attr('data-actividad');
                var cantidad = $(this).val();
                var tiempo_horas = $("#tiempo_horas_"+jornada+"_"+dia+"_"+actividad).val();
                var total = cantidad * tiempo_horas;
                $("#total_"+jornada+"_"+dia+"_"+actividad).val(total.toFixed(2));
                var totalPorDias = $("#cantidad_actividades_"+jornada+"_"+dia).val();
                var acumuladorTotal = Number(0);
                for (var i = 1; i <=totalPorDias; i++) { 
                    acumuladorTotal+= Number($("#total_"+jornada+"_"+dia+"_"+i).val());
                }
                if(acumuladorTotal>8){
                    swal("Alert!", "The total exceeds 8 hours", "error");
                }    
            }); 

            //BUSCAR SITIOS
            $(".get-list-sitios").change(function(e) {
                var data = {
                    proyecto : $(this).val()
                };
                $("#sitio option").remove();
                $("#sitio").append('<option value="">ALL</option>');
                if ($(this).val()!=''){                    
                    $.getJSON('{{path('actSitios_llenarSelectSitios',{'idproyectos':idproyectos,'idmodule':idmodule})}}', data, function (data){
                        var registros = data.registros;
                        for (var i = 0; i < registros.length; i++){
                            $("#sitio").append('<option value="' + registros[i]['id'] + '" data-name="'+registros[i]['name']+'">' + registros[i]['valor'] + '</option>');
                        }
                    });
                }
            }); 

            //BUSCAR LAS CREW
            $(".get-list-crew").change(function(e) {
                var data = {
                    asp : $(this).val()
                };
                $("#crew option").remove();
                $("#crew").append('<option value="">ALL</option>');
                if ($(this).val()!=''){                    
                    $.getJSON('{{path('actSitios_llenarSelectCrews',{'idproyectos':idproyectos,'idmodule':idmodule})}}', data, function (data){
                        var registros = data.registros;
                        for (var i = 0; i < registros.length; i++){
                            $("#crew").append('<option value="' + registros[i]['valor'] + '">' + registros[i]['valor'] + '</option>');
                        }
                    });
                }
            });
            
            //LLENAR EL NOMBRE DEL SITIO            
            $("#sitio").change(function(e) {
                var name = $(this).find(':selected').attr('data-name');
                $("#siteName").val(name);
            }); 
            
            //ENVIAR FORM
            //crear
            $('form[name="formCrear"]').ajaxForm({
                beforeSubmit: function (formData, jqForm, options) {
                    $.isLoading({
                        text: "Updating..."
                    });                   
                },
                error: function (error) {
                    $.isLoading('hide');
                },
                success: function (data) {
                    if (data.respuesta=='Ok'){
                        $.isLoading('hide');
                        swal("Updating Successfullyy!", "Ok!", "success");  
                        location.reload();                       
                    }else{
                        $.isLoading('hide');
                        swal("Error!", data.msj, "error"); 
                    }          
                }
            });  
           
        });

        function buscarSitio(proyecto,idsitio,siteName){
            var data = {
                proyecto: proyecto 
            };
            $("#sitio option").remove();
            $("#sitio").append('<option value="">ALL</option>');
            if (proyecto!=''){                    
                $.getJSON('{{path('actSitios_llenarSelectSitios',{'idproyectos':idproyectos,'idmodule':idmodule})}}', data, function (data){
                    var registros = data.registros;
                    for (var i = 0; i < registros.length; i++){
                        if (registros[i]['id']==idsitio){
                            $("#sitio").append('<option value="' + registros[i]['id'] + '" data-name="'+registros[i]['name']+'" selected>' + registros[i]['valor'] + '</option>');
                        }else{
                            $("#sitio").append('<option value="' + registros[i]['id'] + '" data-name="'+registros[i]['name']+'">' + registros[i]['valor'] + '</option>');
                        }
                    }
                });
                $("#siteName").val(siteName);
            }
        }

        function buscarCrew(asp,crew){
            var data = {
                asp: asp
            };
            $("#crew option").remove();
            $("#crew").append('<option value="">ALL</option>');
            if (asp!=''){                    
                $.getJSON('{{path('actSitios_llenarSelectCrews',{'idproyectos':idproyectos,'idmodule':idmodule})}}', data, function (data){
                    var registros = data.registros;
                    for (var i = 0; i < registros.length; i++){
                        if (registros[i]['valor']==crew){
                            $("#crew").append('<option value="' + registros[i]['valor'] + '" selected>' + registros[i]['valor'] + '</option>');
                        }else{
                            $("#crew").append('<option value="' + registros[i]['valor'] + '">' + registros[i]['valor'] + '</option>');
                        }
                    }
                });
            }
        }

        function buscarAct(rubro,act,jornada,dia,actividad){
            var data = {
                rubro : rubro,
                idsitio: '{{ idsitio }}',
                idactividad: act
            };
            $("#actividad_"+jornada+"_"+dia+"_"+actividad+" option").remove();
            $("#actividad_"+jornada+"_"+dia+"_"+actividad).append('<option value="">ALL</option>');
            if (rubro!=''){                    
                $.getJSON('{{path('actSitios_llenarSelectEditActividad',{'idproyectos':idproyectos,'idmodule':idmodule})}}', data, function (data){
                    var registros = data.registros;
                    for (var i = 0; i < registros.length; i++){
                        if (registros[i]['id']==act){
                            $("#actividad_"+jornada+"_"+dia+"_"+actividad).append('<option value="' + registros[i]['id'] + '" selected data-tiempo="'+registros[i]['tiempo_horas']+'">' + registros[i]['valor'] + '</option>');
                        }else{
                            $("#actividad_"+jornada+"_"+dia+"_"+actividad).append('<option value="' + registros[i]['id'] + '" data-tiempo="'+registros[i]['tiempo_horas']+'">' + registros[i]['valor'] + '</option>');
                        }

                    }
                });
            }
        }

        function deleteAct(id,jornada,dia,actividad){
            if (id!="NO"){
                var data = {
                    id: id,
                    idsitio: '{{ idsitio }}',
                };      
                $("<div></div>").dialog( {
                        buttons: [{
                            text: "Are you sure?",
                            click: function() {
                                $.isLoading({text: "Loading..."});
                                $.ajax({
                                    type: "POST",
                                    url: "{{path('actSitios_deleteActividadesSitio',{'idproyectos':idproyectos,'idmodule':idmodule})}}",
                                    data: data,
                                    success: function(data){
                                        if (data.respuesta=='Ok'){
                                            $('.muestra_actividad_'+jornada+'_'+dia+'_'+actividad).remove();
                                            var i = $("#cantidad_actividades_"+jornada+"_"+dia).val();
                                            var total = parseInt(i) - 1;
                                            $("#cantidad_actividades_"+jornada+"_"+dia).val(total);
                                            swal("Information!", "Activity successfully deleted", "success");
                                        }else{
                                            swal("Error!", "Error", "error");
                                        }
                                    }
                                });
                                $( this ).remove();
                                $.isLoading('hide');
                            }
                        },
                        {
                            text: "Cancel",
                            click: function() {
                                $( this ).remove();
                            }
                        }
                        ],
                        close: function (event, ui) { $(this).remove(); },
                        resizable: false,
                        title: 'Confirm',
                        modal: true
                    }).text('Are you sure to delete?').parent().addClass("alert"); 
                
            }else{
                $('.muestra_actividad_'+jornada+'_'+dia+'_'+actividad).remove();
                var i = $("#cantidad_actividades_"+jornada+"_"+dia).val();
                var total = parseInt(i) - 1;
                $("#cantidad_actividades_"+jornada+"_"+dia).val(total);
                swal("Information!", "Activity successfully deleted", "success");
            }            
        }
        
        function inactivarAct(id,jornada,dia,actividad){
            var isActiveItem = $("#isActiveItem_"+jornada+"_"+dia+"_"+actividad).val();
            if (isActiveItem == 0){
                var actEstatus = 1;
                var msj = "Inactive";                
            }else{
                var actEstatus = 0;
                var msj = "Active";
            }
            if (id!="NO"){
                var data = {
                    id: id,
                    isActiveItem: actEstatus,
                    idsitio: '{{ idsitio }}',
                };      
                $("<div></div>").dialog( {
                        buttons: [{
                            text: "Are you sure?",
                            click: function() {
                                $.isLoading({text: "Loading..."});
                                $.ajax({
                                    type: "POST",
                                    url: "{{path('actSitios_inactivarActividadesSitio',{'idproyectos':idproyectos,'idmodule':idmodule})}}",
                                    data: data,
                                    success: function(data){
                                        if (data.respuesta=='Ok'){
                                            if (actEstatus==1){    
                                                $("#ina_act_"+jornada+"_"+dia+"_"+actividad).removeClass("fa-toggle-on");
                                                $("#ina_act_"+jornada+"_"+dia+"_"+actividad).addClass("fa-toggle-off");
                                                $("#isActiveItem_"+jornada+"_"+dia+"_"+actividad).val(actEstatus);
                                                $("#rubro_"+jornada+"_"+dia+"_"+actividad).addClass('class-readonly');
                                                $("#area_"+jornada+"_"+dia+"_"+actividad).addClass('class-readonly');;
                                                $("#actividad_"+jornada+"_"+dia+"_"+actividad).addClass('class-readonly');
                                                $("#cantidad_"+jornada+"_"+dia+"_"+actividad).addClass('class-readonly');
                                                
                                            }else{
                                                $("#ina_act_"+jornada+"_"+dia+"_"+actividad).removeClass("fa-toggle-off");
                                                $("#ina_act_"+jornada+"_"+dia+"_"+actividad).addClass("fa-toggle-on");
                                                $("#isActiveItem_"+jornada+"_"+dia+"_"+actividad).val(actEstatus);
                                                $("#rubro_"+jornada+"_"+dia+"_"+actividad).removeClass('class-readonly');
                                                $("#area_"+jornada+"_"+dia+"_"+actividad).removeClass('class-readonly');;
                                                $("#actividad_"+jornada+"_"+dia+"_"+actividad).removeClass('class-readonly');
                                                $("#cantidad_"+jornada+"_"+dia+"_"+actividad).removeClass('class-readonly');
                                            }                                            
                                            swal("Information!", "Activity successfully "+msj, "success");
                                        }else{
                                            swal("Error!", "Error", "error");
                                        }
                                    }
                                });
                                $( this ).remove();
                                $.isLoading('hide');
                            }
                        },
                        {
                            text: "Cancel",
                            click: function() {
                                $( this ).remove();
                            }
                        }
                        ],
                        close: function (event, ui) { $(this).remove(); },
                        resizable: false,
                        title: 'Confirm',
                        modal: true
                    }).text('Are you sure to '+msj+'?').parent().addClass("alert"); 
                
            }else{
                if (actEstatus==1){    
                    $("#ina_act_"+jornada+"_"+dia+"_"+actividad).removeClass("fa-toggle-on");
                    $("#ina_act_"+jornada+"_"+dia+"_"+actividad).addClass("fa-toggle-off");
                    $("#isActiveItem_"+jornada+"_"+dia+"_"+actividad).val(actEstatus);
                    $("#rubro_"+jornada+"_"+dia+"_"+actividad).addClass('class-readonly');
                    $("#area_"+jornada+"_"+dia+"_"+actividad).addClass('class-readonly');;
                    $("#actividad_"+jornada+"_"+dia+"_"+actividad).addClass('class-readonly');
                    $("#cantidad_"+jornada+"_"+dia+"_"+actividad).addClass('class-readonly');
                    
                }else{
                    $("#ina_act_"+jornada+"_"+dia+"_"+actividad).removeClass("fa-toggle-off");
                    $("#ina_act_"+jornada+"_"+dia+"_"+actividad).addClass("fa-toggle-on");
                    $("#isActiveItem_"+jornada+"_"+dia+"_"+actividad).val(actEstatus);
                    $("#rubro_"+jornada+"_"+dia+"_"+actividad).removeClass('class-readonly');
                    $("#area_"+jornada+"_"+dia+"_"+actividad).removeClass('class-readonly');;
                    $("#actividad_"+jornada+"_"+dia+"_"+actividad).removeClass('class-readonly');
                    $("#cantidad_"+jornada+"_"+dia+"_"+actividad).removeClass('class-readonly');
                } 
                swal("Information!", "Activity successfully "+msj, "success");
            }            
        }
        
        function inactivarDia(jornada,dia){
            var isActiveItem = $("#isActiveItemDia_"+jornada+"_"+dia).val();
            if (isActiveItem == 0){
                var actEstatus = 1;
                var msj = "Inactive";                
            }else{
                var actEstatus = 0;
                var msj = "Active";
            }
            var data = {
                idsitio: '{{idsitio}}',
                jornada: jornada,
                dia: dia,
                isActiveItem: actEstatus
            };      
            $("<div></div>").dialog( {
                    buttons: [{
                        text: "Are you sure?",
                        click: function() {
                            $.isLoading({text: "Loading..."});
                            $.ajax({
                                type: "POST",
                                url: "{{path('actSitios_inactivarDiasSitio',{'idproyectos':idproyectos,'idmodule':idmodule})}}",
                                data: data,
                                success: function(data){
                                    if (data.respuesta=='Ok'){
                                        $("#isActiveItemDia_"+jornada+"_"+dia).val(actEstatus);
                                        if (actEstatus==1){                                                    
                                            $("#ina_dia_"+jornada+"_"+dia).removeClass("fa-toggle-on");
                                            $("#ina_dia_"+jornada+"_"+dia).addClass("fa-toggle-off");
                                            var dias = $("#cantidad_actividades_"+jornada+"_"+dia).val();
                                            for (var i = 1; i <=dias; i++) { 
                                                $("#ina_act_"+jornada+"_"+dia+"_"+i).removeClass("fa-toggle-on");
                                                $("#ina_act_"+jornada+"_"+dia+"_"+i).addClass("fa-toggle-off");
                                                $("#isActiveItem_"+jornada+"_"+dia+"_"+i).val(actEstatus);
                                                $("#rubro_"+jornada+"_"+dia+"_"+i).addClass('class-readonly');
                                                $("#area_"+jornada+"_"+dia+"_"+i).addClass('class-readonly');;
                                                $("#actividad_"+jornada+"_"+dia+"_"+i).addClass('class-readonly');
                                                $("#cantidad_"+jornada+"_"+dia+"_"+i).addClass('class-readonly');
                                            }
                                            
                                        }else{
                                            $("#ina_dia_"+jornada+"_"+dia).removeClass("fa-toggle-off");
                                            $("#ina_dia_"+jornada+"_"+dia).addClass("fa-toggle-on");
                                            var dias = $("#cantidad_actividades_"+jornada+"_"+dia).val();
                                            for (var i = 1; i <=dias; i++) { 
                                                $("#ina_act_"+jornada+"_"+dia+"_"+i).removeClass("fa-toggle-off");
                                                $("#ina_act_"+jornada+"_"+dia+"_"+i).addClass("fa-toggle-on");
                                                $("#isActiveItem_"+jornada+"_"+dia+"_"+i).val(actEstatus);
                                                $("#rubro_"+jornada+"_"+dia+"_"+i).removeClass('class-readonly');
                                                $("#area_"+jornada+"_"+dia+"_"+i).removeClass('class-readonly');;
                                                $("#actividad_"+jornada+"_"+dia+"_"+i).removeClass('class-readonly');
                                                $("#cantidad_"+jornada+"_"+dia+"_"+i).removeClass('class-readonly');
                                            }
                                        }                                            
                                        swal("Information!", "Days successfully "+msj, "success");
                                    }else{
                                        swal("Error!", "Error", "error");
                                    }
                                }
                            });
                            $( this ).remove();
                            $.isLoading('hide');
                        }
                    },
                    {
                        text: "Cancel",
                        click: function() {
                            $( this ).remove();
                        }
                    }
                    ],
                    close: function (event, ui) { $(this).remove(); },
                    resizable: false,
                    title: 'Confirm',
                    modal: true
                }).text('Are you sure to '+msj+'?').parent().addClass("alert");   
        }

        function inactivarJornada(jornada){
            var isActiveItem = $("#isActiveItemJornada_"+jornada).val();
            if (isActiveItem == 0){
                var actEstatus = 1;
                var msj = "Inactive";                
            }else{
                var actEstatus = 0;
                var msj = "Active";
            }
            var data = {
                idsitio: '{{idsitio}}',
                jornada: jornada,
                isActiveItem: actEstatus
            };      
            $("<div></div>").dialog( {
                    buttons: [{
                        text: "Are you sure?",
                        click: function() {
                            $.isLoading({text: "Loading..."});
                            $.ajax({
                                type: "POST",
                                url: "{{path('actSitios_inactivarJornadaSitio',{'idproyectos':idproyectos,'idmodule':idmodule})}}",
                                data: data,
                                success: function(data){
                                    if (data.respuesta=='Ok'){
                                        $("#isActiveItemJornada_"+jornada).val(actEstatus);
                                        if (actEstatus==1){                                                    
                                            $("#ina_jornada_"+jornada).removeClass("fa-toggle-on");
                                            $("#ina_jornada_"+jornada).addClass("fa-toggle-off");
                                            var dias = $("#cantidad_dia"+jornada).val();
                                            for (var i = 1; i <=dias; i++) { 
                                                var act = $("#cantidad_actividades_"+jornada+"_"+i).val();
                                                $("#ina_dia_"+jornada+"_"+i).removeClass("fa-toggle-on");
                                                $("#ina_dia_"+jornada+"_"+i).addClass("fa-toggle-off");
                                                for (var x = 1; x <=act; x++) { 
                                                    $("#ina_act_"+jornada+"_"+i+"_"+x).removeClass("fa-toggle-on");
                                                    $("#ina_act_"+jornada+"_"+i+"_"+x).addClass("fa-toggle-off");
                                                    $("#isActiveItem_"+jornada+"_"+i+"_"+x).val(actEstatus);
                                                    $("#rubro_"+jornada+"_"+i+"_"+x).addClass('class-readonly');
                                                    $("#area_"+jornada+"_"+i+"_"+x).addClass('class-readonly');;
                                                    $("#actividad_"+jornada+"_"+i+"_"+x).addClass('class-readonly');
                                                    $("#cantidad_"+jornada+"_"+i+"_"+x).addClass('class-readonly');
                                                }
                                            }                                            
                                        }else{
                                            $("#ina_jornada_"+jornada).removeClass("fa-toggle-off");
                                            $("#ina_jornada_"+jornada).addClass("fa-toggle-on");
                                            var dias = $("#cantidad_dia"+jornada).val();
                                            for (var i = 1; i <=dias; i++) { 
                                                var act = $("#cantidad_actividades_"+jornada+"_"+i).val();
                                                $("#ina_dia_"+jornada+"_"+i).removeClass("fa-toggle-off");
                                                $("#ina_dia_"+jornada+"_"+i).addClass("fa-toggle-on");
                                                for (var x = 1; x <=act; x++) { 
                                                    $("#ina_act_"+jornada+"_"+i+"_"+x).removeClass("fa-toggle-off");
                                                    $("#ina_act_"+jornada+"_"+i+"_"+x).addClass("fa-toggle-on");
                                                    $("#isActiveItem_"+jornada+"_"+i+"_"+x).val(actEstatus);
                                                    $("#rubro_"+jornada+"_"+i+"_"+x).removeClass('class-readonly');
                                                    $("#area_"+jornada+"_"+i+"_"+x).removeClass('class-readonly');;
                                                    $("#actividad_"+jornada+"_"+i+"_"+x).removeClass('class-readonly');
                                                    $("#cantidad_"+jornada+"_"+i+"_"+x).removeClass('class-readonly');
                                                }
                                            }    
                                        }                                            
                                        swal("Information!", "Journey successfully "+msj, "success");
                                    }else{
                                        swal("Error!", "Error", "error");
                                    }
                                }
                            });
                            $( this ).remove();
                            $.isLoading('hide');
                        }
                    },
                    {
                        text: "Cancel",
                        click: function() {
                            $( this ).remove();
                        }
                    }
                    ],
                    close: function (event, ui) { $(this).remove(); },
                    resizable: false,
                    title: 'Confirm',
                    modal: true
                }).text('Are you sure to '+msj+'?').parent().addClass("alert");   
        }
    </script>
    <div class ="container-fluid" id="info">        
        <div class="row">
            <div class="col-md-12 text-center">
                <h1 class="text-center text-primary">
                    <strong>EDIT SITE ACTIVITIES</strong>
                </h1>
            </div>
        </div>
        <input type='hidden' name="detail[]" id='detail' value='{{detail_sites}}'>
        <input type='hidden' name="totales[]" id='totales' value='{{totales}}'>
        <input type='hidden' name="cantidadJornadasOriginal" id='cantidadJornadasOriginal'>
        <form id="formCrear" name="formCrear" action="{{ path('actSitios_actualizarActividadesSitio',{'idproyectos':idproyectos,'idmodule':idmodule}) }}" method="POST">           
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-4 col-sm-2 col-xs-12">
                        <div class="form-group">
                            <label>Project</label>
                            <select class="form-control get-list-sitios" id="proyecto" name="proyecto"
                            required>
                                <option value="">ALL</option>
                                {%for proyecto in proyectos%}
                                    <option value="{{proyecto.valor}}">{{proyecto.valor}}</option>
                                {%endfor%}
                            </select>
                        </div>
                    </div>                          
                    <div class="col-md-4 col-sm-3 col-xs-12">
                        <div class="form-group">
                            <label>Site ID</label>
                            <input class="sitio form-control" type="hidden" id="sitio" name="sitio" required readonly>
                            <input class="sitioId form-control" type="text" id="sitioId" name="sitioId" required readonly>                            
                        </div>
                    </div>  
                    <div class="col-md-4 col-sm-3 col-xs-12">
                        <div class="form-group">
                            <label>Site Name</label>
                            <input class="siteName form-control" type="text" id="siteName" name="siteName" required readonly>
                        </div>
                    </div>                            
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-2 col-xs-12">
                        <div class="form-group">
                            <label>ASP</label>
                            <select class="form-control get-list-crew" id="asp" name="asp"
                            required>
                                <option value="">ALL</option>
                                {%for asp in asps%}
                                    <option value="{{asp.valor}}">{{asp.valor}}</option>
                                {%endfor%}
                            </select>
                        </div>
                    </div>                          
                    <div class="col-md-4 col-sm-3 col-xs-12">
                        <div class="form-group">
                            <label>CREW</label>
                            <select class="form-control" id="crew" name="crew" required>
                                <option value="">ALL</option>
                            </select>
                        </div>
                    </div> 
                    <div class="col-md-2 col-sm-3 col-xs-12">
                        <div class="form-group">
                            <label>Date</label>
                            <input type="text" autocomplete="off" class="form-control" id="fechaInicio" name="fechaInicio" required style>
                        </div>
                    </div>   
                    <div class="col-md-2 col-sm-3 col-xs-12">
                        <div class="form-group">
                        <label>Qty Journeys</label>
                        <div class="row">
                            <div class="col-md-1" style="text-align: left;">
                                <span><i id="menos_jornada" class="fa fa-minus"></i></span>
                            </div>
                            <div class="col-md-9" style="text-align: center;">
                                <input class="cantidad_jornadas solo_numeros form-control" type="text" id="cantidad_jornadas" name="cantidad_jornadas" placeholder="Enter the number of days" required readonly>
                            </div>
                            <div class="col-md-1" style="text-align: left;">
                                <span><i id="mas_jornada" class="fa fa-plus"></i></span>
                            </div>
                        </div>
                    </div>                            
                </div>

                <div class="row contenedor_data" style="margin: 4px 0 0 0;">
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-12"></div>
                    <div class="col-md-2 col-sm-2 col-xs-12">
                        <button type="submit" class="center-block btn btn-success form-control" style="    margin-top: 20px;">Save</button>
                    </div>
                    <div class="col-md-2 col-sm-2 col-xs-12">
                        <label for="Back">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <a class="btn btn-primary form-control" href="{{path('actSitios_indexActividadesSitio',{ 'idproyectos':idproyectos,'idmodule':idmodule})}}">Back</a>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12"></div>
                </div>
            </div>
        </form>
  
</div>
{% endblock %}
{% block javascripts %}
    <link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/select.bootstrap.min.css')}}">
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('js/jszip.min.js') }}"></script>
    <script src="{{ asset('js/pdfmake.min.js') }}"></script>
    <script src="{{ asset('js/vfs_fonts.js') }}"></script>
    <script src="{{ asset('js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.select.min.js') }}"></script>
    <script src="{{ asset('datatables/moment.min.js') }}"></script>
    <script src="{{ asset('datatables/js/datetime-moment.js') }}"></script>
    <script src="{{ asset('js/grouped-categories.js') }}"></script>        
{% endblock %}