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

@section('conteudo')

<nav class="d-none">
    {{ $bases= \App\Models\BaseGestdoc::get() }}
    {{ $armazens= \App\Models\ArmazemModel::orderBy('id','DESC')->get()}}
</nav>

<br><br>
<nav class="container rounded shadow" style="background: linear-gradient( #013257bb , #01192cbb)">
    <br><br>


        <nav class="row p-4">


            <div class="col-5 text-start">

                <div class="btn bg-light btnTodos p-5 btn-outline-light text-black-50 rounded  border border-black-50" style="width: 180px;">
                    <i class="fa fa-2x fa-list"></i>
                    <br>
                    Todos
                </div>
                <div class="btn bg-light btnBases  p-5 btn-outline-light text-black-50 rounded  border border-black-50" style="width: 180px;">
                    <i class="fas fa-2x fa-database"></i>
                    <br>
                    Bases
                </div>

                <div class="btn bg-light btnArmazens p-5 btn-outline-light text-black-50 rounded  border border-black-50" style="width: 180px;">
                    <i class="fa fa-2x fa-warehouse"></i>
                    <br>
                    Armazem
                </div>
                <div  class=" corredor btn btnCorredor bg-light  p-5 btn-outline-light text-black-50 rounded  border border-black-50" style="width: 180px;">
                    <i class="fa fa-2x fa-road"></i>
                    <br>
                    Corredor
                </div>
                <div class="btn bg-light btnModulo p-5 btn-outline-light text-black-50 rounded  border border-black-50" style="width: 180px;">
                    <i class="fa fa-2x fa-puzzle-piece"></i>
                    <br>
                    Modulo
                </div>
                <div class="btn bg-light btnFileira p-5 btn-outline-light text-black-50 rounded  border border-black-50" style="width: 180px;">
                    <i class="fa fa-2x fa-arrows-alt-v"></i>
                    <br>
                    Fileira
                </div>
                <div class="btn bg-light btnPrateleira p-5 btn-outline-light text-black-50 rounded  border border-black-50" style="width: 180px;">
                    <i class="fa fa-2x fa-table"></i>
                    <br>
                    Prateleira
                </div>
                <div class="btn bg-light btnCaixa  p-5 btn-outline-light text-black-50 rounded  border border-black-50" style="width: 180px;">
                    <i class="fas fa-2x fa-box"></i>
                    <br>
                    Caixa
                </div>

            </div>
            <div class="col-7 p-4 text-center bg-light rounded border">
                <section id="armazem" class="apresentacao d-none animate__animated animate__zoomInDown">
                    <div class="row armazens">

                      <div class="large-12 columns text-start ">
                          <label class="m-2">
                        <i class="fa fa-warehouse"></i>
                         ARMAZENS</label>
                            <hr>

                        <div>
                            <table class="table table-bordered container  table-striped table-hover" id="armazensLista">
                                <thead>

                                    <tr class="">

                                     <th>Id</th>
                                      <th>Base</th>
                                      <th>Cod</th>
                                      <th>Armazém</th>
                                      <th>Data de cadastro</th>
                                      <th>Mais</th>

                                  </tr>

                               </thead>
                                <tfoot></tfoot>
                            </table>
                        </div>
                      </div>
                    </div>
                </section>
                <section id="corredores" class="apresentacao d-none animate__animated animate__zoomInDown">
                    Corredores
                </section>
                <section id="modulos" class="apresentacao d-none animate__animated animate__zoomInDown">
                    Modulos
                </section>

                <section id="prateleiras" class="apresentacao d-none animate__animated animate__zoomInDown">
                   Prateleiras
                </section>

                <section id="fileiras" class="apresentacao d-none animate__animated animate__zoomInDown">
                    Fileiras
                </section>
                <section id="todos" class="apresentacao animate__animated animate__zoomInDown bg-light">
                    <div class="row armazens">
                        <label class="m-2">
                            <i class="fa fa-list"></i>
                            TODOS</label>
                            <br> <br> <hr>
                      <div class="large-12 columns text-start ">
                          <label class="m-2">
                        <i class="fa fa-warehouse"></i>
                         ARMAZENS</label>
                        <div class="owl-carousel p-3 owl-theme rounded border carouselArmazens">

                            <div class="item  p-3 rounded border carouselArmazensMain"  style="  background:linear-gradient(#eee,#ddd)">

                                <a  data-bs-toggle="modal" data-bs-target="#cadArmazem" class="rounded-circle w-100 text-center " style="cursor: pointer">

                                    <i class="fa  fa-plus"></i>
                                    <br>   Novo
                                </a>
                            </div>


                            @foreach($armazens as $armazem)
                                @if($armazem->cor_tema=="")
                                    <div class="item armazemDrop bg-light rounded border overflow-hidden" style="background-color:{{ $armazem->cor_tema }}">
                                    <a href="{{ route('us.armazem.conf.arm.verarmazem',$armazem->id) }}" class="p-3 w-100 text-center text-secondary shadow" >
                                @else
                                    <div class="item armazemDrop   rounded border overflow-hidden" style="background-color:{{ $armazem->cor_tema }}">
                                    <a href="{{ route('us.armazem.conf.arm.verarmazem',$armazem->id) }}" class="p-3 w-100 text-center text-white shadow" >
                                @endif


                                        <i class="fa  fa-warehouse"></i>
                                        <br> @php
                                            echo Str::substr($armazem->nomearmazem, 0, 4)
                                        @endphp
                                    </a>
                                </div>
                            @endforeach

{{--
                            <div class="item border m-4 bg-light p-4 border rounded  " style="width:100px;  height: 100px;cursor:pointer;">
                                <a href="" class="rounded-circle w-100 text-center">

                                    <i class="fa  fa-expand"></i>
                                    <br>   Armazem Quadring
                                </a>
                            </div> --}}
                        </div>
                        <hr>

                      </div>
                    </div>
                    <div class="row armazens">
                        <div class="large-12 columns text-start ">
                            <label class="m-2">
                          <i class="fa fa-road"></i>
                           CORREDORES</label>
                            <div class="owl-carousel p-3 owl-theme rounded border">

                              <div class="item  p-3 rounded border" style="background:linear-gradient(#eee,#ddd)">

                                  <a href="" class="rounded-circle w-100 text-center">

                                      <i class="fa  fa-plus"></i>
                                      <br>   Novo
                                  </a>
                                </div>
                                {{-- <div class="item  p-3 rounded border" style="background:linear-gradient(#eee,#ddd)">

                                  <a href="" class="rounded-circle w-100 text-center">

                                      <i class="fa  fa-plus"></i>
                                      <br>   Novo
                                  </a>
                                </div> --}}
  {{--
                              <div class="item border m-4 bg-light p-4 border rounded  " style="width:100px;  height: 100px;cursor:pointer;">
                                  <a href="" class="rounded-circle w-100 text-center">

                                      <i class="fa  fa-expand"></i>
                                      <br>   Armazem Quadring
                                  </a>
                              </div> --}}
                          </div>
                          <hr>

                        </div>
                      </div>
                      <div class="row armazens">
                        <div class="large-12 columns text-start ">
                            <label class="m-2">
                          <i class="fa fa-puzzle-piece"></i>
                           MÓDULOS</label>
                            <div class="owl-carousel p-3 owl-theme rounded border">

                              <div class="item  p-3 rounded border" style="background:linear-gradient(#eee,#ddd)">

                                  <a href="" class="rounded-circle w-100 text-center">

                                      <i class="fa  fa-plus"></i>
                                      <br>   Novo
                                  </a>
                                </div>
                                {{-- <div class="item  p-3 rounded border" style="background:linear-gradient(#eee,#ddd)">

                                  <a href="" class="rounded-circle w-100 text-center">

                                      <i class="fa  fa-plus"></i>
                                      <br>   Novo
                                  </a>
                                </div> --}}
  {{--
                              <div class="item border m-4 bg-light p-4 border rounded  " style="width:100px;  height: 100px;cursor:pointer;">
                                  <a href="" class="rounded-circle w-100 text-center">

                                      <i class="fa  fa-expand"></i>
                                      <br>   Armazem Quadring
                                  </a>
                              </div> --}}
                          </div>
                          <hr>

                        </div>
                      </div>
                      <div class="row armazens">
                        <div class="large-12 columns text-start ">
                            <label class="m-2">
                          <i class="fa fa-arrows-alt-h"></i>
                           FILEIRAS</label>
                            <div class="owl-carousel p-3 owl-theme rounded border">

                              <div class="item  p-3 rounded border" style="background:linear-gradient(#eee,#ddd)">

                                  <a href="" class="rounded-circle w-100 text-center">

                                      <i class="fa  fa-plus"></i>
                                      <br>   Novo
                                  </a>
                                </div>
                                {{-- <div class="item  p-3 rounded border" style="background:linear-gradient(#eee,#ddd)">

                                  <a href="" class="rounded-circle w-100 text-center">

                                      <i class="fa  fa-plus"></i>
                                      <br>   Novo
                                  </a>
                                </div> --}}
  {{--
                              <div class="item border m-4 bg-light p-4 border rounded  " style="width:100px;  height: 100px;cursor:pointer;">
                                  <a href="" class="rounded-circle w-100 text-center">

                                      <i class="fa  fa-expand"></i>
                                      <br>   Armazem Quadring
                                  </a>
                              </div> --}}
                          </div>
                          <hr>

                        </div>
                      </div>
                      <div class="row armazens">
                        <div class="large-12 columns text-start ">
                            <label class="m-2">
                          <i class="fa fa-table"></i>
                           PRATELEIRAS</label>
                            <div class="owl-carousel p-3 owl-theme rounded border">

                              <div class="item  p-3 rounded border" style="background:linear-gradient(#eee,#ddd)">

                                  <a href="" class="rounded-circle w-100 text-center">

                                      <i class="fa  fa-plus"></i>
                                      <br>   Novo
                                  </a>
                                </div>
                                {{-- <div class="item  p-3 rounded border" style="background:linear-gradient(#eee,#ddd)">

                                  <a href="" class="rounded-circle w-100 text-center">

                                      <i class="fa  fa-plus"></i>
                                      <br>   Novo
                                  </a>
                                </div> --}}
  {{--
                              <div class="item border m-4 bg-light p-4 border rounded  " style="width:100px;  height: 100px;cursor:pointer;">
                                  <a href="" class="rounded-circle w-100 text-center">

                                      <i class="fa  fa-expand"></i>
                                      <br>   Armazem Quadring
                                  </a>
                              </div> --}}
                          </div>
                          <hr>

                        </div>
                      </div>
                      <div class="row armazens">
                        <div class="large-12 columns text-start ">
                            <label class="m-2">
                          <i class="fa fa-warehouse"></i>
                           CAIXAS</label>
                            <div class="owl-carousel p-3 owl-theme rounded border">

                              <div class="item  p-3 rounded border" style="background:linear-gradient(#eee,#ddd)">

                                  <a href="" class="rounded-circle w-100 text-center">

                                      <i class="fa  fa-plus"></i>
                                      <br>   Novo
                                  </a>
                                </div>
                                {{-- <div class="item  p-3 rounded border" style="background:linear-gradient(#eee,#ddd)">

                                  <a href="" class="rounded-circle w-100 text-center">

                                      <i class="fa  fa-plus"></i>
                                      <br>   Novo
                                  </a>
                                </div> --}}
  {{--
                              <div class="item border m-4 bg-light p-4 border rounded  " style="width:100px;  height: 100px;cursor:pointer;">
                                  <a href="" class="rounded-circle w-100 text-center">

                                      <i class="fa  fa-expand"></i>
                                      <br>   Armazem Quadring
                                  </a>
                              </div> --}}
                          </div>
                          <hr>

                        </div>
                      </div>
                </section>

            </div>


        </nav>


{{-- MODALS --}}

<!-- Button trigger modal -->


  <!-- Modal  Armazem-->
  <div class="modal fade " id="cadArmazem" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="cadArmazemLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="cadArmazemLabel"><i class="fa fa-plus"></i> Novo armazém</h5>
          <button type="button" class="btn-close closeModalArmazem" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
            <form  method="get" id="cadArmazem" >
                <div class="modal-body">
                    <div class="text-center">
                        <br>

                        <i class="fa fa-2x fa-warehouse"></i>

                    </div>
                    <br>
                    <hr>
                    <br>
                    <div>
                        @csrf
                        <div class="content">

                            <div class="col-md-12 position-relative">
                                <label for="validationTooltip01"  class="form-label">Nome do armazém</label>
                                <input type="text" class="form-control armazemName" name="armazem" placeholder="Insira aqui o nome" required>
                            </div>
                            <br> <br>
                            <div class="col-md-12 position-relative">
                                <label   class="form-label">Base</label>
                                <select name="base_id" class="form-control baseId" id="validationTooltip02"  required>
                                     @foreach($bases as $base)
                                        <option value="{{$base->id}}">{{$base->base}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-12 position-relative">
                                <br><br><br>
                            </div>
                        </div>



                    </div>
                    <br> <br>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-sm btn-success cadArmazem">Cadastrar <i class="fa fa-check"></i></button>
                </div>
            </form>
        </div>
    </div>
  </div>


  <!-- Modal  Corredor-->
  <div class="modal fade " id="cadArmazem" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="cadArmazemLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="cadArmazemLabel"><i class="fa fa-plus"></i> Novo corredor</h5>
          <button type="button" class="btn-close closeModalArmazem" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
            <form  method="get" id="cadArmazem" >
                <div class="modal-body">
                    <div class="text-center">
                        <br>

                        <i class="fa fa-2x fa-warehouse"></i>

                    </div>
                    <br>
                    <hr>
                    <br>
                    <div>
                        @csrf
                        <div class="content">

                            <div class="col-md-12 position-relative">
                                <label for="validationTooltip01"  class="form-label">Nome do armazém</label>
                                <input type="text" class="form-control armazemName" name="armazem" placeholder="Insira aqui o nome" required>
                            </div>
                            <br> <br>
                            <div class="col-md-12 position-relative">
                                <label   class="form-label">Base</label>
                                <select name="base_id" class="form-control baseId" id="validationTooltip02"  required>
                                     @foreach($bases as $base)
                                        <option value="{{$base->id}}">{{$base->base}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-12 position-relative">
                                <br><br><br>
                            </div>
                        </div>



                    </div>
                    <br> <br>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-sm btn-success cadArmazem">Cadastrar <i class="fa fa-check"></i></button>
                </div>
            </form>
        </div>
    </div>
  </div>
  {{-- TOASTS --}}
  <!-- Flexbox container for aligning the toasts -->



</nav>
<div class="tst d-none 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 toastMessage">

      </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>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


     <script>

        $(function(){
            $(".tst").hide();
            $(".tst").removeClass('d-none');
            $(".apresentacao").hide();
            $("#todos").show();
            // $("#armazem").show();

            $(".apresentacao").removeClass('d-none');
            $(".toastMessage").text("Olá");
            var toast=$(".tst");




            $(".btnTodos").click(function(){
                $(".apresentacao").hide();
                $("#todos").show();
            });


            $(".btnArmazens").click(function(){
                $(".apresentacao").hide();
                $("#armazem").show();
            });
            $(".btnCorredor").click(function(){
                $(".apresentacao").hide();
                $("#corredores").show();
            });
            $(".btnModulo").click(function(){
                $(".apresentacao").hide();
                $("#modulos").show();
            });
            $(".btnFileira").click(function(){
                $(".apresentacao").hide();
                $("#fileiras").show();



            });
            $(".btnPrateleira").click(function(){
                $(".apresentacao").hide();
                $("#prateleiras").show();
                });

            var toastMessage=$(".toastMessage");

            $(".tstClose").click(function(){
            var element =  $(this);

            var toastHead = element.parent();

            var toastElement=toastHead.parent()


            toastElement.fadeOut(400);
            });
            // $(".corredor").draggable();
            $(".corredor").draggable({ revert: true });
            $(".corredor").draggable({ revert: true, helper: "clone" });


            $(".armazemDrop").droppable({
                drop: function(event, ui) {
                    $(this).css('background', 'rgb(0,200,0)');
                },
                over: function(event, ui) {
                    $(this).css('background', 'orange');
                },
                out: function(event, ui) {
                    $(this).css('background', 'cyan');
                }
            });


            $(".btn").hover(function(){
                // $(this).removeClass('shadow-sm');
                $(this).addClass('shadow-lg');
                // $(this).addClass('p-lg');
            });
            $(".btn").mouseleave(function(){
                $(this).removeClass('shadow-lg');
                // $(this).addClass('shadow-sm');
            });



            var owlArmazem = $("#owl-armazem");

            owlArmazem.owlCarousel({
                items : 10, //10 items above 1000px browser width
                itemsDesktop : [1000,5], //5 items between 1000px and 901px
                itemsDesktopSmall : [900,3], // betweem 900px and 601px
                itemsTablet: [600,2], //2 items between 600 and 0
                itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
            });




            var owl = $('.owl-carousel');
            owl.on('initialize.owl.carousel initialized.owl.carousel ' +
                'initialize.owl.carousel initialize.owl.carousel ' +
                'resize.owl.carousel resized.owl.carousel ' +
                'refresh.owl.carousel refreshed.owl.carousel ' +
                'update.owl.carousel updated.owl.carousel ' +
                'drag.owl.carousel dragged.owl.carousel ' +
                'translate.owl.carousel translated.owl.carousel ' +
                'to.owl.carousel changed.owl.carousel',
                function(e) {
                $('.' + e.type)
                    .removeClass('secondary')
                    .addClass('success');
                window.setTimeout(function() {
                    $('.' + e.type)
                    .removeClass('success')
                    .addClass('secondary');
                }, 500);
                });
            owl.owlCarousel({
                loop: false,
                nav: true,
                lazyLoad: true,
                margin: 10,
                video: true,
                responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 3
                },
                960: {
                    items: 5,
                },
                1200: {
                    items: 6
                }
                }
            });


            $("#cadArmazem").submit(function(e){
                var dados=$(this).serialize();
                var nomeArmazem=$(".armazemName").val();
                var base_id=$(".baseId").val();
                e.preventDefault();

                $.post( "{{ route('us.armazem.conf.arm.add.armaz') }}",
                 { 'armazem': nomeArmazem,'base_id': base_id,'_token':  '{{ csrf_token()  }}' },
                 function(data){
                    // alert(data)
                    $(".closeModalArmazem").click();
                    if(data==1){

                        toast.removeClass("bg-danger");
                        toast.addClass("bg-primary");
                        toast.show().delay(6200).fadeOut(5000);toastMessage.text("Armazém cadastrado com sucesso!");
                        // $(".carouselArmazens").empty();
                        $.post("{{ route('us.armazem.conf.arm.get.geral') }}",
                        {'_token':  '{{ csrf_token()  }}'},
                        function(data){
                           $(".carouselArmazensMain").after(data);
                        }).fail(function(){
                            alert("Algo de errado não está certo aqui")
                        });
                        // alert("Armazém cadastrado com sucesso!");
                    }
                    else{
                        toast.removeClass("bg-primary");
                        toast.addClass("bg-danger");
                        toast.show();toastMessage.text("Armazém não cadastrado, razão: Já existe um armazém com este nome");

                    }
                }).fail(function(){
                    alert("Infelizmente falhou o acesso à esta função");
                });
            });


            $('#armazensLista').DataTable({



                processing: false,
                serverSide: false,
                ajax: '{{url('usuario/secarmazem/configuracaoaarmazem/armconf/getData')}}',
                columns: [
                        { data: 'id', name: 'id' },
                        { data: 'base', name: 'base' },
                        { data: 'cod', name: 'cod' },
                        { data: 'nomearmazem', name: 'nomearmazem' },
                        { data: 'created_at', name: 'created_at' },
                        { data: 'acao', name: 'acao', orderable: false, searchable: false },

                    ],


            });
        })
    </script>
@endsection