{% extends "baseAdmin.html" %}
{% load static %}
{% block titulo %}
  .::Balance de Comisiones
{% endblock titulo %}
{% block content1 %}
<script src="{% static 'est/Chart.js' %}"></script>
    <div class="container">
      <script type="text/javascript">
        $("#navBaL").attr('class','dropdown active');
        $("#navBalDT").attr('class','active');
      </script>
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="panel panel-warning">
                <div class="panel-heading"> <b>BALANCE DE COMISIONES</b></div>
                <div class="panel-body">
                  <div class="row">
                    <div class="col-md-4">
                      <div class="panel panel-warning">
                        <div class="panel-body">
                          <div class="row">
                            <p class="bg-success" align="center">
                                      <!--&nbsp;-->
                              <B >OPCIONES</B> 
                            </p>
                          </div>
                          <div class="row">
                            <br>
                          </div>
                           <div class="row">
                            <div class="col-md-8 col-md-offset-2">
                              <div class="form-group" id="CampoRadio">
                                <label class="radio-inline">
                                  <input type="radio" name="tc" id="todo" value="t" checked><b>Todo</b>
                                </label>
                                <label class="radio-inline">
                                  <input type="radio" name="tc" id="ocifina" value="o"><b> Por Oficina</b>
                                </label>
                              </div>                               
                              <p></p>
                            </div>
                          </div>
                          <div class="row" id="campoO">
                            <div class="col-md-3">
                              <h5><b>Oficina:</b></h5>
                            </div>
                            <div class="col-md-6">
                              <select class="form-control" id="comboOfi">
                              </select>
                              <p></p>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-3" align="right">
                              <h5><b>Frecuencia:</b></h5>
                            </div>
                            <div class="col-md-6">
                              <select class="form-control" id="combofr">
                                <option value="d">Dias</option>
                                <option value="m">Meses</option>
                                <option value="a">Años</option>
                              </select>
                              <p></p>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-2">
                              <h5><b>Periodo</b></h5>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-1 col-md-offset-2">
                              <h5><b>Del:</b></h5>
                            </div>
                            <div class="col-md-6">
                              <input type='text' class=" form-control" id="txtfecha1">
                              <p></p>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-1 col-md-offset-2">
                              <h5><b>Al:</b></h5>
                            </div>
                            <div class="col-md-6">
                              <input type='text' class="form-control" id="txtfecha2">
                              <p></p>
                            </div>
                          </div>
                          <div class="row">
                            <br>
                            <br>
                            <br>
                          </div>
                          <div class="row">
                            <div class="col-md-8 col-md-offset-2">
                               <button type="button" class=" btn btn-block btn-success" id="procesar">Procesar</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-8">
                      <div class="panel panel-warning">
                        <div class="panel-body">
                          <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active" id="tab1"><a href="#pg1" aria-controls="pg1" role="tab" data-toggle="tab">Todo</a></li>
                            <li role="presentation" id="tab2"><a href="#pg2" aria-controls="pg2" role="tab" data-toggle="tab">Barras</a></li>
                            <li role="presentation" id="tab3"><a href="#pg3" aria-controls="pg3" role="tab" data-toggle="tab">linea</a></li>
                            <li role="presentation" id="tab5"><a href="#pg5" aria-controls="pg5" role="tab" data-toggle="tab">Radar</a></li>
                          </ul>
                          <!-- Tab panes -->
                          <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="pg1">
                              <div class="row">
                                <br>
                              </div>
                              <div class="row">
                                <p class="bg-info" align="center">
                                  <B >GRAFICOS</B> 
                                </p>
                              </div>
                              <div class="row">
                                <br>
                              </div>
                            </div>
                            <div role="tabpanel" class="tab-pane active" id="pg2">
                              <div class="row">
                                <br>
                              </div>
                              <div class="row oculto">
                                <div class="col-md-12">
                                  <p class="bg-info" align="center">
                                    <b> BARRAS</b>
                                  </p>
                                </div> 
                              </div>
                              <div class="row oculto">
                                <div class="col-md-6 col-md-offset-3" align="center">
                                  <div class="form-group" id="RadioB">
                                    <label class="radio-inline">
                                      <input type="radio" name="rb" id="sb" value="s" checked><b>Soles</b>
                                    </label>
                                    <label class="radio-inline">
                                      <input type="radio" name="rb" id="db" value="d"><b>Dolares</b>
                                    </label>
                                  </div>
                                  <p></p>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-md-12" align="center">
                                  <div style="width: 100%; height:500px;">
                                    <canvas id="canvas1" height="400" width="600"></canvas>
                                  </div>
                                </div>
                              </div>
                              <div class="row oculto">
                                <div class="col-md-3 col-md-offset-3">
                                  <div class="alert alert-success" role="alert"align="center" style="    padding:1px;">
                                    <b>Comisiones</b>
                                  </div>
                                </div> 

                              </div>
                              
                            </div>
                            <div role="tabpanel" class="tab-pane active" id="pg3">
                              <div class="row">
                                <br>
                              </div>
                              <div class="row oculto">
                                <div class="col-md-12">
                                  <p class="bg-info" align="center">
                                    <b> LINEAS</b>
                                  </p>
                                </div> 
                              </div>
                              <div class="row oculto">
                                <div class="col-md-8 col-md-offset-2" align="center">
                                  <div class="form-group" id="RadioL">
                                    <label class="radio-inline">
                                      <input type="radio" name="rl" id="sl" value="s" checked><b>Soles</b>
                                    </label>
                                    <label class="radio-inline">
                                      <input type="radio" name="rl" id="dl" value="d"><b>Dolares</b>
                                    </label>
                                  </div>
                                  <p></p>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-md-12">
                                  <div style="width: 100%; height:500px;">
                                    <canvas id="canvas2" height="400" width="600"></canvas>
                                  </div>
                                </div>
                              </div>
                              <div class="row oculto">
                                <div class="col-md-3 col-md-offset-3">
                                  <div class="alert alert-success" role="alert"align="center" style="    padding:1px;">
                                    <b>Comisiones</b>
                                  </div>
                                </div> 
                              </div>
                            </div>
                            <div role="tabpanel" class="tab-pane active" id="pg5">
                              <div class="row">
                                <br>
                              </div>
                              <div class="row oculto">
                                <div class="col-md-12">
                                  <p class="bg-info" align="center">
                                    <b> RADAR</b>
                                  </p>
                                </div> 
                              </div>
                              <div class="row oculto">
                                <div class="col-md-6 col-md-offset-3" align="center">
                                  <div class="form-group" id="RadioR">
                                    <label class="radio-inline">
                                      <input type="radio" name="rr" id="sr" value="s" checked><b>Soles</b>
                                    </label>
                                    <label class="radio-inline">
                                      <input type="radio" name="rr" id="dr" value="d"><b>Dolares</b>
                                    </label>
                                  </div>
                                  <p></p>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-md-12">
                                  <div style="width: 100%; height:500px;">
                                    <canvas id="canvas4" height="400" width="600"></canvas>
                                  </div>
                                </div>
                              </div>
                              <div class="row oculto">
                                <div class="col-md-3 col-md-offset-3">
                                  <div class="alert alert-success" role="alert"align="center" style="    padding:1px;">
                                    <b>Comisiones</b>
                                  </div>
                                </div> 

                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row oculto">
                    <div class="col-md-12">
                      <div class="table-responsive">
                        <table class="table table-striped table-bordered">
                          <thead>
                            <tr>
                              <th>&nbsp;</th>
                              <th>Comisiones ST Soles</th>
                              <th>Comisiones ST Dolares</th>
                            </tr>
                          </thead>
                          <tbody id="listaE"></tbody>
                        </table>                         
                      </div>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
    </div>
                        <script type="text/javascript">
                        var myBar=null,myPie=null,myRadar=null,myLine=null;
                        var barChartData,lineChartData,pieData,radarChartData;
                        var array_x,array_y1,array_y2,array_y1d,array_y2d;
                        var ind=0;
                          $(document).ready(function (){
                            ajax_oficina();
                            //***********************************************************************
                            $('#txtfecha1').datetimepicker({
                                locale: 'es',
                                format: 'YYYY-MM-DD'
                              });
                            $('#txtfecha2').datetimepicker({
                                locale: 'es',
                                format: 'YYYY-MM-DD'
                              });
                             $('#combofr').change(function(){
                                $('#txtfecha1').prop('value',null);
                                $('#txtfecha2').prop('value',null);
                                if($(this).val()=='d'){
                                    $('#txtfecha1').data("DateTimePicker").destroy();
                                    $('#txtfecha2').data("DateTimePicker").destroy();
                                    $('#txtfecha1').datetimepicker({
                                      locale: 'es',
                                      format: 'YYYY-MM-DD'
                                    });
                                    $('#txtfecha2').datetimepicker({
                                      locale: 'es',
                                      format: 'YYYY-MM-DD'
                                    });
                                }
                                else{
                                  if($(this).val()=='m'){
                                      $('#txtfecha1').data("DateTimePicker").destroy();
                                      $('#txtfecha2').data("DateTimePicker").destroy();
                                      $('#txtfecha1').datetimepicker({
                                        locale: 'es',
                                        format: 'YYYY-MM'
                                      });
                                      $('#txtfecha2').datetimepicker({
                                        locale: 'es',
                                        format: 'YYYY-MM'
                                      });
                                  }
                                  else{
                                      $('#txtfecha1').data("DateTimePicker").destroy();
                                      $('#txtfecha2').data("DateTimePicker").destroy();
                                      $('#txtfecha1').datetimepicker({
                                        locale: 'es',
                                        format: 'YYYY'
                                      });
                                      $('#txtfecha2').datetimepicker({
                                        locale: 'es',
                                        format: 'YYYY'
                                      });
                                  }
                                }
                              });
                            //
                            function ajax_balance_todo(){
                              $.ajax({
                                data:{'fre':$("#combofr").val(),"F1":$("#txtfecha1").val(),"F2":$("#txtfecha2").val()},
                                url:'/BalanceDT_fechas_todo_oficinas_ajax/',
                                type:'GET',
                                dataType:'json',
                                success: function(data){
                                  var array_nombres=[],array_is=[],array_es=[],array_id=[],array_ed=[];
                                  var fis=0,fes=0,fid=0,fed=0;
                                  var html="";
                                  var html1="";
                                  $("#Combo_of_t").html("");
                                  $("#listaE").html("");
                                  for(var i=0;i<data.length;i++){
                                    array_nombres.push(data[i].oficina);
                                    fis=parseFloat(data[i].is);
                                    fid=parseFloat(data[i].id);
                                    html += '<option value="'+i+'">'+data[i].oficina+'</option>';
                                    html1 += '<tr id="'+i+'"><th>'+data[i].oficina+'</th><td>'+data[i].is+'</td><td>'+data[i].id +'</td></tr>';
                                    array_is.push(data[i].is);
                                    array_id.push(data[i].id);
                                  }
                                  $("#Combo_of_t").html(html);
                                  $("#listaE").html(html1);
                                  array_x=array_nombres;
                                  array_y1= array_is;

                                  array_y1d= array_id;

                                  llenar_datos_barras(array_x,array_y1);
                                  llenar_datos_linea(array_x,array_y1);
                                  llenar_datos_radar(array_x,array_y1);
                                }
                              });
                            };
                            //
                            function ajax_balance_oficina(){
                              $.ajax({
                                data:{'fre':$("#combofr").val(),"F1":$("#txtfecha1").val(),"F2":$("#txtfecha2").val(),'of':$("#comboOfi").val()},
                                url:'/BalanceDT_fechas_oficina_ajax/',
                                type:'GET',
                                dataType:'json',
                                success: function(data){
                                  var array_nombres=[],array_is=[],array_es=[],array_id=[],array_ed=[];
                                  var fis=0,fes=0,fid=0,fed=0;
                                  var html="";
                                  var html1="";
                                  $("#Combo_of_t").html("");
                                  $("#listaE").html("");
                                  for(var i=0;i<data.length;i++){
                                    array_nombres.push(data[i].f);
                                    fis=parseFloat(data[i].is);
                                    fid=parseFloat(data[i].id);
                                    html += '<option value="'+i+'">'+data[i].f+'</option>';
                                    html1 += '<tr id="'+i+'"><th>'+data[i].f+'</th><td>'+data[i].is+'</td><td>'+data[i].id +'</td></tr>';
                                    array_is.push(data[i].is);
                                    array_id.push(data[i].id);
                                  }
                                  array_x=array_nombres;
                                  $("#Combo_of_t").html(html);
                                  $("#listaE").html(html1);
                                  array_y1= array_is;
                                  array_y1d= array_id;
                                  llenar_datos_barras(array_x,array_y1);
                                  llenar_datos_linea(array_x,array_y1);
                                  llenar_datos_radar(array_x,array_y1);
                                }
                              });
                            };
                            //
                            function ajax_oficina(){
                              $.ajax({
                                url:'/Admin/oficinas_ajax/',
                                //async:false,
                                type:'GET',
                                dataType:'json',
                                success: function(data){
                                var html ="";
                                  $("#ComboOfi").html('');
                                  for(var i=0;i<data.length;i++){
                                    html += '<option value="'+data[i].pk+'">'+data[i].nombre_oficina+'</option>';
                                  }
                                  $('#comboOfi').html(html);
                                }
                              });
                            };
                            //
                            $("#campoO").hide();
                            $("#CampoRadio").click(function(){
                              if($('input:radio[name=tc]:checked').val()=="t"){
                                $("#campoO").hide();
                              }
                              else{
                                $("#campoO").show();
                              }
                            })
                            //
                            $("#RadioB").click(function(){
                              if($('input:radio[name=rb]:checked').val()=="s"){
                                llenar_datos_barras(array_x,array_y1);
                              }
                              else{
                                llenar_datos_barras(array_x,array_y1d);
                              }
                            })
                            $("#RadioL").click(function(){
                              if($('input:radio[name=rl]:checked').val()=="s"){
                                llenar_datos_linea(array_x,array_y1);
                              }
                              else{
                                llenar_datos_linea(array_x,array_y1d);
                              }
                            })
                            $("#RadioR").click(function(){
                              if($('input:radio[name=rr]:checked').val()=="s"){
                                llenar_datos_radar(array_x,array_y1,array_y2);
                              }
                              else{
                                llenar_datos_radar(array_x,array_y1d,array_y2d);
                              }
                            })
                            //

                            $("#procesar").click(function(){
                              $('.nav-tabs a[href="#pg1"]').tab('show');
                              $(".oculto").hide();
                               $("#pg1").attr('class','tab-pane active');
                               $("#pg2").attr('class','tab-pane active');
                               $("#pg3").attr('class','tab-pane active');
                               $("#pg5").attr('class','tab-pane active');
                              if($('input:radio[name=tc]:checked').val()=="t"){
                                ajax_balance_todo();
                              }
                              else{
                                ajax_balance_oficina();
                              }
                            })
                            $(".oculto").hide();
                            //***************************************************************************
                            var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
                            // ----------------------------BARRAS------------------------------------
                            barChartData = {
                                labels : ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio"],
                                datasets : [
                                  {
                                    fillColor : "rgba(220,220,220,0.5)",
                                    strokeColor : "rgba(220,220,220,0.8)",
                                    highlightFill: "rgba(220,220,220,0.75)",
                                    highlightStroke: "rgba(220,220,220,1)",
                                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                                  },
                                  {
                                    fillColor : "rgba(151,187,205,0.5)",
                                    strokeColor : "rgba(151,187,205,0.8)",
                                    highlightFill : "rgba(151,187,205,0.75)",
                                    highlightStroke : "rgba(151,187,205,1)",
                                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                                  }
                                ]

                              }
                               var ctx = document.getElementById("canvas1").getContext("2d");
                                  myBar = new Chart(ctx).Bar(barChartData, {
                                    responsive : true
                                  });
                            function llenar_datos_barras(array_x1,array_y11){
                               barChartData = {
                                //labels : ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio"],
                                labels : array_x1,
                                datasets : [
                                  {
                                    fillColor : "rgba(155,185,131,0.5)",
                                    strokeColor : "rgba(155,185,131,0.8)",
                                    highlightFill: "rgba(155,185,131,0.75)",
                                    highlightStroke: "rgba(155,185,131,1)",
                                    data : array_y11
                                  }
                                ]

                              }
                              myBar.destroy();
                              var ctx = document.getElementById("canvas1").getContext("2d");
                              myBar = new Chart(ctx).Bar(barChartData, {
                                responsive : true
                              });
                            }
                            //-------------------------------LINEA-----------------------------------
                            lineChartData = {
                                labels : ["January","February","March","April","May","June","July"],
                                datasets : [
                                  {
                                    label: "My First dataset",
                                    fillColor : "rgba(220,220,220,0.2)",
                                    strokeColor : "rgba(220,220,220,1)",
                                    pointColor : "rgba(220,220,220,1)",
                                    pointStrokeColor : "#fff",
                                    pointHighlightFill : "#fff",
                                    pointHighlightStroke : "rgba(220,220,220,1)",
                                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                                  },
                                  {
                                    label: "My Second dataset",
                                    fillColor : "rgba(151,187,205,0.2)",
                                    strokeColor : "rgba(151,187,205,1)",
                                    pointColor : "rgba(151,187,205,1)",
                                    pointStrokeColor : "#fff",
                                    pointHighlightFill : "#fff",
                                    pointHighlightStroke : "rgba(151,187,205,1)",
                                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                                  }
                                ]

                              }
                              var ctx1 = document.getElementById("canvas2").getContext("2d");
                                  myLine = new Chart(ctx1).Line(lineChartData, {
                                    responsive: true
                                  });
                              function llenar_datos_linea(array_x1,array_y11){
                                lineChartData = {
                                labels : array_x1,
                                datasets : [
                                    {
                                      label: "My First dataset",
                                      fillColor : "rgba(155,185,131,0.2)",
                                      strokeColor : "rgba(155,185,131,1)",
                                      pointColor : "rgba(155,185,131,1)",
                                      pointStrokeColor : "#fff",
                                      pointHighlightFill : "#fff",
                                      pointHighlightStroke : "rgba(155,185,131,1)",
                                      data : array_y11
                                    }
                                  ]
                                }
                                  myLine.destroy();
                                  var ctx1 = document.getElementById("canvas2").getContext("2d");
                                  myLine = new Chart(ctx1).Line(lineChartData, {
                                    responsive: true
                                  });
                              }
                              //------------------------------RADAR---------------------
                              radarChartData = {
                              labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
                              datasets: [
                                {
                                  label: "My First dataset",
                                  fillColor: "rgba(220,220,220,0.2)",
                                  strokeColor: "rgba(220,220,220,1)",
                                  pointColor: "rgba(220,220,220,1)",
                                  pointStrokeColor: "#fff",
                                  pointHighlightFill: "#fff",
                                  pointHighlightStroke: "rgba(220,220,220,1)",
                                  data: [65,59,90,81,56,55,40]
                                },
                                {
                                  label: "My Second dataset",
                                  fillColor: "rgba(151,187,205,0.2)",
                                  strokeColor: "rgba(151,187,205,1)",
                                  pointColor: "rgba(151,187,205,1)",
                                  pointStrokeColor: "#fff",
                                  pointHighlightFill: "#fff",
                                  pointHighlightStroke: "rgba(151,187,205,1)",
                                  data: [28,48,40,19,96,27,100]
                                }
                              ]
                            };
                            function llenar_datos_radar(array_x1,array_y11){
                              radarChartData = {
                                labels: array_x1,
                                datasets: [
                                  {
                                    label: "My First dataset",
                                    fillColor: "rgba(155,185,131,0.2)",
                                    strokeColor: "rgba(155,185,131,1)",
                                    pointColor: "rgba(155,185,131,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(155,185,131,1)",
                                    data: array_y11
                                  }
                                ]
                              };
                                myRadar.destroy();
                                myRadar = new Chart(document.getElementById("canvas4").getContext("2d")).Radar(radarChartData, {
                                    responsive: true
                                  });
                            }
                            //-------------------------------------------------------------------------
                                 
                                  myRadar = new Chart(document.getElementById("canvas4").getContext("2d")).Radar(radarChartData, {
                                    responsive: true
                                  }); 
                            //--------------------------------------------------------------------------
                              $("#tab1").click(function(){
                                $(".oculto").hide();
                                $("#pg1").attr('class','tab-pane active');
                                $("#pg2").attr('class','tab-pane active');
                                $("#pg3").attr('class','tab-pane active');
                                $("#pg5").attr('class','tab-pane active');
                              })
                              $("#tab2").click(function(){
                                $(".oculto").show();
                                if(myBar==null){
                                  var ctx = document.getElementById("canvas1").getContext("2d");
                                  myBar = new Chart(ctx).Bar(barChartData, {
                                    responsive : true
                                  });
                                }
                                else{
                                  myBar.render();
                                }
                                
                              })
                              $("#tab3").click(function(){
                                $(".oculto").show();
                                if(myLine==null){
                                  var ctx1 = document.getElementById("canvas2").getContext("2d");
                                  myLine = new Chart(ctx1).Line(lineChartData, {
                                    responsive: true
                                  });
                                }
                                else{
                                  myLine.render();
                                }
                                
                              })
                              $("#tab5").click(function(){
                                $(".oculto").show();
                                if(myRadar==null){
                                  myRadar = new Chart(document.getElementById("canvas4").getContext("2d")).Radar(radarChartData, {
                                    responsive: true
                                  });
                                }
                                else{
                                  myRadar.render();
                                }
                                
                                
                              })
                              //------------------------------------------------------
                             
                            })
                          </script>
{% endblock content1 %}