{% extends "baseAdmin.html" %}
{% load static %}
{% block titulo %}
  .::Registrar - Egreso
{% endblock titulo %}
{% block content1 %} 
      <script type="text/javascript">
        $("#navCajaPrincipal").attr('class','dropdown active');
        $("#navRegistrarEgreso").attr('class','active');
      </script>
      <form action="/RegistroEgreso_admin/" method="POST" data-toggle="validator" role="form" id ="formu"> {% csrf_token %}
        <!--<div class="row"><br><br><br><br></div>-->
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="panel panel-default">
                <div class="panel-heading" id="grupoC"> <strong>REGISTRAR EGRESO</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-8 col-md-offset-2">
                      <div class="panel panel-danger">
                        <div class="panel-body">
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <label >Concepto:</label>
                            </div>
                            <div class="col-md-8">
                              <div class="form-group">
                                 <div class="select">
                                      <select  name="concepto" id="txtconcepto" placeholder="Concepto" required>  
                                       
                                      </select>
                                  </div>
                                 <div class="help-block with-errors"></div>
                              </div>                             
                              <p></p>
                            </div>
                            <!--
                            <div class="col-md-5">
                              <div class="form-group">
                              <div class="fg-line">
                                <input type="text" class="form-control" id="txtconcepto" name="concepto" readonly="readonly" required>
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                               </div>
                              </div>
                              <p></p>
                            </div>

                            <div class="col-md-3">
                              <button type="button" class="btn btn-primary btn-block" id="tabla" data-toggle="modal" data-target="#myModal" >Tabla</button>
                              <p></p>
                            </div>-->
                          </div>
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <label >A favor de:</label>
                            </div>
                            <div class="col-md-5">
                              <div class="form-group">
                              <div class="fg-line">
                                <input type="text" class="form-control" id="txtNombre" name="afavord" value="{{ usu_n_c }}" readonly="readonly" required>
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>
                              <p></p>
                            </div>
                          </div>
                          <div class="row">
                            <div id="modalrecibo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                              <div class="modal-dialog">
                                <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  id="platillaI" style="font-family:'Lucida Console', Monaco, monospace;font-size:13px;">
                                      <h5 align ="center"><b>RECIBO DE EGRESO</b></h5>
                                      <table>
                                        <tr nowrap>=====================================</tr>
                                      </table>
                                      <b id ="recibi1"></b>
                                      <h5 id="oficinaRecibo"></h5>
                                      <table>
                                        <tr>
                                          <td id="fechaRecibo" nowrap></td>
                                          <td>&nbsp;</td>
                                          <td id="horaRecibo" nowrap></td>
                                        </tr>
                                      </table>
                                      <br>
                                      <b>AFAVOR DE:</b>
                                      <p id="recibi"></p>
                                      <b>IMPORTE:</b>
                                      <p id="importe"></p>
                                      <b>CONCEPTO:</b>
                                      <p id="concepto"></p>
                                      <br>
                                      <table>
                                        <tr>
                                          <td>___________</td>
                                          <td>&nbsp;</td>
                                          <td>___________</td>
                                        </tr>
                                        <tr>
                                          <td nowrap><h6>OP. {{ nombre_usuario }}</h6> </td>
                                          <td> &nbsp;</td>
                                          <td><h5 id ="recibi2"></h5></td>
                                        </tr>
                                      </table>
                                    </div>
                                  </div>
                                  <div class="modal-footer">
                                    <hr>
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
                                  </div>

                                </div><!-- /.modal-content -->
                              </div><!-- /.modal-dialog -->
                          </div><!-- /.modal -->
                          </div>
                          <div class="row" id="campoAp">
                            <div class="col-md-2 col-md-offset-1">
                              <label>Monto:</label>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                              <div class="fg-line">
                                 <input type="text" class="form-control" id="txtmonto" name="monto" required>
                                 <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>                             
                              <p></p>
                            </div>
                            <div class="col-md-2">
                              <label>Moneda:</label>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                              <div class="select">
                              <div class="fg-line">
                                <select class="form-control" id="Cmoneda" name="moneda">
                                  <option value="soles">Soles</option>
                                  <option value="dolares">Dolares</option>
                                </select>
                              </div>
                              </div>
                                <p></p>
                              </div>   
                            </div>
                          </div> 
                         
                          <script type="text/javascript">
                            $(document).ready(function(){
                               {% ifnotequal resultado '' %}
                                {% ifequal resultado 'exito' %}
                                      var mr;
                                      var fechaRecibo= '{{fechaRecibo}}'
                                      var horaRecibo='{{horaRecibo}}'
                                      var nombreRecibo='{{nombreRecibo}}'
                                      var montoRecibo='{{montoRecibo}}'
                                      var monedaRecibo='{{monedaRecibo}}'
                                      var conceptoDetalleRecibo='{{conceptoDetalleRecibo}}'
                                      var usuario='{{user.username}}'
                                      //var dniRecibo='{{dniRecibo}}'
                                      var oficinaRecibo='{{oficinaRecibo}}'
                                      $("#recibi").text("Sr(a): "+nombreRecibo);
                                      if(monedaRecibo=="soles")
                                      {
                                        mr="S/. "
                                      }
                                      else
                                      {
                                        mr="$/. "
                                      }
                                      $("#oficinaRecibo").text(oficinaRecibo);
                                      $("#horaRecibo").text("Hora: "+horaRecibo);
                                      $("#fechaRecibo").text("Fecha: "+fechaRecibo);
                                      $("#importe").text(mr+montoRecibo);
                                      $("#concepto").text(conceptoDetalleRecibo);
                                      $("#usuario").text(usuario);
                                      $("#recibi2").text("Sr(a): "+nombreRecibo);
                                      $("#platillaI").printThis();
                                      
                              {% endifequal %}
                              {% endifnotequal %}
                              // Al presionar cualquier tecla en cualquier campo de texto, ejectuamos la siguiente función
                              $('input').on('keypress', function(e){
                                      console.log($(this).parents("form").eq(0).find(":input.form-control"));
                                      // Solo nos importa si la tecla presionada fue ENTER... (Para ver el código de otras teclas: http://www.webonweboff.com/tips/js/event_key_codes.aspx)
                                      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;
                                      }
                              });
                              /*
                               $("#Cmoneda").change(function(){
                                  if( $("#Cmoneda").val()=='soles'){
                                     $("#grupoC").removeClass(); 
                                    $("#grupoC").attr( "class","card-head card-head-xs style-info" );
                                    }
                                  else{
                                     $("#grupoC").removeClass();
                                    $("#grupoC").attr( "class","card-head card-head-xs style-success" );
                                    }
                                });
                                */
                              $(document).on('show.bs.modal', '.modal', function () {
                                    var zIndex = 1040 + (10 * $('.modal:visible').length);
                                    $(this).css('z-index', zIndex);
                                    setTimeout(function() {
                                        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
                                    }, 0);
                                });
                              $(document).on('hidden.bs.modal', '.modal', function () {
                                  $('.modal:visible').length && $(document.body).addClass('modal-open');
                              });
                              $('#txtmonto').numeric();
                              ajax_Conceptos()
                              function ajax_Conceptos(){
                                $.ajax({
                                  url:'/listado_conceptos_ajax/',
                                  type:'GET',
                                  dataType:'json',
                                  success: function(data){
                                    LiConc=data;
                                    var html='';
                                    for(var i=0;i<data.length;i++){
                                        html += '<option value="'+data[i].concepto+'">'+data[i].concepto+'</option>';
                                    }                        
                                    $('#txtconcepto').html(html);
                                    $('#txtconcepto').selectize();
                                  }
                                });
                              };
                              /*
                              $(document).on("click",".botonD",function(){
                                var num = $(this).attr('id');
                                $("#txtcuenta").prop('value',num);
                                var tex= $(this).text();
                                tex= tex.substring(3)
                                $("#txtdescrip").prop('value',tex.trim());
                                $("#txtconcepto").prop('value',tex.trim());
                                $("#formu").validator('validate');
                              });
                              $("#btnSelec").click(function(){
                                $("#myModal").modal('hide');
                                //$("#myModal1").modal('hide');
                              });
                              */
                              /*$(document).on("click",".submenu",function(){
                                var num = $(this).attr('id');
                                alert(num);
                                  var a=$(this).find('li.dropdown-submenu').removeClass('open');
                                console.log(a);
                               $(this).attr('class','dropdown-submenu').addClass('open');
                                var html= '<ul class="dropdown-menu"><li class="submenu" id="21"><a tabindex="0">Sub action</a></li><li class="submenu" id="22"><a tabindex="0">Something else here</a></li></ul>';
                                $(this).append(html);
                              });
                              $('[data-submenu]').submenupicker();
                              $('#txtmonto').numeric();
                              $('#reg').click(function(){
                                alert('enviado');
                                $('#formu').submit();
                              });*/
                            });
                          </script>
                         
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <label>Observaciones:</label>
                            </div>
                            <div class="col-md-8">
                              <div class="form-group">
                              <div class="fg-line">
                                <textarea class="form-control" rows="3" placeholder="OBSERVACIONES" name="obs"></textarea >
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>
                            </div>
                          </div>
                           <div class="row">
                            <div class="col-md-4 col-md-offset-4 col-xs-4 col-xs-offset-4 m-b-10">
                              <button class="btn btn-primary btn-block" type="submit">Registrar </button>
                            </div>
                          </div>  
                        </div>
                      </div>  
                    </div>
                  </div>
                  
                </div>
              </div>
          </div>
        </div>
      </form> 
    
{% endblock content1 %}
{% block javas %}
{% endblock javas %}