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

{% block menuTop %}{% endblock %}


{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('datatables/css/dataTables.bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/buttons.bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/select.bootstrap.min.css')}}">

    <style>

        .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-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);}
        }
        table {
            font-size: 11px;
            border: none !important;
        }
        table tr {
            font-weight: normal;
        }
    </style>
{% endblock %}

{% block dashboard %}

    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-4">
                <ul class="list-inline">
                    <li>
                        <h1 class="text-muted"><i class="fa fa-globe text-primary"></i>  Región: {{proyecto[0].region}}</h1>
                    </li>
                    <li>
                        <h1 class="text-muted"><i class="fa fa-cloud text-primary"></i>  Cluster: {{proyecto[0].cluster}}</h1>
                    </li>
                </ul>
            </div>
        </div>
    
        <div class="row">
            <div class="col-lg-4">
                <select class="form-control" id="supervisores">
                    <option value="">{{ 'ticketDetail.selectsupervisor' | trans }}</option>
                    {% for supervisor in supervisores %}
                        <option value="{{ supervisor.idUser }}">{{ supervisor.nombre }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="col-lg-2">
                <button class="btn btn-default" id="save">{{ 'ticketDetail.assign' | trans | upper }}</button>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-lg-5" id="supervisoresAsig"></div>
            <div class="col-lg-7" id="ticketsSemana">
                <table id="main_table" class="table table-condensed table-bordered nowrap" width="100%">
                    <thead class="bg-primary">
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th> 
                    </thead>     
                    <tbody></tbody>        
                </table> 
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script src="{{ asset('datatables/moment.min.js') }}"></script>
    <script src="{{ asset('datatables/js/datatables.min.js') }}"></script>
    <script src="{{ asset('datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.bootstrap.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.colVis.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.select.min.js') }}"></script>
    <script src="{{ asset('datatables/js/jszip.min.js') }}"></script>
    <script src="{{ asset('datatables/js/datetime-moment.js') }}"></script>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>
            
        var translation = {
            'SITIO ID' : '{{ 'CODIGO' | trans }}',
            'SITIO' : '{{ 'SITIO' | trans }}',
            'REGION' : '{{ 'Region' | trans }}',
            'FECHA INICIO PLAN' : '{{ 'monitor.plandate' | trans }}',
            'FECHA INICIO REAL' : '{{ 'FECHA INICIO' | trans }}',
            'RSC' : '{{ 'CSR' | trans }}',
            'EN PROCESO' : '{{ 'EN PROCESO' | trans }}',
            'SUSPENDIDOS' : '{{ 'SUSPENDIDOS' | trans }}',
            'ASIGNADOS' : '{{ 'ticketDetail.assignment' | trans }}',
            'ESTADO SH' : '{{ 'ESTADO SH' | trans }}',
            'ASIGNADO PWM' : '{{ 'ASIGNADO PWM' | trans }}',
            'ASIGNADO SH' : '{{ 'ASIGNADO SH' | trans }}',
        };

        $(function() {
                
            var asignacion = [],
                supevisores,
                $supervisores = $("#supervisores");

            getData();

            $supervisores.change(function() {

                $(this).parent().removeClass('has-error');
                $('#supervisoresAsig').find('tr').removeClass('success');
                $("#" + $(this).val()).addClass('success');
            });

            $("#save").click(function() {
                    
                if (asignacion.length == 0) return false;

                var aux = [],
                    t = $(this).prop('disabled', true),
                    header = Object.keys(asignacion);

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

                    aux.push(asignacion[header[i]]);
                }
                
                $.post(
                    "{{ path('asignacionTicketPwm') }}", 
                    { tickets: JSON.stringify(aux) }, 
                    function(data) {
                            
                        asignacion = [];
                        getData();
                        t.prop('disabled', false);
                        $supervisores.val('');
                    }, 
                'json');
            });

            function getData() {
                
                $.isLoading({text:"Loading"});

                $.getJSON(
                    '{{path('getAsignacionGen', {'idproyectos':idproyectos, 'idmodule':idmodule})}}',
                    function (data) {

                        supevisores = data.supervisores;
                        
                        var sites = data.sites,
                            supevisoresTable = createTable(supevisores,['ID'], false),
                            $table = $('#main_table'),
                            checkEvent = function() {

                                var t    = $(this),
                                    r    = table.row(t.closest('tr')),
                                    tckt = r.data().ticket;
                                
                                if ($supervisores.val() == '') {

                                    $supervisores.focus().parent().addClass('has-error');
                                    t.prop('checked', false);
                                    return false;                                                                        
                                }

                                if ( t.is(':checked') ) {
                                    
                                    r.select();
                                    handleSelection(tckt, 'select');    
                                } else { 

                                    if ($supervisores.val() == getUserByTicket(tckt)) {

                                        r.deselect();
                                        handleSelection(tckt, 'deselect');
                                    } else {

                                        t.prop('checked', true);
                                    }
                                }
                            };
                  
                        $("#supervisoresAsig").empty().append(translate(translation,supevisoresTable));
                        
                        if (sites.length == 0) return false;

                        if (typeof table === 'undefined') {

                            table = $table.DataTable({
                                data: sites,
                                pageLength: 30,
                                columns: [
                                    { data: null, orderable: false, defaultContent: '<div class="checkbox"><input class="col-check" type="checkbox"></div>' },
                                    { data: 'FASE', title: 'FASE' },
                                    { data: 'CODIGO', title: 'CODIGO' },
                                    { data: 'SITIO', title: 'SITIO' },
                                    { data: 'PROYECTO', title: 'PROYECTO' },
                                    { data: 'ESTATUS', title: 'ESTATUS' },                           
                                    { data: 'ticket', visible: false }
                                    
                                ],
                                lengthMenu: [ [ 20, 50, 100, 250, 500, -1 ], [ 20, 50, 100, 250, 500, 'Todos' ] ]
                            });

                            $table.find('tbody').on('click', '.col-check', checkEvent);
                        } else {

                            table.clear();
                            table.rows.add(sites).draw();
                            $table.find('tbody').on('click', '.col-check', checkEvent);
                        }
                        
                        $.isLoading("hide");
                    }
                );
            }

            function getUserByTicket(ticket) {

                var header = Object.keys(asignacion);

                for (var i = 0; i < header.length; i++) {
                    
                    var tckts = asignacion[header[i]].tickets;
                    
                    for (var j = 0; j < tckts.length; j++) {
                      
                        if (tckts[j] == ticket) {

                            return header[i]; 
                        }
                    }
                }

                return false;
            }

            function handleSelection(ticket, event) {

                var user = $supervisores.val(),
                    key  = 0;

                if (user == '') return false;

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

                    if (supevisores[i]['ID'] == user) {

                        key = i;
                        break;
                    }
                }

                if (event == 'select') {

                    if (typeof asignacion[user] === "undefined") {

                        asignacion[user] = {'ID': user, tickets:[ticket]};
                    } else {

                        asignacion[user]['tickets'].push(ticket);
                    }
                    
                    supevisores[key]["ASIGNADOS"] = parseInt(supevisores[key]["ASIGNADOS"]) + 1;
                } else {

                    var header = Object.keys(asignacion),
                        idxDelete = -1;

                    for (var i = 0; i < header.length; i++) {
                            
                        for (var j = 0; j < asignacion[header[i]]['tickets'].length; j++) {

                            if (asignacion[header[i]]['tickets'][j] == ticket && getUserByTicket(ticket) == user) {
                                
                                asignacion[header[i]]['tickets'].splice(j, 1);
                                supevisores[key]["ASIGNADOS"] = parseInt(supevisores[key]["ASIGNADOS"]) - 1;
                            }
                        }

                        if (asignacion[header[i]]['tickets'].length == 0) {
                            
                            idxDelete = asignacion.indexOf(asignacion[header[i]]);
                        }
                    }

                    if (idxDelete > -1) asignacion.splice(idxDelete, 1);
                }
                
                supevisoresTable = createTable(supevisores,['ID'],false);
                $("#supervisoresAsig").empty().append(translate(translation,supevisoresTable));
                $("#" + user).addClass('success');
            }    
        });

        function createTable(monitor, hide, check, total, nombreColTotal) {

            if (typeof monitor[0] === 'undefined') return false;

            var header = Object.keys(monitor[0]),
                table = '<table class="table table-bordered table-condensed table-responsive"><thead><tr class="bg-primary">';

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

                if (hide.indexOf(header[j]) === -1) {
                    table += "<th class='text-center'>" + header[j] + "</th>"
                }

                if (check && j ==0) {
                    table += "<th class='text-center'>" + " " + "</th>"
                }
            }

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

            for (var i = 0; i < monitor.length; i++) {
                
                table += "<tr " + "id=" + monitor[i][header[0]] + ">";

                for (var j = 0; j < header.length; j++) {
                    if ( hide.indexOf(header[j]) === -1) {
                        table += "<td>" + monitor[i][header[j]] + "</td>";
                    }

                    if (check && j== 0){

                        table += "<td>"+ "<input type='checkbox' class='checkup' user='" + monitor[i][header[1]] + "'ticket='" + monitor[i][header[0]] + "'/>"+"</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 translate(translation, table) {
        
            var translationHeader = Object.keys(translation);
        
            for(var i = 0; i< translationHeader.length;i++){

                table = table.replace(translationHeader[i],translation[translationHeader[i]]);
            }

            return table;
        }

    </script>
{% endblock %}