@extends('usuarios.funcionarios.master.layout2')

@section('conteudo')
<nav class="d-none ">
    {{$cliente=\App\Models\Cliente::where('id',$id)->first()}}
     
  
 
    {{ $cliente = \App\Models\Cliente::where('id',$id)->first()}}

    {{  $armazens=\App\Models\ArmazemModel::get()}}

    @if($cliente)
    {{ $usuario= $cliente->getUser }}
    {{ $pessoa= $usuario->getPessoa }}
    @else

       {{-- Caso o armazém não seja encontrado no sistema, então o usuário será redireccionado a um nível anterior --}}
        <script>
            window.location.replace("{{ route('us.admin.cliente.listar') }}");
        </script>
        @php
            exit();
        @endphp
    @endif

</nav>

<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>
<nav class="container">
   
		<nav class="card">
			<div class="card-header">
				<figure class="text-center">
                  <blockquote class="blockquote">
                    <p><i class="fa fa-download"></i>  Importação de caixas no sistema.</p>
                  </blockquote>
                  <figcaption class="blockquote-footer">
                    clique em escolher ficheiro para ir a busca dos dados em excel <cite title="Source Title">table ex (Id,Caixa,Corredor,Modulo,Fileira,Celula) <small class="danger">Recomendado: 1000 (mil) cx / vez</small></cite>
                  </figcaption>
                </figure>
			</div>
			<div class="card-body">
			    <form>
			        <div class="input-group mb-3">
                      <input type="file" class="form-control" id="excel_file">
                      <label class="input-group-text" for="inputGroupFile02">Caixas em excel</label>
                    </div> 
			    </form>
			</div>

		</nav>
		<nav style="overflow:auto; height:350px" class="shadow mt-3 p-4">
		    
    		<nav id="excel_data">
    			
    		</nav>
		</nav>
		
		<nav class="container mt-4">
		    <div class="row">
              <div class="col">
                <label for="inputEmail4" class="form-label">Cliente</label>
                <input type="text" class="form-control" readonly value="{{$usuario->name}}">
              </div>
              <div class="col">
                <label for="inputEmail4" class="form-label">Código</label>
                <input type="text" class="form-control" id="codigo" readonly value="{{$cliente->numerocliente}}">
              </div>
              <div class="col">
                <label for="inputEmail4" class="form-label">Número de caixas</label>
                <input type="text" class="form-control" readonly value="0" id="BoxNumbers">
              </div>
              <div class="col">
                <label for="inputEmail4" class="form-label">Departamento</label>
                <input type="text" class="form-control" readonly aria-label="Last name" value="Padrão">
              </div>
              <div class="col">
                <label for="inputEmail4" class="form-label">Armazém</label>
                <select class="form-select" id="armazem" aria-label="Default select example"> 
                    @foreach ($armazens as $armazem )
                      <option value="{{$armazem->id}}">{{$armazem->nomearmazem}}{{$armazem->id}}</option>
                    @endforeach
                   
                </select>
              </div>
            </div>
		    <input type="hidden" id="codigo">
		    
		</nav>
		
		<button class=" mt-3 btn btn-info btn-sm importar"><i class="fa fa-download"></i> Importar caixas</button>
		<!-- Button trigger modal 
		-->
		<a class="btn btn-sm btn-primary" href="{{route('us.admin.cliente.import.data.2')}}">Corrigir falhas</a>
        <button type="button" class="btn btn-primary btnShowModal d-none" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
          Launch static backdrop modal
        </button>
        
        <!-- Modal -->
        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
          <div class="modal-dialog modal-dialog-scrollable modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Importando caixas</h5>
                 <!--<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
              </div>
              <div class="modal-body">
            	<nav class="card">
        			<div class="card-header">
        				<figure class="text-center">
                          <blockquote class="blockquote">
                            <p><i class="fa fa-download"></i>  Estados de importação.</p>
                          </blockquote>
                           
                        </figure>
        			</div>
        			<div class="card-body">
        			     <nav class="container mt-4">
                		    <div class="row">
                              <div class="col text-center">
                                <div class="spinner-grow text-primary" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                    <br>
                                    <label for="inputEmail4" class="form-label">Importando</label>
                                
                              </div>
                               
                            </div>
                            <hr>
                		    <div class="row">
                              <div class="col">
                                <label for="inputEmail4" class="form-label">Caixas (Total)</label>
                                <input type="text" class="form-control" readonly id="importCaixaTotal">
                              </div>
                              <div class="col">
                                <label for="inputEmail4" class="form-label">Caixas (Importadas)</label>
                                <input type="text" class="form-control" readonly id="importCaixaImportadas">
                              </div> 
                              
                              <div class="col">
                                <label for="inputEmail4" class="form-label">Caixas (Por importar)</label>
                                <input type="text" class="form-control" readonly id="importCaixaPorImportar">
                              </div> 
                            </div>
                		     
                		    
                		</nav>
        			</div>
        
        		</nav>
        		<hr>
        		<nav class="card">
        			<div class="card-header">
        				<figure class="text-center">
                          <blockquote class="blockquote">
                            <p><i class="fa fa-download"></i>  Lista de caixas importadas.</p>
                          </blockquote>
                           
                        </figure>
        			</div>
        			<div class="card-body">
        			    	<nav style="overflow:auto; height:300px" class="shadow border mt-3 p-4">
		                        <table class='table table-striped table-hover'>
		                            <thead>
                            		    <tr>

    				                        <td>Id</td>
                                            <td>Caixa</td>
                                            <td>Estado</td>
                                            <td>Corredor</td>
                                            <td>Modulo</td>
                                            <td>Fileira</td>
                                            <td>Celula</td>
                        
						 
					                    </tr>
                            		</thead>
                            		<tbody id="excel_data2">
                            			
                            		</tbody>
                        		</table>
                        		
                    		</nav>
        			</div>
        
        		</nav>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-sm btn-primary">Concluir</button>
              </div>
            </div>
          </div>
        </div>
		
</nav>
<script>
    var caixas=0;
     const excel_file=document.getElementById('excel_file')
    	var sheet_data
		excel_file.addEventListener('change',(e)=>{

			var reader= new FileReader();

			reader.readAsArrayBuffer(e.target.files[0])

			reader.onload = function(e){

				var data= new Uint8Array(reader.result);

				var work_book = XLSX.read(data,{type:'array'})

				var sheet_name = work_book.SheetNames;

				sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]],{header:1})

				if (sheet_data.length > 0)

				{

					var table_output = "<table class='table table-striped table-hover'>"
					table_output+="<tr>"

				 
						table_output+="<td>"
						table_output+="Id"
						table_output+="</td>"
				 
                        
						table_output+="<td>"
						table_output+="Caixa"
						table_output+="</td>"
						
						
						table_output+="<td>"
						table_output+="Estado"
						table_output+="</td>"
						
						table_output+="<td>"
						table_output+="Corredor"
						table_output+="</td>"
						
						table_output+="<td>"
						table_output+="Modulo"
						table_output+="</td>"
						
						
						table_output+="<td>"
						table_output+="Fileira"
						table_output+="</td>"
						
						
						table_output+="<td>"
						table_output+="Célula"
						table_output+="</td>"
					table_output+="</tr>"
					for (var linha = 0 ; linha < sheet_data.length; linha++) {
						
                        
						table_output+="<tr>"

						for (var coluna = 0; coluna < sheet_data[linha].length; coluna++) {
							
							table_output+="<td>"
							table_output+=sheet_data[linha][coluna]
							table_output+="</td>"
						}

						table_output+="</tr>"
					}

					table_output += "</table>"

					document.getElementById('BoxNumbers').innerHTML = sheet_data.length
					caixas=sheet_data.length
					$("#BoxNumbers").val(sheet_data.length);
					document.getElementById('excel_data').innerHTML = table_output

				}
			}

		});
		
	 
		$(function(){
		    
		    $(".importar").click(function(){
		        if(caixas>0)
		        {
		            
    		        Swal.fire({
                      title: 'Deseja realmente prosseguir com a importação?',
                      icon: 'info',
                      
                      showDenyButton: false,
                      showCancelButton: true,
                      confirmButtonText: 'Importar',
                      denyButtonText: `Ignorar`,
                    }).then((result) => {
                      /* Read more about isConfirmed, isDenied below */
                      if (result.isConfirmed) {
                       
                          
                        Swal.fire('Processo de importação inicializado com sucesso!', '', 'success')
                        $(".btnShowModal").click()
                        var caixasImportadas=0;
                        var caixasPorImportar=caixas;
                        $("#importCaixaTotal").val(caixas);
                        $("#importCaixaPorImportar").val(caixasPorImportar);
                        $("#importCaixaImportadas").val(caixasImportadas);
                        $("#excel_data2").empty();
                        if (sheet_data.length > 0)

				        {
				           
			             

			            	let armazem=$("#armazem").val()
			            	let codigo=$("#codigo").val();
	            	        for(var LinhaExcel=0; LinhaExcel<sheet_data.length; LinhaExcel++){
	            	            //console.log(sheet_data[LinhaExcel])
	            	           
    	            	           let importLine = async()=>{
    	            	               
    				                    $.post( "{{ route('us.armazem.gestao.caixas.importar.cx.cliente') }}",
                                        { '_token':  '{{ csrf_token()  }}','codigo':codigo,'armazem':armazem,'data': sheet_data[LinhaExcel]  },
                                        function(data){
                                          
                                        //console.log(data)
                                            
                                            if(data==1){
                                                
                                                if(caixasPorImportar<=0){
                                                   
                                                    console.log("Importação realizada com sucesso!")
                                                    //location.reload();
                                                   
                                                }else{
                                                    caixasPorImportar--;
                                                    console.log(caixasPorImportar);
                                                }
                                                console.log(caixasPorImportar);
                                                
                                                //$("#excel_data2").append("<tr><td>"+sheet_data[LinhaExcel][0]+"</td><td>"+sheet_data[LinhaExcel][1]+"</td><td>"+sheet_data[LinhaExcel][2]+"</td><td>"+sheet_data[LinhaExcel][3]+"</td><td>"+sheet_data[LinhaExcel][4]+"</td><td>"+sheet_data[LinhaExcel][5]+"</td><td>"+sheet_data[LinhaExcel][6]+"</td></tr>")
                                                
                                            }
                                         return data;
                                        }).fail(function(){
                                            alert("Infelizmente falhou o acesso à esta função");
                                        });
                                        
    	            	            }
                                    importLine().then((value)=>{
                                        caixasImportadas++;
                                        caixasPorImportar=caixas-caixasImportadas;
                                        $("#importCaixaPorImportar").val(caixasPorImportar);
                                        $("#importCaixaImportadas").val(caixasImportadas);
                                    });
                                    
                                  
	            	         /* return false;
	            	          continue
	            	          break*/
	            	        }
	            	        
	            	    }
	            	    
			            	 
				        
                      } 
                    })
		        
		            
		        }else
		            Swal.fire('Importe uma folha em excel com as caixas', '', 'info')
		    });
		})
    
    
</script>

@endsection