{% extends "baseAdmin.html" %}
{% load static %}
{% block titulo %}
  .::Balance de Compra Dolar
{% endblock titulo %}
{% block content1 %}
<script src="{% static 'est/Chart.js' %}"></script>
    <div class="container">
      <script type="text/javascript">
        $("#navBaL").attr('class','dropdown active');
        $("#navIEDo").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 COMPRA / VENTA DE DOLARES</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 btn-sm" id="procesar">Procesar</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-8">
                      <div class="panel panel-warning">
                        <div class="panel-body">
                          <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">
                            <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>Inversion</b>
                              </div>
                            </div> 
                            <div class="col-md-3">
                              <div class="alert alert-info" role="alert"align="center" style="padding:1px;">
                                <b>Beneficio</b>
                              </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>Compra</th>
                              <th>Promedio</th>
                              <th>Inversion S/.</th>
                              <th>Venta</th>
                              <th>Promedio</th>
                              <th>Beneficio S/.</th>
                              <th>Utilidad S/.</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:'/Balance_cv_do_fechas_todo_oficinas_ajax/',
                                type:'GET',
                                dataType:'json',
                                success: function(data){
                                  var array_nombres=[],array_is=[],array_es=[];
                                  var fha=0,fde=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);
                                    fde=parseFloat(data[i].compra);
                                    fha=parseFloat(data[i].venta);
                                    //html += '<option value="'+i+'">'+data[i].oficina+'</option>';
                                    html1 += '<tr id="'+i+'"><th>'+data[i].oficina+'</th><td>'+data[i].monto_compra+'</td><td>'+data[i].tc_compra+'</td><td>'+data[i].compra+'</td><td class="warning">'+data[i].monto_venta +'</td><td>'+data[i].tc_venta+'</td><td>'+data[i].venta+'</td><td class="warning">'+data[i].bene+'</td></tr>';
                                    array_is.push(data[i].compra);
                                    array_es.push(data[i].venta);
                                  }
                                  $("#Combo_of_t").html(html);
                                  $("#listaE").html(html1);
                                  array_x=array_nombres;
                                  array_y1= array_is;
                                  array_y2=array_es;
                                  llenar_datos_barras(array_x,array_y1,array_y2);
                                  //llenar_datos_linea(array_x,array_y1,array_y2);
                                  //llenar_datos_radar(array_x,array_y1,array_y2);
                                  //llenar_datos_pie(array_x[0],array_y1[0],array_y2[0]);
                                  $(".oculto").show();
                                }
                              });
                            };
                            //
                            function ajax_balance_oficina(){
                              $.ajax({
                                data:{'fre':$("#combofr").val(),"F1":$("#txtfecha1").val(),"F2":$("#txtfecha2").val(),'of':$("#comboOfi").val()},
                                url:'/Balance_cv_do_fechas_oficina_ajax/',
                                type:'GET',
                                dataType:'json',
                                success: function(data){
                                  var array_nombres=[],array_is=[],array_es=[];
                                  var fha=0,fde=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);
                                    fde=parseFloat(data[i].compra);
                                    fha=parseFloat(data[i].venta);
                                    //html += '<option value="'+i+'">'+data[i].f+'</option>';
                                    html1 += '<tr id="'+i+'"><th>'+data[i].f+'</th><td>'+data[i].monto_compra+'</td><td>'+data[i].tc_compra+'</td><td>'+data[i].compra+'</td><td class="warning">'+data[i].monto_venta +'</td><td>'+data[i].tc_venta+'</td><td>'+data[i].venta+'</td><td class="warning">'+data[i].bene+'</td></tr>';
                                    array_is.push(data[i].compra);
                                    array_es.push(data[i].venta);
                                  }
                                  array_x=array_nombres;
                                  $("#Combo_of_t").html(html);
                                  $("#listaE").html(html1);
                                  array_y1= array_is;
                                  array_y2=array_es;
                                  llenar_datos_barras(array_x,array_y1,array_y2);
                                  //llenar_datos_linea(array_x,array_y1,array_y2);
                                  //llenar_datos_radar(array_x,array_y1,array_y2);
                                  //llenar_datos_pie(array_x[0],array_y1[0],array_y2[0]);
                                  $(".oculto").show();
                                }
                              });
                            };
                            //
                            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();
                              }
                            })
                            //
                            /*
                            $("#Combo_of_t").change(function(){
                              ind = parseInt($(this).val());
                              llenar_datos_pie(array_x[ind],array_y1[ind],array_y2[ind]);
                            })
                            */
                            $("#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');
                               $("#pg4").attr('class','tab-pane active');
                               $("#pg5").attr('class','tab-pane active');
                              */
                              $(".oculto").hide();
                              if($('input:radio[name=tc]:checked').val()=="t"){
                                ajax_balance_todo();
                              }
                              else{
                                ajax_balance_oficina();
                              }
                            })
                            function round(value, decimals) {
                              return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
                            }
                            $(".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,array_y21){
                               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
                                  },
                                  {
                                    fillColor : "rgba(159, 182, 230,0.5)",
                                    strokeColor : "rgba(159, 182, 230,0.8)",
                                    highlightFill : "rgba(159, 182, 230,0.75)",
                                    highlightStroke : "rgba(159, 182, 230,1)",
                                    data : array_y21
                                  }
                                ]

                              }
                              myBar.destroy();
                              var ctx = document.getElementById("canvas1").getContext("2d");
                              myBar = new Chart(ctx).Bar(barChartData, {
                                responsive : true
                              });
                            }
                            
                            //-------------------------------------------------------------------------
                            //--------------------------------------------------------------------------

                              //------------------------------------------------------
                             
                            })
                          </script>
{% endblock content1 %}