{% extends "base.html" %}
{% load static %}


{% block css %}
  <link rel="stylesheet" type="text/css" href="{% static 'customstyle/home/home.css' %}">
{% endblock css %}

{% block content %}


    <input type="hidden" id="csrf_token" value="{{ csrf_token }}">

    <div class="container " style="width: 80%">

      <div class="row">
        <div class="col s12">
          <center>
            <h4><b>ORNALISIS</b></h4>
          </center>
    
          <br />
          <div class="nav-wrapper">
            <div class="col s12">
              <a class="breadcrumb black-text"> Panel de Herramientas</a>
            </div>
          </div>
        </div>
      </div>
          
      <div class="row">
        <div class="col s12">
          <ul class="tabs tabs-fixed-width">
            <li class="tab col s3"><a class="active" href="#integradas">Integradas</a></li>
            <!-- <li class="tab col s3"><a href="#dinamicas">Dinámicas</a></li> -->
          </ul>
        </div>
        <div id="integradas" class="col s12">
          <br>
          <p class="desc_herramienta" >Las herramientas integradas son herramientas estáticas integradas en el sistema para realizar un análisis completo.</p>
            
            <div class="input-field col s12 m8 offset-m2 l4 offset-l4" >
              <i class="material-icons  prefix">search</i>
              <input id="searchherramienta_integrada" type="text" class="validate">
              <label for="searchherramienta_integrada"> Buscar herramienta </label>
            </div>
            <div class="col l12 m12">
              
            </div>

            <!-- Herramienta Ventas totales -->
            <div class="col s12 m6 l4 container_herramienta_integrada">
              <div class="card white ">
                <div class="card-content black-text ">
                    <div class="tool-details-container" >
                      <div class="inlb tool-owner-details">
                        <div class="tool-owner-image icon_herramienta_integrada" ><i class="material-icons">attach_money  </i>
                        </div>
                        <div class="tool-details">
                          <div class="tool-owner-container">
                            <a class="tool-owner">ORNALISIS</a>
                          </div>
                          <div class="tool-date"> <i class="material-icons tool-owner-tipe">lock</i> Sistema</div> 
                        </div>
                      </div>
                    </div>
                    <span class="card-title "><b>Ventas totales</b></span>
                    <p style="text-align: justify; font-size: 14px; color: grey ">Resumen de ventas totales por periodos.</p>
                </div>
                <div class="card-action">
                    <a href="/herramienta/integrada/ventas-totales" class=" btn btn-small  tooltipped" data-position="top" data-tooltip="Ver herramienta" style="color: white; background-color: #568c5a"><i class="material-icons  left" >play_circle_outline</i> Ver</a>     
                    <i class="material-icons icon_shared compartir_icon right tooltipped" id="compartidas" data-position="top" data-tooltip="Integrada" style="color: grey ;">star</i>
                </div>
              </div>
            </div>
            <!-- End Herramienta Ventas totales -->
            <!-- Herramienta 1 -->
            <div class="col s12 m6 l4 container_herramienta_integrada">
              <div class="card white ">
                <div class="card-content black-text ">
                    <div class="tool-details-container" >
                      <div class="inlb tool-owner-details">
                        <div class="tool-owner-image icon_herramienta_integrada" ><i class="material-icons">local_florist</i>
                        </div>
                        <div class="tool-details">
                          <div class="tool-owner-container">
                            <a class="tool-owner">ORNALISIS</a>
                          </div>
                          <div class="tool-date"> <i class="material-icons tool-owner-tipe">lock</i> Sistema</div> 
                        </div>
                      </div>
                    </div>
                    <span class="card-title "><b>Ventas por especie</b></span>
                    <p style="text-align: justify; font-size: 14px; color: grey ">Análisis de las ventas por especie realizadas en cierto periodo.</p>
                </div>
                <div class="card-action">
                    <a href="/herramienta/integrada/ventas-por-especie/" class=" btn btn-small  tooltipped" data-position="top" data-tooltip="Ver herramienta" style="color: white; background-color: #568c5a"><i class="material-icons  left" >play_circle_outline</i> Ver</a>     
                    <i class="material-icons icon_shared compartir_icon right tooltipped" id="compartidas" data-position="top" data-tooltip="Integrada" style="color: grey ;">star</i>
                </div>
              </div>
            </div>
            <!-- End Herramienta 1 -->
          
            <!-- Herramienta 3 -->
            <div class="col s12 m6 l4 container_herramienta_integrada">
              <div class="card white ">
                <div class="card-content black-text ">
                    <div class="tool-details-container" >
                      <div class="inlb tool-owner-details">
                        <div class="tool-owner-image icon_herramienta_integrada" ><i class="material-icons">people</i>
                        </div>
                        <div class="tool-details">
                          <div class="tool-owner-container">
                            <a class="tool-owner">ORNALISIS</a>
                          </div>
                          <div class="tool-date"> <i class="material-icons tool-owner-tipe">lock</i> Sistema</div> 
                        </div>
                      </div>
                    </div>
                    <span class="card-title "><b>Resumen de ventas por proveedor</b></span>
                    <p style="text-align: justify; font-size: 14px; color: grey ">Análisis de las ventas por proveedor realizadas en cierto periodo.</p>
                </div>
                <div class="card-action">
                    <a href="/herramienta/integrada/ventas-por-proveedor/" class=" btn btn-small  tooltipped" data-position="top" data-tooltip="Ver herramienta" style="color: white; background-color: #568c5a"><i class="material-icons  left" >play_circle_outline</i> Ver</a>     
                    <i class="material-icons icon_shared compartir_icon right tooltipped" id="compartidas" data-position="top" data-tooltip="Integrada" style="color: grey ;">star</i>
                </div>
              </div>
            </div>
            <!-- End Herramienta 3 -->
            <!-- Herramienta 4 -->
            <div class="col s12 m6 l4 container_herramienta_integrada">
              <div class="card white ">
                <div class="card-content black-text ">
                    <div class="tool-details-container" >
                      <div class="inlb tool-owner-details">
                        <div class="tool-owner-image icon_herramienta_integrada" ><i class="material-icons" >map</i>
                        </div>
                        <div class="tool-details">
                          <div class="tool-owner-container">
                            <a class="tool-owner">ORNALISIS</a>
                          </div>
                          <div class="tool-date"> <i class="material-icons tool-owner-tipe">lock</i> Sistema</div> 
                        </div>
                      </div>
                    </div>
                    <span class="card-title "><b>Ventas por estado</b></span>
                    <p style="text-align: justify; font-size: 14px; color: grey ">Análisis de las ventas por estado realizadas en cierto periodo.</p>
                </div>
                <div class="card-action">
                    <a href="/herramienta/integrada/ventas-por-estado" class=" btn btn-small  tooltipped" data-position="top" data-tooltip="Ver herramienta" style="color: white; background-color: #568c5a"><i class="material-icons  left" >play_circle_outline</i> Ver</a>     
                    <i class="material-icons icon_shared compartir_icon right tooltipped" id="compartidas" data-position="top" data-tooltip="Integrada" style="color: grey ;">star</i>
                </div>
              </div>
            </div>
            <!-- End Herramienta 4 -->
            <!-- Herramienta 4 -->
            <div class="col s12 m6 l4 container_herramienta_integrada">
              <div class="card white ">
                <div class="card-content black-text ">
                    <div class="tool-details-container" >
                      <div class="inlb tool-owner-details">
                        <div class="tool-owner-image icon_herramienta_integrada" ><i class="material-icons" >insert_chart</i>
                        </div>
                        <div class="tool-details">
                          <div class="tool-owner-container">
                            <a class="tool-owner">ORNALISIS</a>
                          </div>
                          <div class="tool-date"> <i class="material-icons tool-owner-tipe">lock</i> Sistema</div> 
                        </div>
                      </div>
                    </div>
                    <span class="card-title "><b>Productos menos y mas vendidos</b></span>
                    <p style="text-align: justify; font-size: 14px; color: grey ">Análisis de los 10 productos menos y más vendidos en un cierto periodo.</p>
                </div>
                <div class="card-action">
                    <a href="/herramienta/integrada/menos-y-mas-vendidos" class=" btn btn-small  tooltipped" data-position="top" data-tooltip="Ver herramienta" style="color: white; background-color: #568c5a"><i class="material-icons  left" >play_circle_outline</i> Ver</a>     
                    <i class="material-icons icon_shared compartir_icon right tooltipped" id="compartidas" data-position="top" data-tooltip="Integrada" style="color: grey ;">star</i>
                </div>
              </div>
            </div>
            <!-- End Herramienta 4 -->
        </div>
        <div id="dinamicas" class="col s12 hide">

          <br>
          <p class="desc_herramienta" >Una herramienta dinámica permite realizar un análisis específico de información, cualquier usuario puede crear una herramienta dinámica y compartirla con los usuarios. </p>

          <div class="input-field col s6 m3 l2">
            <select class="selectherramienta">
              <option value="todos" selected>Todas</option>
              <option value="misherramientas">Mis herramientas </option>
              <option value="compartidas">Compartidas </option>
            </select>
            <label>Ver </label>
          </div>
          <div class="input-field col s6 m4 offset-m5 l4 offset-l6" >
            <i class="material-icons  prefix">search</i>
            <input id="searchherramienta" type="text" class="validate">
            <label for="searchherramienta"> Buscar herramienta </label>
          </div>

          <div class="row">

            {% if not herramientas %}
            <div class="col s12 m12 l12 ">
              <div class="card white  card-panel">
                <div class=" black-text ">
                  <center>No hay herramientas creadas aún.</center>
                </div>
              </div>
            </div>
            {% endif %}
            {% for herramienta in herramientas %}

              {% if herramienta.user == request.user or herramienta.share == True  %}

              <div class="col s12 m6 l4 container_herramienta">
                <div class="card white ">
                  <div class="card-content black-text ">
                    
                      <div class="tool-details-container" >
                        <div class="inlb tool-owner-details">
                          <div class="tool-owner-image"><img src="{{herramienta.user.detalle.imagen.url}}" class="circle " width="35px" height="35px" style="display: block; object-fit: cover;">
                          </div>
                          <div class="tool-details">
                              <div class="tool-owner-container">
                                <a class="tool-owner">{{herramienta.user.first_name}} {{herramienta.user.last_name}}</a>
                              </div>
                            {% if herramienta.user.detalle.tipo == 1 %}
                              <div class="tool-date"> <i class="material-icons tool-owner-tipe">verified_user</i> {{herramienta.user.detalle.get_tipo_display}}</div>
                            {% elif herramienta.user.detalle.tipo == 2 %}
                              <div class="tool-date"> <i class="material-icons tool-owner-tipe">person</i> {{herramienta.user.detalle.get_tipo_display}}</div>
                            {% elif herramienta.user.detalle.tipo == 3 %}
                              <div class="tool-date"> <i class="material-icons tool-owner-tipe">person_outline</i> {{herramienta.user.detalle.get_tipo_display}}</div>
                            {% endif %}
                          </div>
                        </div>
                      </div>
                        <span class="card-title "><b>{{herramienta.title}}</b></span>
                      <p style="text-align: justify;">{{herramienta.description}} </p>
                    <input type="hidden" id="tipo_herramienta" value="{% if herramienta.tool_type == 1 %}Estadistica{% else %}Pronostica{% endif %}" >
                  </div>
                  {% if herramienta.user == request.user %}
                    <div class="card-reveal"> 
                        <span class="card-title grey-text text-darken-4 "> Opciones<i class="material-icons right">close</i> </span>
                        <hr> </br>
                        <a class="btn btn-small waves-effect blue darken-4 editar_herramienta" data-c="{{herramienta.id}}"><i class="material-icons left">edit</i> Editar</a><br><br>
                        <a  class="btn btn-small waves-effect red darken-4 borrar_herramienta" data-c="{{herramienta.id}}"><i class="material-icons left">delete_forever</i> Borrar</a>
                        <br><br>
                          Compartir herramienta
                          <form class="form_share_tool">
                            <div class="switch">
                              <label>
                                No
                                {% if herramienta.share %} <input type="checkbox" name="share" class="share_tool" checked="checked"> {% else %}  <input type="checkbox" name="share" class="share_tool">{% endif %}
                                <span class="lever"></span>
                                Si
                              </label>
                            </div>
                            <input type="hidden" name="id_herramienta" value="{{herramienta.pk}}">
                          </form> 
                    </div>
                  {% endif %}
                  <div class="card-action">
                      
                      <a href="/herramienta/{{herramienta.slug}}" class=" btn btn-small  tooltipped" data-position="top" data-tooltip="Ver herramienta" style="color: white; background-color: #568c5a"><i class="material-icons  left" >play_circle_outline</i> Ver</a>

                      {% if herramienta.user == request.user %}
                        <span class="activator grey-text text-darken-4 options" ><i class="material-icons right tooltipped" data-position="top" data-tooltip="Opciones">more_vert</i></span>
                        <i class="material-icons icon_owned right tooltipped" id="misherramientas" data-position="top" data-tooltip="Eres el dueño" style="color: goldenrod;">check_circle</i>
                      {% endif %}
                      {% if herramienta.share == True %}
                        <i class="material-icons icon_shared compartir_icon right tooltipped" id="compartidas" data-position="top" data-tooltip="Compartida" style="color: grey ;">people</i>
                      {% endif %}
                        
                  </div>
                </div>
              </div>

              {% else %}
                
              {% endif %}
            {% endfor %}
          </div>

          <div class="fixed-action-btn">
            <a class="btn-floating btn-large add_herramienta green">
              <i class="waves-effect waves-light large material-icons">add</i>
            </a>
          </div>
          <!-- termina dinamicas -->
        </div> 


      </div>

    </div>


<div id="modalOption" class="modal bottom-sheet">
    <div class="modal-content">
        <center><h4 class="modal_opc_vacuna">Nueva herramienta</h4></center>
        <br/>
        <center>
            <a class="waves-effect waves-light btn-large green add_estadistica" ><i class="material-icons left">insert_chart_outlined</i>Estadística</a>
        </center>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Cancelar</a>
    </div>
</div>

{% include 'DSSC_app/modal_nueva_herramienta.html' %}
{% include 'DSSC_app/modal_borrar_herramienta.html' %}
{% include 'DSSC_app/modal_editar_herramienta.html' %}
{% endblock content%}


{% block js %}

<script type="text/javascript">

  $('select').formSelect();
  
	$(document).ready(function(){
		$('.materialboxed').materialbox();
    $('#modalOption').modal();
    $('#modal_nueva_herramienta').modal();
    $('#modal_borrar_herramienta').modal();
    $('#modal_editar_herramienta').modal();
	});
  $(document).ready(function(){
    $('.tabs').tabs();
  });
          

  $(document).on("click",".add_herramienta",function(){
    $('#modalOption').modal('open');
  });
  $(document).on("click", ".add_estadistica", function(e){
     $('#modalOption').modal("close");
    $("#modal_nueva_herramienta").modal('open')
  })
  

  $(document).on("keyup","#searchherramienta",function(){

      var containers= document.getElementsByClassName("container_herramienta")
  
      for (i = 0; i < containers.length; i++) {
              var nombres= containers[i].getElementsByTagName("span")[0].innerText;

              var owned="";
              var shared="";
              var tipo_permissions= $( ".selectherramienta option:selected" ).val();
              console.log(tipo_permissions)
              if( containers[i].getElementsByClassName("icon_owned")[0]){
                 owned= containers[i].getElementsByClassName("icon_owned")[0].id;
              }
              if(containers[i].getElementsByClassName("icon_shared")[0]){
                shared= containers[i].getElementsByClassName("icon_shared")[0].id
              }

              var search= $(this).val(); 
             
          if (tipo_permissions.toUpperCase() == "TODOS"){
                if (nombres.toUpperCase().indexOf(search.toUpperCase()) > -1 ) {
                  containers[i].style.display = "";
                }
                else{
                  containers[i].style.display = "none";
                }

          }else{
              if (nombres.toUpperCase().indexOf(search.toUpperCase()) > -1 ) {

                  if (tipo_permissions.toUpperCase()==owned.toUpperCase() ) {
                      containers[i].style.display = "";
                  }else {
                    if (tipo_permissions.toUpperCase()==shared.toUpperCase() ) {
                      containers[i].style.display = "";
                    }else {
                        containers[i].style.display = "none";
                    }
                  }
              } else {
               
                  containers[i].style.display = "none";
              }
          }
      }
  });


  $(document).on("keyup","#searchherramienta_integrada",function(){

      var containers= document.getElementsByClassName("container_herramienta_integrada");

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

        var nombres= containers[i].getElementsByTagName("span")[0].innerText;
        var owned="";
        var shared="";
        var search= $(this).val(); 

        if (nombres.toUpperCase().indexOf(search.toUpperCase()) > -1 ) {
           containers[i].style.display = "";

        } else {
            containers[i].style.display = "none";
        }
          
      }
  });

   
  $(document).on("keyup change",".selecttipotrabajador",function(){

      var containers= document.getElementsByClassName("container_herramienta")
      console.log(containers.length)

      for (i = 0; i < containers.length; i++) {
          //   console.log(containers[i].getElementsByClassName("card-name")[0])
          var tipo= containers[i].getElementsByTagName("input")[0].value;
          // console.log(tipo)
          var search= $(this).val();
          if (search.toUpperCase() == "TODOS"){
               containers[i].style.display = "";
          }else{
              if (tipo.toUpperCase().indexOf(search.toUpperCase()) > -1 ) {
                  containers[i].style.display = "";
              } else {
                  containers[i].style.display = "none";
              }
          }

      }
  });

  $(document).on("keyup change",".selectherramienta",function(){

      var containers= document.getElementsByClassName("container_herramienta")
      // console.log(containers.length)

      for (i = 0; i < containers.length; i++) {
          // console.log(containers[i].getElementsByClassName("icon_option")[0].id)

          var owned="";
          var shared="";
          if( containers[i].getElementsByClassName("icon_owned")[0]){
             owned= containers[i].getElementsByClassName("icon_owned")[0].id;
          }
          if(containers[i].getElementsByClassName("icon_shared")[0]){
            shared= containers[i].getElementsByClassName("icon_shared")[0].id
          }
         
          
          var search= $(this).val();

          if (search.toUpperCase() == "TODOS"){
               containers[i].style.display = "";
          }else{
              if (owned.toUpperCase().indexOf(search.toUpperCase()) > -1 || shared.toUpperCase().indexOf(search.toUpperCase()) > -1 ) {
                  containers[i].style.display = "";
              } else {
                  containers[i].style.display = "none";
              }
          }

      }
  });


    var obj_herramienta="";
    $(document).on("click",".borrar_herramienta",function(e){
        $("#id_herramienta").val($(this).attr("data-c"))
        $("#modal_borrar_herramienta").modal('open');
        obj_herramienta= $(this).closest(".card").closest(".container_herramienta");
       

    })

   $( document ).ready(function() {
       $(document).on("click",".editar_herramienta",function(e){
          var id_herramienta= $(this).attr("data-c");
          var formdata= {
           id_herramienta: id_herramienta,
          }
          $.ajaxSetup({
            headers: {
                'X-CSRFToken':$('#csrf_token').val()
                }
            });
          $.ajax({
            url:'/herramienta/getInfo/',
            method:"POST",
            data: formdata,
            success: function(data){
                // console.log(data) 
                var descripcion= data.description;
                $('#modal_editar_herramienta').modal('open');
                $(".form_editar_herramienta #id_h").val(id_herramienta);
                $(".form_editar_herramienta #id_nombre_e").val(data.title);
                
                $("#id_observaciones_e").val(descripcion);
                M.textareaAutoResize($("#id_observaciones_e"));
                M.updateTextFields();
                
            },
            error: function(data){
                console.log(data) 
            }
          });
       

      })

   });

   $(document).on("change", ".share_tool",function(e){        
      var formData= $(e.target.closest("div.switch")).closest("form").serialize();
      console.log(formData);
      var this_ =$(this);
      $.ajaxSetup({
        headers: {
            'X-CSRFToken': $('#csrf_token').val()
            }
        });
      $.ajax({
        url:'/api/compartirHerramienta/',
        method:"POST",
        data: formData,
        success: function(data){
            // console.log(data) 
           if(data.share==true){
               this_.closest("form").closest("div").next().append('<i class="material-icons compartir_icon right tooltipped" data-position="top" data-tooltip="Compartida" style="color: grey ;" >people</i>');
           }else{
               this_.closest("form").closest("div").next().find(".compartir_icon").remove();
           }
          
            M.toast({html: data.message})
        },
        error: function(data){
            console.log(data) 
        }
      }); 
   });

    //Hide card-reveal and show the other when click outside
   var card_reveal;
   $(document).click(function(event){
      
      if ($(event.target.closest("span")).hasClass("card-title")) {
        card_reveal=""
      }else if ($(event.target.closest("div")).hasClass("card-reveal")) {

      }else if ($(event.target.closest("span")).hasClass("activator")) {

        if (card_reveal){
          card_reveal.css({"-webkit-transform":"translate(0%)","-webkit-transition":"-webkit-transform  ease-out"})
          setTimeout(function() {  
            card_reveal.css({"display":"none"}); card_reveal.parent().attr("style","overflow: visible"); card_reveal= $(event.target.closest("div")).prev(); 
          }, 200);

        }else{
          card_reveal= $(event.target.closest("div")).prev();
        }
      }else{
        if(card_reveal){
          
          if($(event.target.closest("div")).hasClass("switch")){

          }
          else{
            card_reveal.css({"-webkit-transform":"translate(0%)","-webkit-transition":"-webkit-transform  ease-out"})
            setTimeout(function() { 
              card_reveal.css({"display":"none"}); card_reveal.parent().attr("style","overflow: visible"); card_reveal=""; 
            }, 200);
          }
        }
      }
    });

</script>


{% endblock js %}