{% extends "base.html" %}

{% load staticfiles %}

{% block title %}
Incio
{% endblock %}

{% block pluginstylesheet %}
    <link rel="stylesheet" href="{% static "assets/css/statistic.css" %}"/>
    <link rel="stylesheet" href="{% static "assets/css/tablero.css" %}"/>
{% endblock %}

{% block content %}
    <div class="row-fluid">
        <div class="row">
            <div class="span4">
                <div class="dgtic-panel" id="dgtic-content-servicios">
                    <div class="dgtic-panel-header">
                        <span class="dgtic-panel-title">
                            <i class="icon-bullets"></i>
                            Servicios
                        </span>
                    </div>
                    <div class="dgtic-panel-toolbar">
                        <div class="btn-toolbar">
                            <a href="{% url "lista-servicio" %}" class="btn btn-primary">
                                Ver todos...
                            </a>
                        </div>
                    </div>


                </div>
                <div class="dgtic-panel" id="dgtic-content-servicios2">
                    <div class="dgtic-panel-header">
                        <span class="dgtic-panel-title">
                            <i class="icon-bullets"></i>
                            Servicios
                        </span>
                    </div>
                    <div class="dgtic-panel-toolbar">
                        <div class="btn-toolbar">
                            <a href="{% url "lista-servicio" %}" class="btn btn-primary">
                                Ver todos...
                            </a>
                        </div>
                    </div>


                </div>
            </div>
            <div class="span8">
                <div class="dgtic-panel collapsible">
                    <div class="dgtic-panel-header">
                        <span class="dgtic-panel-title">
                            <i class="icon-stats"></i>
                            Estadísticas de los servicios brindados
                        </span>
                    </div>
                    <div class="dgtic-panel-content">
                        <ul class="dgtic-stats-container" id="estadisticas">
                            <li id="estadisticas-abiertas"
                                  data-provide="circular"
                                  data-fill-color="#F7CE00"
                                  data-initial-value="0"
                                  data-max-value="0"
                                  data-label="Solicitudes Abiertas"
                                  style="width: 136px; height: 136px;"
                                  class="circular-stat">
                            </li>
                            <li id="estadisticas-asignadas"
                                  data-provide="circular"
                                  data-fill-color="#F27400"
                                  data-initial-value="0"
                                  data-max-value="0"
                                  data-label="Solicitudes Asignadas"
                                  style="width: 136px; height: 136px;"
                                  class="circular-stat">
                            </li>
                            <li id="estadisticas-cerradas"
                                  data-provide="circular"
                                  data-fill-color="#DD2321"
                                  data-initial-value="0"
                                  data-max-value="0"
                                  data-label="Solicitudes Cerradas"
                                  style="width: 136px; height: 136px;"
                                  class="circular-stat">
                            </li>
                    </ul>
                        </div>
                   <div class="dgtic-panel-content">
                       <ul class="dgtic-stats-container">
                            <li id="estadisticas-prioridad_normal"
                                  data-provide="circular"
                                  data-fill-color="#F7CE00"
                                  data-initial-value="0"
                                  data-max-value="0"
                                  data-label="Prioridad Normal"
                                  style="width: 136px; height: 136px;"
                                  class="circular-stat">
                            </li>
                            <li id="estadisticas-prioridad_media"
                                  data-provide="circular"
                                  data-fill-color="#F27400"
                                  data-initial-value="0"
                                  data-max-value="0"
                                  data-label="Prioridad Media"
                                  style="width: 136px; height: 136px;"
                                  class="circular-stat">
                            </li>
                            <li id="estadisticas-prioridad-alta"
                                  data-provide="circular"
                                  data-fill-color="#DD2321"
                                  data-initial-value="0"
                                  data-max-value="0"
                                  data-label="Prioridad Alta"
                                  style="width: 136px; height: 136px;"
                                  class="circular-stat">
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block jsplugins %}
    <script src="{% static "plugins/jrumble/jquery.jrumble.1.3.min.js" %}"></script>
    <!--[if lt IE 9]>
    <script src="{% static "assets/js/libs/excanvas.min.js" %}"></script>
    <![endif]-->
    <script src="{% static "assets/js/plugins/circularstat/dandelion.circularstat.min.js" %}"></script>
{% endblock %}
{% block extrajs %}
    <script>
    var bar_alta , bar_normal ,bar_baja;
    var color_alta,color_normal,color_baja;
    var serX=1;
    var seconds = 5; // el tiempo en segundos en que se refresca
    var divid = "dgtic-content-servicios"; // el div que quieres actualizar!
	var url = "{% url "api-estadisticas" %}"; // el archivo que ira en el div

    $(document).ready(function(){
        $("#dgtic-content-servicios2").css({"display":"none"});
        bar_alta ="#E0E0E0 ";
        bar_normal="#E0E0E0  ";
        bar_baja="#E0E0E0  ";
        color_alta="#F8F8F8 ";
        color_normal="#F8F8F8 ";
        color_baja="#F8F8F8 ";
        getEstatisticas();
        getServicios();
        $(".alert-icon").jrumble();
        demoStart();
        refreshdiv(); // corremos inmediatamente la funcion
    });

           var getServicios = function(){
               $.getJSON( "{% url "api-servicio-list" %}", function( json ) {
               }).done(function( json ) {
                   var logJson=json.length;
                   $.each(json, function(key, value){

                       if(value.estatus!=3){

                       parentElement = Crearelement("div", "","row-fluid","");
                       if(value.prioridad==1){
                           bar_baja="#F7CE00";
                           //color_baja="#C4FFDF";
                       }if(value.prioridad==2){
                           bar_normal="#F27400";
                           //color_normal="#DA4200"
                       }
                       if(value.prioridad==3) {
                           bar_alta = "#DD2321";
                       }
                       childrenElement = Crearelement("importancia_bar", "", "","");
                       parentElement.append(childrenElement);
                       var contenedortxt=Crearelement("div","","dgtic_content","");
                       childrenElement = Crearelement("h3", "Servicio No. ", "","");
                       contenedortxt.append(childrenElement);
                       if(value.prioridad==3 && value.estatus==1){
                           childrenElement = Crearelement("icon", "", "danger-services","");
                           contenedortxt.append(childrenElement);

                       }
                      var estatus= value.estatus;
                           var flag=false;
                       if(value.estatus==1){
                           childrenElement = Crearelement("h2", value.no_servicio,"" ,value.ticket,"DD2321");
                           contenedortxt.append(childrenElement);
                           flag=true;
                       }
                       if(value.estatus==2 && flag==false){
                           childrenElement = Crearelement("h2", value.no_servicio,"" ,value.ticket,"F27400");
                           contenedortxt.append(childrenElement);
                           flag=true;
                       }
                       if(value.estatus=3 && flag==false){
                           childrenElement = Crearelement("h2", value.no_servicio,"" ,value.ticket,"F7CE00");
                           contenedortxt.append(childrenElement);
                       }


                       var fecha=value.fecha_creacion;
                       childrenElement = Crearelement("p", fecha.substring(0,9)+ ", "+fecha.substring(11,16) , "","");
                       contenedortxt.append(childrenElement);
                       childrenElement = Crearelement("p", value.solicitante, "","");
                       contenedortxt.append(childrenElement);
                       childrenElement = Crearelement("p", value.descripcion, "","");
                       contenedortxt.append(childrenElement);
                       parentElement.append(contenedortxt);



                       if(estatus==1){
                           childrenElement = Crearelement("button-bar", value.id, "span6", value.ticket,'blod');
                           parentElement.append(childrenElement);
                       }
                       if(estatus==2) {
                           childrenElement = Crearelement("button-bar", value.id, "span12", value.ticket,"none");
                           parentElement.append(childrenElement);
                       }
                       if(serX==1) {
                           $("#dgtic-content-servicios2").append(parentElement);
                           $("#dgtic-content-servicios2").css({"display":"block"});
                           $("#dgtic-content-servicios").css({"display":"none"});
                           $("#dgtic-content-servicios").html("");

                       }else{

                           $("#dgtic-content-servicios").append(parentElement);
                           $("#dgtic-content-servicios").css({"display":"block"});
                           $("#dgtic-content-servicios2").html("");
                           $("#dgtic-content-servicios2").css({"display":"none"});

                       }
                   }
                   });
                    if(serX==1){
                        serX=2;
                    }else{
                        serX=1;
                    }
                   $("#dgtic-content-servicios").append(
                       $("<input>").attr("type","hidden").attr("value",logJson).attr("id","total-services")
                    );
                   //setTimeout(Start(),5000);
               });
           };

           var getEstatisticas = function(){
               $.getJSON("{% url "api-estadisticas" %}", function(jon){}).done(function(json){
                   var maxval= json.servicios;

                   //Estadisticas servicio Abiertos
                   var St1 = $("#estadisticas-abiertas");
                   var plugin = St1.data("circular-stat");
                   plugin.option("maxValue",maxval);
                   plugin.animate(parseInt(json.servicios_abiertos),10);

                  //Estadisticas servicio Asignados
                   var St2 = $("#estadisticas-asignadas");
                   var plugin2 = St2.data("circular-stat");
                   plugin2.option("maxValue",maxval);
                   plugin2.animate(parseInt(json.servicios_asignados));

                   //Estadisticas servicio Cerrados
                   var St3 = $("#estadisticas-cerradas");
                   var plugin3 = St3.data("circular-stat");
                   plugin3.option("maxValue",maxval);
                   plugin3.animate(parseInt(json.servicios_cerrados));

                   //Estadisticas prioridad normal
                   var St4 = $("#estadisticas-prioridad_normal");
                   var plugin4 = St4.data("circular-stat");
                   plugin4.option("maxValue",maxval);
                   plugin4.animate(parseInt(json.servicios_prioridad_normal),10);

                  //Estadisticas prioridad media
                   var St5 = $("#estadisticas-prioridad_media");
                   var plugin5 = St5.data("circular-stat");
                   plugin5.option("maxValue",maxval);
                   plugin5.animate(parseInt(json.servicios_prioridad_media));

                   //Estadisticas prioridad alta
                   var St6 = $("#estadisticas-prioridad-alta");
                   var plugin6 = St6.data("circular-stat");
                   plugin6.option("maxValue",maxval);
                   plugin6.animate(parseInt(json.servicios_prioridad_alta));

               });
           };

           var  Crearelement= function(typeElement,content,xclass,xClave,xCaracteristica){
               var type= typeElement;
               var createElement=null;
               //$element=null;
              /// alert("Crear elemento "+type);
               switch (type){
                   case "div":
                        {
                           createElement=$("<div  class='"+xclass+"'>"+content+"</div>").css({'background':'#fff'});
                            break;
                        }
                   case "a":
                        {
                            createElement=$("<a>"+content+"</a>");
                            break;
                        }
                   case "p":
                        {
                            createElement=$("<p>"+content+"</p>");
                            break;
                        }
                   case "h1":
                        {
                            createElement=$("<h1>"+content+"</h1>");
                            break;
                        }
                   case "h2":
                        {
                            createElement=$('<h2 style="font-size:30px; background:#'+xCaracteristica+';"><a href="tickets/'+xClave+'/" >'+content+'</a></h2>');
                            break;
                        }
                   case "icon":
                        {
                            createElement=$('<div class="alert-icon"><img  src="static/assets/images/icons/led/src/danger.png" style="width:10%; float:right; margin-right:5%;"/></div>');
                            break;
                        }
                   case "h3":
                        {
                            createElement=$("<h3>"+content+"</h3>");
                            break;
                        }
                   case "importancia_bar":
                        {
                            createElement=$('<div>').addClass('tablero_header').append(
                                $('<div>').addClass('dgtic_span4').html("Normal").css({"background-color":bar_baja,"color":color_baja ,"padding-top" :"0.2em","font-weight":"bold "}),
                                $('<div>').addClass('dgtic_span4').append(
                                        $('<span>').html("Media")
                                ).css({"background":bar_normal,"color":color_normal,"padding-top" :"0.2em"}),//addClass("btn-warning btn-large"),
                                $('<div>').addClass('dgtic_span4').append(
                                        $('<span>').html("Alta")
                                ).css({"background":bar_alta,"color":color_alta,"padding-top" :"0.2em"})
                            );

                            bar_alta ="#C8C8C8 ";
                            bar_normal="#C8C8C8 ";
                            bar_baja="#C8C8C8 ";
                            color_alta="#F8F8F8 ";
                            color_normal="#F8F8F8 ";
                            color_baja="#F8F8F8 ";
                            break;
                        }
                   case "button-bar":
                        {
                           createElement=createElement=$('<div>').addClass('span12 btn-group dropup').append(
                                $('<a Style="display:'+xCaracteristica+'">').attr("href","/tickets/"+content+"/atender").addClass(xclass).append(
                                           $('<i>').addClass("icon-play")
                                ).addClass("btn btn-success btn-large"),
                                $('<a>').addClass(xclass).attr("href","/tickets/servicio/"+content+"/cerrar").append(
                                            $('<i>').addClass("icon-remove-2")
                                ).addClass("btn btn-danger btn-large")
                            ).css({"text-align":"center","font-size":"20px"});

                            break;
                        }
                   
               }
               return createElement;
           };

           var RealTimeServicio = function(){

                       getEstatisticas();
                       getServicios();




           };

	    function refreshdiv(){
       var xmlHttp;
	        try{
	            xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari

	        }
	        catch (e){
	            try{
	                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
	            }
	            catch (e){
                try{
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	                }
                catch (e){
                    alert("Tu explorador no soporta AJAX.");
                    return false;
	                }
	            }
	        }

        var timestamp = parseInt(new Date().getTime().toString().substring(0, 10));
        var nocacheurl = url+"?t="+timestamp;
        // The code...
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState== 4 && xmlHttp.readyState != null){
                var json = JSON.parse(xmlHttp.responseText);
                var tser= $("#total-services").val();
                if (tser<json.servicios) {
                    $("#dgtic-content-servicios").html("");
                    RealTimeServicio();
                }
                setTimeout('refreshdiv ()',seconds*1000);
	            }
        };
        xmlHttp.open("GET",nocacheurl,true);
        xmlHttp.send(null);
	    }
        // pulse
        var demoStart = function(){
	        $('#alert-icon').trigger('startRumble');
	        setTimeout(demoStop, 300);
            };

        var demoStop = function(){
	        $('#alert-icon').trigger('stopRumble');
	        setTimeout(demoStart, 300);
        };



    </script>
{% endblock %}