{% extends "base.html" %}
{% load static %}
{% block titulo %}
  Registrar Egreso (Caja Material)
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navCajaMaterial_dinero").attr('class','dropdown active');
  $("#navRegistrarEgresoM").attr('class','active');
</script>
{% ifequal OfCentral 'si' %}
{% ifnotequal alterna 'si'%} 
<form action="/RegistroEgresoM/" method="POST" data-toggle="validator" role="form" id ="formu"> {% csrf_token %}
  <div class="row">
    <div class="col-md-12 col-sm-12" >
        <div class="panel panel-default">
          <div class="panel-heading panel-material" id="grupoC"> <strong>REGISTRAR EGRESO (CAJA MATERIAL)</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_m_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> 
{% endifnotequal %}
{% endifequal %}

{% endblock content1 %}
{% block javas %}
{% endblock javas %}