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

@section('conteudo')
<script src="{{asset('js/jquery.dataTables.min.js') }}"></script>
<nav class="d-none">
     
{{ $configcaixas=\App\Models\ConfCaixa::get() }}
</nav>
<nav class="container rounded shadow" style="background: linear-gradient( #013257bb , #01192cbb)">
    <br>
    <div class="tst  d-none animate__animated animate__fadeInDown rounded text-center border border-1  m-4 align-items-center text-white    " role="alert" aria-live="assertive" aria-atomic="true">
        {{-- <div class="  d-nodne animate__animated animate__fadeInDown border border-3 position-absolute top-0 start-50 m-4 align-items-center text-white  border-0 d-nodne animate__animated animate__fadeInDown border border-3 position-absolute top-0 start-50 m-4 align-items-center text-white  border-0" role="alert" aria-live="assertive" aria-atomic="true"> --}}
        <div class="d-flex">
          <div class="toast-body ">
            <p class="toastMessage">
                 <br>
                    Example modal
                 <br>
            </p>
          </div>
          {{-- <button type="button" class="tstClose btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button> --}}
        </div>
    </div>
        <nav class="row p-4">


            <div class="col-12 text-start">
                <div class="row justify-content-center" id="armazemContainer"   >
                    <div class=" p-2">

                        <div class="x_title">
                            <h2>CONFIGURAÇÃO DE CAIXAS</h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="row p-2">
                            <nav class="col-3 text-center colorBigView rounded border border-2 shadow" >
                                <br><br>
                                <br><br>
                                <i class="fa top-50  fa-box fa-5x"></i>
                                <br><br>
                                <br><br>
                                <br> 
                            </nav>
                            {{-- <nav class="col-4">
                                
                                    <ul style="list-style-type: square">
                                        <li class="p-2">Número identificador: <label for=""></label> </li>
                                        <li class="p-2">Nome do armazém: <label for="" class="idNomeArmazem"></label> </li>
                                        
                                        <li class="p-2">Data de criação: <label for=""></label> </li>
                                        <li class="p-2">Última actualização: <label for=""></label> </li>
                                    </ul>
                                

                            </nav>
                            <nav class="col-4">
                                
                                    <ul style="list-style-type: square">
                                        <li class="p-2">Número de andares: <label for=""></label> </li>
                                        <li class="p-2">Número de corredores: <label for=""></label> </li>
                                        <li class="p-2">Altura: <label for=""></label> (m)</li>
                                        <li class="p-2">Largura: <label for=""></label> (m)</li>
                                        <li class="p-2">Profundidade: <label for=""></label> (m)</li>
                                        <li class="p-2">Cor: <label for=""></label></li>

                                

                            </nav> --}}
                        </div>
                    </div>
                     

                    <div class="tile_count ">
                        <div class="x_title">
                            <h2>TIPOS DE CAIXA</h2>
                            <div class="clearfix"></div>

                        </div>
                        <br><br>
                        <div class="container">
                            <div class="list-group">
                                <nav class="col-12 table-responsive">
                                    <table class="table container table-borderless table-striped table-hover" id="tiposcaixa">
                                        <thead>
                    
                                            <tr class="text-white">
                    
                                             <th>Cod.</th>
                                              <th>Tipo</th>
                                              <th>Altura</th>
                                              <th>Largura</th>
                                              <th>Profundidade</th>
                                              <th>Data de cadastro</th>
                                              <th>Autor</th>
                                              <th>Mais</th>
                    
                                          </tr>
                    
                                       </thead>
                                       <tbody>
                                        @foreach($configcaixas as  $config)
                                            
                                            <tr  class=" text-dark">
                                                 
                                                <th>{{ $config->id }}</th>
                                                <th>{{ $config->tipocaixa }} </th>
                                                <th>{{ $config->alturacaixam }} m x {{ $config->alturacaixacm }} cm</th>
                                                <th>{{ $config->larguracaixam }} m x {{ $config->larguracaixacm }} cm</th>
                                                <th>{{ $config->profundidadecaixam }} m x {{ $config->profundidadecaixam }} cm</th>
                                                <th>{{ $config->created_at }}</th>
                                                <th>{{ $config->getUser->getPessoa->nome }} ({{ $config->getUser->getFuncionario->getCategoria->categoria }} / Sector: {{ $config->getUser->getFuncionario->getSector->sector }})</th>
                                                <th><a href=""><i class="fa fa-edit"></i></a></th>
                                            </tr>
                                        @endforeach

                                        </tbody>
                                        <tfoot></tfoot>
                                    </table>
                                </nav>
                            </div>
                        </div>
                    </div>
                    <div class=" p-3">
                        <div class="x_title">
                            <h2>Configuração</h2>
                            <div class="clearfix"></div>
                        </div>
                        {{-- <button class="btn btn-sm btn-outline-light"><i class="fa fa-plus"></i> Nova entrada</button> --}}
                        <!--<button class="btn btn-sm btn-outline-light" data-bs-toggle="modal" data-bs-target="#configuracaoArmazem"><i class="fa fa-cog"></i> Configuração</button>-->
                        <button class="btn btn-sm btn-outline-light" data-bs-toggle="modal" data-bs-target="#tipoCaixa"><i class="fa fa-plus"></i> Novo</button>
                        <!--<button class="btn btn-sm btn-outline-light" data-bs-toggle="modal" data-bs-target="#preferenciaArmazem"><i class="fa fa-paint-brush"></i> Preferências</button>-->
                        <!--{{-- <a href="{{ route('us.armazem.conf.arm.ver.armazens.base',$armazem->base_id) }}" class="btn btn-sm btn-outline-light btnOutrosArmazens"><i class="fa fa-list-ul"></i> Outros Armazéns</a>-->
                          --}}
                        <!--<button class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteArmazemModal"><i class="fa fa-exclamation-triangle"></i> Desactivar armazém</button>-->
                        {{-- <button class="btn btn-sm btn-outline-success"><i class="fa fa-exclamation-triangle"></i> Restaurar armazém</button> --}}

                    </div>
                </div>

            </div>


        </nav>
 
    <div class="modal fade" id="tipoCaixa" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="tipoCaixaLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="tipoCaixaLabel">Tipos de caixa</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="formCadTipoCaixa">
                    <div class="modal-body">
                        Configuração de tipos de caixa
                        <br>
                        <br>
                        <nav class="text-center">

                            <i class="fa fa-4x fa-box "></i>
                        </nav>
                        <br><br>
                        <div class="form-floating">

                            {{-- <label for=""> Quantidade de corredores</label> --}}
                            <input type="text" class="form-control rounded" id="tipocaixanome" placeholder="Dê um nome aqui" required>
                            <label for="listaConfiguracoes">Tipo de caixa (Nome)</label>
                        </div>
                        {{-- alturacorredor	larguracorredor	base_id	usuario_id --}}
                        <br>
                        <div class="mb-3">
                            <label for="exampleFormControlTextarea1" class="form-label">Altura: </label>

                            <label id="lblAlturaCaixaM" class="form-label">0 </label> (m)
                            <input type="range" class="form-range" value="0" required min="0" max="3" step="1" id="alturaConfigCaixaM">
                            <hr>
                            <label for="exampleFormControlTextarea1" class="form-label">Altura: </label>
                            
                            <label id="lblAlturaCaixaCm" class="form-label">0 </label> (cm)
                            <input type="range" class="form-range" value="0" required min="0" max="100" step="1" id="alturaConfigCaixaCm">
                        </div>
                        
                        <br>
                        <div class="mb-3">
                            <label for="exampleFormControlTextarea1" class="form-label">Largura: </label>

                            <label id="lblLarguraCaixaM" class="form-label">0 </label> (m)
                            <input type="range" class="form-range" value="0" required min="0" max="3" step="1" id="larguraConfigCaixaM">
                            <hr>
                            <label for="exampleFormControlTextarea1" class="form-label">Largura: </label>
                            
                            <label id="lblLarguraCaixaCm" class="form-label">0 </label> (cm)
                            <input type="range" class="form-range" value="0" required min="0" max="100" step="1" id="larguraConfigCaixaCm">
                        </div>
                        
                        <br>
                        <div class="mb-3">
                            <label for="exampleFormControlTextarea1" class="form-label">Profundidade: </label>

                            <label id="lblProfundidadeCaixaM" class="form-label">0 </label> (m)
                            <input type="range" class="form-range" value="0" required min="0" max="3" step="1" id="profundidadeConfigCaixaM">
                            <hr>
                            <label for="exampleFormControlTextarea1" class="form-label">Profundidade: </label>
                            
                            <label id="lblProfundidadeCaixaCm" class="form-label">0 </label> (cm)
                            <input type="range" class="form-range" value="0" required min="0" max="100" step="1" id="profundidadeConfigCaixaCm">
                        </div>
                        <br>
                        
                    </div>
                    <div class="modal-footer">

                    <button type="submit" class="btn btn-primary">Cadastrar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <script>
        $(function(){
            


            $("#alturaConfigCaixaM").on('change keypress mousemove',function(){
                $("#lblAlturaCaixaM").text($(this).val());
            });
            $("#alturaConfigCaixaCm").on('change keypress mousemove',function(){
                $("#lblAlturaCaixaCm").text($(this).val());
            });

            $("#larguraConfigCaixaM").on('change keypress mousemove',function(){
                $("#lblLarguraCaixaM").text($(this).val());
            });
            $("#larguraConfigCaixaCm").on('change keypress mousemove',function(){
                $("#lblLarguraCaixaCm").text($(this).val());
            });

            $("#profundidadeConfigCaixaM").on('change keypress mousemove',function(){
                $("#lblProfundidadeCaixaM").text($(this).val());
            });
            $("#profundidadeConfigCaixaCm").on('change keypress mousemove',function(){
                $("#lblProfundidadeCaixaCm").text($(this).val());
            });
            
            $("#formCadTipoCaixa").submit(function(e){
                e.preventDefault(); 

                var tipocaixa=$("#tipocaixanome").val();
                var alturacaixam=$("#alturaConfigCaixaM").val(); 
                var alturacaixacm=$("#alturaConfigCaixaCm").val();
                var larguracaixam=$("#larguraConfigCaixaM").val();
                var larguracaixacm=$("#larguraConfigCaixaCm").val();
                var profundidadecaixam=$("#profundidadeConfigCaixaM").val();
                var profundidadecaixacm=$("#profundidadeConfigCaixaCm").val();

                $.post("{{ route('us.armazem.conf.arm.add.tipocaixa') }}",
                {
                    '_token':  '{{ csrf_token()  }}',
                    'tipocaixa':tipocaixa,
                    'alturacaixam':alturacaixam,
                    'larguracaixam':larguracaixam,
                    'profundidadecaixam':profundidadecaixam,
                    'alturacaixacm':alturacaixacm,
                    'larguracaixacm':larguracaixacm,
                    'profundidadecaixacm':profundidadecaixacm, 

                },function(e){

                       if(e==1){
                           const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000,
                            timerProgressBar: true,
                            didOpen: (toast) => {
                                toast.addEventListener('mouseenter', Swal.stopTimer)
                                toast.addEventListener('mouseleave', Swal.resumeTimer)
                            }
                        })

                        Toast.fire({
                            icon: 'success',
                            title: 'Tipo de caixa cadastrado com sucesso'
                        })
                            location.reload(true);
                       }else{
                            const Toast = Swal.mixin({
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 3000,
                                timerProgressBar: true,
                                didOpen: (toast) => {
                                    toast.addEventListener('mouseenter', Swal.stopTimer)
                                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                                }
                            })
    
                            Toast.fire({
                                icon: 'warning',
                                title: 'Infelizmente não foi possível cadastrar o tipo de caixa, algum erro aconteceu!'
                            })
                       }

                }).fail(function(){
                    alert("falha ao cadastrar a configurção do corredor! Por algum motivo não conseguimos cadastrar a configuração do corredor tente novemante mais tarde ou informe ao engenheiro de software.")
                });
            });

 
            
        });
    </script>
@endsection