{% extends '::base.html.twig' %}
{% block menuTop %}

{% endblock %}

{% block dashboard %}
<style>

    .checkbox-menu li label {
        display: block;
        padding: 3px 10px;
        clear: both;
        font-weight: normal;
        line-height: 1.42857143;
        color: #333;
        white-space: nowrap;
        margin:0;
        transition: background-color .4s ease;
    }
    .checkbox-menu li input {
        margin: 0px 5px;
        top: 2px;
        position: relative;
    }

    .checkbox-menu li.active label {
        background-color: #cbcbff;
        font-weight:bold;
    }

    .checkbox-menu li label:hover,
    .checkbox-menu li label:focus {
        background-color: #f5f5f5;
    }

    .checkbox-menu li.active label:hover,
    .checkbox-menu li.active label:focus {
        background-color: #b8b8ff;
    }

    .panel-green {
        border-color: #5cb85c;
    }

    .panel-green .panel-heading {
        border-color: #5cb85c;
        color: #fff;
        background-color: #5cb85c;
    }

    .panel-green a {
        color: #5cb85c;
    }

    .panel-green a:hover {
        color: #3d8b3d;
    }

    .panel-red {
        border-color: #d9534f;
    }

    .panel-red .panel-heading {
        border-color: #d9534f;
        color: #fff;
        background-color: #d9534f;
    }

    .panel-red a {
        color: #d9534f;
    }

    .panel-red a:hover {
        color: #b52b27;
    }

    .panel-yellow {
        border-color: #f0ad4e;
    }

    .panel-yellow .panel-heading {
        border-color: #f0ad4e;
        color: #fff;
        background-color: #f0ad4e;
    }

    .panel-yellow a {
        color: #f0ad4e;
    }

    .panel-yellow a:hover {
        color: #df8a13;
    }
    .double-scroll {
        width: 100%;
        margin-bottom: 40px;
        overflow: scroll !important;
    }
    /* 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: 36px;
    }

    table.tablesorter {
        font-family: arial;
        /* background-color: #CDCDCD; */
        margin: 10px 0pt 15px;
        font-size: 8pt;
        /* width: 100%; */
        text-align: left;
        margin-bottom: 150px;
    }


    .tablesorter-header-inner,table.tablesorter thead tr th,.tablesorter-filter {
        color: #fff;
        background-color: #082a99;
        border-color: #2643a5;

    }
    table.tablesorter thead tr th{

        height: 40px;
    }

    .tablesorter-blue .headerSortUp, .tablesorter-blue .tablesorter-headerSortUp, .tablesorter-blue .tablesorter-headerAsc {
        background-color: #082a99;}
    .tablesorter-blue .headerSortDown, .tablesorter-blue .tablesorter-headerSortDown, .tablesorter-blue .tablesorter-headerDesc {
        background-color: #082a99;}


    .tablesorter-blue .tablesorter-filter-row td {
        background: #2643a5;}

    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;
    }

    .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: 10px;
    }
    .fixed-panel {
        min-height: 200px;
        /* max-height: 800px; */
        overflow-y: auto;
    }
    #parametros .panel-body .row{

        padding-left: 5px;
    }
    #chart .panel-body {
        padding: 0px;
    }
    .btn-claro {
        color: #fff;
        /*background-color: #00569C;
        border-color: #3D59CA;*/
        background-color: #428bca;
        border-color: #3071a9;
    }
    .btn-claro:hover, .btn-claro:focus {
        color: #fcfcfc;
        text-decoration: none;
    }
    .tabla-detalle
    {
            text-transform: uppercase;
            font-size: 9px;
    }

    .disabledTab{
        pointer-events: none;
    }
    #menuTop { margin-top: 0px; }

    .form-inline .form-group { margin-bottom: 20px; }

    .form-group{ margin-left: 20px; }

    hr.style14 {
        border: 0;
        height: 1px;
        background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
        background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
        background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
        background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    }

    .hrHide { display: none; }

    .highcharts-container{width:100% !important;}


    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);
    }
    .container {
        width: 100%;
        height: 400px;
    }
    .chart {
      width: 80%;
    }
</style>
<link  href="{{ asset('bootstrap-multiselect/css/bootstrap-multiselect.css') }}" rel="stylesheet" type="text/css" />
<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">
    var id_region_global = 0;
    var strFileTypes = "*.xlsx";
    var arrFileTypes = ['xlsx'];

    $(document).ready(function() {
        $('#limpiarSelect').click(function () {
            $('#s2id_txtSitio').val('').trigger("change");
            $('#s2id_txtSitio .select2-chosen').text('');
        });

        $('#proyecto').select2({
            "placeholder" : "Seleccione Proyecto..."
        });
        $("#proyecto").on("change", function() {
            var alias = $(this).find('option:selected').data('alias');
            $('.mainTab a[href="#_' + alias + '"]').tab('show');
            var region = $('#region').select2("val");
            var proyecto = $('#proyecto').select2("val");
            if (proyecto !== "" && region !== ""){
                $('#txtSitio').select2("val","");
                $('#txtSitio').select2("enable",true);
            }else{
                $('#txtSitio').select2("enable",false);
            }
        });

        $('#asignado').select2();

        function formatShort(sitio) {
            return sitio.id;
        }

        function formatLarge(sitio) {
            return "[" + sitio.id + "] " + sitio.text.toUpperCase();
        }

        $('#txtSitio').select2({
            placeholder: 'ID',
            minimumInputLength: 3,
            multiple: false,
            ajax: {
                url: '{{ path('reportAmx_getSiteIdByRegion') }}',
                dataType: 'json',
                quietMillis: 550,
                data: function (term, page) {
                    return {
                        idsitio: term, // Termino de busqueda
                        //idregion: jQuery('#region').select2("val"),
                        idproyectos: {{ idproyectos }},
                        idproceso: jQuery('#proyecto').select2("val")
                    };
                },
                beforeSend: function(){
                    console.log('E beforeSend');
                    //return false;
                },
                success: function (response) {
                    console.log("E Successs: " + response);
                },
                error: function(xhr){
                    console.log("E Error: " + xhr);
                },
                complete: function(){
                    console.log("E Complete: ");
                },
                results: function (data, page) { // parse the results into the format expected by Select2.
                    // since we are using custom formatting functions we do not need to alter the remote JSON data
                    return { results: data };
                },
                cache: true
            },
            formatResult: formatLarge,
            formatSelection: formatShort,
            escapeMarkup: function(m) { return m; },
        });
        $('#txtSitio').select2("enable",false);

        $("#fileToUpload").fileinput({
            uploadUrl: "{{ path("reporteappenate_uploadFileATPs") }}",
            uploadAsync: false,
            minFileCount: 1,
            maxFileCount: 1,
            allowedFileExtensions: arrFileTypes,
            overwriteInitial: false,
            showPreview: false,
            showCancel: false,
            uploadExtraData: function() {
                return {
                    idproyectos: {{ idproyectos }},
                    idprocesos: $('#txtProceso').val()
                };
            },
            previewFileExtSettings: {
                'xls': function (ext) {
                    return ext.match(/(xls|xlsx)$/i);
                }
            },
            progress: '<div class="progress">\n' +
            '    <div class="progress-bar progress-bar-success progress-bar-striped text-center" role="progressbar" aria-valuenow="{percent}" aria-valuemin="0" aria-valuemax="100" style="width:{percent}%;">\n' +
            '        {status}\n' +
            '     </div>\n' +
            '</div>',
        });
        $('#fileToUpload').on('filecleared', function(event) {
        });
        $('#fileToUpload').on('filepreajax', function(event, previewId, index) {
            $("#cargar").css('display','');
        });
        $('#fileToUpload').on('filebatchuploaderror', function(event, data, previewId, index) {
            var form = data.form;
            var files = data.files;
            var extra = data.extra;
            var response = data.response;
            swal("Error!", response.error + "<br>Please contact the administrator", "error");
            $('#fileToUpload').fileinput('clear');
            $('#fileToUpload').fileinput('reset');
            $('#modalfileUpload').modal('hide');
            $("#cargar").css('display','none');
        });
        $('#fileToUpload').on('filebatchuploadsuccess', function(event, data, previewId, index) {
            var form = data.form;
            var files = data.files;
            var filename = data.filenames[0];
            var extra = data.extra;
            var response = data.response;
            var str = "";
            var n_procesados = parseInt(response.items_procesados);
            var arrNoProc = response.items_no_procesados;

            swal("Process Completed!", "Upload success", "success");
            $("#generar").click();
            if (n_procesados>0){
                str += '<div class="alert alert-success" role="alert">' +
                        '<strong>Archivo Procesado!!!</strong> Se procesaron ' + n_procesados + ' sitios.' +
                        '</div>';
            }
            if (arrNoProc.length>0){
                str+= '<div class="alert alert-warning" role="alert">' +
                        '<strong>Advertencia:</strong> ' + (arrNoProc.length) + ' sitios sin procesar.';
                        '</div>';
                str+="<div style='max-height: 150px; overflow: scroll'>";
                str+= "<samp>";
                for (var i=0; i<arrNoProc.length; i++){
                    str+= arrNoProc[i] + "<br>";
                }
                str+= "<samp>";
            }
            $('#fileToUpload').fileinput('clear');
            $('#fileToUpload').fileinput('reset');
            $('#fileToUpload').fileinput('refresh');
            $('#fileToUpload').fileinput('enable');
            $('#msjFileUpload').empty().append(str).show();
        });
    });

    $(function () {
        $('.repuesto').change(function () {
            var sel = $(this).val();
            $(".descripcion_repuesto option:contains(" + sel + ")").attr('selected', true);
            console.log($('.descripcion_repuesto').val());
        });

        $('.all').live('click', function () {
            var c = this.checked;
            var elem = '.validarExtra';
            $(elem).each(function(){
                $(this).prop("checked", c);
            });
        });

        $(".chkValAll").live('click', function (){
            var idprocesos = $("#proyecto").val();
            var elem = '#tbody_' + idprocesos + ' input[name=chkValidar_' + idprocesos + ']';
            var checked = false;

            if($(this).is(':checked')){
                checked = true;
            }else{
                checked = false;
            }

            $(elem).each(function(){
                $(this).prop("checked", checked);
            });
        });


        $('#chkValExtraAll').live('click', function(){
            var checked = false;
            if($(this).is(':checked')){
                checked = true;
            }else{
                checked = false;
            }
            $('.chkValExtraStyle').each(function(){
                if (!$(this).is(':disabled')){
                    $(this).prop("checked", checked);
                }
            });
        });

        $("#btnSaveSelectDeliverables").live('click', function () {
            var idTicket = $('#txtIdTicket').val();
            var arr = [];

            $('#frmSelectEntregable input[type=checkbox]').each(function(){
                var id_entregable = $(this).val();
                var idTicketEntregable = $(this).attr('id_ticket_entregable');
                var valor_old = $(this).attr('valor_old');
                var valor_new = this.checked==true ? '1' : '0';
                var isDisabled = $(this).is('[disabled]');
                var valor_texto = $(this).attr('valor_texto');
                var tipo = $(this).attr('tipo');

                var arrDatos = {};
                if ((valor_old != valor_new && idTicketEntregable !='0') || (idTicketEntregable =='0')){
                    if (isDisabled === false){
                        arrDatos = {
                            id_ticket: idTicket,
                            id_entregable: id_entregable,
                            id_ticket_entregable: idTicketEntregable,
                            valor_aplica: valor_new,
                            valor_texto: valor_texto,
                            tipo: tipo
                        };
                        arr.push(arrDatos);
                    }
                }
            });

            if (arr.length>0){
                $.confirm({
                    icon: 'glyphicon glyphicon-question-sign',
                    title: 'Excluir Reportes',
                    content: '¿Desea grabar los cambios?',
                    confirmButton: 'Si',
                    cancelButton: 'No',
                    confirmButtonClass: 'btn-success',
                    cancelButtonClass: 'btn-default',
                    confirm: function () {
                        $.isLoading({text: "Grabando los cambios..." });
                        $.ajax({
                            type: 'POST',
                            url: "{{ path('reporteappenate_saveAppenateListDeliverablesByProject') }}",
                            data: {
                                'arr_data': JSON.stringify(typeof(arr) === 'object' ? Object.values(arr) : arr),
                                'idproyectos': {{ idproyectos }}
                            },
                            dataType: 'json',
                            success: function (response) {
                                switch (response.status){
                                    case 'ok':
                                        $.isLoading("hide");
                                        swal("Información","Exclusión procesada!" );
                                        $('#modalSelectDeliverables').modal('hide');
                                        $.isLoading({text: "Refrescando los datos..." });
                                        //var groupQuery = $("li.active").attr("gruopquery");
                                        //var headerId = $("li.active").attr("headerId");
                                        var groupQuery = $("#proyecto").find('option:selected').data('groupquery');
                                        var headerId = $("#proyecto").find('option:selected').data('headerid');
                                        getReporte(groupQuery, headerId);
                                        $.isLoading("hide");
                                        break;
                                    case 'error':
                                        $.isLoading("hide");
                                        swal("Error","Error al excluir...");
                                        $('#modalSelectDeliverables').modal('hide');
                                        break;
                                    default:
                                        $.isLoading("hide");
                                        swal("Oops!!!", "Errores encontrados");
                                        $('#modalSelectDeliverables').modal('hide');
                                }
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                $.isLoading("hide");
                                swal("Oops!!!", "Errores encontrados");
                                $('#modalSelectDeliverables').modal('hide');
                            }
                        });
                    },
                    cancel: function () {
                        $.isLoading("hide");
                        // $.alert('Cancel!');
                    }
                });
            }else{
                alert('No se han encontrado cambios.');
            }
        });

        $("#saveValidarExtra").live('click', function () {
            $("#validacionOtros").ajaxSubmit({
                beforeSubmit: function (formData, jqForm, options) {
                    $("#saveValidarExtra").attr('disabled', 'disabled');
                    $.isLoading({
                        text: "Guardando"
                    });
                },
                error: function (error) {
                    swal(error.statusText, error.error, "error");
                    $("#saveValidarExtra").prop('disabled', false);
                },
                success: function (responseText, statusText, xhr, $form) {
                    $("#saveValidarExtra").prop('disabled', false);
                    //var groupQuery = $("li.active").attr("gruopquery");
                    //var headerId = $("li.active").attr("headerId");
                    var groupQuery = $("#proyecto").find('option:selected').data('groupquery');
                    var headerId = $("#proyecto").find('option:selected').data('headerid');
                    getReporte(groupQuery, headerId);
                }
            });
            return false;
        });

        $(".checkbox-menu").on("change", "input[type='checkbox']", function () {
            $(this).closest("li").toggleClass("active", this.checked);
        });

        $(document).on('click', '.allow-focus', function (e) {
            e.stopPropagation();
        });
        $('form').keypress(function(e) {
            if (e.which == 13) {
                return false;
            }
        });
        $('#formValidacion').keypress(function(e) {
            if (e.which == 13) {
                return false;
            }
        });

        $('form[name="rechazo"]').ajaxForm({
            beforeSubmit: function (formData, jqForm, options) {
                $.isLoading({
                    text: "Rechazando"
                });

            },
            error: function (error) {
                $.isLoading('hide');
            },
            success: function (responseText, statusText, xhr, $form) {
                $.isLoading('hide');
                swal("El Sitio Fue Rechazado", "You clicked the button!", "success");
                $("#modalRechazo").modal('hide');
                var groupQuery = $("#proyecto").find('option:selected').data('groupquery');
                var headerId = $("#proyecto").find('option:selected').data('headerid');
                getReporte(groupQuery, headerId);
            }
        });

        $('form[name="rechazoVideo"]').ajaxForm({
            beforeSubmit: function (formData, jqForm, options) {
                $.isLoading({
                    text: "Rechazando Video"
                });
            },
            error: function (error) {
                $.isLoading('hide');
            },
            success: function (responseText, statusText, xhr, $form) {
                $.isLoading('hide');
                swal("El Video Fue Rechazado", "You clicked the button!", "success");
                $("#modalRechazoVideo").modal('hide');
                var groupQuery = $("#proyecto").find('option:selected').data('groupquery');
                var headerId = $("#proyecto").find('option:selected').data('headerid');
                getReporte(groupQuery, headerId);
            }
        });

        $('form[name="formGestion"]').ajaxForm({
            beforeSubmit: function (formData, jqForm, options) {
                $.isLoading({
                    text: "Gestionando"
                });
            },
            error: function (error) {
                $.isLoading('hide');
            },
            success: function (responseText, statusText, xhr, $form) {
                $.isLoading('hide');
                $("#modalGestion").modal('hide');
                swal("El Sitio Fue Gestionado", "You clicked the button!", "success");
                var groupQuery = $("#proyecto").find('option:selected').data('groupquery');
                var headerId = $("#proyecto").find('option:selected').data('headerid');
                getReporte(groupQuery, headerId);
            }
        });

        $("#savePlan").click(function () {
            if ($("#password").val()==""){
                swal("Error!", "Debe ingresar la clave", "error");
                return false;
            }
            $("#formValidacion").ajaxSubmit({
                beforeSubmit: function (formData, jqForm, options) {
                    $("#savePlan").attr('disabled', 'disabled');
                    $.isLoading({
                        text: "Validando"
                    });
                },
                error: function (error) {
                    swal(error.statusText, error.error, "error");
                    $("#savePlan").prop('disabled', false);
                },
                success: function (responseText, statusText, xhr, $form) {
                    $("#savePlan").prop('disabled', false);
                    $.isLoading('hide');
                    $('#modalDetail').modal('hide');
                    swal("Sitio Validado Correctamente","You clicked the button!", "success");
                    var groupQuery = $("#proyecto").find('option:selected').data('groupquery');
                    var headerId = $("#proyecto").find('option:selected').data('headerid');
                    getReporte(groupQuery, headerId);
                }
            });
            return false;
        });

        $(".mainTab").live('click',function (){
            var idprocesos = $("li.active").attr("idprocesos");
            var proc =$(this).attr("idprocesos");
            //console.log("idprocesos: " + idprocesos);
            //console.log("proc: " + proc);
            $('#proyecto').select2("val",idprocesos);
        });

        $(".openModalR").live('click', function () {

          //alert("HOLA");

          var reporte_id = 0;
          var idproceso = $("#proyecto").val();
          if ($(this).hasClass('historial')) {
              var idticket = $(this).attr('id');
              reporte_id = 540;
              console.log(reporte_id,proyecto);
              $("#detalle").modal();
              $("#detalle .modal-body").empty();
              var data = {'reporte_id': reporte_id, 'ticket_id': idticket}
              $.getJSON('{{ path('reporteappenate_getDetalle') }}', data, function (data) {
                  $("#detalle .modal-body").html(createTableSimple(data.monitor));
              });
          } else {
              if (idproceso=='' || $("#rechazado").text()==0){
                  swal("Error!", "NO HAY SITIOS RECHAZADOS", "error");
                  return false;
              }
              if (idproceso==235){
                reporte_id = 576;
              }else{
                reporte_id = 584;
              }
              console.log(reporte_id,proyecto);
              $("#detalleR").modal();
              $("#detalleR .modal-body").empty();
              var data = {'reporte_id': reporte_id, 'ticket_id': idticket}
              $.getJSON('{{ path('reporteappenate_getDetalle') }}', data, function (data) {
                  $("#detalleR .modal-body").html(createTableSimple(data.monitor));
              });
          }

        });

        $(".openModalPV").live('click', function () {
          var reporte_id = 0;
          var idproceso = $("#proyecto").val();
          if ($(this).hasClass('historial')) {
              var idticket = $(this).attr('id');
              reporte_id = 540;
              console.log(reporte_id,proyecto);
              $("#detalle").modal();
              $("#detalle .modal-body").empty();
              var data = {'reporte_id': reporte_id, 'ticket_id': idticket}
              $.getJSON('{{ path('reporteappenate_getDetalle') }}', data, function (data) {
                  $("#detalle .modal-body").html(createTableSimple(data.monitor));
              });
          } else {
              if (idproceso=='' || $("#porValidar").text()==0){
                  swal("Error!", "NO HAY SITIOS VALIDADOS", "error");
                  return false;
              }
              if (idproceso==235){
                reporte_id = 575;
              }else{
                reporte_id = 583;
              }
              console.log(reporte_id,proyecto);
              $("#detallePV").modal();
              $("#detallePV .modal-body").empty();
              var data = {'reporte_id': reporte_id, 'ticket_id': idticket}
              $.getJSON('{{ path('reporteappenate_getDetalle') }}', data, function (data) {
                  $("#detallePV .modal-body").html(createTableSimple(data.monitor));
              });
          }

        });

        $(".openModal").live('click', function () {
            var reporte_id = 0;
            var idproceso = $("#proyecto").val();
            if ($(this).hasClass('historial')) {
                var idticket = $(this).attr('id');
                reporte_id = 540;
                console.log(reporte_id,proyecto);
                $("#detalle").modal();
                $("#detalle .modal-body").empty();
                var data = {'reporte_id': reporte_id, 'ticket_id': idticket}
                $.getJSON('{{ path('reporteappenate_getDetalle') }}', data, function (data) {
                    $("#detalle .modal-body").html(createTableSimple(data.monitor));
                });
            } else {
                if (idproceso=='' || $("#validado").text()==0){
                    swal("Error!", "NO HAY SITIOS VALIDADOS", "error");
                    return false;
                }
                if (idproceso==235){
                    reporte_id = 577;
                }else{
                    reporte_id = 585;
                }
                console.log(reporte_id,proyecto);
                $("#detalle").modal();
                $("#detalle .modal-body").empty();
                var data = {'reporte_id': reporte_id, 'ticket_id': idticket}
                $.getJSON('{{ path('reporteappenate_getDetalle') }}', data, function (data) {
                    $("#detalle .modal-body").html(createTableSimple(data.monitor));
                });
            }
        });

        $(".gestion").live('click', function () {


            var idticket = $(this).attr('id');
            $("#idticketGestion").val(idticket);
            $("#gestion").val("");
            $("#modalGestion").modal();


        });

        $(".validar").live('click', function () {
            var idestado = $(this).attr('idestado');
            var idticket = $(this).attr('id');
            //var idprocesos = $("li.active").attr("idprocesos");
            var idprocesos = $("#proyecto").val();

            $("#idticket").val(idticket);
            $("#idestado").val(idestado);
            $("#idprocesoGeneral").val(idprocesos);
            $("#modalDetail").modal();
            //$("#savePlan").click();

        });

        $(".trash").live('click', function () {
            $(this).parent().parent().remove();
        });

        $(".clone").live('click', function () {

            $("#" + $(this).attr('element')).clone().removeAttr('id').attr('class', 'row quitar').append(
                    '<label>&nbsp;</label><div class="col-lg-2"><a href="#" class="btn btn-danger fa fa-trash trash"></a></div>').appendTo("#" + $(this).attr('target'));

            $(".comentario").last().val("");
            return false;
        });

        $(".rechazar").live('click', function () {

            var idticket = $(this).attr('id');

            $("#idticketRechazo").val(idticket);
            $("#materialesContainer").children(":not(#primeraFila)").remove();
            $("#materialesContainer .quitar").remove();

            $(".descripcion_repuesto").find("option").remove();
            $(".repuesto").find("option").remove();
            $('.comentario').val("");
            //var idprocesos = $("li.active").attr("idprocesos");
            var idprocesos = $("#proyecto").val();


            var url = '{{ path('reportAmx__getEntregableRechazoImp',{'idproyectos':idproyectos,'idproceso':235}) }}';

            var UrlProceso = url.replace('%7Bparametro%7D', idprocesos);

            $.ajax({
                url: UrlProceso,
                {#data: {'tipo':1,'categoria':61}#}
            }).done(function (data) {


                $('.descripcion_repuesto').append($("<option/>", {
                    value: " ",
                    text: " "
                }));

                $('.repuesto').append($("<option/>", {
                    value: " ",
                    text: " "
                }));
                for (var i = 0; i < data.length; i++) {
                    $('.descripcion_repuesto').append($("<option/>", {
                        value: data[i]['descripcion'],
                        text: data[i]['id']
                    }));
                    $('.repuesto').append($("<option/>", {
                        value: data[i]['id'],
                        text: data[i]['descripcion']
                    }));
                }

            });
            $("#modalRechazo").modal();

        });

        $(".rechazarVideo").live('click', function () {
            var idticket = $(this).attr('id');

            $("#idticketRechazoVideo").val(idticket);

            $("#modalRechazoVideo").modal();
        });

        $(".export").click(function () {

            $("#" + $(this).attr("idForm")).submit();

            return false;

        });

        var intervalTime = null;
        $("#autoload").click(function () {

            var time = parseInt($("#time").val());

            if ($(this).prop('checked')) {

                intervalTime = window.setInterval(getReporte, time);
            } else {

                clearInterval(intervalTime);
            }

        });

        function intervalReport(fun, time) {

        }

        $('.datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            maxDate: new Date(),
            defaultDate: new Date(),

        }).datepicker("setDate", new Date());

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


            if ($(this).val() == 1) {

                $("#chart1").show();

                $("#chart3").hide();

            } else {

                $("#chart1").hide();

                $("#chart3").show();
            }

        });
        var starYear = 2017;
        var d = new Date();
        var year = d.getFullYear();
        var month = new Array();

        $(".checklist").live('click', function () {


            window.location.href = $(this).attr('href');
        });

        for (var i = starYear; year >= i; i++) {
            $('#ano').append($("<option/>", {
                value: i,
                text: i
            }));

        }

        month[0] = "January";
        month[1] = "February";
        month[2] = "March";
        month[3] = "April";
        month[4] = "May";
        month[5] = "June";
        month[6] = "July";
        month[7] = "August";
        month[8] = "September";
        month[9] = "October";
        month[10] = "November";
        month[11] = "December";
        var n = month[d.getMonth()];
        var options = new Array();

        for (var i = 0; i < month.length; i++) {


            if (i <= d.getMonth()) {


                $('#mes').append($("<option/>", {
                    value: i + 1,
                    text: month[i]
                }));

            }
        }
        $("#ano").change(function () {

            var yearSelected = parseInt($(this).val());
            var semana = ISO8601_week_no(new Date());

            $('#mes').empty();

            for (var i = 0; i < month.length; i++) {
                if (yearSelected < year) {
                    $('#mes').append($("<option/>", {
                        value: i + 1,
                        text: month[i]
                    }));
                } else if (i <= d.getMonth()) {
                    $('#mes').append($("<option/>", {
                        value: i + 1,
                        text: month[i]
                    }));

                }
            }
            $('#semana').empty();

            if (yearSelected < year) {
                var semana = 52;
                for (var i = semana; i >= 1; i--) {

                    $('#semana').append($("<option/>", {
                        value: i,
                        text: i
                    }));
                }

            } else {

                for (var i = semana; i >= 1; i--) {

                    $('#semana').append($("<option/>", {
                        value: i,
                        text: i
                    }));
                }
            }


        });

        $("#tipoBusqueda").on('change load', function () {

            $(this).val() == 'mes' ? $("#mes").removeAttr('class', 'hide') : $("#mes").addClass('hide');
            $(this).val() == 'semana' ? $("#semana").removeAttr('class', 'hide') : $("#semana").addClass('hide');
            $(this).val() == 'dia' ? $("#dia").removeClass('hide') : $("#dia").addClass('hide');
        });

        $("#generar").click(function () {
            if ($("#proyecto").val()==""){
                    swal("Error!", "Debe Seleccionar un Proyecto", "error");
                    return false;
            }else{
                var alias = $("#proyecto").find('option:selected').data('alias');
                $.isLoading({
                    text: "Loading"
                });
                var groupQuery = $("#proyecto").find('option:selected').data('groupquery');
                var headerId = $("#proyecto").find('option:selected').data('headerid');
                getReporte(groupQuery, headerId);
            }
        });
    });

    function getReporte(queryGroup, headerId){
        data = {};
        var tipo  = $("#tipoBusqueda").val();

        switch (tipo){
            case 'semana':
                data = {'semana': $("#semana").val()}
                break;
            case 'mes':
                data = {'mes' : $("#mes").val()}
                break;
            case 'dia':
                data = {'dia' : $("#dia").val()}
                break;
        }
        var idproyectos = {{ idproyectos }};
        var idprocesos = $("#proyecto").val();

        data['ano'] = $("#ano").val();
        data['grupoQuery'] = queryGroup;
        data['headerId'] = headerId;
        data['idproyectos'] = idproyectos;
        data['idprocesos'] = idprocesos;
        if($("#txtSitio").select2("val") != ""){
           data['sitio'] = $("#txtSitio").select2("val");
        };

        var parametros = {
            'idprocesos': idprocesos,
            'idproyectos': idproyectos
        };

        var horaIni= new Date();
        $.getJSON('{{ path('reportAmx_getDetailValidacionAtp2Nivel') }}', data, function (data) {
            horaIni= new Date();
            console.log('END GET REPORTE: ' + horaIni);
            var monitor = data[0].DETALLE;
            var chart = data;
            console.log(chart.grafico_Atp2doNv.categories);
            var validado = data[0].VALIDADOS[0].cantidad;
            var rechazado = data[0].RECHAZADOS[0].cantidad;
            var porValidar = data[0].POR_VALIDAR[0].cantidad;
            var entregablesRechazados = data[0].entregables;
            var targetReport = data[0].config[0].target_report;
            var isGestion = parseInt(data[0].config[0].is_gestion);
            var isVideoLlamada = parseInt(data[0].config[0].is_videollamada);
            var isValidated = parseInt(data[0].config[0].is_validate_other);
            var arrEtiquetas;

            if (chart.grafico_Atp2doNv.categories.length > 0){
                $("#grafico_Atp2doNv").empty();
                var series = getDataToObjectSerieAll(chart.grafico_Atp2doNv.data, Object.keys(chart.grafico_Atp2doNv.data[0]));
                createChartColumn('grafico_Atp2doNv', chart.grafico_Atp2doNv.categories, series, 'ATP VALIDADOS VS RECHAZADOS',
                        null, null, null, null,null,"{{ path('reportAmx_detalleDashboradAtp2Nivel') }}", chart.grafico_Atp2doNv.data,parametros,null,null,null,null,null,null);
            }else{
                if ($("#grafico_Atp2doNv").highcharts()!=undefined){
                    $("#grafico_Atp2doNv").highcharts().destroy();
                }
                $("#grafico_Atp2doNv").empty().append('<div class="alert-black alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
            }

            if( data.hasOwnProperty('ETIQUETAS_VALIDABLES') ) {
                arrEtiquetas = data.ETIQUETAS_VALIDABLES;
            }
            if (arrEtiquetas==undefined){
                $("li.active").data("etiquetas",'');
            }else{
                $("li.active").data("etiquetas",arrEtiquetas);
            }

            $("#validado").text(validado);
            $("#rechazado").text(rechazado);
            $("#porValidar").text(porValidar);
            var flag = true;

            horaIni= new Date();
            console.log('INICIO PROCESAMIENTO: ' + horaIni);
            if (monitor.length == 0) {
                $(".reporte1").empty();
                $("#chart1").empty();
                $("#chart2").empty();
                $(".reporte1").append('<div class="alert alert-warning text-center" role="alert">NO HAY SITIOS POR VALIDAR</div>');
                $.isLoading("hide");
                $("#inicio").show();
                return false;
            }

            if (entregablesRechazados.length > 0) {
                var headerEntregables = Object.keys(entregablesRechazados[0]);
                var entregableAux = new Array();
                var entregableAux2 = [];

                for (var i = 0; entregablesRechazados.length > i; i++) {
                    var objeto = {"ticket_id": entregablesRechazados[i]['ticket_id'], data: []};
                    for (var j = 1; headerEntregables.length > j; j++) {
                        if (entregablesRechazados[i][headerEntregables[j]] != 0) {
                            objeto.data.push(parseInt(entregablesRechazados[i][headerEntregables[j]]));
                        }
                    }
                    entregableAux['T' + entregablesRechazados[i]['ticket_id']] = objeto;
                }
            }

            var objectType = {"9":1,"10":2,"11":3,"12":4,"13":5,"14":6};

            $("#" + targetReport + " .table1").empty();
            $("#" + targetReport).empty().append(createTable(
                    monitor,undefined,undefined,objectType,null,entregableAux,isGestion,
                    isVideoLlamada,isValidated));
            $('.double-scroll').doubleScroll();

            var pagerOptions = {
                // target the pager markup - see the HTML block below
                container: $(".pager"),
                // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
                output: 'Rows : {endRow}',
                // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
                // table row set to a height to compensate; default is false
                fixedHeight: false,
                // remove rows from the table to speed up the sort of large tables.
                // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                removeRows: true,
                // go to page selector - select dropdown that sets the current page
                cssGoto: '.gotoPage'
            };
            // initial sort set using sortList option
            $(".table1").tablesorter({
                theme: 'blue',
                // sort on the first column and second column in ascending order
                widgets: ["zebra", "filter"],
                widgetOptions: {
                    // extra css class applied to the table row containing the filters & the inputs within that row
                    filter_cssFilter: '',
                    // If there are child rows in the table (rows with class name from "cssChildRow" option)
                    // and this option is true and a match is found anywhere in the child row, then it will make that row
                    // visible; default is false
                    filter_childRows: false,
                    // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
                    // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
                    filter_hideFilters: false,
                    // Set this option to false to make the searches case sensitive
                    filter_ignoreCase: true,
                    // jQuery selector string of an element used to reset the filters
                    filter_reset: '.reset',
                    // Use the $.tablesorter.storage utility to save the most recent filters
                    filter_saveFilters: true
                }
            }).tablesorterPager(pagerOptions);
            $(".pager").show();
            $("#inicio").show();
            $("#autoload").attr('disabled',false);
            $.isLoading('hide');
        }).fail(function(){
            $.isLoading('hide');
        });
    }

    function getDataToObjectSerieAll(data, header){
        var arrayReturn = new Array();
        var data1 = new Array();
        var menor = 1000;
        var mayor = -1;

        for (var i = 0; i < header.length; i++){
            var dataAux = new Array();
            if (header[i].indexOf('_cat_') < 0){
                for (var j=0; j<data.length; j++){
                    var valor = parseFloat(data[j][header[i]]);
                    dataAux.push(valor);
                    if (valor < menor){
                        menor = valor;
                    }
                    if (valor > mayor){
                        mayor = valor;
                    }
                }
                arrayReturn.push({'name': header[i], 'data': dataAux, 'dataLabels': {'enabled': true}});
            }
        }
        data1[0] = arrayReturn;
        data1[1] = menor;
        data1[2] = mayor;
        return data1;
    }

    function createChartColumn(render, categoria, series, title, w,
                               inicio, fin, pais, orderArray, path, rawData,parametros,
                               target11Value,target11Name,
                               target12Value,target12Name,
                               target13Value,target13Name)
    {
        var arrayReturn = new Array();
        var data = new Array();

        if (render=='grafico_Atp2doNv'){
            if (series.length>0){
                $.each(series, function(key, value) {
                    $.each(value, function(k, v) {
                      if(k==0){//FTR
                        data.push({"color":'#00A9E5',"name":v.name,"data":v.data,yAxis: 0,type: 'column'});
                      }else if (k==1){//VALIDADOS NO FTR
                        data.push({"color":'#90ED7D',"name":v.name,"data":v.data,yAxis: 0,type: 'column'});
                      }else if (k==2){//POR REVISAR
                        data.push({"color":'#E3F705',"name":v.name,"data":v.data,yAxis: 0,type: 'column'});
                      }else if (k==3){ //RECHAZADO
                        data.push({"color":'#FF0000',"name":v.name,"data":v.data,yAxis: 0,type: 'column'});
                      }else if (k==4){ //VALIDADOS 1ER NIVEL
                        data.push({"color":'#0C265D',"name":v.name,"data":v.data,yAxis: 1});
                      } else if (k==5){ //% RECHAZADO
                        data.push({"color":'#F7610F',"name":v.name,"data":v.data,yAxis: 1});
                      }
                    });
                });
            }
        }

        var subtitle = '';
        if ($('#asp').val()){
            if ($('#asp').val().length>0){
                var array_asp = $('#asp').val();
                var detalle_asp = $('#asp option').length===array_asp.length?'ALL':$('#asp').val();
                subtitle+= " <b>ASP:</b> "+detalle_asp;
            }
        }
        if ($('#region').val()){
            if ($('#region').val().length>0){
                var array_region = $('#region').val();
                var detalle_region = $('#region option').length===array_region.length?'ALL':$('#region').val();
                subtitle+= " <b>REGION:</b> "+detalle_region;
            }
        }
        var table_dt = "";
        var dt = "";
        var posProy = 0;
        var col = 4;
        var rotation = 0;
        var step = Math.ceil(rawData.length/50);
        var kpi = "";
        var height = 250;
        var options = {
            chart: {
                //height: height,
                borderColor: '#428bca',
                borderWidth: 1,
                zoomType: 'xy',
                backgroundColor: {
                    linearGradient: [0, 0, 0, 450],
                    stops: [
                        [0, 'rgba(66, 139, 202, 0.3)'], //start
                        [0.5, '#ffffff'], // middle
                        [1, 'rgba(66, 139, 202, 0.2)'] //end
                    ]
                }
              },
              credits: {
                enabled: false
              },
              title: {text: title},
              subtitle: {
                text: subtitle
              },
              xAxis: {
                categories: [],
                crosshair: true,
                labels: {
                    autoRotation: [-10, -20, -30, -40, -50]
                }
            },
            yAxis: [{
                title: {
                    text: 'Qty'
                },
                min: 0,
                labels: {
                    overflow: 'justify',
                    style: {
                        fontSize: '9px',
                    },
                },
            }, {
                title: {
                    text: 'Percent (%)'
                },
                max: 100,//render=='grafico_SITEEstatusActual'?600:100,
                min: 0,
                opposite: true,
                labels: {
                    format: "{value}%"
                }
            }],
            series: data
        };

        var formato = '{point.y}';
        // OPCIONAL: El path para la tabla detallada
        if (path != null){
            options['plotOptions'] =
            {
                series:
                {
                    cursor: 'pointer',
                    borderWidth: 0,
                    dataLabels:
                    {
                        enabled: true,
                        formatter: function () {
                            return this.point.y;
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -40,
                        y: 80,
                        floating: true,
                        borderWidth: 1,
                        backgroundColor: '#FFFFFF',
                        shadow: true
                    },
                    point:
                    {
                        events:
                        {
                            click: function (e){
                                if (rawData != null){
                                    var row = rawData[this.x];
                                    var selected_serie = this.series.name;
                                    //console.log(row,rawData,selected_serie);
                                    parametros['categoria'] = '';
                                    parametros['ofensor'] = '';
                                    var subtitle_detalle = '';
                                    if (render=='grafico_Atp2doNv'){
                                        var t = '';
                                        parametros['categoria'] = '';
                                        //parametros['_cat_Proyecto'] = '';
                                        if(render=='grafico_Atp2doNv'){
                                            t = "ATP'S VALIDADOS VS ATP'S RECHAZADOS";
                                            subtitle_detalle = "["+selected_serie+"]";
                                        }
                                        parametros['mes'] = row._cat_Month?row._cat_Month:'';
                                        parametros['week'] = row._cat_Week?row._cat_Week:'';
                                        parametros['year'] = row._cat_Year?row._cat_Year:'';
                                        parametros['proyect'] = row._cat_Proyecto?row._cat_Proyecto:'';
                                        var title_detalle = t;

                                        /*if (row._cat_PROJECT){
                                            if (row._cat_PROJECT!='TOTAL'){
                                                parametros['_cat_Proyecto'] = row._cat_PROJECT;
                                            }
                                        }*/
                                        //console.log(selected_serie);
                                        if(render=='grafico_Atp2doNv'){
                                            if (selected_serie=='TOTAL'){
                                                parametros['kpi'] = "DETALLE_ATP_TOTAL";
                                            }else if (selected_serie=='VALIDADOS FTR'){
                                                parametros['kpi'] = "DETALLE_ATP_VALIDADOS_FTR";
                                            }else if (selected_serie=='POR VALIDAR'){
                                                parametros['kpi'] = "DETALLE_ATP_POR_VALIDAR";
                                            }else if (selected_serie=='VALIDADOS NO FTR'){
                                                parametros['kpi'] = "DETALLE_ATP_APROBADO";
                                            }else if (selected_serie=='RECHAZADO'){
                                                parametros['kpi'] = "DETALLE_ATP_RECHAZADO";
                                            }else if (selected_serie=='% VALIDADOS FTR' || selected_serie=='% RECHAZADOS'){
                                                $.isLoading("hide");
                                                return false;
                                            }
                                        }
                                    }
                                    parametros['selected_serie'] = selected_serie;
                                    generateModal(path, parametros, false,  title_detalle, subtitle_detalle, orderArray);
                                }else{
                                    alert('Data Not Found');
                                }
                            }
                        }
                    }
                }
            };
        }
        var num = categoria.length;
        for (var k=0; k<rawData.length; k++){
            var hasThisCategory = false;
            var categoryIndex = -1;
            var categoryPath = options.xAxis.categories;
            var lastCat = categoria[categoria.length - 1]['sql_name'];
            if (categoria.length>=1){ //Si hay 2 o mas categorias
                // I. level of categories
                if (categoria.length >= 1) {
                    Highcharts.each(categoryPath, function(category, i) {
                        if (category.name === rawData[k][categoria[0]['sql_name']]) {
                            hasThisCategory = true;
                            categoryIndex = i;
                        }
                    });
                    if (!hasThisCategory) {
                        categoryPath.push({
                            name: rawData[k][categoria[0]['sql_name']],
                            categories: []
                        });
                    }
                    if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
                }

                if (categoria.length >= 3){
                    // II. level of categories
                    categoryPath = categoryPath[categoryIndex].categories;
                    hasThisCategory = false;
                    categoryIndex = -1;
                    Highcharts.each(categoryPath, function(category, i) {
                        if (category.name === rawData[k][categoria[1]['sql_name']]) {
                            hasThisCategory = true;
                            categoryIndex = i;
                        }
                    });
                    if (!hasThisCategory) {
                        categoryPath.push({
                            name: rawData[k][categoria[1]['sql_name']],
                            categories: []
                        });
                    }
                    if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
                }

                if (categoria.length >=4){
                    // III. level of categories
                    categoryPath = categoryPath[categoryIndex].categories;
                    hasThisCategory = false;
                    categoryIndex = -1;
                    Highcharts.each(categoryPath, function(category, i) {
                        if (category.name === rawData[k][categoria[2]['sql_name']]) {
                            hasThisCategory = true;
                            categoryIndex = i;
                        }
                    });
                    if (!hasThisCategory) {
                        categoryPath.push({
                            name: rawData[k][categoria[2]['sql_name']],
                            categories: []
                        });
                    }
                    if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
                }

                if (categoria.length >=5){
                    // IV. level of categories
                    categoryPath = categoryPath[categoryIndex].categories;
                    hasThisCategory = false;
                    categoryIndex = -1;
                    Highcharts.each(categoryPath, function(category, i) {
                        if (category.name === rawData[k][categoria[3]['sql_name']]) {
                            hasThisCategory = true;
                            categoryIndex = i;
                        }
                    });
                    if (!hasThisCategory) {
                        categoryPath.push({
                            name: rawData[k][categoria[3]['sql_name']],
                            categories: []
                        });
                    }
                    if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
                }
                if (categoria.length >=6){
                    // V. level of categories
                    categoryPath = categoryPath[categoryIndex].categories;
                    hasThisCategory = false;
                    categoryIndex = -1;

                    Highcharts.each(categoryPath, function(category, i) {
                        if (category.name === rawData[k][categoria[4]['sql_name']]) {
                            hasThisCategory = true;
                            categoryIndex = i;
                        }
                    });
                    if (!hasThisCategory) {
                        categoryPath.push({
                            name: rawData[k][categoria[4]['sql_name']],
                            categories: []
                        });
                    }
                    if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;
                }
                // Last level of categories
                if (categoria.length >1) {
                    categoryPath = categoryPath[categoryIndex].categories;
                }else{
                    //categoryPath = categoryPath[categoryIndex].categories;
                }
                hasThisCategory = false;
                categoryIndex = -1;
                Highcharts.each(categoryPath, function(category, i) {
                    if (category === rawData[k][lastCat]) {
                        hasThisCategory = true;
                    }
                });
                if (!hasThisCategory) {
                    categoryPath.push(rawData[k][lastCat]);
                }
            }
        }
        return $('#' + render).highcharts(options);
    }

    function createTable(monitor,total,nombreColTotal,type,region,entregableAux,isGestion,isVideoLlamada,isValidated){
        var headerAux = Object.keys(monitor[0]);
        var header = headerAux.filter(function(element){ return !element.startsWith('_')});
        var headerType = Object.keys(type);
        //var idProcesos = $("li.active").attr("idprocesos");
        var idProcesos = $("#proyecto").val();
        var table = '<table  class="table table-bordered table-hover table-striped table-responsive table1 table_' + idProcesos + '" ' +
                'id="tableSitios"> <thead>' +
                '<tr class="btn-info">';

        for (var j = 0; j < header.length; j++) {
            var h = header[j];
            if( j != 0 && !h.startsWith('_')){
                var s = h.trim();
                s = s.replace(' ','_');
                s = s.toUpperCase();
                table += "<th class='text-center " + s + "'>" + header[j] + "</th>"
            }
        }
        /* Columna Reporte x Sitio */
        //table += "<th class='text-center'>" + "Excluir Entregables" + "</th>";

        table += "<th class='text-center' nowrap='nowrap'><input type='checkbox' " +
                "id='chkValAll_" + idProcesos + "' class='chkValAll'>&nbsp;" +
                "Validar<span id='countValAll_" + idProcesos + "'>" + "</span></th>";
        table += "<th class='text-center'>" + "Rechazar" + "</th>";
        table += "<th class='text-center'>" + "Historial" + "</th>";

        if (isGestion){
            table += "<th class='text-center'>" + "Gestion" + "</th>";
        }

        if(isValidated){
            table += "<th class='text-center'>" + "&nbsp;Validacion&nbsp;" + "</th>";
        }
        table += "</tr></thead>";
        table += "<tbody id='tbody_" + idProcesos + "'>";

        for (var i = 0; i < monitor.length; i++) {
            var aux;
            var clave = 'T' + monitor[i]['idticket'];

            if (entregableAux !== undefined){
                if (entregableAux[clave] !== undefined){
                    aux= entregableAux[clave]['data'];
                }else{
                    aux = undefined;
                }
            }

            table += "<tr id='"+ monitor[i][header[0]] + "'>";
            for (var j = 0; j < header.length; j++) {
                var clases = '';
                var estilo="";
                if( $.inArray(j,headerType)){
                    var typeString = 'id="' + type[j] + '"';
                }

                if( j != 0) {
                    if (j>2){
                       estilo = " style='text-align:center;' ";
                    }
                    if(monitor[i][header[4]] == 'RECHAZADO'){
                        if(aux !== undefined && aux.indexOf(j)> -1){
                            clases = "class='btn-danger'";
                        }
                    }else if(j==17 || j==7) {
                        if(aux !== undefined && aux.indexOf(j)> -1){
                            clases = "class='btn-danger'";
                        }
                    }
                    table += "<td " + clases + typeString + estilo + " >" + monitor[i][header[j]] + "</td>";
                }

                if(j ==header.length -1){

                    {% if is_granted('ROLE_VALIDACION_CLIENTE_RAN_1') %}

                        if (monitor[i]['STATUS'] != 'VALIDADO') {
                          table += "<td class='text-center' style='vertical-align: middle' nowrap='nowrap'><input type='checkbox' name='chkValidar_" + idProcesos + "' idestado='2667' idt='" + monitor[i][header[0]] + "'>&nbsp;&nbsp;" +
                                  '<button type="button" idestado="2667" id=' + monitor[i][header[0]] +  '" class="btn btn-success btn-sm validar">Validar</button>' + "</td>";
                          table += "<td class='text-center' style='vertical-align: middle'>" + '<button type="button" id=' + monitor[i][header[0]] +  '" class="btn btn-danger  btn-sm rechazar">Rechazar</button>' + "</td>";
                          table += "<td class='text-center' style='vertical-align: middle'>" + '<button type="button" id=' + monitor[i][header[0]] +  ' class="btn btn-default btn-sm openModal historial">Historial</button>' + "</td>";
                        }else {
                          table += "<td class='text-center' style='vertical-align: middle' nowrap='nowrap'>_</td>";
                          table += "<td class='text-center' style='vertical-align: middle'>_</td>";
                          //table += "<td class='text-center' style='vertical-align: middle'>N/A</td>";
                          table += "<td class='text-center' style='vertical-align: middle'>" + '<button type="button" id=' + monitor[i][header[0]] +  ' class="btn btn-default btn-sm openModal historial">Historial</button>' + "</td>";
                        }




                        if(isGestion) {
                            table += "<td class='text-center' style='vertical-align: middle'>" + '<button type="button" id=' + monitor[i][header[0]] + ' class="btn btn-info btn-sm gestion">Gestion</button>' + "</td>";
                        }

                        if(isValidated) {
                            var N_A = (idproceso=160) ? 'N/A' : '';
                        var valueAlarmas = (monitor[i]['_VALUE_ALARMA_EXTERIOR']==undefined ? N_A : monitor[i]['_VALUE_ALARMA_EXTERIOR']);
                        var commentAlarmRO = '';
                        var commentAlarm = (monitor[i]['_COMENTARIO_ALARMA_EXTERIOR']==undefined ? '' : monitor[i]['_COMENTARIO_ALARMA_EXTERIOR']);
                        var valueBaseline = (monitor[i]['_VALUE_BASELINE']==undefined ? '' : monitor[i]['_VALUE_BASELINE']);
                        var commentBaselineRO = '';
                        var commentBaseline = (monitor[i]['_COMENTARIO_BASELINE']==undefined ? '' : monitor[i]['_COMENTARIO_BASELINE']);
                        var valueSRS = (monitor[i]['_VALUE_SRS']==undefined ? '' : monitor[i]['_VALUE_SRS']);
                        var commentSRSRO = '';
                        var commentSRS = (monitor[i]['_COMENTARIO_SRS']==undefined ? '' : monitor[i]['_COMENTARIO_SRS']);
                        var valueB158 = (monitor[i]['_VALUE_B158']==undefined ? N_A : monitor[i]['_VALUE_B158']);
                        var commentB158 = (monitor[i]['_COMENTARIO_B158']==undefined ? '' : monitor[i]['_COMENTARIO_B158']);
                        var buttonDisabled = '';
                        table +='<td class="text-center" nowrap="nowrap" valign="middle" style="vertical-align: middle">' +
                                '<button type="button" class="btn btn-success  btn-sm btnValExtra" aria-label="Validación Extra" title="Validación Extra" ' +
                                'id="btnValExtra_' + idProcesos + '_' +  monitor[i][header[0]] + '" ' +
                                'data-idticket="' + monitor[i][header[0]] +  '" ' +
                                'data-val_alarmas="' + valueAlarmas +  '" ' +
                                'data-val_baseline="' + valueBaseline +  '" ' +
                                'data-val_srs="' + valueSRS +  '" ' +
                                'data-val_b158="' + valueB158 +  '" ' +
                                'data-com_alarmas="' + commentAlarm +  '" ' +
                                'data-com_baseline="' + commentBaseline +  '" ' +
                                'data-com_b158="' + commentB158 +  '">' +
                                '<span title="Validación Extra" style="padding-left: 5px;" class="glyphicon glyphicon-check" aria-hidden="true"></span>' +
                                '</button></td>';
                    }

                    {% else %}
                        if(monitor[i][header[3]] == region){
                                if( isVideoLlamada){

                                var disabled="";
                                if(monitor[i][header[5]]=="VIDEOLLAMADA VALIDADA"){
                                    disabled="disabled";
                                }
                                table += "<td class='text-center' style='vertical-align: middle'>" + '<button type="button" idestado="3229" id=' + monitor[i][header[0]] + ' class="btn btn-success validar">Validar RSA</button>' + "</td>";
                                table += "<td class='text-center' style='vertical-align: middle'>" + '<button type="button" id=' + monitor[i][header[0]] + ' class="btn btn-danger rejectVideoLlamada rechazarVideo '+disabled+'">Rechazar RSA</button>' + "</td>";
                            }
                            table += "<td class='text-center' style='vertical-align: middle'>" + '<button type="button"  idestado="3319" id=' + monitor[i][header[0]] +  '" class="btn btn-success validar">Validar</button>' + "</td>";
                            table += "<td class='text-center' style='vertical-align: middle'>" + '<button type="button" id=' + monitor[i][header[0]] +  '" class="btn btn-danger rechazar">Rechazar</button>' + "</td>";
                            table += "<td class='text-center' style='vertical-align: middle'>" + '<button type="button" id=' + monitor[i][header[0]] +  ' class="btn btn-default openModal historial">Historial</button>' + "</td>";
                        }else{
                            table += "<td class='text-center'></td>";
                            table += "<td class='text-center'></td>";
                            table += "<td class='text-center'></td>";
                            table += "<td class='text-center'></td>";
                            table += "<td class='text-center' style='vertical-align: middle'>" + '<button type="button" id=' + monitor[i][header[0]] +  ' class="btn btn-default openModal historial">Historial</button>' + "</td>";
                        }
                    {% endif %}
                }
            } //Fin del for (var j = 0; j < header.length; j++)
            table += "</tr>";

            if(typeof total !== "undefined") {
                if (i == monitor.length - 1) {
                    var headerTotal = Object.keys(total);
                    table += '<tr><td>' + nombreColTotal +'</td>';

                    for(var x=0; x<headerTotal.length;x++){
                        table += '<td>';
                        table += total[headerTotal[x]];
                        table += '</td>';
                    }
                    table += '</tr>';
                }
            }
        }
        table += "</tbody></table>";
        return table;
    }

    function createTableSimple(monitor,total,nombreColTotal){
        //console.log(monitor);
        if (monitor.length>0){
        var header = Object.keys(monitor[0]);

        var table = '<table id="tableSitios"  class="table table-bordered table-hover table-striped table-responsive"> <thead>' +

                '<tr class="btn-info">';

        for (var j = 0; j < header.length; j++) {


            table += "<th class='text-center'>" + header[j] + "</th>"



        }
        table += "</tr></thead>";

        for (var i = 0; i < monitor.length; i++) {
            table += "<tr>";
            for (var j = 0; j < header.length; j++) {
                //if( typeof monitor[i][header[j]] === 'object'){
                //    table += "<td>" + monitor[i][header[j]].date.substring(0,19)  + "</td>";
                //}else{
                    table += "<td>" + monitor[i][header[j]]  + "</td>";
                //}
            }
            table += "</tr>";

            if(typeof total !== "undefined") {

                if (i == monitor.length - 1) {

                    var headerTotal = Object.keys(total);
                    table += '<tr><td>' + nombreColTotal +'</td>';

                    for(var x=0; x<headerTotal.length;x++){
                        table += '<td>';
                        table += total[headerTotal[x]];

                        table += '</td>';

                    }
                    table += '</tr>';
                }
            }
        }
        table += "</table>";

        return table;
        }
    }

    function generateModal(ruta, objParams, numerar, title, subtitle, orderArray)
    {
      //console.log(ruta, objParams, numerar, title, subtitle, orderArray);
      //alert("RUTA:"+ruta);alert("PARAM:"+objParams);alert("NUMERAR:"+numerar);alert("TITLE:"+title);alert("SUBTITLE:"+subtitle);alert("ORDARRAY:"+orderArray);

      var title_ = title!=null ? title.trim() : "";
      var ordArr = orderArray!=null ? orderArray : null;
      $("#datatableModalDetalle").empty().isLoading();
      $('#myModal .punto-grafica').empty().hide();
      $('#myModal .modal_detalle_titulo').empty();

      if (title != null)
      {
          $('#myModal .modal_detalle_titulo').html(title);
          //title_ = title.trim();
          title_ = title_.replace(' ','_');
          title_ = title_.replace('-','');
          title_ = title_.replace(' ','');
      }
      else
      {
          $('#myModal .modal_detalle_titulo').html('{{'monitorii.detail' | trans }}');
          title = '{{'monitorii.detail' | trans }}';
          title_ = title_.replace(' ','_');
          title_ = title_.replace('-','');
          title_ = title_.replace(' ','');
      }

      if (subtitle != null)
      {
          $('#myModal .punto-grafica').html(subtitle).show();
      }

      $.getJSON(ruta, objParams, function (data)
      {
          if (data.length > 0){
              var total_general = 0;
              var porcentaje_ohs = 0;
              var total_registros = 0;
              var col = createTableDTDetail(Object.keys(data[0]),'tableModalDetalle', 'datatableModalDetalle',objParams.kpi,porcentaje_ohs,total_registros);
              buildDatatablePrin('tableModalDetalle',col,data,title_,ordArr);
              $('[data-toggle="popover"]').popover('destroy');
              $('[data-toggle="popover"]').popover({
                  template: '<div class="popover" role="tooltip" style="width: 800px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
              }).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });
          }else{
              $("#datatableModalDetalle").empty().append('<div class="alert alert-warning" role="alert">{{'DATOS NO ENCONTRADOS' | trans}}</div>');
          }
          $("#datatableModalDetalle").isLoading('hide');
      });

      $('#myModal').modal('show');
    }

    function createTableDTDetail(data, tableRender, dtRender, type, porcentaje_ohs, total_registros){
        var strHeader = "";
        var strFooter="";
        var columns = [];
        var col_issues = 8;
        var strType = (type == null ? "" : type);
        var strTable = '<table id="' + tableRender + '" class="display cell-border compact stripe" width="100%">' +
                '<thead><tr class="header_dt">';
        $('#' + dtRender).empty();

        for (var i=0; i<data.length; i++){
            var title = data[i];
            var t = title.replace(/_/g,' ');
            t = title.replace('#','');

            var visible = title.startsWith('_') ? false : true;

            if (t=='DESCRPTION'){
                strHeader += '<th class="text-center" style="width: 350px;">' + t + '</th>';
            }else{
                strHeader += '<th class="text-center">' + t + '</th>';
            }

            //console.log(title);
            if (title=="Total Not Accepted" || title=="Not Ok" || title=="SYSTEM FAULT FOUND"  || title=="ISSUES"){
                columns.push({data: data[i], title: t, visible:visible,
                    render: function ( dato, type, row ) {
                        if (dato>0){
                            var kpi="";
                            var popup_title = "";
                            var strIssuesHtml = "<ol>";
                            var strIssuesText = "";
                            var url= "";
                            if (row.hasOwnProperty('_ISSUES')){
                                kpi='ftr';
                                popup_title = 'Issues';
                                var issues = row['_ISSUES'];
                                //console.log(issues);
                                if (issues){
                                    var arrIssues = issues.split("<br>");
                                    if (Array.isArray(arrIssues)){
                                        for (var i=0; i<arrIssues.length; i++){
                                            strIssuesHtml += "<li>" + arrIssues[i] + ".</li>";
                                            strIssuesText += i + ". " +  arrIssues[i] + ".\r\n";
                                        }
                                    }else{
                                        strIssuesHtml = issues;
                                    }
                                    strIssuesHtml += "</ol>";
                                }
                            }
                            if (type==='display'){
                                /*return '<a href="javascript://" ' +
                                 'onClick=\'generateModal("' + url + '",' + JSON.stringify(parametros) + ',true,"' + table_title +  '","' + subtitle +  '",' + ord +  ')\'">' + dato + '</a>';*/
                                return '<a href="javascript://"  data-toggle="popover" data-title="<b>Issues</b>" ' +
                                        'data-container="body" data-placement="left" data-html="true" ' +
                                        'data-trigger="focus" ' +
                                        'data-content="' + strIssuesHtml  + '"' +
                                        '>' + dato + '</a>';
                            }else{
                                return dato;
                            }
                        }
                        return dato;
                    }
                });
            }else if (title=='_ISSUES'){
                columns.push({data: data[i], title: t, visible:visible,
                    render: function ( dato, type, row ) {
                        if (Array.isArray(dato)){
                            if (dato.length>0){
                                var strIssuesHtml = "<ol>";
                                var strIssuesText = "";
                                if (row.hasOwnProperty('_ISSUES')){
                                    var issues = row['_ISSUES'];
                                    var arrIssues = issues.split("<br>");
                                    if (Array.isArray(arrIssues)){
                                        for (var i=0; i<arrIssues.length; i++){
                                            strIssuesHtml += "<li>" + arrIssues[i] + ".</li>";
                                            strIssuesText += i + ". " +  arrIssues[i] + ".\r\n";
                                        }
                                    }
                                    strIssuesHtml += "</ol>";
                                }
                                if (type==='display'){
                                    return strIssuesHtml;
                                }else{
                                    return strIssuesText;
                                }
                            }
                        }
                        return dato;
                    }
                });
            }else{
                columns.push({data: data[i], title: t, visible:visible});
            }
        }
        strTable += strHeader + '</tr></thead><tbody id="tbody_' + tableRender + '"></tbody>' + strFooter + '</table>';
        $('#' + dtRender).empty();
        $('#' + dtRender).html(strTable);
        $('#' + tableRender + ' thead tr').clone(true).appendTo( '#' + tableRender + ' thead' );
        $('#' + tableRender + ' thead tr:eq(1) th').each( function (i) {
            var title = $(this).text();
            $(this).html( '<input type="text" style="width: 100%; margin: 0px; padding: 0px;"/>' );
            $( 'input', this ).on( 'keyup change', function () {
                if ( $.fn.DataTable.isDataTable( '#' + tableRender ) ) {
                    var table = $('#' + tableRender).DataTable();
                    if ( table.column(i).search() !== this.value ) {
                        table
                                .column(i)
                                .search( this.value )
                                .draw();
                    }
                }
            } );
        } );

        return columns;
    }

    function buildDatatablePrin(render, columnas, data,suffix_export,orderArray)
    {
        var a=[];b=[];
        var Defs = [];
        var ini = (columnas.length) -5;
        var kpi = '';
        if (render=='table_IssuesExecuted'){
            kpi = 'Issues Executed';
        }else if(render=='table_ExecutedNotExecuted'){
            kpi = 'Reasons Not Executed';
        }

        for (var i=0; i<=(columnas.length - 1); i++){
            a.push(i);
        }
        Defs.push({ targets: a, className: 'dt-body-center' });
        for (var i=0; i<=(columnas.length - 1); i++){
            if (columnas[i].visible){
                b.push(i);
            }
        }
        table = $('#'+render).DataTable( {
            dom: '<"row" <"col-md-12 text-right"B>> <"row" <"col-md-6 "l> <"col-md-6"f>>rtip',
            scrollY: '60vh',
            scrollX: true,
            scrollCollapse: true,
            orderCellsTop: true,
            data:data,
            "deferRender": false,
            "processing": true,
            "language": {
                "processing": "<div class='table-loading' style='z-index: 99999'><img src='{{ asset('images/spiral.gif') }}' /></div>"
            },
            //"order": [[ 0, "asc" ]],
            "ordering": false,
            columns: columnas,
            columnDefs: Defs,
            lengthMenu: [[25, 50, 100, 250, 500], [25, 50, 100, 250, 500]],
            buttons: [
                {
                    extend:'excel',
                    text: 'Table Excel ' + kpi,
                    exportOptions: {
                        columns: b,
                        orthogonal: 'export'
                    },
                    title: 'Usage' + kpi
                }
            ],
            drawCallback: function() {
                $('[data-toggle="popover"]').popover();
            }
        } );
    }

    function ISO8601_week_no(dt){
        var tdt = new Date(dt.valueOf());
        var dayn = (dt.getDay() + 6) % 7;
        tdt.setDate(tdt.getDate() - dayn + 3);
        var firstThursday = tdt.valueOf();
        tdt.setMonth(0, 1);
        if (tdt.getDay() !== 4)
        {
            tdt.setMonth(0, 1 + ((4 - tdt.getDay()) + 7) % 7);
        }
        return 1 + Math.ceil((firstThursday - tdt) / 604800000);
    }

    function getTotal(valor,key,tipo)
    {
        var total = new Array();

        var header = Object.keys(valor[0]);


        for(var i = 0; i< valor.length;i++){

            for(var j = 0; j< key.length;j++){

                if(typeof total[key[j]] === "undefined"){
                    total[key[j]] = 0;
                }

                if (tipo==1){
                    total[key[j]] +=  parseFloat(valor[i][header[key[j]]]);
                    if (i == (valor.length-1)) total[key[j]]=parseFloat(total[key[j]]).toPrecision(3);
                    //alert(total[key[j]]);
                }
                else
                    total[key[j]] +=  parseInt(valor[i][header[key[j]]]);
            }

        }
        return total;
    }


    function showSelectDeliverables(id){
        var idticket = $(id).data('idticket');
        var idproyectos = {{ idproyectos }};
        //var idprocesos = $("li.active").attr("idprocesos");
        var idprocesos = $("#proyecto").val();
        var idEtiquetas = getListEtiquetas();


        $('#txtIdTicket').val(idticket);
        var postData = {
            idproyectos: idproyectos,
            idproceso: idprocesos,
            idticket: idticket,
            idetiquetas: idEtiquetas
        };
        $.ajax({
            type: 'POST',
            url: "{{ path('reporteappenate_getAppenateListDeliverablesByProject') }}",
            data: postData,
            dataType: 'json',
            beforeSend: function (){
                $('#divLoadingModal').show();
                $('#divLoadingModal').html('<strong>Cargando lista de Reportes...</strong>');
                $('#bodyTableEntregables').empty();
                $('#btnSaveSelectDeliverables').prop('disabled', true);
            },
            success: function (r) {
                if (r){
                    var str = "";
                    var ent = r.entregables;
                    var ext = r.extra;
                    for (var i=0; i<ent.length; i++){
                        var check = ent[i]['valor_aplica']=='1' ? 'checked' : '';
                        var disabled = '';

                        str += "<tr>" +
                                "<td class='text-left'" + " style='font-weight: normal'>" + ent[i]['nombre_entregable'] + "</td>" +
                                "<td class='text-center'>" +
                                "<input tipo='" + ent[i]['tipo'] + "' type='checkbox' id='chk_" + idticket + "_" + ent[i]['id_entregable'] + "' " +
                                "name='chkAplicaEntregable[]' " +
                                "value='" + ent[i]['id_entregable'] + "' " +
                                "id_ticket_entregable='" + ent[i]['id_ticket_entregable'] + "' " +
                                "valor_texto='' " +
                                "valor_old='" + ent[i]['valor_aplica'] + "' " + disabled + " " +
                                check + "></td>" +
                                "</tr>";
                    }
                    str += "";
                    $('#bodyTableEntregables').empty().append(str);
                    var strOther = "<tr class='info'><td class='text-left'><strong>Ítem</strong></td><td class='text-center'><strong>No Aplica</strong></td></tr>";
                    var str2 = "";
                    for (var i=0; i<ext.length; i++){
                        var check = ext[i]['valor_aplica']=='1' ? 'checked' : '';
                        var disabled = '';

                        str2 += "<tr>" +
                                "<td class='text-left'" + " style='font-weight: normal'>" + ext[i]['nombre_etiqueta'] + "</td>" +
                                "<td class='text-center'>" +
                                "<input tipo='" + ext[i]['tipo'] + "' type='checkbox' id='chk_" + idticket + "_" + ext[i]['idetiquetas'] + "' " +
                                "name='chkAplicaEntregable[]' " +
                                "value='" + ext[i]['idetiquetas'] + "' " +
                                "id_ticket_entregable='" + ext[i]['idticket'] + "' " +
                                "valor_texto='" + ext[i]['valor'] + "' " +
                                "valor_old='" + ext[i]['valor_aplica'] + "' " + disabled + " " +
                                check + "></td>" +
                                "</tr>";
                    }
                    if (str2!=""){
                        $('#bodyTableEntregables').append(strOther + str2);
                    }

                    $('#divLoadingModal').hide();
                    $('#divLoadingModal').html('');
                    $('#btnSaveSelectDeliverables').prop('disabled', false);
                }else{
                    $('#divLoadingModal').hide();
                    $('#divLoadingModal').html('');
                    $('#btnSaveSelectDeliverables').prop('disabled', false);
                    return false;
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $('#divLoadingModal').hide();
                $('#divLoadingModal').html('');
                $('#bodyTableEntregables').empty();
                $('#btnSaveSelectDeliverables').prop('disabled', false);
            }
        });

        $("#modalSelectDeliverables").modal('show');
    }

    $(".validarMasivo").live('click', function () {
        var max_num_validation = 1000;
        //var idprocesos = $("li.active").attr("idprocesos");
        var idprocesos = $("#proyecto").val();
        //console.log(idprocesos);
        var idTbody = 'tbody_' + idprocesos;
        var elem = '#' + idTbody + ' input[name=chkValidar_' + idprocesos + ']:checked';
        var n = 0;
        console.log('proceso: ' + idprocesos);
        var arr = [];
        $(elem).each(function(){
            n+=1;
        });

        if (n > 0 && n<= max_num_validation){
            $('#txtProcesoBatch').val(idprocesos);
            $('#txtPwdBatch').val('');
            hideControls(false);
            $('#div_batch_valid_initializing').css('display','none');
            $('#sending').css('display','none');
            lockButtons(false);
            $("#modalDetailBatch").modal('show');
        }else if (n<=0){
            alert('No ha seleccionado ítems a validar!!!');
        }else if(n>max_num_validation){
            alert('El Nro. máximo de ítems a seleccionar es ' + max_num_validation + '.');
        }
    });

    $('.validarMasivoATP').live("click", function () {
        var idproyectos = {{ idproyectos }};
        //var idprocesos = $("li.active").attr("idprocesos");
        var idprocesos = $("#proyecto").val();
        $('#txtProyecto').val(idproyectos);
        $('#txtProceso').val(idprocesos);
        $('#msjFileUpload').empty().hide();
        $('#modalfileUpload').modal('show');
    });

    $("#saveBatchValidation").live('click', function (){
        if ($("#txtPwdBatch").val()==""){
            swal("Error!", "Debe ingresar la clave", "error");
            return false;
        }
        var idprocesos = $("#proyecto").val();
        var groupQuery = $("#proyecto").find('option:selected').data('groupquery');
        var headerId = $("#proyecto").find('option:selected').data('headerid');
        console.log(groupQuery,headerId);
        console.log($("#proyecto").find('option:selected'));
        var tagfile = $("#proyecto").find('option:selected').data('tagfile');//$("li.active").attr("tagFile");
        var idd = $("#proyecto").find('option:selected').data('idd');//$("li.active").attr("idd");
        console.log(tagfile,idd);
        var cmbProy = $("#proyecto").select2("data");
        var nombre_proyecto = cmbProy['text'];
        var idregion = id_region_global;
        var idTbody = 'tbody_' + idprocesos;
        var elem = '#' + idTbody + ' input[name=chkValidar_' + idprocesos + ']:checked';
        var pass = $('#txtPwdBatch').val();

       var arr = [];
        $(elem).each(function(){
            var arrDatos = {};
            arrDatos = {
                id_ticket: $(this).attr('idT'),
             };
             arr.push(arrDatos);
        });
        var selected = '';
        $(elem).each(function(){

                selected += $(this).attr('idT')+',';

        });

        if (arr.length > 0){
            $.confirm({
                icon: 'glyphicon glyphicon-question-sign',
                title: 'Validación de Sitios',
                content: arr.length + ' ítems a procesar. ¿Desea validar?',
                confirmButton: 'Si',
                cancelButton: 'No',
                confirmButtonClass: 'btn-success',
                cancelButtonClass: 'btn-default',
                confirm: function () {
                    hideControls(true);
                    $('#div_batch_valid_initializing').css('display','block');
                    showInitializing('loading','Inicializando el proceso de validación...');
                    initProgressBar({'num_registros':0, 'registros_procesados':0, 'percentage':0.00},false);
                    lockButtons(true);
                    $.ajax({
                        type: 'POST',
                        url: "{{ path('reportAmx_saveBatchJobValidationAtp2Nv',{'idproyectos':idproyectos,'idmodule':idmodule}) }}",
                        data: {
                            'etapa': 'initializing',
                            'selected': selected,
                            'arr_data': JSON.stringify(typeof(arr) === 'object' ? Object.values(arr) : arr),
                            'url': '{{ app.request.pathinfo }}',
                            'ruta': "{{ app.request.get('_route') }}",
                            'idproyectos': {{ idproyectos }},
                            'idmodule': {{ idmodule }},
                            'idprocesos' : idprocesos,
                            'idgroupquery': groupQuery,
                            'idheader': headerId,
                            'tagfile':  tagfile,
                            'idd': idd,
                            'nombreproyecto':  nombre_proyecto,
                            //'idregion': idregion,
                            'pwd': pass
                        },
                        dataType: 'json',
                        success: function (response) {
                            switch (response.status){
                                case 'success':
                                    console.log(response);
                                    showInitializing('success','Inicialización de Validación completada!!!');
                                    screenMsgBox("#modalDetailBatch", "Info", "Validación Masiva Completada!!!", "success");
                                    lockButtons(false);
                                    break;
                                case 'error':
                                    console.log(response);
                                    if (response.msj=='Password Incorrecto'){
                                        hideControls(false);
                                        $('#div_batch_valid_initializing').css('display','none');
                                        $('#sending').css('display','none');
                                        lockButtons(false);
                                        swal({title: 'Error', text: response.msj, type: "error"})
                                    }else{
                                        screenMsgBox("#modalDetailBatch", "Error", response.msj, "error");
                                    }
                                    break;
                                case 'warning':
                                    console.log(response);
                                    var region = $("#region").find("option[value='" + response.data.id_region + "']").text();
                                    showInitializing('warning',response.msj +
                                            "Proyecto: " + response.data.nombre_proyecto + " ");
                                    break;
                            }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            screenMsgBox("#modalDetailBatch", "Error", "Errores al Inicializar Validación", "error");
                        }
                    });
                },
                cancel: function () {
                    $.isLoading("hide");
                    // $.alert('Cancel!');
                }
            });
        }else{
            alert('No seleccionó ítems a validar!!!');
            $("#modalDetailBatch").modal('hide');
        }
    });

    function initCmbValExtra(idElement, value){
        if (value=='N/A'){
            $('#' + idElement).empty().append("<option value='N/A'>N/A</option>").val(value);
        }else{
            var lst = "<option value=''>SELECT</option>" +
                      "<option value='SI'>SI</option>" +
                      "<option value='NO'>NO</option>" +
                      "<option value='NO OK'>NO OK</option>";
            $('#' + idElement).empty().append(lst);
            $('#' + idElement).val(value);
        }
    }

    $(".btnValExtra").live('click', function(){
        var idticket = $(this).data('idticket');
        var valueAlarm = $(this).data('val_alarmas');
        var valueBaseline = $(this).data('val_baseline');
        var valueSRS = $(this).data('val_srs');
        var valueB158 = $(this).data('val_b158');
        var commentAlarm = $(this).data('com_alarmas');
        var commentBaseline = $(this).data('com_baseline');
        var commentSRS = $(this).data('com_srs');
        var commentB158 = $(this).data('com_b158');

        $('#valExtra_txtIdTicket').val(idticket);
        //$('#valExtra_chkOldAlarmas').val(valueAlarm);
        $('#valExtra_cmbOldAlarmas').val(valueAlarm);
        //$('#valExtra_chkOldBaseline').val(valueBaseline);
        $('#valExtra_cmbOldBaseline').val(valueBaseline);
        //$('#valExtra_chkOldSRS').val(valueSRS);
        $('#valExtra_cmbOldSRS').val(valueSRS);
        $('#valExtra_cmbOldB158').val(valueB158);
        $('#valExtra_txtOldAlarmas').val(commentAlarm);
        $('#valExtra_txtOldBaseline').val(commentBaseline);
        $('#valExtra_txtOldSRS').val(commentSRS);
        $('#valExtra_txtOldB158').val(commentB158);
        //$('#chkValExtraAlarmas').prop("checked", valueAlarm=='SI').prop("disabled", valueAlarm=='N/A');
        initCmbValExtra('cmbValExtraAlarmas',valueAlarm);
        $('#txtValExtraAlarmas').val(commentAlarm).prop("disabled", valueAlarm=='N/A');

        //$('#chkValExtraBaseline').prop("checked", valueBaseline=='SI').prop("disabled", valueBaseline=='N/A');
        initCmbValExtra('cmbValExtraBaseline',valueBaseline);
        $('#txtValExtraBaseline').val(commentBaseline).prop("disabled", valueBaseline=='N/A');

        //$('#chkValExtraSRS').prop("checked", valueSRS=='SI').prop("disabled", valueSRS=='N/A');
        initCmbValExtra('cmbValExtraSRS',valueSRS);
        $('#txtValExtraSRS').val(commentSRS).prop("disabled", valueSRS=='N/A');

        initCmbValExtra('cmbValExtraB158',valueB158);
        $('#txtValExtraB158').val(commentB158).prop("disabled", valueB158=='N/A');

        //$('#chkValExtraAll').prop("checked", valueAlarm=='SI' && valueBaseline=='SI' && valueSRS=='SI');

        $("#modalValidacionExtra").modal('show');
    });

    $("#btnSaveValidacionExtra").live('click', function (){
        var idproyectos = {{ idproyectos }};
        var idticket = $('#valExtra_txtIdTicket').val();
        //var valueAlarm = $('#chkValExtraAlarmas').is(':disabled') ? 'N/A' : $('#chkValExtraAlarmas').is(':checked') ? 'SI':'NO';
        var valueAlarm = $('#cmbValExtraAlarmas').val();
        //var valueBaseline = $('#chkValExtraBaseline').is(':disabled') ? 'N/A' : $('#chkValExtraBaseline').is(':checked') ? 'SI':'NO';
        var valueBaseline = $('#cmbValExtraBaseline').val();
        //var valueSRS = $('#chkValExtraSRS').is(':disabled') ? 'N/A' : $('#chkValExtraSRS').is(':checked') ? 'SI':'NO';
        var valueSRS = $('#cmbValExtraSRS').val();
        var valueB158 = $('#cmbValExtraB158').val();
        var commentAlarm = $('#txtValExtraAlarmas').val();
        var commentBaseline = $('#txtValExtraBaseline').val();
        var commentSRS = $('#txtValExtraSRS').val();
        var commentB158 = $('#txtValExtraB158').val();
        var arr = [];

        arrDatos = {
            id_etiqueta: $('#cmbValExtraAlarmas').data('etiqueta'),
            checked_old: $('#valExtra_cmbOldAlarmas').val(),
            checked_new: valueAlarm,
            id_etiqueta_comment: $('#txtValExtraAlarmas').data('idvalue'),
            comment_old: $('#valExtra_txtOldAlarmas').val(),
            comment_new: commentAlarm
        };
        arr[0] = arrDatos;
        arrDatos = {
            id_etiqueta: $('#cmbValExtraBaseline').data('etiqueta'),
            checked_old: $('#valExtra_cmbOldBaseline').val(),
            checked_new: valueBaseline,
            id_etiqueta_comment: $('#txtValExtraBaseline').data('idvalue'),
            comment_old: $('#valExtra_txtOldBaseline').val(),
            comment_new: commentBaseline
        };
        arr[1] = arrDatos;
        arrDatos = {
            id_etiqueta: $('#cmbValExtraSRS').data('etiqueta'),
            checked_old: $('#valExtra_cmbOldSRS').val(),
            checked_new: valueSRS,
            id_etiqueta_comment: $('#txtValExtraSRS').data('idvalue'),
            comment_old: $('#valExtra_txtOldSRS').val(),
            comment_new: commentSRS
        };
        arr[2] = arrDatos;

        arrDatos = {
            id_etiqueta: $('#cmbValExtraB158').data('etiqueta'),
            checked_old: $('#valExtra_cmbOldB158').val(),
            checked_new: valueB158,
            id_etiqueta_comment: $('#txtValExtraB158').data('idvalue'),
            comment_old: $('#valExtra_txtOldB158').val(),
            comment_new: commentB158
        };
        arr[3] = arrDatos;

        if (arr[0]['checked_new']=='' || arr[1]['checked_new']=='' || arr[2]['checked_new']=='' || arr[3]['checked_new']==''){
            alert('Seleccione un valor de la lista de opciones!!!');
            return false;
        }else if (arr[0]['checked_old']==arr[0]['checked_new'] && arr[0]['comment_old']==arr[0]['comment_new']
           && arr[1]['checked_old']==arr[1]['checked_new'] && arr[1]['comment_old']==arr[1]['comment_new']
           && arr[2]['checked_old']==arr[2]['checked_new'] && arr[2]['comment_old']==arr[2]['comment_new']
           && arr[3]['checked_old']==arr[3]['checked_new'] && arr[3]['comment_old']==arr[3]['comment_new']){
            alert('No se han detectado cambios!!!');
            return false;
        }else{
            $.confirm({
                icon: 'glyphicon glyphicon-question-sign',
                title: 'Validación Extra',
                content: '¿Desea grabar los cambios?',
                confirmButton: 'Si',
                cancelButton: 'No',
                confirmButtonClass: 'btn-success',
                cancelButtonClass: 'btn-default',
                confirm: function () {
                    $.isLoading({text: "Grabando los cambios..." });
                    $.ajax({
                        type: 'POST',
                        url: "{{path('insertTicketDatosExtraDbtt',{'idproyectos':idproyectos})}}",
                        data: {
                            'arr_data': JSON.stringify(typeof(arr) === 'object' ? Object.values(arr) : arr),
                            'idproyectos': {{ idproyectos }},
                            'idticket' : idticket
                        },
                        dataType: 'json',
                        success: function (response) {
                            switch (response.status){
                                case 'ok':
                                    $.isLoading("hide");
                                    $('#modalValidacionExtra').modal('hide');
                                    swal("Información","Validación Extra Procesada!").then(function(){
                                        refrescarValoresExtra(response.idticket,response.data);
                                    });
                                    break;

                                case 'error':
                                    $.isLoading("hide");
                                    $('#modalValidacionExtra').modal('hide');
                                    swal("Información","Error en Validación Extra!!!");
                                    var groupQuery = $("#proyecto").find('option:selected').data('groupquery');
                                    var headerId = $("#proyecto").find('option:selected').data('headerid');
                                    getReporte(groupQuery, headerId);
                                    break;
                                default:
                                    $.isLoading("hide");
                                    $('#modalValidacionExtra').modal('hide');
                                    swal("Información","Error en Validación Extra!!!");
                                    var groupQuery = $("li.active").attr("gruopquery");
                                    var headerId = $("li.active").attr("headerId");
                                    getReporte(groupQuery, headerId);
                                    break;
                            }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            $.isLoading("hide");
                            $('#modalValidacionExtra').modal('hide');
                            swal("Oops!!!", "Errores encontrados").then(function(){
                                $.isLoading({text: "Refrescando datos..." });
                                //var groupQuery = $("li.active").attr("gruopquery");
                                //var headerId = $("li.active").attr("headerId");
                                var groupQuery = $("#proyecto").find('option:selected').data('groupquery');
                                var headerId = $("#proyecto").find('option:selected').data('headerid');
                                getReporte(groupQuery, headerId);
                            });
                        }
                    });
                },
                cancel: function () {
                    $.isLoading("hide");
                }
            });
        }

    });


    function getListEtiquetas(){
        var etiquetas =$("#proyecto").find('option:selected').data("etiquetas");  //$("li.active").data("etiquetas");
        if (etiquetas == ''){
            return ''
        }else{
            var lst = "";
            for (var i=0; i<etiquetas.length; i++){
                lst += "," + etiquetas[i].idetiquetas;
            }
            return lst.length > 0 ? lst.substring(1) : lst;
        }
    }

    function refrescarValoresExtra(idticket, arr) {
        //var idprocesos = $("li.active").attr("idprocesos");
        var idprocesos = $("#proyecto").val();
        var idDOM = '#btnValExtra_' + idprocesos + '_' + idticket;
        var keyTable = '.table_' + idprocesos;
        $(idDOM).data('val_alarmas', arr[0]['checked_new']);
        $(idDOM).data('com_alarmas', arr[0]['checked_new'] == 'SI' ? arr[0]['comment_new'] : '');
        $(idDOM).data('val_baseline', arr[1]['checked_new']);
        $(idDOM).data('com_baseline', arr[1]['checked_new'] == 'SI' ? arr[1]['comment_new'] : '');
        $(idDOM).data('val_srs', arr[2]['checked_new']);
        $(idDOM).data('com_srs', arr[2]['checked_new'] == 'SI' ? arr[2]['comment_new'] : '');
        $(idDOM).data('val_b158', arr[3]['checked_new']);
        $(idDOM).data('com_b158', arr[3]['checked_new'] == 'SI' ? arr[3]['comment_new'] : "");

        var currentRow = $(keyTable).find('#' + idticket);
        var posAlarm = $(keyTable).find('.ALARMAS_VALIDADAS').index();
        var posBaseline = $(keyTable).find('.BASELINE_VALIDADO').index();
        var posSRS = $(keyTable).find('.SRS_VALIDADO').index();
        var posB158 = $(keyTable).find('.B158_VALIDADO').index();

        currentRow.find("td:eq(" + posAlarm + ")").text(arr[0]['checked_new']);
        currentRow.find("td:eq(" + posBaseline + ")").text(arr[1]['checked_new']);
        currentRow.find("td:eq(" + posSRS + ")").text(arr[2]['checked_new']);
        //currentRow.find("td:eq(" + posB158 + ")").text(arr[3]['checked_new']);
        var resort = "";
        var callback = function(table) { /* do something */ };
        $(".table1").trigger("updateCell",[this, resort, callback]);
    }

    function showInitializing(tipo,msj){
        $('#img_initializing_success').css("display", "none");
        $('#img_initializing_error').css("display", "none");
        $('#img_initializing_warning').css("display", "none");
        $('#img_initializing_loading').css("display", "none");
        $('#img_initializing_' + tipo).css("display", "inline-block");
        $('#lbl_initialize').html(msj);
    }

    function hideControls(flag){
        $('#divPwd').css("display", flag ? "none" : "block");
    }

    function msjInfoValidacion(data){
        var msj = $('#lbl_initialize').html();
        var region = $("#region").find("option[value='" + data.id_region + "']").text();
        msj += "<br><span>Procesando validación para:<br>" +
                "<strong>Proyecto: " + data.nombre_proyecto + " " + region + ". [" +
                data.num_registros + " Sitios]</strong></span>";
        $('#lbl_initialize').html(msj);
    }

    function initProgressBar(data, show){
        if (show){$('#sending').show();}else{$('#sending').hide();}
        $('#done').text(data.registros_procesados);
        $('#total').text(data.num_registros);
        $('#lblCurrentAction').text('Procesando...');
        //reset progress bar
        $('.progress-bar').css('width', data.percentage+'%');
        $('.progress-bar').text(data.percentage+'%');
        $('.progress-bar').attr('data-progress', data.percentage);
    }

    function refreshProgressBar(data){
        $('#lblCurrentAction').text('Procesando...');
        $('.progress-bar').css('width', data.percentage+'%');
        $('.progress-bar').text(data.percentage+'%');
        $('.progress-bar').attr('data-progress', data.percentage);

        $('#done').text(data.registros_procesados);
        $('#total').text(data.num_registros);
    }

    function lockButtons(flag){
        $('#saveBatchValidation').attr('disabled', flag);
        $('#cancelBatchValidation').attr('disabled', flag);
    }

    function screenMsgBox(modal, title, text, icon){
        $.isLoading("hide");
        $(modal).modal('hide');
        swal(title, text, icon).then(function(){
            $.isLoading({text: "Recargando datos..." });
            //var groupQuery = $("li.active").attr("gruopquery");
            //var headerId = $("li.active").attr("headerId");
            var groupQuery = $("#proyecto").find('option:selected').data('groupquery');
            var headerId = $("#proyecto").find('option:selected').data('headerid');
            getReporte(groupQuery, headerId);
        });
    }

    function executeValidation(datos){
        if (datos.items_procesados == 0) {
            initProgressBar(datos);
        }
        $.ajax({
            type: 'POST',
            url: "{{ path('reportAmx_saveBatchJobValidation',{'idproyectos':idproyectos,'idmodule':idmodule}) }}",
            data: {
                'etapa': 'processing',
                'id_validation': datos.id_validation,
                'registros_procesados': datos.registros_procesados,
                'num_registros': datos.num_registros,
                'offset': datos.offset
            },
            dataType: 'json',
            success: function (response) {
                switch (response.status){
                    case 'success':
                        console.log(response);
                        refreshProgressBar(response.data);
                        var d = response.data;
                        if (d.num_registros == d.registros_procesados){
                            console.log('PROCESO COMPLETADO');
                            $('#lblCurrentAction').text('Ejecutando tareas finales...');
                            endingValidation(d);
                        }else{
                            executeValidation(d);
                        }
                        break;
                    case 'error':
                        console.log(response);
                        screenMsgBox("#modalDetailBatch", "Error", response.msj, "error");
                        break;
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                screenMsgBox("#modalDetailBatch", "Error", "Error en el procesamiento de la Validación", "error");
            }
        });
    }

    function endingValidation(datos){
        $.ajax({
            type: 'POST',
            url: "{{ path('reportAmx_saveBatchJobValidation',{'idproyectos':idproyectos,'idmodule':idmodule}) }}",
            data: {
                'etapa': 'ending',
                'id_validation': datos.id_validation,
                'registros_procesados': datos.registros_procesados,
                'num_registros': datos.num_registros,
                'offset': datos.offset
            },
            dataType: 'json',
            success: function (response) {
                switch (response.status){
                    case 'success':
                        console.log(response);
                        //$('#end-process').css('display','block');
                        screenMsgBox("#modalDetailBatch", "Info", "Validación Masiva Completada!!!", "success");
                        lockButtons(false);
                        break;
                    case 'error':
                        console.log(response);
                        screenMsgBox("#modalDetailBatch", "Error", response.msj, "error");
                        lockButtons(false);
                        break;
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                screenMsgBox("#modalDetailBatch", "Error", "Error finalizando la Validación", "error");
                lockButtons(false);
            }
        });
    }



</script>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 col-md-3" id="parametros" >
            <select  class="js-example-basic-single" id="proyecto">
                <option value="">Seleccione Proyecto</option>
                {% for header in headers%}
                    <option value="{{header.idprocesos}}" data-alias="{{ header.alias }}"
                            data-headerid="{{ header.id }}" data-groupquery="{{ header.grupo_query }}"
                            data-idd="{{ header.folder_id }}"
                            data-class="{{ header.class }}" data-tagfile="{{ header.tagFile }}">{{ header.nombre }}</option>
                {% endfor %}
            </select>

        </div>
        <div class="col-lg-3 col-md-3" id="parametros" >
            <div class="form-group">
                <input type="text" class="js-example-basic-single" id="txtSitio" name="txtSitio[]" value="" maxlength="20" placeholder="ID">
            </div>
        </div>
        <div class="col-lg-1 col-md-1" id="parametros" style="width: 3px;">
            <span id="limpiarSelect"><i class="fa fa-trash"></i></span>
        </div>
        <div class="col-lg-3 col-md-3" id="parametros" >
            <select  class="js-example-basic-single" id="asignado">
                <option value="">TODOS</option>
                <option value="{{user}}">ASIGNADOS</option>
            </select>
        </div>
        <div class="col-lg-1 col-md-1" id="parametros" >
            <button class="btn btn-primary" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
        </div>
        {% if identity is not empty %}
            <div class=" pull-right col-lg-pull-2" style="">
                <div class="col-lg-12">
                    <img id="logo" src="{{ asset( identity.pathLogo ) }}"  width="220" height="130">
                </div>
            </div>
        {% endif %}
    </div>
    <div class="row">
        <div class="col-lg-8 col-md-12">
            <h1 class="text-right text-primary"><i class="fa fa-file-text-o"></i> 2do. Nivel de Validación RAN AMX Honduras </h1>
        </div>
    </div>
    <div class="row">
    </div>
    <div class="container-fluid" id="inicio" style="">

        <div class="tab-content" style="margin-top: 20px;">
            <!--<div id="_summary" class="tab-pane fade in active">
                <div class="row">
                    <div class="col-lg-4 col-md-6">
                        <div class="panel panel-red">
                            <div class="panel-heading">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <i class="fa fa-exclamation fa-5x"></i>
                                    </div>
                                    <div class="col-xs-9 text-right">
                                        <div id="rechazado" class="huge">0</div>
                                        <div>Rechazados </div>
                                    </div>
                                </div>
                            </div>
                            <a href="#">
                                <div class="panel-footer">
                                    <span class="pull-left rechazado openModalR">View Details</span>
                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="panel panel-yellow">
                            <div class="panel-heading">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <i class="fa fa-exclamation fa-5x"></i>
                                    </div>
                                    <div class="col-xs-9 text-right">
                                        <div id="porValidar" class="huge">0</div>
                                        <div>Por Validar </div>
                                    </div>
                                </div>
                            </div>
                            <a href="#">
                                <div class="panel-footer">
                                    <span class="pull-left openModalPV" >View Details</span>
                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="panel panel-green">
                            <div class="panel-heading">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <i class="fa fa-check fa-5x"></i>
                                    </div>
                                    <div class="col-xs-9 text-right">
                                        <div id="validado" class="huge">0</div>
                                        <div>Validados</div>
                                    </div>
                                </div>
                            </div>
                            <a href="#">
                                <div class="panel-footer">
                                    <span class="pull-left openModal validado">View Details</span>
                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>-->
                <div class="row">
                    <div id="grafico_Atp2doNv" class="col-md-12" style="width: 100%; min-width: 320px;">
                    </div>
                </div>
                <div class="row reporte1">
                    <a  class="reset"><i class="fa fa-eraser" aria-hidden="true"></i></a>
                    <ul class="nav nav-pills nav-justified">
                        {% for header in headers%}
                            <li idprocesos="{{header.idprocesos}}" headerId= "{{ header.id }}"
                                gruopQuery="{{ header.grupo_query }}" class="{{ header.class }} mainTab"
                                idd="{{ header.folder_id }}"
                                tagfile="{{ header.tagFile }}"><a  data-toggle="tab" href="#_{{ header.alias }}"><strong>{{ header.nombre }}</strong></a></li>
                        {% endfor %}
                    </ul>
                    <div class="tab-content" style="margin-top: 20px;">
                        {% for header in headers%}
                            <div id="_{{ header.alias }}" class="tab-pane fade in {{ header.class }}">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="btn-group pull-right" role="group" aria-label="..." style="width: 300px;" >
                                            {% if is_granted('ROLE_VALIDACION_CLIENTE_RAN_1') %}
                                            <button class="btn btn-success validarMasivo" type="button" aria-label="Validar" title="Validación Masiva">
                                                <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
                                                Validar
                                            </button>
                                            {% if header.idprocesos==115 or header.idprocesos==129 or header.idprocesos==160 %}
                                            <button class="btn btn-primary validarMasivoATP" type="button" aria-label="Validar ATP" title="Validación Masiva ATP">
                                                    <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
                                                    Validar ATPs
                                            </button>
                                            {% endif %}
                                            {% endif %}
                                            <form id="formExport{{ header.alias }}"  action="{{ path('exportReporte',{'idproyectos':idproyectos}) }}" method="POST">
                                                <input type="hidden" class="idReporte" name="idReporte" value="{{ header.id_reporte_export }}">
                                            </form>
                                            <a idForm="formExport{{ header.alias }}"class="export btn btn-default" href="{{ path('exportReporte',{'idproyectos':idproyectos}) }}?idReporte={{ header.id_reporte_export }}" >
                                                <img src={{ asset("images/xls.png")}} width="16px"> XLS</a>
                                        </div>
                                    </div>
                                </div>


                                <div class="row double-scroll" id="{{ header.target_report }}" style="overflow: scroll; height: 70vh;">


                                </div>

                                <div id="pager" class="pager" style="display: none;text-align: center; ">
                                    <form>
                                        <img src="{{asset('tablesorter-master/addons/pager/icons/first.png')}}" class="first"/>
                                        <img src="{{asset('tablesorter-master/addons/pager/icons/prev.png')}}" class="prev"/>

                                        <img src="{{asset('tablesorter-master/addons/pager/icons/next.png')}}" class="next"/>
                                        <img src="{{asset('tablesorter-master/addons/pager/icons/last.png')}}" class="last"/>
                                        <span class="pagedisplay"></span>
                                        <select class="pagesize" title="Select page size">
                                            <option selected="selected" value="1000">1000</option>
                                            <option  value="500">500</option>
                                            <option  value="100">100</option>

                                        </select>
                                    </form>
                                </div>
                            </div>

                        {% endfor %}

                    </div>



                </div>



            </div>

        </div>

    </div>



    <div class="modal fade" id="modalDetail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header  bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title text-center" id="myModalLabel"> Validacion de Sitio</h2>
                </div>
                <div class="modal-body">

                    <form id="formValidacion" action="{{ path('reportAmx_validateSiteAtp2Nv',{'idproyectos':idproyectos,'idmodule':idmodule}) }}" method="POST">

                        <div class="col-lg-8">
                            <label>Clave de acceso</label>
                            <input id="password" name="password" type="password" class="form-control"/>
                            <input id="idestado" name="idestado" type="hidden" value=""/>
                            <input id="idticket" name="idticket" type="hidden" />
                            <input id="idprocesoGeneral" name="idproceso" type="hidden" />
                        </div>


                    </form>


                </div>
                <div class="modal-footer">
                    <button id="savePlan" type="button" class="btn btn-default"><i class="fa fa-lg fa-save text-primary"></i></button>
                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-lg fa-times text-danger"></i></button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalRechazo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form name="rechazo" action="{{ path('reportAmx_rechazarSiteAtp2Nivel',{'idproyectos':idproyectos,'idmodule':idmodule}) }}">
                    <input type="hidden" name="idestado" value="50">
                    <input type="hidden" name="comentarioNv" value="Rechazo 2do. Nivel">
                    <input id="idticketRechazo" type="hidden" name="idticket" >
                    <div class="modal-header  bg-primary">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h2 class="modal-title text-center" id="myModalLabel"> Rechazo de Sitio</h2>
                    </div>
                    <div class="modal-body">
                        <div id="materialesContainer">
                            <div class="row" id="primeraFila" style="margin-top:8px">
                                <div class="col-lg-1" style="display: none">
                                    <label>Descripcion</label>
                                    <select  class="descripcion_repuesto form-control" name="descripcion_repuesto[]">
                                    </select>
                                </div>
                                <div class="col-lg-4">
                                    <label>Entregable</label>
                                    <select required  class="repuesto form-control" name="repuesto[]">
                                        <option></option>
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    <label>Comentario</label>
                                    <textarea required class="comentario form-control" name="comentario[]"></textarea>
                                </div>
                            </div><!-- fila 1 -->
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="saveRechazo" type="submit" class="btn btn-default"><i class="fa fa-lg fa-save text-primary"></i></button>
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-lg fa-times text-danger"></i></button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="detalle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header  bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title text-center" id="myModalLabel"> Validacion de Sitio</h2>
                </div>
                <div class="modal-body">

                </div>


                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-lg fa-times text-danger"></i></button>
                </div>

            </div>


        </div>
    </div>

    <div class="modal fade" id="detalleR" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header  bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title text-center" id="myModalLabel">DETALLE RECHAZO</h2>
                </div>
                <div class="modal-body">

                </div>


                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-lg fa-times text-danger"></i></button>
                </div>

            </div>


        </div>
    </div>

    <div class="modal fade" id="detallePV" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header  bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title text-center" id="myModalLabel">DETALLE POR VALIDAR</h2>
                </div>
                <div class="modal-body">

                </div>


                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-lg fa-times text-danger"></i></button>
                </div>

            </div>


        </div>
    </div>

    <div class="modal fade" id="modalGestion" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form id="formGestion" name="formGestion" action="{{ path('reporteappenate_gestionSite',{'idproyectos':idproyectos,'idmodule':idmodule}) }}" method="POST">

                    <div class="modal-header  bg-primary">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h2 class="modal-title text-center" id="myModalLabel"> Gestion de Sitio</h2>
                    </div>
                    <div class="modal-body">


                        <div class="col-lg-8">
                            <label>Gestion Sitio</label>
                            <select name="gestion" id="gestion" required class="form-control">
                                <option></option>
                                <option value="SI">SI</option>
                                <option value="NO">NO</option>
                                <option value="NA">NA</option>
                            </select>

                            <input id="idestadoGestion" name="entregable_id" type="hidden" value="156"/>
                            <input id="idticketGestion" name="idticket" type="hidden" />
                        </div>




                    </div>
                    <div class="modal-footer">
                        <button id="saveGestion" type="submit" class="btn btn-default"><i class="fa fa-lg fa-save text-primary"></i></button>
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-lg fa-times text-danger"></i></button>


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

        </div>
    </div>

    <div class="modal fade" id="modalRechazoVideo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form name="rechazoVideo" action="{{ path('reportAmx_rechazarSite',{'idproyectos':idproyectos,'idmodule':idmodule}) }}">
                    <input type="hidden" name="idestado" value="50">
                    <input id="idticketRechazoVideo" type="hidden" name="idticket" >
                    <div class="modal-header  bg-primary">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h2 class="modal-title text-center" id="myModalLabel"> Rechazo de Sitio</h2>
                    </div>
                    <div class="modal-body">

                        <div id="materialesContainerVideo">
                            <div class="row" id="primeraFila" style="margin-top:8px">

                                <div class="col-lg-4">
                                    <label>Entregable</label>
                                    <select required  class="repuestoVideo form-control" name="repuesto[]">
                                        <option value="16564">ATP - RSA VIDEO CHECKLIST</option>

                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    <label>Comentario</label>
                                    <textarea required class="comentarioVideo form-control" name="comentario[]"></textarea>
                                </div>
                            </div><!-- fila 1 -->
                        </div>




                    </div>
                    <div class="modal-footer">
                        <button id="saveRechazoVideo" type="submit" class="btn btn-default"><i class="fa fa-lg fa-save text-primary"></i></button>
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-lg fa-times text-danger"></i></button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalSelectDeliverables" tabindex="-1" role="dialog" aria-labelledby="modalSelectDeliverables">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h2 class="modal-title text-center" id="ModalTitleSelectDeliverables">
                        <span class="glyphicon glyphicon-list" aria-hidden="true"></span> Excluir Entregables
                    </h2>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div id="divLoadingModal" class="alert alert-warning" role="alert">

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <form id='frmSelectEntregable'>
                                <input type="hidden" id="txtIdTicket">
                                <table class="table table-condensed table-striped table-responsive" style="width: 100%">
                                    <thead>
                                    <tr class="info">
                                        <th class="text-left">Reporte</th>
                                        <th class="text-center">No Aplica</th>
                                    </tr>
                                    </thead>
                                    <tbody id="bodyTableEntregables">

                                    </tbody>
                                </table>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button id="btnSaveSelectDeliverables" type="button" class="btn btn-default">
                        <i class="fa fa-lg fa-save text-success"></i>
                    </button>
                    <button id="btnCloseSelectDeliverables" type="button" class="btn btn-default" data-dismiss="modal">
                        <i class="fa fa-lg fa-times text-danger"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalDetailBatch" tabindex="-1" role="dialog" aria-labelledby="BatchValidationModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header  bg-primary">
                    <h2 class="modal-title text-center" id="modalDetailBatchTitle"> Validación de Sitios</h2>
                </div>
                <div class="modal-body">
                    <div id="divPwd" class="row">
                        <div class="col-md-2"></div>
                        <div class="col-md-8">
                            <label>Clave de acceso</label>
                            <input id="txtPwdBatch" name="txtPwdBatch" type="password" class="form-control"/>
                            <input id="txtProcesoBatch" name="txtProcesoBatch" type="hidden" />
                        </div>
                        <div class="col-md-2"></div>
                    </div><div class="row"></div>
                    <div id="div_batch_valid_initializing" class="row">
                        <div class="col-lg-12 table-responsive">
                            <table class="table table-condensed">
                                <tr>
                                    <td style="width: 24px" class="text-center">
                                        <span id="img_initializing_loading"><img src="{{ asset('img/loading.gif' ) }}"  width="16" height="16"></span>
                                        <span id="img_initializing_success" class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                                        <span id="img_initializing_error" class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                        <span id="img_initializing_warning" class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                                    </td>
                                    <td class="text-left" style="font-weight: normal">
                                        <span id="lbl_initialize">Inicializando...</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <div id="sending" class="col-lg-12" style="display:none">
                            <h3 id="lblCurrentAction">Procesando...</h3>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success progress-bar-striped active"
                                     role="progressbar"
                                     aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
                                     data-progress="0" style="width: 0%;">
                                    0%
                                </div>
                            </div>
                            <div class="counter-sending text-center">
                                (<span id="done">0</span> ítems procesados / <span id="total">0</span> ítems en total)
                            </div>

                            <div id="end-process" class="end-process text-center" style="display:none;">
                                <div class="alert alert-success">El proceso ha sido completado.</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="saveBatchValidation" type="button" class="btn btn-default"><i class="fa fa-lg fa-save text-primary"></i></button>
                    <button id="cancelBatchValidation" type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-lg fa-times text-danger"></i></button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document" style="width:1250px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title text-center" id="myModalLabel"><strong>{# {'monitorii.detail' | trans } #}<span class="modal_detalle_titulo"></span></strong></h2>
                    <div class="punto-grafica text-center"></div>
                </div>
                <div class="modal-body">
                    <div class="tabla-datos">

                    </div>
                    <div id="datatableModalDetalle" class="col-sm-12" {#style="overflow-x: scroll"#}>
                        <table id="tableModalDetalle" class="display nowrap" width="100%">
                            <tbody id="tbodyModalDetalle">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-claro" data-dismiss="modal">
                        {{'monitorii.close' | trans}}
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </div>
            </div>
        </div>
    </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>
        <script type="text/javascript" src="{{ asset('bootstrap-multiselect/js/bootstrap-multiselect.js') }}"></script>
    {% endblock %}