{% extends "base.html" %}
{% load static %}
{% block titulo %}
  Listado Envios de Material
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navCajaMaterial").attr('class','dropdown active');
  $("#navListaMaterialEnviado").attr('class','active');
</script>
<div class="row">
  <div class="col-md-12 col-sm-12" >
    <div class="panel panel-default">
      <div class="panel-heading panel-material"> <strong>LISTADO DE ENVIOS DE MATERIAL</strong></div>
      <div class="panel-body">
        <div class="row" >
          <h4 class="bg-success" align="center" id="ExitoMensaje">
          </h4>
        </div>
        <div class="row">
            <div class="col-md-2">
              <button type="button" class="btn btn-primary btn-sm" id="btnRefrescar"><span class="fa fa-refresh"></span> Actualizar</button>
            </div>
        </div>
        <p></p>
        <div class="row">
          <div class="col-md-12">
              <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th>Recibo</th>
                        <th>Fecha</th>
                        <th>Destino</th>
                        <th>Peso</th>
                        <th>Observaciones</th>
                      </tr>
                    </thead>
                    <tbody id="listaC">
                    </tbody>
                </table>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="myModal" 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">
          <p>
            <div class="col-md-12 col-sm-12" >
                <div class="panel panel-info">
                  <div class="panel-heading" align="center"> <h5>Detalle de Material Enviado</h5></div>
                  <div class="panel-body">
                    <div class="row">
                      <div class="col-md-12">
                        <p class="bg-success" align="center">
                          &nbsp;
                        </p>
                      </div>
                    </div>
                    <p></p>
    
                    <div class="row">
                        <div class="col-md-4 col-md-offset-1" > 
                          <h5>Fecha</h5> 
                        </div>
                        <div class="col-md-4">
                          <input type="text" class="form-control" id="txtFecha" disabled="disabled">         
                        </div> 
                        <div class="col-md-2 col-md-offset-1">
                          <input type="text" class="form-control" id="txtpk" disabled="disabled"> 
                        </div>
                    </div>
                    <p></p>
                    <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="txtcon" disabled="disabled">         
                        </div> 
                    </div>
                    <p></p>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-1"> 
                          <h5>Gramos</h5> 
                        </div>
                        <div class="col-md-6">
                          <input type="text" class="form-control" id="txtmonto" disabled="disabled">         
                        </div> 
                    </div>
                    <p></p>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-1" > 
                          <h5>Observaciones</h5> 
                        </div>
                        <div class="col-md-4">
                          <input type="text" class="form-control" id="txtObs" disabled="disabled">         
                        </div> 
                    </div>
                    <p></p>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-1" > 
                          <h5>Observaciones de Recepción</h5> 
                        </div>
                        <div class="col-md-6">
                          <input type="text" class="form-control" id="txtObsRe">         
                        </div> 
                    </div>
                    <br>
                    <div class="row">
                      <div class="col-md-4 col-md-offset-4">
                        <button type="button" class="btn btn-primary btn-block"id="reimprimir">Reimprimir</button>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
          </p>
        </div>
        <div class="modal-footer">
          <hr>
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="myModal1" 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">
          <p>
            <div class="col-md-12 col-sm-12" >
                <div class="panel panel-info">
                  <div class="panel-body" style="font-family:'Lucida Console', Monaco, monospace;font-size:13px;">
                    
                    <div id ="plantilla">
                      <div>
                        <h5 align="center"><b> RECEPCION DE EGRESO</b></h5>
                      </div>
                      <table>
              <tr nowrap>=====================================</tr>
            </table>
                      <br>
                      <div>
                        <table>
                            <tr>
                              <th>Fecha&nbsp;</th>
                              <td id="f" colspan=3 nowrap></td>
                            </tr>
                            <tr>
                              <th>Concepto</th>
                              <td id="con" colspan=3 ></td>
                            </tr>
                            <tr>
                              <th >Monto&nbsp;</th>
                              <td colspan=3 nowrap> <b><h3 id="mon">&nbsp;</h3></b></td>
                            </tr>
                            <tr>
                              <th colspan=2>Observaciones de envio:&nbsp; </th>
                              <td id="ob" colspan=2></td>
                            </tr>
                            <tr>
                              <th >Observaciones: &nbsp;</th>
                              <td id="obsr"></td>
                            </tr>
                      </table>
                      </div>
                      <br>
                      <div>
                        <h5>____________________</h5>
                        <b>Operador: {{ nombre_usuario }}</b>
                      </div>
                       
                    </div>

                  </div>
                </div>
            </div>
          </p>
        </div>
        <div class="modal-footer">
          <hr>
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<script type="text/JavaScript">
    var Aux="";
    var filaI =0;
    $(document).ready(function(){
      $(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');
      });
      $(document).on("click",".filaC",function(){
        var num = $(this).attr('id');
        filaI = num;
        //--------------
        $('#txtFecha').prop("value",Aux[filaI].fecha);
        $('#txtpk').prop("value",Aux[filaI].pk);
        $('#txtcon').prop("value",Aux[filaI].concepto);
        $('#txtmonto').prop("value",Aux[filaI].peso);
        $('#txtObs').prop("value",Aux[filaI].obs);
        $("#f").text(Aux[filaI].fecha);
        $("#con").text(Aux[filaI].concepto);
        //$("#mon").text(Aux[filaI].monto);
        //$("#mone").text(Aux[filaI].moneda);
        $("#ob").text(Aux[filaI].obs);

        $("#mon").text("gr "+Aux[filaI].peso);
      });
      ajax_SaldoEnviado();
      $("#btnRefrescar").click(function(){
        ajax_SaldoEnviado();
      });
      //
      function ajax_SaldoEnviado(){
        $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
        $.ajax({
          url:'/listaEnviosMat_total_ajax/',
          type:'GET',
          dataType:'json',
          success: function(data){
            Aux= data;
            var html ="";
            for(var i=0;i<data.length;i++){
                html += '<tr class="filaC" data-toggle="modal" data-target="#myModal"' +' id="'+i+'"><td>'+data[i].td+' '+data[i].nroR+'</td><td>'+data[i].fecha+'</td><td>'+data[i].destino+'</td><td>'+data[i].peso +'</td><td>'+data[i].obs+'</td></tr>';
            }                        
            $('#listaC').html(html);
            $('.table-responsive').waitMe('hide');
          }
        });
      }
      //
      $("#reimprimir").click(function(){
        $('#plantilla').printThis();
      });
  

      /*
      $("#reimprimir").click(function(){
        $('#plantilla').printThis();
      })*/
     //-------------------
    });
</script>
{% endblock content1 %}