{% extends "base.html.twig"%}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/templateOneBlock.css')}}">
    <link rel="stylesheet" href="{{ asset('css/calendario.css')}}">
{% endblock %}
{% block titulo %} - <a href="{{path('projectInitial',{ 'idproyectos':idproyectos})}}">{{proyectos.proyecto}}</a> - <a href="{{path(modulo.path,{ 'idproyectos':idproyectos,'idmodule':idmodule})}}">{{modulo.modulo}}</a>{% endblock %}
{% block menuTop %}
    <div class="col-lg-6 col-xs-12" >
        <div class="container" id="menuTop">

            {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}

        </div>
    </div>
{%endblock %}


{%block dashboard %}
    <style>
        .test + .tooltip > .tooltip-inner {
            background-color: #73AD21;
            color: #FFFFFF;
            border: 1px solid green;
            padding: 15px;
            font-size: 20px;
        }
    </style>
    <script>
        var clic = false;
        var procesos = "<option></option>", usuarios = "<option></option>";
        var proyecto, usuario, fecha, idDia, numMes, semana, dept = "", tiquetes = '<option></option>';
        var Y, M, D, h, m = 0;
        var idUser = new String();

        function cargar(semana){
            $('#cargar').css('display', 'block');
            proyecto = {{ idproyectos }};
            dept = $('#selectArea').val();
            semana = $('#selectSemana').val();
            $.ajax({
                type: "POST",
                async: true,
                url: "{{path('calendarioNav',{'idproyectos':idproyectos, 'idmodule':idmodule})}}",
                data: { year: {{ "now" |date("Y")}}, semana: semana, area: $('#selectArea').val() }
            }).done(function(json) {
                $('#menu-content').empty();
                $('#menu-content_dias').empty();

                //Se crea un objeto que reciba el resultado del ajax
                var obj = jQuery.parseJSON(json);
                var programacion = obj.usuarios;
                var diasS = obj.diasS;
                var primerDia = obj.primerDia;
                var ultimoDia = obj.ultimoDia;
                var personas = '';
                var diasPersonas = '';
                var mes = new String();
                mes = obj.mes;

                numMes = mes.substr(mes.indexOf('_') + 1, mes.length);
                usuarios = '';

                for(i=0; i<programacion.length; i++){
                    usuarios = usuarios + "<option value='" + programacion[i]['idUser'] + "'>" + programacion[i]['nombre'] + "</option>";
                }

                $('#lblSemana').empty();
                $('#lblSemana').append('DIAS SEMANA ' + mes.substr(0, mes.indexOf('_')));

                primerDia = parseFloat(primerDia);
                ultimoDia = parseFloat(ultimoDia);

                for(i=0; i<programacion.length; i++){
                    var asignados = 0;
                    var vencidos = 0;

                    asignados = programacion[i]['asignados']
                    vencidos = programacion[i]['vencidos'];

                    if(asignados==null){
                        asignados = 0;
                    }
                    if(vencidos==null){
                        vencidos = 0;
                    }

                    personas = personas + '<li><table style="width: 100%"><tr id=""><td>' + programacion[i]['nombre'] + '</td><td id=' + programacion[i]['idUser'] + '_a" style="width: 5%; text-align: center;" title="Tiquetes sin programar" onclick="verAsignados(id)" >' + asignados + '</td><td id=' + programacion[i]['idUser'] + '_v" style="width: 5%; text-align: center;" title="Tiquetes vencidos" onclick="verVencidos(id)">' + vencidos + '</td></tr></table></li>';
                    var diasSemana = '';

                    for(j=0; j<7; j++){
                        diasSemana = diasSemana + "<td id='" + programacion[i]['idUser'] + "_" + j + "' style='border-right: 1px solid #ddd; width: 14%; text-align: center; height: 40px; position: relative;' onclick='asignarTicket(" + '"' + programacion[i]['idUser'] + "_" + j + '"' + ")'></td>";
                    }

                    diasSemana = '<li><table style="width: 100%"><tr>' + diasSemana + '</tr></table></li>';
                    diasPersonas = diasPersonas + diasSemana;
                }

                $('#menu-content').append(personas);
                $('#menu-content_dias').append(diasPersonas);

                var hoy = new Date();

                for(i=0; i<diasS.length; i++){
                    var festivo = '';
                    if(i==0)
                        festivo = 'festivos';
                    if((primerDia + i) > ultimoDia){
                        primerDia = 1 - i;
                    }

                    if(hoy.getDate()==(primerDia + i)){
                        festivo = festivo + ' hoy';
                    }

                    $('#' + i).text((diasS[i] + " " + (primerDia + i)));
                    $('#' + i).addClass(festivo);
                }

                for(i=0; i<programacion.length; i++){
                    primerDia = obj.primerDia;
                    primerDia = parseFloat(primerDia);

                    for(j=0; j<7; j++){
                        if(document.getElementById(programacion[i]['idUser'] + '_' + j)){
                            var textoDia = new String();
                            textoDia = $('#' + j).text();
                            dia = textoDia.substr(4, 2);

                            var tickets, strDia = new String();
                            var ticket = new String();

                            tickets = programacion[i]['ticket'];

                            if(tickets!=null) {
                                tickets = tickets.split(',');

                                for (k = 0; k < tickets.length; k++) {
                                    var str, estado, clase = new String();
                                    //Trama con el detalle de todos los tiquetes
                                    str = tickets[k];
                                    //Particion de la trama en lineas, con el detalle del tiquete
                                    str = str.split('|');
                                    //Se guarda el estado
                                    estado = str[2];

                                    SLA = str[3];

                                    var ntiquetes = tickets.length;
                                    var height = 17;

                                    strDia = parseInt(str[4]);

                                    if (strDia == dia) {
                                        clase = 'eventoOK';

                                        if (estado == 1) {
                                            clase = 'eventoClose';
                                        }
                                        if (estado == 0) {
                                            if (SLA > 100) {
                                                clase = 'eventoError';
                                            }
                                            if(SLA <= 50){
                                                clase = 'eventoOk';
                                            }

                                            if(SLA > 50 && SLA <=100){
                                                clase = 'eventoWarning';
                                            }
                                        }

                                        ticket = '<div id="' + str[0] + '" class="glyphicon glyphicon-option-vertical ' + clase + '" onclick="verTicket(' + str[0] + ')">' + str[1] + '</div>';
                                        $('#' + programacion[i]['idUser'] + '_' + j).append(ticket);
                                    }
                                }
                            }
                        }

                        ntiquetes = '';
                        ntiquetes =  $('#' + programacion[i]['idUser'] + '_' + j + ' div').length;
                        if(ntiquetes>2) {
                            var t = '';
                            $('#' + programacion[i]['idUser'] + '_' + j + "> div").each(function(){
                                t = t + $(this).attr('id') + ':' + $(this).text() + '?';
                            });

                            t = t.trim('?');

                            $('#' + programacion[i]['idUser'] + '_' + j).empty();

                            ticket = '<div class="glyphicon glyphicon-option-vertical eventoOk" onclick="verProgramados(' + "'" + t + "'" + ')">' + ntiquetes + ' TIQUETES</div>';
                            $('#' + programacion[i]['idUser'] + '_' + j).append(ticket);
                        }
                    }
                }

                $('#cargar').css('display', 'none');
            });
        }

        $(document).ready(function(){
            $('#selectSemana').val({{ semana }});

            {% for p in procesos %}
            procesos = procesos + '<option value="{{ p.idproceso }}">{{ p.proceso }}</option>';
            {% endfor %}

            cargar({{ semana }});
            $("#menu-content li").click(function () {
                var target = $(this).attr('data-target');
                if(target!=null){
                    var $target2 = $(target + "_");

                    $($target2).attr('class')=='collapse' ? $($target2).addClass('collapse in') : $($target2).removeClass('in');
                }
            });
            $("#menu-content_dias li").click(function () {
                var target = $(this).attr('data-target');
                if(target!=null){
                    var t = new String(target);
                    var $target2 = $(t.replace('_', ''));
                    $($target2).attr('class')=='collapse' ? $($target2).addClass('collapse in') : $($target2).removeClass('in');
                }
            });

            $('#atras').click(function(){
                semana = $('#selectSemana').val();
                semana = parseFloat(semana) - 1;
                if(semana<1)
                    semana = 1;
                $('#selectSemana').val(semana);
                if(semana>1){
                    cargar(semana);
                }
            });

            $('#siguiente').click(function(){
                semana = $('#selectSemana').val();
                semana = parseFloat(semana) + 1;
                if(semana>52)
                    semana = 52;

                $('#selectSemana').val(semana);

                if(semana<52){
                    cargar(semana);
                }
            });

            $('#selectSemana').change(function(){
                cargar($('#selectSemana').val());
                semana = $('#selectSemana').val();
            });

            $('#selectArea').change(function(){
                cargar($('#selectSemana').val());
                dept = $('#selectArea').val();
            });
        });

        function verAsignados(usuario){
            idUser = usuario;
            idUser = idUser.substr(0, idUser.indexOf('_'));
            $('#dialogAsignados').load("{{path('dialogAsignados', {'idproyectos': idproyectos})}}");
        }
        function verVencidos(usuario){
            idUser = usuario;
            idUser = idUser.substr(0, idUser.indexOf('_'));
            $('#dialogVencidos').load("{{path('dialogVencidos', {'idproyectos': idproyectos})}}");
        }
        function verTicket(id) {
            clic = true;
            $('#dialogVerTicket').load("{{path('verTicket',{'idproyectos':idproyectos})}}", { $idticket: id });
        }
        function verProgramados(t){
            clic = true;
            tiquetes = t;
            $('#dialogTiquetes').load("{{ path('dialogTicketProgramados') }}");
        }
        function asignarTicket(id){
            if(clic==false) {
                var d = new Date();
                Y = d.getFullYear();
                M = d.getMonth() + 1;
                D = d.getDate();
                h = d.getHours();
                m = d.getMinutes();

                if (M < 10)
                    M = '0' + M;
                if (D < 10)
                    D = '0' + D;

                if (h < 10)
                    h = '0' + h;
                if (m < 10)
                    m = '0' + m;
                fecha = Y + "-" + M + "-" + D;

                semana = $('#selectSemana').val();
                semana = parseFloat(semana);

                var strUser = new String();
                strUser = id;
                strUser = strUser.split('_');

                usuario = strUser[0];
                idDia = strUser[1];

                if (parseInt(semana) >= parseInt({{ semana }})) {
                    $('#dialogAsigTicket').load("{{path('dialogTiquetes', {'idproyectos':idproyectos})}}");
                } else {
                    swal("No se pueden programar fechas anteriores", "Elija otra fecha", "error");
                }
            }
        }
    </script>

    <div id="dialogVerTicket" title="Detalle del Ticket">
        <div id="verElTicket"></div>
    </div>

    <div id="dialogAsigTicket" title="Asignar Ticket">
        <div id="asignarTicket"></div>
    </div>

    <div id="dialogVencidos" title="Tiquetes Vencidos">
        <div id="TicketVencidos"></div>
    </div>

    <div id="dialogAsignados" title="Tiquetes Asignados">
        <div id="TicketAsignados"></div>
    </div>

    <div id="dialogTiquetes" title="Tiquetes Programados">
        <div id="TicketsProgramados"></div>
    </div>

    <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12" id="divContenedorCalendario">
        <!--Navegacion-->
        <div class="col-sm-12  col-md-12 col-lg-12 col-xs-12" id="divHead"><center>
            <table cellspacing="15px">
                <tr>
                    <th style="padding-right: 20px;"><span class="hidden-xs">CALENDARIO DE PROGRAMACION</span></th>
                    <th style="padding-right: 5px;"><span id="atras" class="glyphicon glyphicon-arrow-left"></span></th>
                    <th style="padding-right: 5px;">
                        <select id="selectSemana" class="form-control">
                            {% for i in 1..52 %}
                                <option value="{{ i }}">Semana {{ i }}</option>
                            {% endfor %}
                        </select>
                    </th>
                    <th style="padding-right: 5px;">
                        <select id="selectArea" class="form-control">
                            {% for departamento in departamentos %}
                                <option value="{{ departamento.iddepartamento }}">{{ departamento.departamento }}</option>
                            {% endfor %}
                        </select>
                    </th>
                    <th style="padding-left: 5px;"><span id="siguiente" class="glyphicon glyphicon-arrow-right"></span></th>
                </tr>
            </table></center>
        </div>

        <!--Div tecnicos-->
        <div class="col-sm-12  col-md-3 col-lg-3 col-xs-12 table-bordered" id="divPersonas">
            <div class="col-sm-12  col-md-12 col-lg-12 col-xs-12" id="divPersonal">
                <span class="hidden-xs">TECNICOS</span>
            </div>

            <div class="col-sm-12  col-md-12 col-lg-12 col-xs-12" id="divPanel">
                <table style="width: 100%" id="tablaPanel">
                    <tr><th>PERSONAL DEL PROYECTO</th></tr>
                </table>
            </div>

            <div class="col-sm-12  col-md-12 col-lg-12 col-xs-12" id="divTecnicos" style="text-align: left">
                <div class="menu-list nav-side-menu" style="z-index: 98">
                    <ul id="menu-content" class="menu-content"></ul>
                </div>
            </div>
        </div>

        <!--Div Semanas-->
        <div class="col-sm-12  col-md-9 col-lg-9 col-xs-12 table-bordered" id="divSemanas">
            <div class="col-sm-12  col-md-12 col-lg-12 col-xs-12" id="divSemanario">
                <span class="hidden-xs" id="lblSemana">DIAS SEMANA {{ mes }}</span>
            </div>

            <div class="col-sm-12  col-md-12 col-lg-12 col-xs-12" id="divDias">
                <table id="tablaDias" STYLE="width: 100%;">
                    <tr>
                        {% set i = 0 %}
                        {% for i in 0..6 %}
                            <th id="{{ i }}" style="width: 14%" {% if i == 0 %} class="festivos" {% endif %}> {{ diasS[i] }} {% if (primerDia + i) <= ultimoDia  %} {{ primerDia + i }} {% else %} {% set primerDia = i - (5 - i) %} {{ primerDia + i }} {% endif %}</th>
                        {% endfor %}
                    </tr>
                </table>
            </div>

            <div class="col-sm-12  col-md-12 col-lg-12 col-xs-12" id="divSemanas" style="text-align: left">
                <div class="menu-list nav-side-menu" style="z-index: 98">
                    <ul id="menu-content_dias" class="menu-content">
                    </ul>
                </div>
            </div>
        </div>
    </div>
{% endblock %}