{% extends "base.html" %}
{% block titulo %}
  Cambiar Contraseña
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navUser").attr('class','dropdown active');
</script>
<style type="text/css">
  .input-group-addon {
    padding: 0px 6px;
}
</style>
<form action="/pasarefectivo/" method="POST" data-toggle="validator" role="form"> {% csrf_token %}
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
          <div class="panel-heading panel-inverse"><strong>PASAR EFECTIVO ENTRE CAJAS</strong></div>
          <div class="panel-body">
            <div class="row" id="Result">
              {% ifnotequal resultado '' %}
              {% ifequal resultado 'exito' %}
                  <div class="alert alert-success" role="alert" align="center">
                    <h4>OPERACION EXITOSA!!</h4>
                  </div>
                  {% else %}
                  <div class="alert alert-danger" role="alert" align="center">
                    <h4>FALLO OPERACION {{resultado}}</h4>
                  </div>
                  {% endifequal %}
              {% endifnotequal %}
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="panel panel-default">
                  <div class="panel-heading panel-transferencia" id="origen-titulo"><strong>ORIGEN</strong></div>
                  <div class="panel-body" id="origen-cuerpo" style="background-color:#b7adf3;">
                    <div class="row">
                      <div class="col-md-2 col-md-offset-1">
                        <label>Saldo: </label>
                      </div>
                      <div class="col-md-9">
                        <label class="label label-default label-saldo" style="background-color: #3f3479;" id="origen-saldo">0.00 </label>
                      </div>
                    </div>
                    <p></p>
                    <div class="row">
                      <div class="col-md-1 col-md-offset-1">
                        <label>De:</label>
                      </div>
                      <div class="col-md-7">
                        <select class="form-control" name="origen" id="cb-origen">
                          <option value="transferencia">Caja Transferencias</option>
                          <option value="dolar">Caja Dolar</option>
                          <!--
                          <option value="material">Caja Material</option>
                          -->
                        </select>
                      </div>
                    </div>
                    <p></p>
                    <div class="row">
                      <div class="col-md-2 col-md-offset-1">
                        <label>Moneda:</label>
                      </div>
                      <div class="col-md-4">
                        <select class="form-control" name="moneda" id="cb-moneda">
                          <option value="soles">Soles</option>
                          <option value="dolares">Dolares</option>
                        </select>
                      </div>
                    </div>
                    <p></p>
                    <div class="row" id="fila-tipo_cambio" hidden>
                      <div class="col-md-8 col-md-offset-1">
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-addon"><label>Tipo de Cambio</label></div>
                            <input type="text" class="form-control" id="txt-tc" name="tipo_cambio" autocomplete="off" required>
                          </div>
                          <div class="form-control-feedback" style="text-align:left;" ></div>
                          <div class="help-block with-errors"></div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-8 col-md-offset-1">
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-addon"><label>Monto</label></div>
                            <input type="text" class="form-control" id="txt-monto" name="monto" autocomplete="off" required>
                          </div>
                          <div class="form-control-feedback" style="text-align:left;" ></div>
                          <div class="help-block with-errors"></div>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>  
              </div>

              <div class="col-md-6">
                <div class="panel panel-default">
                  <div class="panel-heading panel-dolar" id="destino-titulo"><strong>DESTINO</strong></div>
                  <div class="panel-body" id="destino-cuerpo" style="background-color:#13b5c3;">
                    <div class="row">
                      <div class="col-md-2 col-md-offset-1">
                        <label>Saldo: </label>
                      </div>
                      <div class="col-md-9">
                        <label class="label label-default label-saldo"style="background-color: #00838f;" id="destino-saldo">0.00 </label>
                      </div>
                    </div>
                    <p></p>
                    <div class="row">
                      <div class="col-md-2 col-md-offset-1">
                        <label>Para:</label>
                      </div>
                      <div class="col-md-7">
                        <select class="form-control" name="destino" id="cb-destino">
                          <option value="dolar">Caja Dolar</option>
                          <option value="transferencia">Caja Transferencias</option>
                          <!--<option value="material">Caja Material</option>-->
                        </select>
                      </div>
                    </div>
                  </div>
                </div>  
              </div>

            </div>
            <div class="row">
              <div class="col-md-2 col-md-offset-2">
                <label>Observaciones</label>
              </div>
              <div class="col-md-6">
                <textarea class="form-control" rows="2"  name="obs" ></textarea >
              </div>
            </div>
            <p></p>
            <div class="row">
                <div class="col-md-4 col-md-offset-4">
                  <input type="submit" class="btn btn-block btn-sm btn-success" name="" value="Pasar Efectivo">
                </div>
            </div>

          </div>
        </div>
    </div>
  </div>
  
</form> 
<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading"><strong>Ultimos Movimientos de Efectivo</strong></div>
      <div class="panel-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive" >
              <table class="table table-hover table-bordered">
                  <thead>
                    <tr >
                      <th>Fecha</th>
                      <th>Origen</th>
                      <th>R/E</th>
                      <th>Destino</th>
                      <th>R/I</th>
                      <th>Monto</th>
                      <th>Moneda</th>
                      <th>Observaciones</th>
                    </tr>
                  </thead>
                  <tbody id="listaT">
                  </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-2">
            <button class="btn btn-xs btn-warning" id="btn-mas">Ver mas movimientos</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="modal-movimientos" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Detalles</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12 col-sm-12" >
                <div class="panel panel-default">
                  <div class="panel-heading"> <strong>Detalle de Saldo Recibido</strong></div>
                  <div class="panel-body">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="table-responsive" >
                          <table class="table table-hover table-bordered">
                              <thead>
                                <tr >
                                  <th>Fecha</th>
                                  <th>Origen</th>
                                  <th>R/E</th>
                                  <th>Destino</th>
                                  <th>R/I</th>
                                  <th>Monto</th>
                                  <th>Moneda</th>
                                  <th>Observaciones</th>
                                </tr>
                              </thead>
                              <tbody id="listaTotal">
                              </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Cerrar</button>
        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript">
  var soles=0,dolares=0;
  $(document).ready(function(){
    $("#txt-monto").numeric(".")
    $("#txt-tc").numeric(".")
    $('input').on('keypress', function(e){
      if(e.keyCode == 13){
        var inputs = $(this).parents("form").eq(0).find(":input.form-control");
        var idx = inputs.index($(this));
        if (idx == inputs.length - 1) {
            inputs[0].select()
            } 
        else {
            inputs[idx + 1].focus(); //  handles submit buttons
            inputs[idx + 1].select();
            }
        return false;
      }
    });
    $("#cb-origen").change(function(){
      
      if($(this).val()=='transferencia'){
        $("#origen-titulo").prop('class','panel-heading panel-transferencia')
        $("#origen-saldo").prop('style','background-color:#3f3479;')
        $("#origen-cuerpo").prop('style','background-color:#b7adf3;')
        ajax_saldo_caja('st','ori')
      }
      if($(this).val()=='dolar'){
        $("#origen-titulo").prop('class','panel-heading panel-dolar')
        $("#origen-saldo").prop('style','background-color:#00838f;')
        $("#origen-cuerpo").prop('style','background-color:#13b5c3;')
        ajax_saldo_caja('do','ori')
      }
      if($(this).val()=='material'){
        $("#origen-titulo").prop('class','panel-heading panel-material')
        $("#origen-saldo").prop('style','background-color:#c43e00;')
        $("#origen-cuerpo").prop('style','background-color:#ffc6ad;')
        ajax_saldo_caja('ma','ori')
      }
    })

    $("#cb-destino").change(function(){
      if($(this).val()=='transferencia'){
        $("#destino-titulo").prop('class','panel-heading panel-transferencia')
        $("#destino-saldo").prop('style','background-color:#3f3479;')
        $("#destino-cuerpo").prop('style','background-color:#b7adf3;')
        ajax_saldo_caja('st','des')
      }
      if($(this).val()=='dolar'){
        $("#destino-titulo").prop('class','panel-heading panel-dolar')
        $("#destino-saldo").prop('style','background-color:#00838f;')
        $("#destino-cuerpo").prop('style','background-color:#13b5c3;')
        ajax_saldo_caja('do','des')

      }
      if($(this).val()=='material'){
        $("#destino-titulo").prop('class','panel-heading panel-material')
        $("#destino-saldo").prop('style','background-color:#c43e00;')
        $("#destino-cuerpo").prop('style','background-color:#ffc6ad;')
        ajax_saldo_caja('ma','des')
      }
    })
    $("#cb-moneda").change(function(){
      if($(this).val()=='soles'){
        $("#fila-tipo_cambio").hide();
      }
      if($(this).val()=='dolares'){
        $("#fila-tipo_cambio").show();
      }
    })

    ajax_saldo_caja('st','ori');
    ajax_saldo_caja('do','des');
    function ajax_saldo_caja(tipo,dire){
      if(dire=='ori'){
        $('#origen-cuerpo').waitMe({effect : 'win8_linear',text : '[Consorcio Imperial] Recuperando Datos',color:'#3f3479',fontSize:'18px'})
      }
      else{
        $('#destino-cuerpo').waitMe({effect : 'win8_linear',text : '[Consorcio Imperial] Recuperando Datos',color:'#3f3479',fontSize:'18px'})
      }
      $.ajax({
        url:'/SaldoCaja_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
          if(tipo=='st'){
            soles = data.saldo_soles
            dolares = data.saldo_dolares
          }
          else{
            if(tipo=='do'){
              soles = data.saldo_soles_do
              dolares = data.saldo_dolares_do
            }
            else{
              if(tipo=='ma'){
                soles= data.saldo_soles_ma
                dolares= data.saldo_dolares_ma
              }
              else{
                soles=0
                dolares=0
              }
            }
          }
          if(dire=='ori'){
            $("#origen-saldo").text(soles+' s/ | '+dolares+' $')
            $('#origen-cuerpo').waitMe('hide')
          }
          else{
            $("#destino-saldo").text(soles+' s/ | '+dolares+' $')
            $('#destino-cuerpo').waitMe('hide')
          }
          
        }
      });
    }
    //********
    $("#btn-mas").click(function(){
      $("#modal-movimientos").modal('show')
      ajax_movimiento('todo')
    })
    ajax_movimiento('')
    //*******************************
    function ajax_movimiento(filtro){
      $('.table-responsive').waitMe({effect : 'win8_linear',text : '[Consorcio Imperial] Recuperando Datos',color:'#3f3479',fontSize:'18px'})
      $.ajax({
        data:{'filtro':filtro},
        url:'/lista_traslados_efectivo_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
          var html ="";
          for(var i=0;i<data.length;i++){
              html += '<tr' +' id="'+i+'"><td>'+data[i].fecha+'</td><td>'+data[i].origen+'</td><td>'+data[i].nre+'</td><td>'+data[i].destino +'</td><td>'+data[i].nri+'</td><td><strong>'+data[i].monto+'</strong></td><td>'+data[i].moneda+'</td><td>'+data[i].obs+'</td></tr>';
          }
          if(filtro==''){
            $('#listaT').html(html);
            $('.table-responsive').waitMe('hide')
          }
          else{
            $('#listaTotal').html(html);
            $('.table-responsive').waitMe('hide')
          }
        }
      });
    }
    //*******
  })
</script>
{% endblock content1 %}