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

{% block menuTop %}
{% endblock %}



{% block dashboard %}
    <style>
        #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;}
        
        /* bootstrap hack: fix content width inside hidden tabs */
        .tab-content > .tab-pane,
        .pill-content > .pill-pane {
            display: block;     /* undo display:none          */
            height: 0;          /* height:0 is also invisible */ 
            overflow-y: hidden; /* no-overflow                */
        }
        .tab-content > .active,
        .pill-content > .active {
            height: auto;       /* let the content decide it  */
        } /* bootstrap hack end */
        
        table td {
{#            text-transform: uppercase;#}
            font-weight: normal;
            font-size: 12px;
        }
      
        ._panel { height: 110px; overflow-y: auto; }
        
        
        
        
        .ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

.ck-button:hover {
    background:red;
}

.ck-button label {
    float:left;
    width:4.0em;
}

.ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

.ck-button label input {
    position:absolute;
    top:-20px;
}

.ck-button input:checked + span {
    background-color:#911;
    color:#fff;
}
        
    </style>
    
    <div class="container-fluid">

        
        <div class="col-lg-12" style="margin-top: 15px;">
            <ul class="nav nav-pills nav-justified">
                
                {% for page in pages %}
                    
                    <li {% if loop.index == 1 %} class="active" {% endif %}>
                        <a data-toggle="tab" href="#_{{ page.page }}"><strong>{{ page.alias }}</strong></a>
                    </li>
                    
                {% endfor %}
                
                {#<li class="active"><a data-toggle="tab" href="#_dashboard"><strong>Dashboard</strong></a></li>
                <li><a data-toggle="tab" href="#_crews_per_asp"><strong>Crews per ASP</strong></a></li>
                <li><a data-toggle="tab" href="#_summary_view"><strong>Summary View</strong></a></li>
                <li><a data-toggle="tab" href="#_work_permits"><strong>Work Permits</strong></a></li>#}
            </ul>

            <div class="tab-content" style="margin-top: 20px;">
                
                {% for page in pages %}                   
                    
                    <div id="_{{ page.page }}" {% if loop.index == 1 %} class="tab-pane fade in active" {% else %} class="tab-pane fade" {% endif %} >       
                        <div class="col-lg-12">
                            
                            {% for filter in filters %}
                                {% if filter.page_id == page.id %}
                                
                                    <div class="panel-group col-lg-3">
                                        <div class="panel panel-primary">
                                            <div class="panel-heading">{{ filter.filter }}</div>
                                            <div class="panel-body _panel">

                                                {% for option in options %}
                                                    {% if filter.id == option.filter_id %}
                                                        <div class="col-lg-6 ck-button">
                                                            <label>
                                                                <input type="checkbox" name="f_{{ filter.page_id }}_{{ option.filter_id }}[]"><span>{{ option.option }}</span>
                                                            </label>
                                                        </div>
                                                    {% endif %}
                                                {% endfor %}

                                            </div>
                                        </div>
                                    </div>
                                                
                                {% endif %}        
                            {% endfor %}
                            
                        </div> 
                    </div> 
                            
                {% endfor %}
                
                
                
                {#<div id="_dashboard" class="tab-pane fade in active">
                    
                    <div class="col-lg-12">
                        {% for filter in filters %}
                            <div class="panel-group">
                                <div class="panel panel-default">
                                    <div class="panel-heading">{{ filter.filter }}</div>
                                    <div class="panel-body">
                                        {% for option in options %}
                                            {% if filter.id == option.filter_id %}
                                                
                                                <input type="checkbox" name="f_{{ option.id }}_{{ option.filter_id }}"><span>red</span>
                                                
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                        
                </div>
                
                <div id="_crews_per_asp" class="tab-pane fade in active">
                    
                </div>
                
                <div id="_summary_view" class="tab-pane fade in active">
                    
                </div>
                
                <div id="_work_permits" class="tab-pane fade in active">
                    
                </div>#}

            </div>
        </div>
        
        
        
        
        
        
        
        
        
        
        <div class="page-header">
            <form id="filters" class="form-inline">      
                <div class="form-group">
                    <label>Cluster:&nbsp;</label>
                    <select class="form-control" name="f_cluster" id="f_cluster">
                        <option value="">Select...</option>
                        {% for cluster in clusters %}
                            <option value="{{ cluster.cluster }}">{{ cluster.cluster }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group" id="monthFilter" style="display: none;">
                    <label>{{'monitoriii.month' | trans}}:&nbsp;</label>
                    <select class="form-control" name="f_month" id="f_month">
                        <option value="">Select...</option>
                    </select>
                </div> 
                <div class="form-group">
                    <button  class="btn btn-default" type="button" id="clean">{{'ticketDetail.boton.limpiar' | trans}}</button>
                    <button class="btn btn-info" type="button" id="generate">{{'ticketDetail.boton.generar' | trans}}</button>
                </div> 
            </form>            
        </div>          
        
        <div class="col-lg-4 alert alert-warning" id="mBox" style="margin-left: 100px; font-size: 14px; display: none;"></div>
        
        <div class="row" id="_main" style="display: none;">
            <div class="col-lg-11" id="title"></div>
            <div class="col-lg-1">
                <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal" id="vars">Variables</button>
            </div>
            <div class="col-lg-12" style="margin-top: 15px;">
                <ul class="nav nav-pills nav-justified">
                    <li class="active"><a data-toggle="tab" href="#_summary"><strong>Summary</strong></a></li>
                    <li><a data-toggle="tab" href="#_detail"><strong>{{'monitorii.detail' | trans}}</strong></a></li>
                    <li><a data-toggle="tab" href="#_audits"><strong>Audits</strong></a></li>
                </ul>

                <div class="tab-content" style="margin-top: 20px;">
                    <div id="_summary" class="tab-pane fade in active">
                        <div class="col-lg-3" id="_sitesGraph"></div>
                        <div class="col-lg-6" id="_savingsGraph"></div>
                        
                        <div class="col-lg-3" style="margin-top: 30px;">
                            <strong>Highlights</strong>&nbsp;
                            <ul class="commentList" id="_hls"></ul>
                            <hr>
                            <strong>Issues / Risks</strong>&nbsp;
                            <ul class="commentList" id="_iss"></ul>

                            <form action="" class="form-inline" >
                                <div class="form-group">
                                    <input class="form-control" id="_comment" type="text" placeholder="Your comments" />
                                </div>
                                <div class="form-group">
                                    <select class="form-control" name="t_comment" id="t_comment">
                                        <option value="1">Highlight</option>
                                        <option value="2">Issues/Risk</option>
                                    </select>
                                </div>   
                                <div class="form-group">
                                    <button class="btn btn-default" id="sendComment">{{'inbox.add' | trans}}</button>
                                    <i id="cSpin" style=" margin-left: 10px;" class="fa fa-spinner fa-pulse fa-lg fa-fw"></i><span class="sr-only">Loading...</span>
                                </div>
                            </form>
                        </div>
                        
                        <div class="col-lg-12 hrHide" style="margin-top: 20px; margin-bottom: 20px;"><hr class="style14"></div>
                        <div class="col-lg-4" id="_docGraph"></div>
                        <div class="col-lg-8" id="_ltGraph"></div>
                        <div class="col-lg-12 hrHide" style="margin-top: 20px; margin-bottom: 20px;"><hr class="style14"></div>
                    </div>
                    
                    <div id="_detail" class="tab-pane fade">
                        <div class="col-lg-12" id="_sitesColumnGraph"></div>
                        <div class="col-lg-12" id="_sitesColumnTable"></div>
                        <div class="col-lg-12 hrHide" style="margin-top: 20px; "><hr class="style14"></div>
                        <div class="col-lg-12"><h1>Rolling 3-Months</h1></div>
                        <div class="col-lg-12" id="_sites3mTable"></div>
                        <div class="col-lg-12 hrHide" style="margin-top: 20px; margin-bottom: 20px;"><hr class="style14"></div>
                    </div>
                        
                    <div id="_audits" class="tab-pane fade">
                        <div class="col-lg-12" id="_auditsColumnGraph"></div>
                        <div class="col-lg-12" id="_auditsColumnTable"></div>
                        <div class="col-lg-12 hrHide" style="margin-top: 20px; "><hr class="style14"></div>
                        <div class="col-lg-5" id="_auditsLine"></div>
                        <div class="col-lg-5" id="_auditsPie"></div>
                        
                        <div class="col-lg-12 hrHide" style="margin-top: 20px; "><hr class="style14"></div>
                    </div>
                        
                </div>
            </div>
                
        </div>
       
    </div>

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header" >
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h1 class="modal-title text-center">
                <strong>SAVINGS: Set Variables Options</strong>
                <i id="varSpin" style="display: none;" class="fa fa-spinner fa-pulse fa-lg fa-fw"></i> 
                <span class="sr-only">Loading...</span>
            </h1>            
          </div>

            <div class="modal-body">
                <form id="formVars" class="form-horizontal">
                </form>
            </div>
            
            <div id="modalMsg" class="text-center"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>
          </div>
        </div>

      </div>
    </div>
                    
    <div id="loading" style="position: absolute; top: 370px; left: 45%; background: transparent; display: none;"><image src="{{asset('images/spiral.gif')}}"/></div>
    
    <script>
        $(function(){
            
            var $_main              = $('#_main'),
                $f_cluster          = $('#f_cluster'),
                $f_month            = $('#f_month'),
                $title              = $('#title'),
                $loading            = $('#loading'),
                $btnGenerate        = $('#generate'),
                $btnClean           = $('#clean'),
                $btnSend            = $('#sendComment'),
                $_sitesGraph        = $('#_sitesGraph'),
                $_docGraph          = $('#_docGraph'),
                $_ltGraph           = $('#_ltGraph'),
                $_sitesColumnGraph  = $('#_sitesColumnGraph'),
                $_sitesColumnTable  = $('#_sitesColumnTable'),
                $_sites3mTable      = $('#_sites3mTable'),
                $hr                 = $('.hrHide'),
                $mBox               = $('#mBox'),
                $_comment           = $('#_comment'),
                $t_comment          = $('#t_comment'),
                $_auditsTable       = $('#_auditsColumnTable'),
                $_auditsColumnGraph = $('#_auditsColumnGraph'),
                $_auditsLine        = $('#_auditsLine'),
                $_auditsPie         = $('#_auditsPie'),
                months              = ['January', 'February', 'March', 'April', 
                                        'May', 'June', 'July', 'August', 
                                        'September', 'October', 'November', 'December'];
                
            $btnClean.on('click', function(){
            
                $("#f_cluster option[value='']").prop('selected', true);
                $("#f_month option[value='']").prop('selected', true);
                $_sitesGraph.empty();
                $_docGraph.empty();
                $_ltGraph.empty();
                $_sitesColumnGraph.empty();
                $_sitesColumnTable.empty();
                $_sites3mTable.empty();
                $_main.hide();
                $hr.hide();
               
            });

            $f_cluster.change(function(){
                
                if ( $f_cluster.val() ) {
                    
                    var d = new Date();
                    var n = d.getMonth();
                    $('#monthFilter').show();
                    $f_month.empty().append('<option value="">Select...</option>');
                    
                    for ( var i = 0; i <= n; i++ ) {
                        
                        $f_month.append('<option value="' + (parseInt(i)+1) + '">'+ months[i] +'</option>')                  
                    }
                    
                    $("#f_month option[value='" + (n+1) + "']").prop('selected', true);
                    
                }                  
            });
            
            $btnGenerate.on('click', function(){
                
                if ( $f_cluster.val() != '' && $f_month.val() != '' ) {
                
                    $mBox.hide();
                    $_main.show();
                    $loading.show();
                    $title.empty().append('<h1>REMOTE SUPERVISION CENTER: ' + $('#f_cluster option:selected').text() + '</h1')

                    $.getJSON( "{{ path("kpi_rsc_data") }}", { 'cluster': $f_cluster.val(), 'month': $f_month.val() }, function( data ) {                                       
                        
                        {#console.log(data);#}
                        var dataPie, dataColumn, series, category, item, _3mHead, _3mTotal, label,
                            mSites      = [], 
                            mOnTime     = [], 
                            mOutTime    = [], 
                            mPercent    = [],
                            mSrSites    = [],
                            mScSites    = [],
                            mE2eSites   = [],
                            mHc         = [],
                            mPrd        = [],
                            mSavings    = [];                    

                        $_sitesGraph.empty();
                        $_docGraph.empty();
                        $_ltGraph.empty();
                        $_sitesColumnGraph.empty();
                        $_sitesColumnTable.empty();
                        $_sites3mTable.empty();
                        $loading.hide();
                        $hr.css('display', 'inline');

                        if ( data.sitesPie[0].sr ) {

                            dataPie = [ parseFloat(data.sitesPie[0].sc), 
                                        parseFloat(data.sitesPie[0].e2e),
                                        parseFloat(data.sitesPie[0].sr) ];

                            series = [{
                                        name: 'Sites',
                                        colorByPoint: true,
                                        data: [{
                                            name: 'In Field Supervision',
                                            y: dataPie[0]
                                        }, {
                                            name: 'E2E',
                                            y: dataPie[1]
                                        }, {
                                            name: 'Remote Supervision Center',
                                            y: dataPie[2],
                                        }]
                                    }];

                            $_sitesGraph.highcharts(getPieObj('Sales (YTD)', series));

                        } else {
                            $_sitesGraph.empty().append('<div class="col-lg-4 alert alert-warning">No data</div>');
                        }
                        
                        getSavings(data.savings);                                      
                        getComments(data.comments);

                        if ( data.docColumn[0].fullDoc ) {

                            dataColumn  = [  parseInt(data.docColumn[0].fullDoc), 
                                            parseInt(data.docColumn[0].partialDoc),
                                            parseInt(data.docColumn[0].total) ];
                            category    = [ 'Completed Documentation',
                                            'Incompleted Documentation',
                                            'Completed Sites'];
                            series      = [{    name: 'Remote Supervision',
                                                data: dataColumn,
                                            dataLabels: {
                                            enabled: true,
                                            color: '#000000',
                                            format: '{point.y}'
                                        }}];
                            $_docGraph.highcharts(getColumnObj('Documentation (YTD)', category, series, 1));

                        } else {
                            $_docGraph.append('<div class="col-lg-4 alert alert-warning">No data</div>');
                        }

                        if ( data.ltColumn.length > 0 ) {

                            item        = data.ltColumn;
                            category    = ['M1', 'M2', 'M3', 'M4', 'M5', 'M6', 'M7', 'M8', 'M9', 'M10', 'M11', 'M12'];

                            for ( var i in item ) {

                                mSites.push(parseInt(item[i].sites));
                                mOnTime.push(parseInt(item[i].srOnTime));
                                mOutTime.push(parseInt(item[i].srOutTime));
                                mPercent.push(parseFloat(item[i].percent));

                            }

                            series      = [{    name: 'SITES',
                                                data: mSites },
                                            {#{    name: 'ON TIME',
                                                data: mOnTime },
                                            {    name: 'OUT TIME',
                                                data: mOutTime },#}
                                            {
                                                type: 'spline',
                                                name: 'LT',
                                                yAxis: 1,
                                                data: mPercent,
                                                color: '#6E6E6E',
                                                marker: {
                                                    lineWidth: 2,
                                                    lineColor: Highcharts.getOptions().colors[3],
                                                    fillColor: 'white'
                                                },
                                                tooltip: {
                                                    pointFormat: '<table style="width: 100%;"><tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                            '<td style="padding:0"><b>&nbsp;{point.y}%</b></td></tr></table>'
                                                }
                                            }
                                        ];

                            $_ltGraph.highcharts(getColumnObj('% Delivery Precision', category, series, 2));

                        } else {
                            $_ltGraph.append('<div class="col-lg-4 alert alert-warning">No data</div>');
                        }

                        if ( data.sitesCol.length > 0 ) {

                            mSites      = [],
                            mSrSites    = [],
                            mScSites    = [],
                            mE2eSites   = [],
                            item        = data.sitesCol,
                            category    = ['January','February','March','April',
                                            'May','June','July','August','September',
                                            'October','November','December'];

                            for ( var i in item ) {

                                mSites.push(parseFloat(item[i].sites));
                                mSrSites.push(parseFloat(item[i].srSites));
                                mScSites.push(parseFloat(item[i].scSites));
                                mE2eSites.push(parseFloat(item[i].e2eSites));
                                mHc.push(parseFloat(item[i].hc));
                                mPrd.push(parseInt(item[i].prd));

                            }

                            series      = [{    name: 'Remote Supervision',
                                                data: mSrSites,
                                                color: '#60A958'
                                                },
                                            {   name: 'In field Supervision',
                                                data: mScSites,
                                                color: '#262625'
                                                },
                                            {   name: 'E2E',
                                                data: mE2eSites,
                                                color: '#BAD9B7'
                                                },
                                            {   name: 'Installations',
                                                type: 'area',
                                                data: mSites,
                                                color: '#6B6B6B',
                                                fillOpacity: 0.1 },
                                            {   name: 'HC',
                                                type: 'spline',
                                                color: 'orange',
                                                data: mHc,
                                                yAxis: 1},
                                            {   name: 'Productivity',
                                                type: 'spline',
                                                color: '#8A4B08',
                                                data: mPrd,
                                                yAxis: 1}
                                        ];

                            $_sitesColumnGraph.highcharts(getColumnObj('Installation vs Supervision', category, series, 3));

                        } else {
                            $_sitesColumnGraph.append('<div class="col-lg-4 alert alert-warning">No data</div>');
                        }

                        if ( data.sitesTable[0].January === null && typeof data.sitesTable[0].January === "object" ) {
                            //$_sitesColumnTable.append('<div class="alert alert-warning">Sin datos</div>');
                            $_sitesColumnTable.empty();
                        } else {
                            $_sitesColumnTable.append(createTable(data.sitesTable));
                        }

                        if ( data.sites3m.length > 0 ) {

                            _3mHead = '<tr class="bg-primary"><th class="text-center" colspan="2"></th><th class="text-center" colspan="5">' +
                                        data._3Months.M3 + '</th><th class="text-center" colspan="5">' +
                                        data._3Months.M2 + '</th><th class="text-center" colspan="5">' +
                                        data._3Months.M1 + '</th></tr>';
                            _3mTotal = getTotal(data.sites3m, [2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]);
                            
                            $_sites3mTable.append(createTable(data.sites3m, _3mTotal, 'GRAND TOTAL'));

                            for ( var i = 2; i <= 16; i++ ) {

                                var $selector = $('#_sites3mTable th:eq(' + i + ')');
                                $selector.text($selector.text().slice(0, -2));

                            }

                            $('#_sites3mTable table > thead > tr:first').before(_3mHead);
                            $('#_sites3mTable table > tbody > tr:last > td:eq(0)').attr('colspan', 2);
                            $('#_sites3mTable table > tbody > tr:last td').css("font-weight", "bold");
                            $('#_sites3mTable table > tbody > tr:last td:eq(5)').empty();
                            $('#_sites3mTable table > tbody > tr:last td:eq(10)').empty();
                            $('#_sites3mTable table > tbody > tr:last td:eq(15)').empty();

                        } else {
                            $_sites3mTable.append('<div class="col-lg-4 alert alert-warning">No data</div>');
                        }
                        
                        getVars(data.vars);                       

                        if ( data.auditsTable[0].January === null && typeof data.auditsTable[0].January === "object" ) {
                            $_auditsTable.empty();
                        } else {
                            $_auditsTable.empty().append(createTable(data.auditsTable));
                        }
                        
                        if ( data.auditsCol.length > 0 ) {
                            
                            var n1, n2, n3, n4, n5;
                            item        = data.auditsCol,
                            mSites      = [],
                            mSrSites    = [],
                            mScSites    = [],
                            mE2eSites   = [],
                            mHc         = [],
                            mPrd        = [];
                            
                            for (var i in item) {
                                
                                n1 = parseInt(item[i].sites);
                                n2 = parseInt(item[i].audits_rsc);
                                n3 = parseInt(item[i].audits_fs);
                                n4 = parseFloat(item[i].auditors);
                                n5 = parseInt(item[i].productivity);
                                n1 = isNaN(n1) ? null : n1;
                                n2 = isNaN(n2) ? null : n2;
                                n3 = isNaN(n3) ? null : n3;
                                n4 = isNaN(n4) ? null : n4;
                                n5 = isNaN(n5) ? null : n5;
                                
                                mSites.push(n1);
                                mSrSites.push(n2);
                                mScSites.push(n3);
                                mHc.push(n4);
                                mPrd.push(n5);
                                
                            }
                            
                            series      = [{    name: 'Remote Audits',
                                                data: mSrSites,
                                                color: '#60A958'
                                                },
                                            {   name: 'In field Quality Audits',
                                                data: mScSites,
                                                color: '#262625'
                                                },
                                            {   name: '20% Installations',
                                                type: 'area',
                                                data: mSites,
                                                color: '#6B6B6B',
                                                fillOpacity: 0.1 },
                                            {   name: 'RAC HC',
                                                type: 'spline',
                                                color: 'orange',
                                                data: mHc,
                                                yAxis: 1},
                                            {   name: 'Productivity',
                                                type: 'spline',
                                                color: '#ccccb3',
                                                data: mPrd,
                                                yAxis: 1}
                                        ];
                            
                            $_auditsColumnGraph.highcharts(getColumnObj('Installation vs Quality', category, series, 3));
                            
                        }
                        
                        if ( data.auditsLine.length > 0 ) {
                        
                            item    = data.auditsLine,
                            mSites  = [],
                            mPrd    = [];
                            
                            for ( var i in item ) {
                                
                                mSites.push(parseFloat(item[i].qi));
                                mPrd.push(0.49);

                            }

                            series  = [{
                                        name: 'QI',
                                        data: mSites,
                                        color: '#90ed7d',
                                    },{#{
                                        name: 'Target',
                                        data: mPrd
                                    }#}];
                                    
                            $_auditsLine.highcharts(getLineObj(series));
                        
                        }
                        
                        if ( data.auditsPie.length > 0 ) {
                            
                            item        = data.auditsPie,
                            mSrSites    = [],
                            mScSites    = [];

                            series = [{
                                        name: 'Audits',
                                        colorByPoint: true,
                                        data: [{
                                            name: 'In Field Audit',
                                            y: parseFloat(item[0].fs_percent),
                                            color: '#40ff00',
                                        }, {
                                            name: 'Remote Audit',
                                            y: parseFloat(item[0].rs_percent),
                                            color: '#1ac6ff'
                                        }]
                                    }];
                            
                            $_auditsPie.empty().highcharts(getPieObj('Delivery Mix (YTD)', series));
                            
                        }

                    });
            
                } else {
                    $mBox.empty().append('<strong>Select filtering options.</strong>').fadeIn(500)
                }
            
            });
            
            $btnSend.on('click', function(){
                if ( $_comment.val() ) {
                    $('#cSpin').show();
                    $.getJSON( "{{ path("kpi_rsc_comment") }}", 
                                { 'action': 1, 'comment': $_comment.val(), 'type': $t_comment.val(),
                                    'month': $f_month.val(), 'cluster': $f_cluster.val() }, 
                                function( data ) {
                        getComments(data.comments);
                        $_comment.val('');
                    });
                }
                return false;
            });
            
                    
        });
        
        function getPieObj(title, series){
        
            var obj = { chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false,
                            type: 'pie'
                        },
                        title: {
                            text: title
                        },
                        colors: [
                        '#FFBF00', '#00BFFF', '#3ADF00'// '#610B0B', '#81F781'
                        ],
                        tooltip: {
                            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    formatter: function() {
                                        return '<strong>' + this.percentage.toFixed(2) + '%</strong>';
                                    },
                                    distance: -30,
                                },
                                    showInLegend: true
                            },
                        },
                        series: series
                    };
            return obj;
        }
        
        function getComments(data){
            
            var listC1, listC2,
                $_hls = $('#_hls'),
                $_iss = $('#_iss');
            
            $_hls.empty();
            $_iss.empty();
            
            if ( data[0].length > 0 ) {

                listC1 = '';
                for ( var i in data[0] ) {

                    listC1 += '<li id="' + data[0][i].id + 
                            '"><span class="glyphicon glyphicon-remove pull-right delete" style="cursor:pointer;"></span>' + 
                            '<div class="commentText"><p>{#<i class="fa fa-caret-right" aria-hidden="true">#}</i> ' + 
                            data[0][i].comment + '</p><span class="date sub-text">' + data[0][i].date_comment + 
                                '</span></div></li>';     
                }
            } else {
                listC1 = '<li><div class="commentText"><span class="date sub-text">No Comments</span></div></li>'
            }
            
            if ( data[1].length > 0 ) {

                listC2 = '';
                for ( var i in data[1] ) {

                    listC2 += '<li id="' + data[1][i].id + 
                            '"><span class="glyphicon glyphicon-remove pull-right delete" style="cursor:pointer;"></span>' + 
                            '<div class="commentText"><p>{#<i class="fa fa-caret-right" aria-hidden="true">#}</i> ' + 
                            data[1][i].comment + '</p><span class="date sub-text">' + data[1][i].date_comment + 
                                '</span></div></li>';     
                }
            } else {
                listC2 = '<li><div class="commentText"><span class="date sub-text">No Comments</span></div></li>'
            }
            
            $_hls.append(listC1);
            $_iss.append(listC2);
            
            $('#cSpin').hide();

            $('.delete').on('click', function(){
                $('#cSpin').show();
                $.getJSON( "{{ path("kpi_rsc_comment") }}", 
                            { 'cluster': $('#f_cluster').val(), 'id': $(this).parent().attr('id'),
                                'month': $('#f_month').val(), 'action': 2}, function( data ) {
                    getComments(data.comments);
                });

            });
        }
        
        function getSavings(data){
            
            var series, item, 
                mSavings        = [],
                category        = [],
                $savingsGraph   = $('#_savingsGraph');
            
            if ( data.length > 0 && data[0].saving ) {

                item        = data;
                category    = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

                for ( var i in item ) {

                    mSavings.push(parseFloat(item[i].saving));

                }

                series      = [{    name: 'Saving',
                                    data: mSavings,
                                    dataLabels: {
                                    enabled: true,
                                    color: '#000000',
                                    format: '{point.y}' }
                                }];

                $savingsGraph.highcharts(getColumnObj('Savings (YTD)', category, series, 4));

            } else {
                $savingsGraph.empty().append('<div class="col-lg-4 alert alert-warning">No data</div>');
            }
        }
        
        function getVars(data){

            if ( data.length > 0 ) {
                
                var $formVars   = $('#formVars'),
                    $f_cluster  = $('#f_cluster'),
                    $f_month    = $('#f_month'),
                    $varSpin    = $('#varSpin'),
                    inputs      = [],
                    label;

                $formVars.empty();

                for ( var i in data ) {

                    label = data[i].cluster ? 
                            data[i].cluster + " - " + data[i].variable 
                            : data[i].variable;

                    $formVars.append('<div class="form-group"><label class="control-label col-sm-offset-2 col-sm-4">' + label + '</label>' +
                    '<div class="col-sm-3"><input type="number" class="form-control _inp" id="_var' + data[i].id + 
                    '" value="' + data[i].value + '" data-input=\'{"id": "' + data[i].id + '", "var": "' + data[i].variable + '"}\'></div></div>');
                    inputs.push('#_var' + data[i].id);
                }

                $formVars.append('<div class="form-group"><button id="changeVars" type="button" class="btn btn-success col-sm-offset-5">Change</button></div>');

                $('#changeVars').on('click', function(){
                    
                    $varSpin.show();
                    var data    = [],
                        objAux  = {};                   

                    for ( var i in inputs ) {
                        
                        var $inp = $(inputs[i]);
                        objAux = $.parseJSON($inp.attr('data-input'));
                        objAux.value = $inp.val();
                        data.push(objAux);
                        
                    }                              

                    $.post( "{{ path("kpi_rsc_vars") }}", 
                            { 'vars': data, 'month': $f_month.val(), 
                                'cluster': $f_cluster.val() })
                        .done(function( data ) {
                            getVars(data.vars);
                            getSavings(data.savings);
                            $varSpin.hide();
                    });

                });
            }
        }
        
        function getColumnObj(name, categories, series, type){
            
            var yAxis, yAxis1, yAxis2, yAxis3, yAxis4;
            
            yAxis1  = {
                        min: 0,
                        title: {
                            text: 'Sites'
                        },
                    };
                    
            yAxis2  = [{ // Primary yAxis
                        min: 0,
                        labels: {
                            style: {
                                color: Highcharts.getOptions().colors[1]
                            }
                        },
                        title: {
                            text: 'Sites',
                            style: {
                                color: Highcharts.getOptions().colors[1]
                            }
                        }
                    }, { // Secondary yAxis
                        min: 0, max: 100, tickInterval: 20,
                        title: {
                            text: '% LT',
                            style: {
                                color: Highcharts.getOptions().colors[0]
                            }
                        },
                        labels: {
                            format: '{value}%',
                            style: {
                                color: Highcharts.getOptions().colors[0]
                            }
                        },
                        opposite: true
                    }];
                
            yAxis3  = [{ // Primary yAxis
                        min: 0,
                        labels: {
                            style: {
                                color: Highcharts.getOptions().colors[1]
                            }
                        },
                        title: {
                            text: 'Equivalent Sites',
                            style: {
                                color: Highcharts.getOptions().colors[1]
                            }
                        }
                    }, { // Secondary yAxis
                        min: 0, {#tickInterval: 5,#}
                        title: {
                            text: 'FTE Assigned',
                            style: {
                                color: Highcharts.getOptions().colors[0]
                            }
                        },
                        labels: {
                            format: '{value}',
                            style: {
                                color: Highcharts.getOptions().colors[0]
                            }
                        },
                        opposite: true
                    }];
            
            yAxis4  = {
                        min: 0,
                        title: {
                            text: ''
                        },
                        labels: {
                            format: '{value:.3f}'
                        }
                    };

            switch (type) {
                case 2:
                    yAxis = yAxis2;
                    break;
                case 3:
                    yAxis = yAxis3;
                    break;
                case 4:
                    yAxis = yAxis4;
                    break;
                default:
                    yAxis = yAxis1;
                    break;
            }
            
            var obj = {
                chart: {
                    type: 'column'
                },
                title: {
                    text: name
                },
                colors: [ '#3ADF00', '#FFBF00', '#00BFFF', '#848484', '#F56200'],
                xAxis: {
                    categories: categories,
                    crosshair: true
                },
                yAxis: yAxis,
                tooltip: {
                    headerFormat: '<span style="font-size:10px"></span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                        '<td style="padding:0"><b>{point.y}</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    },
                },
                series: series
            };
            
            return obj;
        }
        
        function getLineObj(series) {
            
            var obj;
            
            obj = {
                    chart: {
                      height: null,  
                    },
                    title: {
                        text: 'Quality Index (Only Remote Audits)',
                        x: -20 //center
                    },
                    xAxis: {
                        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    },
                    yAxis: {
                        title: {
                            text: 'QI'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        },{
                            value: 0.49,
                            color: '#33ccff',
                            dashStyle: 'ShortDot',
                            width:5,
                            zIndex:4,
                            label: { 
                                text:'TARGET: 0.49',
                            }
                        }],
                        min: 0,
                        max: 1,
                        {#tickInterval: 0.1,#}
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },
                    series: series
                };

            return obj;
            
        }
        
        
        
        
        function createTable(monitor, total, nombreColTotal) {
            var header = Object.keys(monitor[0]),
                table = '<table  class="table table-bordered table-hover table-striped table-responsive table-condensed"><thead><tr class="bg-primary">';

            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 class="cursor">';
                for (var j = 0; j < header.length; j++) {

                    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 getTotal(valor, key) {
            var total = [],
                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;
                    }

                    total[key[j]] += parseInt(valor[i][header[key[j]]]);
                }
            }
            return total;
        }
        
    </script>
        
{% endblock %}