{% extends "baseAdmin.html" %}
{% block titulo %}
  .::Mantenimiento Egresos En Caja Material
{% endblock titulo %}
{% block content1 %}
    <div class="container">
      <script type="text/javascript">
        $("#navConceptos").attr('class','dropdown active');
        $("#navConfConceptos_ma").attr('class','active');
      </script>
      <div class="row">
        <div class="col-md-8 col-md-offset-2" >
            <div class="panel panel-default">
              <div class="panel-heading panel-material" align="center"><b>Concepto de Egresos para caja Material</b></div>
              <div class="panel-body">
                <div class="row">
                  <div class="col-md-3">
                    <button type="button" class="btn btn-block btn-primary btn-sm"  data-toggle="modal" data-target="#ModalNuevConcepto" id="btnNuevaCon"> Nuevo</button>
                  </div>
                  <div class="col-md-3">
                    <button type="button" class="btn btn-block btn-warning btn-sm" id="btnCon"> Actualizar</button>
                  </div>
                  <p></p>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <div class="table-responsive">
                      <table class="table table-striped table-hover">
                          <thead>
                            <tr >
                              <th>Concepto</th>
                            </tr>
                          </thead>
                          <tbody id="listaConcepto">
                           
                          </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
<div id="ModalNuevConcepto" 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">Nuevo Concepto de Egreso</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <div class="panel panel-default">
                <div class="panel-body">
                  <div class="row">
                    <div class="col-md-4 col-md-offset-1">
                      <h5>Concepto:</h5>
                    </div>
                    <div class="col-md-6">
                        <input type="text" class="form-control" id="txtConcepto" placeholder="Concepto de egreso">
                      <p></p>
                    </div>
                  </div>
                   

                  <div class="row">
                    <div class="col-md-4 col-md-offset-4 col-xs-4 col-xs-offset-4">
                      <input class="btn btn-primary btn-block" id="btnGuardarCon" value="Guardar" >
                    </div>
                  </div>
                </div>
              </div>
            </div>
             
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<!-- MODALES MODFICACIONES-->
<div id="ModalACTConcepto" 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">Concepto de Egreso</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <div class="panel panel-default">
                <div class="panel-body">
                  <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                      <input type="text" class="form-control" id="pkConcepto" disabled>
                      <p></p>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-4 col-md-offset-1" align="right">
                      <h5>Concepto</h5>
                    </div>
                    <div class="col-md-6">
                        <input type="text" class="form-control" id="actNomCon" placeholder="Concepto Egreso">
                      <p></p>
                    </div>
                  </div>
                 

                  <div class="row">
                    <div class="col-md-4">
                      <input class="btn btn-warning btn-block btn-sm" id="btnActuCon" value="Guardar" >
                    </div>
                    

                  </div>

                </div>
              </div>
            </div>
             
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


<script type="text/javascript">
  LiConc=[];
  indexConc=0;
  $(document).ready(function () {
       function ajax_Agregar_Concepto(){
          $.ajax({
            data:{'con':$("#txtConcepto").val()},
            url:'/AgregarConcepto_m_ajax/',
            type:'GET',
            dataType:'text',
            success: function(data){
              if(data=='exito'){
                  swal("Exito", "Concepto Agregado", "success");
                  limpiarCon();
                  ajax_Conceptos()
              }
              else{
                  swal("Error",data, "error");
              }
            }
          });
        }
        //

        function ajax_actualizar_Concepto(){
          $.ajax({
            data:{'pk':$("#pkConcepto").val(),'con':$("#actNomCon").val()},
            url:'/Actualizar_concepto_m_ajax/',
            type:'GET',
            dataType:'text',
            success: function(data){
              if(data=='exito'){
                  swal("Exito", "Concepto Actualizado", "success");
                  $("#ModalACTConcepto").modal('hide');
                  ajax_Conceptos()
              }
              else{
                  swal("Error",data, "error");
              }
            }
          });
        }
        $("#btnActuCon").click(function(){
          ajax_actualizar_Concepto();
        })
        //
        function limpiarCon(){
          $("#ModalNuevConcepto").modal('hide');
          $("#txtConcepto").prop('value',null);
        }
        //---------------
        $("#btnGuardarCon").click(function(){
          ajax_Agregar_Concepto();
        })

        $("#btnCon").click(function(){
           ajax_Conceptos();
        })

        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 += '<tr data-toggle="modal" data-target="#ModalACTConcepto" class="filaCon" id="'+i+'"><td>'+data[i].concepto+'</td></tr>';
              }                        
              $('#listaConcepto').html(html);
            }
          });
        };
        
        //----------
        $("#listaConcepto").on("click",".filaCon",function(){
          var num = $(this).prop('id');
          indexConc = num;
          var fila= $(this).prop('class');
          $("#actNomCon").prop('value',LiConc[indexConc].concepto);
          $("#pkConcepto").prop('value',LiConc[indexConc].pk);
          
        });
        

        $(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');
        });
        //------------
  });
</script>
{% endblock content1 %}