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

{% block content %}

    <style type="text/css">
        #sidenav-atributes {
            /*position: fixed;*/

            right: 0;
            left: auto;

        }
        .sidenav{
            width: 250px;
            top: 95%;
            transition: ease .2s;
            z-index: 2 !important;
        }
        .parameter{
            cursor: grab ;
        }
        .container_tables table{
            border: 1px  solid lightgrey !important;
            border-collapse: separate;
        }

        .container_tables table:hover{
            border: 1px solid grey !important;
            border-style: dashed !important;
            transition: ease .2s;
            cursor: pointer;
         }
        .chart:hover{
            border: 1px solid grey;
            border-style: dashed;
            transition: ease .2s;
            cursor: pointer;
        }
        body{
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .custommenu{
            opacity: 1;
        }
        .custommenu_parameters{
            opacity: 1;
        }
        .edit_title{
            cursor: pointer;
        }
        .save_title_herramienta{
            cursor: pointer;
        }

      /*  header, main, footer {
          padding-right: 250px !important;
        }*/

        @media only screen and (max-width : 600px) {
         .herramienta_title {
            font-size: 24px;
          }
        }

        .draginicia{
            border-color: darkgrey;
            border-style: dashed;
            border-width: 2px;
            padding: 10px;
            background-color: white;
        }
        .container_parameters{
            min-height: 50px;
            width: 100%;
            /*height: auto;*/
            display:table
        }
    </style>

    <ul id="sidenav-atributes" class="sidenav sidenav-fixed animate fadeInUp">
        <li><a class="waves-teal maximize_tools" href=""> <i class="material-icons mishowhide">arrow_drop_up</i> Herramientas</a></li>
        <li><div class="divider"></div></li>
        <li><a class="subheader">Parámetros</a></li>
        <li><a class="waves-effect object_parameter" data-tag="ventas" data-type="select" draggable="true"><i class="material-icons parameter">drag_indicator</i><span>Ventas</span></a></li>
        <li><a class="waves-effect object_parameter" data-tag="viveros" data-type="select_multiple" draggable="true"><i class="material-icons parameter">drag_indicator</i><span>Viveros</span></a></li>
        <li><a class="waves-effect object_parameter" data-tag="periodos" data-type="date_range" draggable="true"><i class="material-icons parameter">drag_indicator</i><span>Periodo</span></a></li>
         <li><a class="waves-effect object_parameter" data-tag="periodos" data-type="date" draggable="true"><i class="material-icons parameter">drag_indicator</i><span>Mes</span></a></li>
        <li><a class="waves-effect object_parameter" data-tag="periodos" data-type="date" draggable="true"><i class="material-icons parameter">drag_indicator</i><span>año</span></a></li>
        <li><a class="waves-effect object_parameter" data-tag="estados" data-type="select_multiple" draggable="true"><i class="material-icons parameter">drag_indicator</i><span>Estado</span></a></li>
        <li><a class="waves-effect object_parameter" data-tag="status" data-type="select" draggable="true"><i class="material-icons parameter">drag_indicator</i><span>Status</span></a></li>
        <li><a class="waves-effect object_parameter" data-tag="especies_de_plantas" data-type="select_multiple" draggable="true"><i class="material-icons parameter">drag_indicator</i><span>Especies de plantas</span></a></li>

        <li><div class="divider"></div></li>
        <li><a class="subheader">Visualización</a></li>    
        <li><a class="waves-effect" href=""><i class="material-icons">border_all</i>Tabla</a></li>
         <li class="no-padding">
            <ul class="collapsible collapsible-accordion">
                <li class="bold">
                    <a class="collapsible-header waves-effect waves-teal" ><i class="material-icons">insert_chart</i>Graficas</div></a>
                    <div class="collapsible-body">
                        <ul>
                          <li><a href="/censo"><i class="material-icons">bar_chart</i>Barras</a></li>
                          <li><a href="/alimentacion"><i class="material-icons">timeline</i>Linea</a></li>
                          <!-- <li><a href="/vacunacion"><i class="material-icons">colorize</i>Area polar</a></li> -->
                          <li><a href="/vacunacion"><i class="material-icons">donut_large</i>Dona</a></li>
                          <li><a href="/vacunacion"><i class="material-icons">pie_chart</i>Pie</a></li>
                          <li><a href="/vacunacion"><i class="material-icons">bubble_chart</i>Burbuja</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </li>
        <!-- <li><a class="waves-effect" href=""><i class="material-icons">trending_up</i>Tendencia</a></li> -->
    </ul>


<div class="container-fluid"> 
  
    <center> <h3 class="herramienta_title"><span>Análisis completo</span>  <i class="material-icons blue-text edit_title">edit</i> </h3> </center>
    
    <div class="row hide" id="title_herramienta_container" >
        <div class="col s12 m6 l2 offset-l5 offset-m3" >
            <div class="input-field ">
                <i class="material-icons prefix blue-text save_title_herramienta ">save</i>
                <input type="text" id="id_title_herramienta" name="title" value="">
            </div>
        </div>
    </div>
   
    
    <div class="row" style="border:1px dashed lightgrey">
        
       
         <div class="container_parameters">
             <center><p>Parametros</p></center>
            <div class="col s6 m3 l2">
                <div class="input-field ">
                    <select multiple>
                        <option  disabled >Seleccionar Vivero</option>
                        <option value="0">Todos</option>
                        <option value="1">Viero Ornacol </option>
                        <option value="2">Vivero Massangeana</option>
                        <option value="3">Aurelio Alcaraz</option>
                        <option value="4">Rafael pinto Flores</option>
                        <option value="5">Juan fernandez</option>
                        <option value="6">Externos</option>
                    </select>
                    <label>Viveros</label>
                </div>
            </div>

            <div class="col s6 m3 l2">
                <div class="input-field ">
                    <select multiple>
                      <option value="" disabled selected>Selecionar especie</option>
                      <option value="0">Todas</option>
                      <option value="1">Adelfa enano</option>
                      <option value="2">Adelfa comun</option>
                      <option value="3">Bambu africano</option>
                      <option value="4">Croto camelon</option>
                      <option value="5">Ficus hule</option>
                      <option value="6">Helecho macho </option>
                      <option value="7">Cola de caballo</option>
                      <option value="8">Palma estrella</option>
                    </select>
                    <label>Especies </label>
                </div>
            </div>

            <div class="col s6 m3 l1">
                <div class="input-field ">
                    <input type="text" class="datepicker" placeholder="Desde ">
                    <label>Desde la fecha</label>
                </div>
            
            </div>
            <div class="col s6 m3 l1">
                 <div class="input-field ">
                    <input type="text" class="datepicker" placeholder="Hasta ">
                    <label>Hasta la fecha</label>
                </div>
            </div>

            <div class="col s6 m3 l2">
                <div class="input-field ">
                    <select multiple>
                      <option value="" disabled selected>Seleccionar Estado</option>
                      <option value="0">Todos</option>
                      <option value="1">Colima</option>
                      <option value="2">Estado de méxico</option>
                      <option value="3">Puebla</option>
                      <option value="4">Jalisco</option>
                    </select>
                    <label>Estados</label>
                </div>
            </div>

            <div class="col s6 m3 l2">              
                <div class="input-field ">
                    <select >
                      <option value="" disabled selected>Selecionar status</option>
                      <option value="1">Surtido</option>
                      <option value="2">No surtido</option>
                      <option value="3">Cancelado</option>
                    </select>
                    <label>Estatus del pedido</label>
                </div>
            </div>
            <div class="col s6 m3 l2">        
                <div class="input-field ">
                    <select >
                        <option value="" disabled selected>Seleccionar venta</option>
                        <option value="1">Cuando se vendio menos</option>
                        <option value="2">Cuando se vendio mas</option>
                        <option value="3">Planta menos vendida</option>
                        <option value="3">Planta más vendida</option>
                    </select>
                    <label>Tipo de Venta</label>
                </div>
            </div>

            
           

        </div>
        
    </div>
  

 

    <div class="container row container_tables "  >
      
            <div class="col s12 m6 l6 offset-l3 offset-m3" >
                <table class="highlight centered responsive-table " data-c="1"   >
                    <thead>
                      <tr>
                          <th>Vivero</th>
                          <th>Especie</th>
                          <th>fecha</th>
                          <th>Estado</th>
                          <th>Estatus</th>
                     
                    
                      </tr>
                    </thead>

                    <tbody>
                      <tr>
                        <td>Alvin</td>
                        <td>Adelfa</td>
                        <td>01/01/2019</td>
                        <td>Colima</td>
                        <td>Surtido</td>
                     
                      
                      </tr>
                      <tr>
                        <td>Alan</td>
                        <td>Ficus</td>
                        <td>01/01/2019</td>
                        <td>Colima</td>
                        <td>Surtido</td>
                   
                  
                      </tr>
                      <tr>
                        <td>Jonathan</td>
                        <td>Palama</td>
                        <td>01/01/2019</td>
                        <td>Colima</td>
                        <td>Surtido</td>
                     
                    
                      </tr>
                    </tbody>
                  </table>
            </div>

       
    </div>


    <div class="container row container_charts">
 
            <div class="col s12 m6 l6 offset-l3 offset-m3   chart" >
                <canvas id="myChart"  data-c="2"></canvas>   
            </div>
           <!--  <div class="col s12 m6 l6  chart">
                <canvas id="myChart1" width="10" height="10"></canvas>  
            </div> -->
        
    </div>

	
</div>


<ul class='dropdown-content custommenu ' onmousedown="return false">
    <li><a href="#!" class="black-text" >Opciones</a></li>
    <li class="divider" tabindex="-1"></li>
    <li><a href="" class="red-text remove_herramienta"><i class="material-icons ">clear</i>Remover</a></li>
    <li><a href="" class="green-text limpiar_herramienta"><i class="material-icons ">delete_sweep</i>Limpiar</a></li>
</ul>
      
<ul class='dropdown-content custommenu_parameters ' onmousedown="return false">
    <li><a href="#!" class="black-text" >Opciones</a></li>
    <li class="divider" tabindex="-1"></li>
    <li><a href="" class="red-text rmv_parametro"><i class="material-icons ">clear</i>Remover</a></li>
    <li><a href="" class="green-text limpiar_parametro"><i class="material-icons ">delete_sweep</i>Limpiar</a></li>
</ul>  

{% endblock %}

{% block js %}

 <script>


    

    $(document).on("click", ".minimize_tools", function(e){
        e.preventDefault()
        // $("#sidenav-atributes").hide();
        // $("header,main, footer ").attr("style","padding-right:0 !important");
        // $("#sidenav-atributes ").attr("style","padding-left:30px !important");
        $(".sidenav").attr("style","top: 95%;");
        $("#sidenav-atributes  .mishowhide").text("arrow_drop_up");
        $(this).removeClass("minimize_tools");
        $(this).addClass(" maximize_tools");
    });  

    $(document).on("click", ".maximize_tools", function(e){
        e.preventDefault()
        // $("header,main, footer ").attr("style","padding-right: 250px !important;");
        $(".sidenav").attr("style","top: 0");
        $("#sidenav-atributes .mishowhide").text("arrow_drop_down");
        $(this).removeClass("maximize_tools");
        $(this).addClass("minimize_tools");


    });  
   

  

    // let menuVisible = false;

   const custommenu = document.querySelector(".custommenu");
   const custommenu_parameters = document.querySelector(".custommenu_parameters");

   var currentItem="";

    // function toggleMenu(command, opacity, custommenu_selected) {
    //     custommenu_selected.style.display = command;
    //     custommenu_selected.style.opacity = opacity;


    // };

    function setPosition(left, top, custommenu_selected, name) {

        // var custommenu = $(".custommenu");
        custommenu_selected.style.left = left+10+'px';
        custommenu_selected.style.top = top+'px';
        // custommenu.attr("style"," left:"+left+"px !important; right:"+top+"px !important") 
        
        $("."+name).show();
        // toggleMenu("block", 1);
    };

    window.addEventListener("click", e => {
         $(".custommenu").hide();
         $(".custommenu_parameters").hide();
    });


    $( "body" ).contextmenu(function(e) {
        e.preventDefault()
    })
    
    $( "table, canvas" ).contextmenu(function(e) {
        e.preventDefault()

        var name= "custommenu";
        $("."+name).hide();

        currentItem= $(this);
        // alert($(this).attr("data-c"))
        var left= e.pageX;
        var top= e.pageY;

        setPosition(left, top, custommenu, name);

        
    });

     $( "select" ).contextmenu(function(e) {
        e.preventDefault()
        alert("hey")
        var name= "custommenu_parameters";
        $("."+name).hide();

        currentItem= $(this);
        // alert($(this).attr("data-c"))
        var left= e.pageX;
        var top= e.pageY;

        setPosition(left, top, custommenu_parameters, name);

    });

    $(document).on("click",".edit_title",function(e){
        $("#title_herramienta_container").toggleClass("hide");
        $(".herramienta_title").toggleClass("hide");
        $("#id_title_herramienta").val($(".herramienta_title span").text());
        
    });
    $(document).on("click",".save_title_herramienta",function(e){
        var title= $("#id_title_herramienta").val()
        $(".herramienta_title span").text(title);
        $("#id_title_herramienta").val("");

        $("#title_herramienta_container").toggleClass("hide");
        $(".herramienta_title").toggleClass("hide");
        
    });
    $(document).on("click", ".remove_herramienta", function(e){
        e.preventDefault();
    
        currentItem.remove();
    });
    $(document).on("click", ".rmv_parametro", function(e){
        
    });


    
</script>

<script>


var ctx = $("#myChart");
var ctx1 = $("#myChart1");


var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: 'Ventas',
            data: [12, 19, 3, 5, 2, 3],
            options: {
		        title: {
		            display: true,
		            text: 'Custom Chart Title'
		        }
		    },
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
var labels=[
"Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Orange", "Orange", "Orange"
]
    

</script>

<!-- Drag and drop -->
<script type="text/javascript">

 
    load_parameters();
    function load_parameters(){
        var objetos = document.getElementsByClassName('object_parameter');

        for( i in objetos){
            var objeto =objetos[i];
            console.log(objeto)

            if(typeof objeto.style !="undefined"){

                objeto.addEventListener('dragstart',dragIniciaParameter, false);
                objeto.addEventListener('dragend',dragTerminaParameter, false);
            }
        }
        var container_parameters= document.getElementsByClassName('container_parameters');
        for( i in container_parameters){
            var objeto =container_parameters[i];
            // console.log(objeto)
            if(typeof objeto.style !="undefined"){
                
                 objeto.addEventListener('drop',dropobjeton,false);
                objeto.addEventListener('dragover',dragsobren,false);
                objeto.addEventListener('dragleave',dragsalion,false);
            }
        }
        
    }
    function dragIniciaParameter(e) {
         // console.log("iniciado drag parametro con id:"+e.target)
        $('.container_parameters').addClass('draginicia');
        $('.container_parameters p').text("Insertar parametro").attr("style","font-weight: 500; let")
        var padre =document.createElement("div");
        var clonobjecto= this.cloneNode(true);
        padre.appendChild(clonobjecto);
        // console.log($(this).text())
        e.dataTransfer.setData('herramienta_name',$(this).attr("data-tag"));
        e.dataTransfer.setData('herramienta_type',$(this).attr("data-type"));
        elementnino= this;
        // $('.div-container-niño').addClass('draginician');
        // $('.soltarn').removeClass('NOasign');
        // $('.soltarn').addClass('draginician');
    }
    function dragTerminaParameter(e) {
        $('.container_parameters').removeClass('draginicia');
        $('.container_parameters p').text("Parametros")
        return false;
    }

    function dropobjeton(e) {
        e.preventDefault();
        var nameh = e.dataTransfer.getData('herramienta_name'); //nombre de la herramienta
        var typeh = e.dataTransfer.getData('herramienta_type'); //tipo de herramienta

        if(nameh=="ventas"){
        	var elements= getVentas();
        }else if(nameh=="viveros"){
        	var elements= getViveros();
        }else if(nameh=="periodos"){      
        	var elements= getPeriodos();
        }else if(nameh=="estados"){
        	var elements= getEstados();
        }else if(nameh=="status"){
        	var elements= getStatus();
        }else if(nameh=="especies_de_plantas"){
        	var elements= getEspecies();
        }
        
        if(typeh=="select"){
        	
        	var formattedSelect= '<div class="col s6 m3 l2">'+
                '<div class="input-field ">'+
                    '<select >'+
                        elements
                    '</select>'+
                    '<label class="active">'+nameh+'</label>'+
                '</div>'+
            '</div>';
            $(".container_parameters").append(formattedSelect);
          
            $('select').formSelect();

        }else if(typeh=="select_multiple"){
        	var formattedSelect= '<div class="col s6 m3 l2">'+
                '<div class="input-field ">'+
                    '<select multiple>'+
                        elements
                    '</select>'+
                    '<label class="active">'+nameh+'</label>'+
                '</div>'+
            '</div>';

             $(".container_parameters").append(formattedSelect);
              $('select').formSelect();

        }else if(typeh=="date"){

        	$(".container_parameters").append(elements);
              $('.datepicker').datepicker();

        }else if(typeh=="date_range"){
        	$(".container_parameters").append(elements);
             $('.datepicker').datepicker();
        }   
        
    }
    function dragsobren(e) {
        e.preventDefault();
        this.classList.add('sobren');
         console.log('this.id:'+this.id)

         return false;
    }
    function dragsalion(e) {
        e.preventDefault();
        this.classList.remove('sobren');
        return false;
    }


    // Pruebas 
    function getViveros(){

    	var viveros='<option  disabled selected>Seleccionar Vivero</option>'+
                    '<option value="0">Todos</option>'+
                    '<option value="1">Viero Ornacol </option>'+
                    '<option value="2">Vivero Massangeana</option>'+
                    '<option value="3">Aurelio Alcaraz</option>'+
                    '<option value="4">Rafael pinto Flores</option>'+
                    '<option value="5">Juan fernandez</option>'+
                    '<option value="6">Externos</option>';
    	return viveros;
    }

    function getVentas(){
    	var ventas='<option value="" disabled selected>Seleccionar venta</option>'+
                    '<option value="1">Cuando se vendio menos</option>'+
                    '<option value="2">Cuando se vendio mas</option>'+
                    '<option value="3">Planta menos vendida</option>'+
                    '<option value="3">Planta más vendida</option>';

    	return ventas;
    }

    function getEspecies(){
    	var especies='<option value="" disabled selected>Selecionar especie</option>'+
                   '<option value="0">Todas</option>'+
                   '<option value="1">Adelfa enano</option>'+
                   '<option value="2">Adelfa comun</option>'+
                   '<option value="3">Bambu africano</option>'+
                   '<option value="4">Croto camelon</option>'+
                   '<option value="5">Ficus hule</option>'+
                   '<option value="6">Helecho macho </option>'+
                   '<option value="7">Cola de caballo</option>'+
                   '<option value="8">Palma estrella</option>';
    	return especies;
    }

    function getPeriodos(){

        var periodo='<div class="col s6 m3 l1">'+
                        '<div class="input-field ">'+
                            '<input type="text" class="datepicker" placeholder="Desde">'+
                            '<label class="active">Desde la fecha</label>'+
                        '</div>'+
                    '</div>'+
                    '<div class="col s6 m3 l1">'+
                         '<div class="input-field ">'+
                            '<input type="text" class="datepicker" placeholder="Hasta">'+
                            '<label class="active">Hasta la fecha</label>'+
                        '</div>'+
                    '</div>';

        return periodo;
    }
    function getEstados(){
        var estados= '<option value="" disabled selected>Seleccionar Estado</option>'+
                      '<option value="0">Todos</option>'+
                      '<option value="1">Colima</option>'+
                      '<option value="2">Estado de méxico</option>'+
                      '<option value="3">Puebla</option>'+
                      '<option value="4">Jalisco</option>';   
        return estados;
    }

    function getStatus(){
        var status = '<option value="" disabled selected>Selecionar status</option>'+
                      '<option value="1">Pendiente</option>'+
                      '<option value="2">Surtido</option>'+
                      '<option value="3">Cancelado</option>';

        return status;
    }

    

</script>

{% endblock %}