{% extends "baseAdmin.html" %}
{% load static %}
{% block titulo %}
  ENVIOS
{% endblock titulo %}
{% block content1 %}
    <div class="container">
      <script type="text/javascript">
        $("#navCajaPrincipal").attr('class','dropdown active');
        $("#navDeposito").attr('class','active');
      </script>
     <form>
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="panel panel-default">
                <div class="panel-heading"> <strong>LISTADO DE ENVIOS</strong></div>
                <div class="panel-body">
                  <div class="row" >
                    <h4 class="bg-success" align="center" id="ExitoMensaje">
                    </h4>
                  </div>
                  <div class="row" >
                    <h4 class="bg-success" align="center" id="ExitoCambiar">
                    </h4>
                  </div>
                  <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                      <button type="button" class="btn btn-block btn-info btn-sm" id="btnRefrescar">Actualizar</button>
                    </div>
                  </div>
                  <div class="row">
                    <br>
                    <p class="bg-success">
                      &nbsp;
                      <div class="col-md-12">
                          <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                  <tr>
                                    <th>Nro</th>
                                    <th>Caja</th>
                                    <th>Estado Caja</th>
                                    <th>Encargado</th>
                                    <th>Fecha Deposito</th>
                                    <th>Monto Deposito</th>
                                    <th>Moneda</th>
                                  </tr>
                                </thead>
                                <tbody id="listaDep">
                                    
                                </tbody>
                            </table>
                          </div>
                      </div>
                    </p>
                  </div>
                  <br>
                  <div class="row">
                    <div class="col-md-10 col-md-offset-1" align="center">
                      <nav>
                        <ul class="pagination">
                          <li>
                            <a href="#" aria-label="Previous">
                              <span aria-hidden="true">&laquo;</span>
                            </a>
                          </li>
                          <li class="active"><a href="#">1</a></li>
                          <li><a href="#">2</a></li>
                          <li><a href="#">3</a></li>
                          <li><a href="#">4</a></li>
                          <li><a href="#">5</a></li>
                          <li>
                            <a href="#" aria-label="Next">
                              <span aria-hidden="true">&raquo;</span>
                            </a>
                          </li>
                        </ul>
                      </nav>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </form>
    </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 Envio</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">
                              <h5 id="txtcon" ></h5>         
                            </div> 
                        </div>
                        <p></p>
                        <div class="row">
                            <div class="col-md-4 col-md-offset-1"> 
                              <h5>Monto</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>moneda</h5> 
                            </div>
                            <div class="col-md-4">
                              <input type="text" class="form-control" id="txtmoneda" 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>
                        <br>
                        <div class="row">
                          <div class="col-md-4">
                            <button type="button" class="btn btn-danger btn-block"id="anular">Anular?</button>
                          </div>
                          <div class="col-md-4">
                            <button type="button" class="btn btn-success btn-block"id="reimprimir">Reimprimir?</button>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
              </p>
            </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 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">
                          <div id ="plantilla">
                            
                            <h5 align="center"><b> RECIBO DE EGRESO</b></h5>
                            <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>
                            </table>
                            </div>
                             <h6>Op. {{ nombre_usuario }}</h6>
                          </div>
  
                        </div>
                      </div>
                  </div>
                </p>
              </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>
      <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">
              <h5 align="center"><b>RECIBO DE INGRESO</b></h5>
              <table>
                <tr nowrap>=====================================</tr>
              </table>
              <h5 id="oficinaRecibo"></h5>
              <table>
                <tr>
                  <td id="fechaAnu" nowrap></td>
                </tr>
              </table>
              <br>
              <b>IMPORTE:</b>
              <p id="importeAnu"></p>
              <b>CONCEPTO:</b>
              <p id="conceptoAnu"></p>
              <b>OBSERVACIONES:</b>
              <p id="obsAnu"></p>
              <br>
              <table>
                <tr>
                  <td>______________</td>
                </tr>
                <tr>
                  <td nowrap><h6>OP. {{ user.get_username }} </h6> </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 id="modal_confirmacion" 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>
            <br>
          </div>
          <div class="modal-body alert alert-warning"role="alert">
            <div class="row">
              <div class="col-md-12">
                <div class="row grp_alr" align="center">
                  <h3>ANULAR ENVIO?</h3>
                </div>
                <div class="row">
                  <div class="col-md-4" align="right">
                    <h5>Observaciones</h5>
                  </div>
                  <div class="col-md-6">
                    <textarea class="form-control" rows="3" placeholder="OBSERVACIONES" id="obs_anu"></textarea >
                  </div>
                </div>
                <p></p>
                <div class="row grp_alr" align ="center">
                  <h5>Esta accion sera irreversible!</h5>
                </div>
                <div class="row grp_pgs" align="center" hidden>
                    <h3>PROCESANDO...</h3>
                </div>
                <div class="row grp_pgs" hidden>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                    </div>
                  </div>
                </div>
                <div class="row grp_alr">
                  <div class="col-md-4 col-md-offset-2">
                    <button type="button" class="btn btn-default btn-block" data-dismiss="modal">Cancelar</button>
                  </div>
                  <div class="col-md-4">
                    <button type="button" class="btn btn-danger btn-block" id="alert_aceptar">ANULAR?</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  <script type="text/javascript">
    var Aux="";
    var filaI =0;
    $(document).ready(function () {
      ajax_Deposito();
      $(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",".filaDep",function(){
        var num = $(this).attr('id');
        filaI = num;
        //--------------
        if(Aux[filaI].act =="si"){
          $("#anular").show();
        }
        else{
          $("#anular").hide();
        }
        //
        $('#txtFecha').prop("value",Aux[filaI].fecha);
        $('#txtpk').prop("value",Aux[filaI].pk);
        $('#txtcon').text(Aux[filaI].concepto);
        $('#txtmonto').prop("value",Aux[filaI].monto);
        $('#txtmoneda').prop("value",Aux[filaI].moneda);
        $('#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);
        var mr='';
        if(Aux[filaI].moneda=="soles")
          {
            mr="S/. "
          }
        else
          {
            mr="$/. "
          }
        $("#mon").text(mr+Aux[filaI].monto);
      });

      $("#btnRefrescar").click(function(){
        ajax_Deposito();
      });

      function ajax_Deposito(){
        $.ajax({
          url:'/Deposito_ajax/',
          type:'GET',
          dataType:'json',
          success: function(data){
            Aux = data;
            var html ="";
            var esta='';
            var estado ="";
            for(var i=0;i<data.length;i++){
              estado ="";
              if (data[i].c_estado){
                esta='activo';
              }
              else{
                esta='desactivo';
              }
                if(data[i].est=="recibido"){
                  estado = "success";
                }
                if(data[i].est=="anulado"){
                  estado = "danger";
                }
                html += '<tr data-toggle="modal" data-target="#myModal" class="filaDep '+estado+'" id="'+i+'"><th scope="row">'+(i+1)+'</td><td>'+data[i].c_nombre+'</td><td>'+esta+'</td><td>'+data[i].p_encargado+'</td><td>'+data[i].fecha +'</td><td>'+data[i].monto+'</td><td>'+data[i].moneda+'</td></tr>';
            }                        
            $('#listaDep').html(html);
          }
        });
      }
      $("#anular").click(function(){
          $('#modal_confirmacion').modal('show');
      });
      $("#alert_aceptar").click(function(){
        mostrar_progress();
        ajax_AnularEnvio(Aux[filaI].pk);
      });
      function mostrar_progress(){
        $(".grp_alr").hide();
        $(".grp_pgs").show();
        $("#obs_anu").prop("readonly",true);
      };
      function ocultar_progress(){//llamar desde la funcion
        $('#modal_confirmacion').modal('hide');
        $(".grp_alr").show();
        $(".grp_pgs").hide();
        
        $("#obs_anu").prop("value",null);
        $("#obs_anu").prop("readonly",false);
      };
      //
       function ajax_AnularEnvio(idC){
        $.ajax({
          data:{'idS':idC,'obs':$("#obs_anu").val()},
          url:'/AnularDeposito_ajax/',
          //async:false,
          type:'GET',
          dataType:'json',
          success: function(data){
            if(data.exito=='exito'){
              $("#ExitoMensaje").prop('class','bg-info');
              $("#ExitoMensaje").text("Anulado!");
              $("#obsAnu").text($("#obs_anu").val());
              $("#importeAnu").text(Aux[filaI].monto);
              $("#fechaAnu").text(data.fecha);
              $("#conceptoAnu").text("Anulacion de "+Aux[filaI].concepto);
              $('#platillaI').printThis();
              ocultar_progress();
              bootbox.alert({ 
                message: "Operación exitosa. Envío anulado",
                className: 'bb-alternate-modal'
              });
 
              ajax_Deposito();
             }
           else{
              ocultar_progress();
              $("#ExitoMensaje").prop('class','bg-danger');
              $("#ExitoMensaje").text(" la operacion fallo: " + data.exito);
               bootbox.alert({ 
                message: "La Operación falló",
                className: 'bb-alternate-modal'
              });
              
             }
            ocultarmodal();
          }
        });
      };
      function ocultarmodal(){
        $('#myModal').modal('hide')
      };
      
      $("#reimprimir").click(function(){
        $('#plantilla').printThis();
      })
    });
  </script>
{% endblock content1 %}