{% extends "base.html" %}
{% load static %}
{% block titulo %}
Registrar - Egreso
{% endblock titulo %}
{% block content1 %} 
      <script type="text/javascript">
        $("#navC").attr('class','dropdown active');
        $("#navRegistrarEgreso").attr('class','active');
      </script>
      <form action="/RegistroEgreso/" 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-8 col-md-offset-2" >
              <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-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" 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> 
                 
                  <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>
                  <br>
                  <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>
      </form> 
      <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 -->
    <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>
{% endblock content1 %}
{% block javas %}
{% endblock javas %}