<link href="<?=base_url('assets')?>/css/font-awesome-4.0.1.css" rel="stylesheet">
<link href="<?=base_url('assets')?>/css/Open-Sans.css" rel="stylesheet">
<style>
    .glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}
</style>
<style>
    /*
    estilo para exibição do lote
    */
h2 {
  margin-top: 0px;
  margin-bottom: 20px;
	padding: 0 0 10px;
  color: #f0f0f0;
  font-weight: 300;
  text-align: center;
}

.btn { margin-left: 4px; }
</style>
<style>
    .alert-top {
	top:50px;
	width:100%;
	display:none;
	text-align: center;
	margin-bottom: 0;
	padding:10px;
}
</style>
<div class="main">
<!--<div id="alert-success" class="alert alert-success alert-top" role="alert">
    <button type="button" class="close alert-close" aria-label="Close"><span aria-hidden="true">×</span></button>
    <strong><span class="alert-msg"></span></strong>
</div>-->
    <div class="main-inner">

        <div class="container">

            <div class="row">
                
                <div class="btn-group" role="group" aria-label="...">
<!--                    <button id="baixar_eleronico" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Pré-visualizar</button>-->
<!--                    <button id="marcar_eleronico" type="button" class="btn btn-success"><span class="glyphicon glyphicon-save-file"></span>Gerar Lote</button>-->
                </div><br>
                
                <br>
                
                <div class="panel panel-success">
			<div class="panel-heading">
				<h4 class="panel-title">
					Lotes criados para envio
					<div class="pull-right">
<!--						<a href="#" data-perform="panel-dismiss" class="btn btn-success btn-xs pull-right"><i class="fa fa-times"></i></a>-->
						<a href="#" data-perform="panel-collapse" class="btn btn-success btn-xs pull-right"><i class="fa fa-plus"></i></a>
					</div>
				</h4>
			</div>

			<div class="panel-wrapper collapse">
				<div class="panel-body">
                                    <?php 
                                        if( !empty($lotes) && isset($lotes) )
                                        {
                                            echo '<table class="table table-hover">
                                                    <thead>
                                                      <tr>
                                                        <th>Número do Lote</th>
                                                        <th>Nome do Lote</th>
                                                        <th>Data de Criação</th>
                                                        <th>Ação para o Lote</th>
                                                      </tr>
                                                    </thead>
                                                    <tbody>';
                                            
                                            foreach ($lotes as $lote)
                                            {
                                                $url = substr($lote['url'], 0, -24);
                                                $data_criacao = date( 'd/m/Y H:i:s' , strtotime( $lote['data_criacao'] ) );
                                                
                                                echo '<tr>
                                                        <td>'.$lote['id_lote'].'</td>
                                                        <td>'.$url.'</td>
                                                        <td>'.$data_criacao.'</td>
                                                        <td>
                                                        <a target="_blank" href='.base_url().'certificado_eletronico/'.$lote['url'].' class="btn btn-info btn-sm" role="button"><span class="glyphicon glyphicon-folder-open"></span> Abrir Arquivo</a>
                                                        <button type="button" class="btn btn-sm btn-success btn-enviar" id=lote'.codifica($lote['id_lote']).'>
                             <span class="glyphicon glyphicon-send"></span> Marcar Lote como enviado
                            </button></td>        
                                                      </tr>';
                                            }
                                            echo '</tbody>
                                                  </table>';
                                        }
                                        else
                                        {
                                            echo 'Não foram gerados Lotes para envio.';
                                        }
                                    ?>
				</div>
			</div>
		</div>

                <form action="<?=base_url("admin/CertificadosEletronicos/eletronicos_nao_enviados")?>" id="form_baixar_eleronico" method="POST">
                        <div class="form-inline">
                            <strong>Digite a Quantidade Desejada:</strong>
                            <input type="number" required="required" name="quantidade_visualizar"  class="form-control" min="1" autocomplete="off">
                            <input type="submit"  class="form-control btn btn-primary" value="visualizar">
                        </div>
                </form><br>
                
                <div id="alert-success" class="alert alert-success alert-top" role="alert">
                    <button type="button" class="close alert-close" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <strong><span class="alert-msg"></span></strong>
                </div>
                
<div id="alert-warn" class="alert alert-warning alert-top" role="alert">
    <button type="button" class="close alert-close" aria-label="Close"><span aria-hidden="true">×</span></button>
    <strong><span class="alert-msg"></span></strong>
</div><br>
                <div class="span12">      		

                    <div class="widget ">

                        <div class="widget-header">
                            <i class="icon-pencil"></i>
                            <h3>Total de Certificados Eletrônicos não enviados: <?php echo $total_certificados_eletronicos[0]['id_historico'] ?>.</h3>
                        </div> <!-- /widget-header -->

                        <div class="widget-content">

                            <div class="tabbable">
                            
<!--                                <span style="float:right;">-->
                                    
<!--                                <div style="padding-top: 10px;">-->

                                    <div class="table-responsive">          
 <?php 
 if(empty($total_certificados_eletronicos) || $total_certificados_eletronicos===false)
  {
     echo '<div class="alert alert-warning">
            <h4><strong>Ops!</strong> Não existem certificados eletrônicos para serem enviados.</h4>
          </div>';
  }
  else
  {
      if( isset($_POST['quantidade_visualizar']) )
      {
          
      if( isset($certificados_eletronicos) && !empty($certificados_eletronicos) )
      {
      ?>     
  
  <div class="form-horizontal" role="form" id="form_marcar_eleronico">
                        <div class="form-inline">
                            <strong>Digite o nome para o Lote:</strong>
                            <input type="text" class="form-control" id="nome_lote">
                            <input type="submit"  class="form-control btn btn-success" id="gerar_lote" value="Gerar Lote">
                            <div id="loading" style="display:inline"></div>
                        </div>
  </div>
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Nº Cert.</th>
        <th>Quant. Cert.</th>
        <th>Nome</th>
        <th>Curso</th>
        <th>Endereço</th>
        <th>Número</th>
        <th>Complemento</th>
        <th>CEP</th>
        <th>Bairro</th>
        <th>cidade</th>
        <th>Estado</th>
        <th>Alterar situação para Pendente?</th>
      </tr>
    </thead>
    <tbody>
        <?php 
            $quantidade_aluno = 1;
            foreach ($certificados_eletronicos as $eletronicos)
            {
                echo '<tr>
                          <td>'.$quantidade_aluno.'</td>
                          <td>'.$eletronicos['id_certificado'].'</td>
                          <td>'.$eletronicos['quantidade'].'</td>
                          <td>'.$eletronicos['nome_aluno'].'</td>
                          <td>'.$eletronicos['nome_curso'].'</td>
                          <td>'.$eletronicos['endereco_aluno'].'</td>
                          <td>'.$eletronicos['numero'].'</td>
                          <td>'.$eletronicos['complemento'].'</td>
                          <td>'.$eletronicos['cep'].'</td>
                          <td>'.$eletronicos['bairro'].'</td>
                          <td>'.$eletronicos['cidade'].'</td>
                          <td>'.$eletronicos['estado'].'</td>
                          <td>
                          <div style="display:none" id="animate_aguarde" >
                            <button  class="btn btn-warning warnin">
                                <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
                                Aguarde...</button>
                          </div>
                            <button id='.codifica($eletronicos['id_certificado']).' type="button" class="btn btn-warning" value='.codifica($eletronicos['id_certificado']). '>
                             <span class="glyphicon glyphicon-transfer"></span> Alterar
                            </button>
                          </td>
                      </tr>';
                $quantidade_aluno++;
            }
        ?>
    </tbody>
  </table>
  <?php }else
  {
       echo '<div class="alert alert-warning">
            <h4><strong>Ops!</strong> Não existem certificados eletrônicos na consulta.</h4>
          </div>';
  }
      }
  
            }?>
  </div>
<!--                                </div>-->


                            </div>

                        </div> <!-- /widget-content -->

                    </div> <!-- /widget -->

                </div> <!-- /span8 -->


            </div> <!-- /row -->

        </div> <!-- /container -->

    </div> <!-- /main-inner -->

</div> <!-- /main -->
<script>
$(document).ready(function () {
     var base_url = "<?php echo base_url()?>";
     
    $('.btn-enviar').click(function () {
        
       var id_lote = this.id;
       var ismarcar = confirm("Deseja Marcar esse Lote como enviado?");
       
       if(ismarcar)
       {
           $('.btn-enviar').prop('disabled', true);
           
           $.ajax({
                    url: base_url+"admin/CertificadosEletronicos/set_lote_envio",
                    type: "POST",
                    data:{id_lote:id_lote},
                    success: function(response){
                        var data = JSON.parse(response);
                        if(data.status===1)
                        {
                            alert("Bom trabalho, o Lote foi marcado para envio com sucesso!");
                            location.reload()
                        }
                        else if(data.status===0)
                        {
                            alert("Problemas na operação: "+data.msg);
                        }
                    }
           });
       }
       else
       {
           
       }
    });
});

</script>

<script>
    $(document).ready(function () {
        
        var base_url = "<?php echo base_url()?>";
        
         $('button.btn.btn-warning').click(function () {
                    
                    var confirma = confirm("Alterar situação do certificado para Pendente?");
                    
                    if(confirma)
                    {
                        var id_cert = this.value;
                        var id_btn_warning =  this.id;
                        
                        $.ajax({
                            url: base_url+'admin/CertificadosEletronicos/update_certificado_situacao',
                            type: "POST",
                            data: { id_cert:id_cert },
                            success:function(response){
                                
                                var json = JSON.parse(response);
                                
                                console.log(json);
                                
                                if(json.status===1)
                                {
                                    $("#"+id_btn_warning+"").hide();
                                    $("#animate_aguarde").show();
                                    $('.warnin').prop('disabled', true); 
                                    setTimeout(function () { location.reload() }, 2000);
                                    //alert("Sucesso: "+json.msg);
                                }
                                else if(json.status===0)
                                {
                                    alert("Falha na operação: "+json.msg);
                                }
                            },
                            error:function (){}
                        });
                    }
                    else
                    {
                        //e.preventDefault();
                    }
        
          });
        
        
        $('#gerar_lote').click(function () {
            
            var nome_lote = $("#nome_lote").val();
            var quantidade_visualizar = "<?php echo ( isset($_POST['quantidade_visualizar']))? $_POST['quantidade_visualizar'] : ""?>";
            
             function hasWhiteSpace(s) {
                return s.indexOf(' ') >= 0;
              }
            
            if(nome_lote==="" || nome_lote.length===0 || ( $.trim( nome_lote ) == '') || hasWhiteSpace(nome_lote) ){
                
                $(function() {
                        Alert = {
                          show: function($div, msg) {
                            $div.find('.alert-msg').text(msg);
                            if ($div.css('display') === 'none') {
                              // fadein, fadeout.
                              //$div.fadeIn(1000).delay(2000).fadeOut(2000);
                              $div.fadeIn(100).delay(200).fadeOut(5000);
                            }
                          },
                          warn: function(msg) {
                            this.show($('#alert-warn'), msg);
                          }
                        }
                        
                        $('body').on('click', '.alert-close', function() {
                              $(this).parents('.alert').hide();
                        });
                        
                          Alert.warn('O nome do Lote não pode ser vazio ou conter espaços em branco!')
                });
                
            }
            else{
                
                $.ajax({
                        url: base_url+'admin/CertificadosEletronicos/gerar_lote',
                        type: "POST",
                        data:  {quantidade_visualizar : quantidade_visualizar, nome_lote:nome_lote},
                        beforeSend: function(){
                            $("#gerar_lote").hide();
                            $("#loading").html("<button  class='btn btn-success loading'>Gerando Lote... <i class='fa fa-spinner fa-spin'></i></button>");
                            $('#nome_lote').prop('disabled', true);            
                            $('.loading').prop('disabled', true); 
                        },
                        success: function(response){
                            
                        var json = JSON.parse(response);
                        
                        if(json.status===1)
                        {
                            $(function() {
                                    Alert = {
                                      show: function($div, msg) {
                                        $div.find('.alert-msg').text(msg);
                                        if ($div.css('display') === 'none') {
                                          $div.fadeIn(100).delay(200).fadeOut(9000);
                                        }
                                      },
                                      success: function(msg){
                                          this.show($('#alert-success'), msg);

                                      }
                                    }

                                    $('body').on('click', '.alert-close', function() {
                                          $(this).parents('.alert').hide();
                                    });

                                      Alert.success('O Lote foi criado com sucesso!')
                            });
                            
                            setTimeout(function () { location.reload(true) }, 2000);
                            
                        }
                        else if(json.status===0){
                             alert("Falha: "+json.msg);
                        }
                        
                        },
                        error: function(){}, 	        
                });
            
            }
            
            
        
        });
        
    });
</script>
<script>
$(document).ready(function() {

	/** ******************************
	 * Collapse Panels
	 * [data-perform="panel-collapse"]
	 ****************************** **/
	(function($, window, document){
		var panelSelector = '[data-perform="panel-collapse"]';

		$(panelSelector).each(function() {
			var $this = $(this),
			parent = $this.closest('.panel'),
			wrapper = parent.find('.panel-wrapper'),
			collapseOpts = {toggle: false};

			if( ! wrapper.length) {
				wrapper =
				parent.children('.panel-heading').nextAll()
				.wrapAll('<div/>')
				.parent()
				.addClass('panel-wrapper');
				collapseOpts = {};
			}
			wrapper
			.collapse(collapseOpts)
			.on('hide.bs.collapse', function() {
				$this.children('i').removeClass('fa-minus').addClass('fa-plus');
			})
			.on('show.bs.collapse', function() {
				$this.children('i').removeClass('fa-plus').addClass('fa-minus');
			});
		});
		$(document).on('click', panelSelector, function (e) {
			e.preventDefault();
			var parent = $(this).closest('.panel');
			var wrapper = parent.find('.panel-wrapper');
			wrapper.collapse('toggle');
		});
	}(jQuery, window, document));
  
  /** ******************************
	 * Remove Panels
	 * [data-perform="panel-dismiss"]
	 ****************************** **/
	(function($, window, document){
		var panelSelector = '[data-perform="panel-dismiss"]';
		$(document).on('click', panelSelector, function (e) {
			e.preventDefault();
			var parent = $(this).closest('.panel');
			removeElement();

			function removeElement() {
				var col = parent.parent();
				parent.remove();
				col.filter(function() {
					var el = $(this);
					return (el.is('[class*="col-"]') && el.children('*').length === 0);
				}).remove();
			}
		});
	}(jQuery, window, document));
  
});
</script>