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

@section('conteudo')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js" integrity="sha512-zuZ5wVszlsRbRF/vwXD0QS/tHzBYHFzCD/BT0lI3yrWhNZFWDkkF3KPEY//WTanqxwPdZkskQ+xZo0rnfHBc5A==" crossorigin="anonymous"></script>
<nav class="d-none">
    {{ $base = \App\Models\BaseGestdoc::where('id',$idBase)->first()}}

    @if($base)

    @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.armazem.conf.arm.bases') }}");
        </script>
        @php
            exit();
        @endphp
    @endif
    {{ $armazem= \App\Models\ArmazemModel::where('id',$id)->first()}}



    @if($armazem)
        {{--  --}}

        {{ $corredores= \App\Models\Corredor::where('armazem_id',$id)->get() }}
        {{ $modulos= \App\Models\Modulo::join('corredores','corredores.id','=','modulos.corredor_id')->join('armazens','armazens.id','=','corredores.armazem_id')->where('armazens.id',$id)->count()   }}
        {{ $celulas= \App\Models\Celula::join('modulos','modulos.id','=','celulas.modulo_id')->join('corredores','corredores.id','=','modulos.corredor_id')->join('armazens','armazens.id','=','corredores.armazem_id')->where('armazens.id',$id)->count()   }}
        {{ $fileiras=\App\Models\Fileira::join('celulas','celulas.id','=','filas.celula_id')->join('modulos','modulos.id','=','celulas.modulo_id')->join('corredores','corredores.id','=','modulos.corredor_id')->join('armazens','armazens.id','=','corredores.armazem_id')->where('armazens.id',$id)->count()  }}
        {{ $caixas= \App\Models\EspacoCaixaModulo::join('celulas','celulas.id','=','espacoscaixascelulas.celula_id')->join('modulos','modulos.id','=','celulas.modulo_id')->join('corredores','corredores.id','=','modulos.corredor_id')->join('armazens','armazens.id','=','corredores.armazem_id')->where('armazens.id',$id)->get()  }}
        {{ $prateleiras= 0 }}
        {{ $indexes= 0 }}
        {{ $base= $armazem->getBase }}
        {{ $owner= $armazem->getOwner }}
        {{ $bases=\App\Models\BaseGestdoc::get() }}
        {{ $funcionario= $owner->getFuncionario }}
        {{ $cx=0 }}
        @foreach($caixas as $caixa)
            {{ $cx+=$caixa->espacoscaixa }}

        @endforeach
    @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.armazem.conf.arm.ver.armazens.base',$idBase) }}");
        </script>
        @php
            exit();
        @endphp
    @endif

</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>Armazém</h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="row p-2">
                            <nav class="col-4 colorBigView rounded border border-2 shadow"  style="background-color:{{ $armazem->cor_tema }}">

                            </nav>
                            <nav class="col-4">
                                @if($armazem)
                                    <ul style="list-style-type: square">
                                        <li class="p-2">Número identificador: <label for="">{{ $armazem->id }}</label> </li>
                                        <li class="p-2">Nome do armazém: <label for="" class="idNomeArmazem">{{ $armazem->nomearmazem }}</label> </li>
                                        <li class="p-2">Código: <label for=""> @php
                                            echo Str::substr($armazem->nomearmazem, 0, 4)
                                        @endphp</label> </li>
                                        <li class="p-2">Base pertencente: <label for="">{{ $base->base }}</label> </li>
                                        <li class="p-2">Cadastrado por: <label for="">{{ $owner->getPessoa->nome }} ({{ $funcionario->getCategoria->categoria }}/{{ $funcionario->getSector->sector }})</label> </li>
                                        <li class="p-2">Estado:  @if($armazem->estado=="activo")
                                            <label class="text-success">{{ $armazem->estado }}
                                            <i class="fa fa-check text-success"></i>
                                        @else
                                            <label class="text-success">{{ $armazem->estado }}
                                            <i class="fa fa-times text-danger"></i>

                                        @endif </label> </li>
                                        <li class="p-2">Data de criação: <label for="">{{ $armazem->created_at }}</label> </li>
                                        <li class="p-2">Última actualização: <label for="">{{ $armazem->updated_at }}</label> </li>
                                    </ul>
                                @endif

                            </nav>
                            <nav class="col-4">
                                @if($armazem)
                                    <ul style="list-style-type: square">
                                        <li class="p-2">Número de andares: <label for="">{{ $armazem->numeroandares }}</label> </li>
                                        <li class="p-2">Número de corredores: <label for="">{{ $armazem->numerocorredores }}</label> </li>
                                        <li class="p-2">Altura: <label for="">{{ $armazem->alturam }}</label> (m) x <label for="">{{ $armazem->alturacm }}</label> (cm)</li>
                                        <li class="p-2">Largura: <label for="">{{ $armazem->larguram }}</label> (m) x <label for="">{{ $armazem->larguram }}</label> (cm)</li>
                                        <li class="p-2">Profundidade: <label for="">{{ $armazem->profundidadem }}</label> (m) x <label for="">{{ $armazem->profundidadecm }}</label> (cm)</li>
                                        <li class="p-2">Cor: <label for="">{{ $armazem->cor_tema }}</label></li>

                                @endif

                            </nav>
                        </div>
                    </div>
                    <div class="tile_count ">
                        <div class="x_title">
                            <h2>Dashboard</h2>
                            <div class="clearfix"></div>

                        </div>
                        <br><br>

                        <div class="col-md-2 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i>CORREDORES</span>
                            <div class="count">{{  $corredores->count() }}</div>
                            <a href="{{ route('us.armazem.conf.arm.ver.corredores.armazem',[$idBase,$armazem->id]) }}" class="btn-outline-light btn-sm w-100"> <i class="fa fa-eye"></i> Ver mais</a>
                            {{-- <span class="count_bottom"> From last Week</span> --}}
                        </div>
                        <nav class="d-none">
                            {{$md=0}}
                            {{$cel=0}}
                            {{$fil=0}}
                            {{$espC=0}}
                            @foreach($corredores as $crr)
                                {{$modul=$crr->getModulos}}
                                {{$md+=$modul->count()}}
                                @foreach($modul as $mod)
                                    {{$cel+=$mod->getCelulas->count()}}
                                    @foreach($mod->getCelulas as $cell)
                                        {{$filNumbers=\App\Models\Fileira::where('celula_id',$cell->id)->get()}}
                                        @if($filNumbers)
                                            {{ $fil+=$filNumbers->count() }}
                                        @endif
                                        
                                        
                                        @if($cell->getEspCx)
                                          {{ $espC+=$cell->getEspCx->espacoscaixa }}
                                         
                                        @endif
                                    @endforeach
                                @endforeach
                            @endforeach
                        </nav>
                        <div class="col-md-2 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i> MODULOS</span>
                            <div class="count">{{ $md }}</div>
                            {{-- <a href="" class="btn-outline-light btn-sm w-100"> <i class="fa fa-eye"></i> Ver mais</a> --}}
                            {{-- <span class="count_bottom"> From last Week</span> --}}
                        </div>
                        
                        <div class="col-md-2 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i> CÉLULAS</span>
                            <div class="count">{{ $celulas }}</div>
                            {{-- <a href="" class="btn-outline-light btn-sm w-100"> <i class="fa fa-eye"></i> Ver mais</a> --}}
                            {{-- <span class="count_bottom">From last Week</span> --}}
                        </div>

                        <div class="col-md-2 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i> FILEIRAS</span>
                            <div class="count">{{ $fil }}</div>
                            {{-- <a href="" class="btn-outline-light btn-sm w-100"> <i class="fa fa-eye"></i> Ver mais</a> --}}
                            {{-- <span class="count_bottom"> From last Week</span> --}}
                        </div>
                        <div class="col-md-2 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i> ESPAÇOS CAIXAS</span>
                            <div class="count">{{ $espC }}</div>
                            {{-- <a href="" class="btn-outline-light btn-sm w-100"> <i class="fa fa-eye"></i> Ver mais</a> --}}
                            {{-- <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span> --}}
                        </div>

                    </div>

                    <div class="tile_count ">

                        {{-- <div class="col-md-2 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i>CORREDORES</span>
                            <div class="count">{{  $corredores }}</div>
                            <a href="{{ route('us.armazem.conf.arm.ver.corredores.armazem',$armazem->id) }}" class="btn-outline-light btn-sm w-100"> <i class="fa fa-eye"></i> Ver mais</a>

                        </div>
                        <div class="col-md-2 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i> MODULOS</span>
                            <div class="count">{{ $modulos }}</div>
                            <a href="" class="btn-outline-light btn-sm w-100"> <i class="fa fa-eye"></i> Ver mais</a>

                        </div>

                        <div class="col-md-2 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i> CÉLULAS</span>
                            <div class="count">{{ $celulas }}</div>
                            <a href="" class="btn-outline-light btn-sm w-100"> <i class="fa fa-eye"></i> Ver mais</a>

                        </div>

                        <div class="col-md-2 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i> FILEIRAS</span>
                            <div class="count">{{ $prateleiras }}</div>
                            <a href="" class="btn-outline-light btn-sm w-100"> <i class="fa fa-eye"></i> Ver mais</a>

                        </div>
                        <div class="col-md-2 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i> CAIXAS</span>
                            <div class="count">{{ $caixas }}</div>
                            <a href="" class="btn-outline-light btn-sm w-100"> <i class="fa fa-eye"></i> Ver mais</a>

                        </div>
                        <div class="col-md-2 col-sm-4  tile_stats_count">
                            <span class="count_top"><i class="fa fa-user"></i> INDEXES</span>
                            <div class="count">{{ $indexes }}</div>
                            <a href="" class="btn-outline-light btn-sm w-100"> <i class="fa fa-eye"></i> Ver mais</a>

                        </div> --}}
                    </div>
                    <div class="col-12 text-start">
                    <div class="row justify-content-center "   >

                        <div class="large-12 columns text-start p-3 rounded bg-light  animate__animated animate__zoomInDown ">
                            <label class="m-2">
                                <i class="fa fa-warehouse"></i>
                                Corredores
                            </label>
                            <hr>

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

                                    <tr class="">

                                        {{-- <th>#</th> --}}
                                        {{-- <th>Base</th> --}}
                                        {{-- <th>Cod</th> --}}
                                        <th>Número</th>
                                        <th>Configuração</th>
                                        <th>Data de cadastro</th>
                                        <th>Mais</th>

                                    </tr>

                                </thead>
                                <tbody id="Armazens">
                                    <p class="d-none">{{ $i=1 }}</p>
                                    @foreach ($corredores as $corredor )
                                        <tr class="">

                                            {{-- <th>{{ $i++}}</th> --}}
                                            {{-- <th>Base</th> --}}
                                            {{-- <th>Armazém</th> --}}
                                            <th>{{ $corredor->numerocorredor }}</th>
                                            <th>
                                                @if ($corredor->configuracao_id)
                                                    <label class="text-success"><i class="fa fa-cog"></i> <i class="fa fa-check "></i> Configurado</label>
                                                @else
                                                    <label class="text-danger"><i class="fa fa-cog"></i> <i class="fa fa-times "></i> Não configurado</label>


                                                @endif

                                            </th>
                                            <th>{{ $corredor->created_at }}</th>
                                            <th>

                                                @if ($corredor->configuracao_id)
                                                <a class="btn btn-outline-info btn-sm" href="{{ route('us.armazem.conf.arm.ver.corredor.armazem',[$idBase,$id,$corredor->id] )  }}"> <i class="fa fa-eye"></i> Abrir</a>
                                                @else
                                                <a class="btn btn-outline-warning btn-sm" href="{{ route('us.armazem.conf.arm.config.corredor.armazem',[$idBase,$id,$corredor->id] )  }}"> <i class="fa fa-cog"></i> Configurar</a>
                                                @endif

                                            </th>

                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </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="#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>
                        <a href="{{ route('us.armazem.conf.arm.ver.base',$armazem->base_id) }}" class="btn btn-sm btn-outline-light"><i class="fa fa-eye"></i> Base pertencente</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> --}}
                        {{-- <button href=" " class="btn btn-sm btn-outline-warning btnCopiarConfiguracoes" ><i class="fa fa-eye"></i> Copiar configurações</button> --}}

                        {{-- <button class="btn btn-sm btn-outline-info  " data-bs-toggle="modal" data-bs-target="#staticBackdropConfigPast"><i class="fa fa-table"></i>   Colar configurações</button> --}}

                    </div>
                    {{--
                    <div class="x_title">
                        <h2>Herança de configuração</h2>
                        <div class="clearfix"></div>
                        <button class="btn btn-sm btn-outline-light" data-bs-toggle="modal" data-bs-target="#configuracaoArmazem"><i class="fa fa-cog"></i> Herdar configuração de outro armazém</button>

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

            </div>


        </nav>

  <!-- Modals -->


  {{-- ELIMINAR ARMAZÉM --}}
  <div class="modal fade" id="deleteArmazemModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteArmazemModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="deleteArmazemModalLabel">DESACTIVAÇÃO DO ARMAZEM</h5>
          <button type="button" class="btn-close closeModalArmazem" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form class="text-center" id="desactivarArmazem">
            @csrf
            <br>
            <i class="fa fa-3x text-danger fa-exclamation-triangle"></i>
            <br>
            <small>
                <p class="p-4">
                    Esta area sensível é extremamente crucial, pelo que deve ter muita atenção quando tomar a decisão de prosseguir, já não será possível encontrar corredores, caixas ou outros elementos pertencentes à esse armazem. Desejamos muito cuidado!
                </p>
            </small>
            <div class="modal-body">
               <input type="password" class="form-control"  placeholder="Sua senha" required name="" id="passwordDesArmazem">
               <br>
            </div>
            <div class="modal-footer">
                {{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> --}}
                <button type="submit" class="btn btn-danger"><i class="fa fa-exclamation-triangle"></i> Desactivar mesmo assim</button>
            </div>
        </form>
      </div>
    </div>
  </div>


{{-- PREFERÊNCIAS ARMAZÉNS --}}
<div class="modal fade" id="preferenciaArmazem" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="preferenciaArmazemLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="preferenciaArmazemLabel"><i class="fa fa-paint-brush"></i> PREFERÊNCIAS</h5>
          <button type="button" class="btn-close closeModalArmazem" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="d-flex align-items-start row">
            <div class="nav flex-column nav-pills col-3 p-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
              <button class="nav-link active btn btn-sm" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true"><i class="fa fa-palette"></i> Cor</button>
              <button class="nav-link btn btn-sm" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false"><i class="fa fa-images"></i> Img</button>
            </div>
            <div class="tab-content shadow col-9" id="v-pills-tabContent">
              <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                <form class="text-center" id="escolhaCorArmazemForm">
                    @csrf

                    <br>
                    <i class="fa fa-3x  fa-palette"></i>
                    <br>
                    <small>
                        <p class="p-4 w-100">
                                 Escolha uma cor na paleta
                        </p>
                    </small>

                    <div class="modal-body row">
                        <nav class="col-4  shadow border border-3 paletteResult p-2 rounded" style="background-color:{{ $armazem->cor_tema }}">
                            <br><br><br><br><br>
                        </nav>
                        <nav class="col-8 row">
                            <nav class="col">
                                <button type="button" class="shadow border btn   btn0592fd  p-2 rounded"  style="background-color: #0592fd"></button>
                            </nav>
                            <nav class="col">
                                <button type="button" class="shadow border btn  btn0eda7b  p-2 rounded"  style="background-color: #0eda7b"></button>
                            </nav>
                            <nav class="col">
                                <button type="button" class="shadow border btn   btn4f03e8  p-2 rounded"  style="background-color: #4f03e8"></button>
                            </nav>
                            <nav class="col">
                                <button type="button" class="shadow border btn   btne513f0f3  p-2 rounded"  style="background-color: #e513f0f3"></button>
                            </nav>
                            <nav class="col">
                                <button type="button" class="shadow border btn   btnf71552  p-2 rounded"  style="background-color: #f71552"></button>
                            </nav>
                            <nav class="col">
                                <button type="button" class="shadow border btn   btn020d16  p-2 rounded"  style="background-color: #020d16"></button>
                            </nav>
                            <nav class="col">
                                <button type="button" class="shadow border btn btn01192cbb  p-2 rounded" style="background-color: #01192cbb"></button>
                            </nav>
                            <nav class="col">
                                <button type="button" class="shadow border btn   btneeaf10f3  p-2 rounded"  style="background-color: #eeaf10f3"></button>
                            </nav>
                            <nav class="col">
                                <button type="button" class="shadow border btn   btndf4313  p-2 rounded"  style="background-color: #df4313"></button>
                            </nav>
                            <nav class="col">
                                <button type="button" class="shadow border btn   btn801704  p-2 rounded"  style="background-color: #801704"></button>
                            </nav>
                            <nav class="col">
                                <button type="button" class="shadow border btn   btn390454  p-2 rounded"  style="background-color: #390454"></button>
                            </nav>
                            <nav class="col">
                                <button type="button" class="shadow border btn   btn266303  p-2 rounded"  style="background-color: #266303"></button>
                            </nav>
                        </nav>
                    </div>
                    <div class="modal-footer">
                        <small>Cor escolhida:</small>
                        <input type="text" class="form-control txtInputResultPalette form-control-sm" value="{{ $armazem->cor_tema }}" name="cor" disabled id="corInputForm">

                        <button type="submit" class="btn btn-success"><i class="fa fa-check"></i> Concluir</button>
                    </div>
                </form>
              </div>
              <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                <form class="text-center" >
                    @csrf
                    <br><br><br>
                    <i class="fa fa-3x fa-images"></i>
                    <br><br>
                    <small>
                        <p class="p-4">
                           Futuramente vai ser possível editar a sua imagem de fundo para personalizar como quiser este armazem.
                        </p>
                    </small>
                    <div class="modal-body">
                       {{-- <input type="password" class="form-control"  placeholder="Sua senha" required name="" id="passwordDesArmazem"> --}}
                       <br>
                    </div>
                    <div class="modal-footer">
                        {{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> --}}
                        {{-- <button type="submit" class="btn btn-success"><i class="fa fa-check"></i> Concluir</button> --}}
                    </div>
                </form>
              </div>

            </div>
          </div>

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

{{-- CONFIGURAÇÃO ARMAZÉM --}}

<div class="modal fade" id="configuracaoArmazem" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="configuracaoArmazemLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered ">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="configuracaoArmazemLabel">CONFIGURAÇÃO DO ARMAZEM</h5>
          <button type="button" class="btn-close closeModalConfiguracaoArmazem" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

            <div class="modal-body p-1">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Dados básicos</button>
                    </li>
                    <li class="nav-item" role="presentation">
                    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false"> Delimitações </button>
                    </li>
                    <li class="nav-item" role="presentation">
                    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false"> Geometria</button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active p-4" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <form id="config01">
                            <br><br>

                            <div class="form-floating mb-3">
                                <input type="text" required class="form-control txtNomeArmazem"  value="{{ $armazem->nomearmazem }}" placeholder="name@example.com">
                                <label for="txtNomeArmazem">Nome do armazém</label>
                              </div>
                            <div class="mb-3">
                                <div class="form-floating">
                                    <select class="form-select" id="basePertencente" aria-label="Floating label select example">
                                        @foreach($bases as $bs)
                                            @if($base->id==$bs->id)

                                                <option selected value="{{ $bs->id }}">{{ $bs->base }}</option>
                                            @else
                                                <option value="{{ $bs->id }}">{{ $bs->base }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                    <label for="basePertencente">Base pertencente</label>
                                  </div>
                            </div>

                            <br><br>
                            <div class="modal-footer">
                                {{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> --}}
                                <button type="submit" class="btn btn-info btn-sm text-white"><i class="fa fa-check"></i> Salvar </button>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane fade p-4" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <form id="config02">
                            <br><br>
                            <div class="mb-3">
                                <label for="exampleFormControlTextarea1" class="form-label">Número de andares : </label>
                                @if($armazem->numeroandares=='')
                                <label id="lblNumeroAndaresLabel" class="form-label">1</label>
                                <input type="range" class="form-range" value="1" required min="1" max="20" step="1" id="idNumeroAndares">
                                @else
                                    <label id="lblNumeroAndaresLabel" class="form-label">{{ $armazem->numeroandares }}</label>
                                    <input type="range" class="form-range" value="{{ $armazem->numeroandares }}" required min="1" max="20" step="1" id="idNumeroAndares">
                                @endif
                            </div>
                            <div class="mb-3">
                                <label for="exampleFormControlTextarea1" class="form-label">Número de Corredores : </label>
                                @if($armazem->numerocorredores=='')
                                    <label id="lblNumeroCorredoresLabel" class="form-label">1</label>
                                    <input type="range" class="form-range" value="1" required min="1" max="50" step="1" id="idNumeroCorredores">
                                @else
                                    <label id="lblNumeroCorredoresLabel" class="form-label">{{ $armazem->numerocorredores }}</label>
                                    <input type="range" class="form-range" value="{{ $armazem->numerocorredores }}" required min="1" max="50" step="1" id="idNumeroCorredores">
                                @endif
                            </div>

                            <br><br>
                            <div class="modal-footer">
                                {{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> --}}
                                <button type="submit" class="btn btn-info btn-sm text-white"><i class="fa fa-check"></i> Salvar </button>
                            </div>
                        </form>

                    </div>
                    <div class="tab-pane fade p-4" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        <form id="config03">
                            <br><br>

                            <div class="mb-3">

                                {{-- <input type="number" class="form-control" id="txtAlturaArmazem"  required value="{{ $armazem->alturaarmazem }}" placeholder="Informe o nome do armazém"> --}}
                                <label for="">Altura (m)</label>

                                <input id="alturam" type="text"/>
                                <label for="">Altura (cm)</label>

                                <input id="alturacm" type="text"/>
                            </div>

                            <div class="mb-3">
                                <br><br><br>
                                <label for="">Largura (m)</label>
                                <input id="larguram" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
                                <span id="larguraMCurrentSliderValLabel">   <span id="ex6SliderVal">0</span></span>
                                <br><br><br>
                                <label for="">Largura (cm)</label>
                                <input id="larguracm" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
                                <span id="larguraCmCurrentSliderValLabel"> <span id="ex6SliderVal">0</span></span>
                            </div>

                            <div class="mb-3">
                                <br><br><br>
                                <label for="">Profundidade (m)</label>
                                <input id="profundidadem" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
                                <span id="profundidadeMCurrentSliderValLabel">   <span id="ex6SliderVal">0</span></span>
                                <br><br><br>
                                <label for="">Profundidade (cm)</label>
                                <input id="profundidadecm" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
                                <span id="profundidadeCmCurrentSliderValLabel"> <span id="ex6SliderVal">0</span></span>
                            </div>

                            <br><br>
                            <div class="modal-footer">
                                {{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> --}}
                                <button type="submit" class="btn btn-info btn-sm text-white"><i class="fa fa-check"></i> Salvar </button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>


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



<script>
     // grab the raw "querystring"
     $(function(){

        var slider = new Slider("#larguram", {
            min: 0,
            max: 100,
            value: '{{ $armazem->larguram }}',
            // tooltip: 'always',
            // orientation: 'vertical',
            tooltip_position:'top',
            // reversed : true
        });
            document.getElementById("larguraMCurrentSliderValLabel").textContent = '{{ $armazem->larguram }}';
        slider.on("slide", function(sliderValue) {
            document.getElementById("larguraMCurrentSliderValLabel").textContent = sliderValue;
        });
        var slider = new Slider("#larguracm", {
            min: 0,
            max: 100,
            value: '{{ $armazem->larguram }}',
            // tooltip: 'always',
            // orientation: 'vertical',
            tooltip_position:'bottom',
            // reversed : true
        });
            document.getElementById("larguraCmCurrentSliderValLabel").textContent = '{{ $armazem->larguram }}';
        slider.on("slide", function(sliderValue) {
            document.getElementById("larguraCmCurrentSliderValLabel").textContent = sliderValue;
        });



        var slider = new Slider("#profundidadem", {
            min: 0,
            max: 100,
            value: '{{ $armazem->profundidadem }}',
            // tooltip: 'always',
            // orientation: 'vertical',
            tooltip_position:'top',
            // reversed : true
        });
        document.getElementById("profundidadeMCurrentSliderValLabel").textContent = '{{ $armazem->profundidadem }}';

        slider.on("slide", function(sliderValue) {
            document.getElementById("profundidadeMCurrentSliderValLabel").textContent = sliderValue;
        });
        var slider = new Slider("#profundidadecm", {
            min: 0,
            max: 100,
            value: '{{ $armazem->profundidadecm }}',
            // tooltip: 'always',
            // orientation: 'vertical',
            tooltip_position:'bottom',
            // reversed : true
        });
        document.getElementById("profundidadeCmCurrentSliderValLabel").textContent =  '{{ $armazem->profundidadecm }}';

        slider.on("slide", function(sliderValue) {
            document.getElementById("profundidadeCmCurrentSliderValLabel").textContent = sliderValue;
        });








        var sliderB = new Slider("#alturam", {
            min: 0,
            max: 100,
            value: '{{ $armazem->alturam }}',
            tooltip: 'always',
            orientation: 'vertical',
            tooltip_position:'right',
            reversed : true
        });
        var sliderB = new Slider("#alturacm", {
            min: 0,
            max: 100,
            value: '{{ $armazem->alturacm }}',
            tooltip: 'always',
            orientation: 'vertical',
            tooltip_position:'right',
            reversed : true
        });
        $('#armazemContainer').ripples({
            resolution: 400,
			dropRadius: 10, //px
			perturbance: 0.04,
			interactive: false
        });
        $("#desactivarArmazem").submit(function(e){

            e.preventDefault();
            $(".tst").hide();
            $(".tst").removeClass('d-none');
            var toast=$(".tst");
            var toastMessage=$(".toastMessage");
            var passwordSenha=$("#passwordDesArmazem").val();
            // alert({{ $armazem->id  }});
            $.post( "{{ route('us.armazem.conf.arm.desactivar.armazem') }}",
                 { '_token':  '{{ csrf_token()  }}','password': passwordSenha,'id':'{{ $armazem->id  }}' },
                 function(data){
                    //  alert(data);
                    // $(".closeModalArmazem").click();
                    $(".closeModalArmazem").click();
                    if(data==1){

                        toast.show().delay(6200).fadeOut(5000);
                        toast.removeClass("bg-danger");
                        toast.addClass("bg-primary");
                        toastMessage.text("Armazém desactivado com sucesso! Aguarde um instante...");
                        toast.animate(3000, function(){
                            $(location).attr('href','{{  route('us.armazem.conf.arm.ver.armazens.base',$armazem->base_id) }}');
                        });
                    }else{

                        toastMessage.text("Não foi possível desactivar o armazem, razão: Senha do utilizador está incorrecta");
                        toast.show().delay(6200).fadeOut(5000);
                        toast.removeClass("bg-primary");
                        toast.addClass("bg-danger");
                        // // $(".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!");
                    }
                }).fail(function(){
                    alert("Infelizmente falhou o acesso à esta função");
                });
        });


        $("#idNumeroAndares").change(function(){
            $("#lblNumeroAndaresLabel").text($(this).val());
        });
        $("#idNumeroCorredores").change(function(){
            $("#lblNumeroCorredoresLabel").text($(this).val());

        });

        $("#escolhaCorArmazemForm").submit(function(e){
            e.preventDefault();

            var codigoCor=$(".txtInputResultPalette").val();
            // alert(codigoCor)
            // alert({{ $armazem->id  }});
            $.post( "{{ route('us.armazem.conf.arm.add.cor.armazem') }}",
                 { '_token':  '{{ csrf_token()  }}','codigoCor': codigoCor,'id':'{{ $armazem->id  }}' },
                 function(data){
                    $(".closeModalArmazem").click();

                    if(data==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: 'Cor do armazém alterada com sucesso'
                        })

                    }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: 'Não foi possível alterar a cor do armazém, por favor, tente novamente mais tarde'
                        })

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


        $("#config01").submit(function(e){
            e.preventDefault();

            var txtNomeArmazem=$(".txtNomeArmazem").val();
            var basePertencente=$("#basePertencente").val();
            // alert(txtNomeArmazem)
            // alert(basePertencente)
            // alert({{ $armazem->id  }});
            $.post( "{{ route('us.armazem.conf.arm.edit.armazem',1) }}",
                 { '_token':  '{{ csrf_token()  }}','idBase':basePertencente ,'nomearmazem':txtNomeArmazem,'idArm':'{{ $armazem->id  }}' },
                 function(data){
                    //  alert(data)
                    $(".closeModalConfiguracaoArmazem").click();
                    if(data==1){
                        $(".idNomeArmazem").text(txtNomeArmazem);
                        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: 'Dados do armazém alterados 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: 'Dados do armazém não alterados!'
                        })
                        location.reload(true);

                    }
                }).fail(function(){
                    alert("Infelizmente falhou o acesso à esta função");
                });
        });
        $("#config02").submit(function(e){
            e.preventDefault();

            var idNumeroAndares=$("#idNumeroAndares").val();
            var idNumeroCorredores=$("#idNumeroCorredores").val();

            $.post( "{{ route('us.armazem.conf.arm.edit.armazem',2) }}",
                 { '_token':  '{{ csrf_token()  }}','idNumeroAndares':idNumeroAndares ,'idNumeroCorredores':idNumeroCorredores,'idArm':'{{ $armazem->id  }}' },
                 function(data){
                    $(".closeModalConfiguracaoArmazem").click();
                    if(data==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: 'Delimitações do armazém alteradas 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: 'Delimitações do armazém não alteradas'
                        })
                        location.reload(true);
                    }
                }).fail(function(){
                    alert("Infelizmente falhou o acesso à esta função");
                });
        });
        $("#config03").submit(function(e){
            e.preventDefault();

            var alturam=$("#alturam").val();
            var alturacm=$("#alturacm").val();
            var larguram=$("#larguram").val();
            var larguracm=$("#larguracm").val();
            var profundidadem=$("#profundidadem").val();
            var profundidadecm=$("#profundidadecm").val();

            $.post( "{{ route('us.armazem.conf.arm.edit.armazem',3) }}",
                 { '_token':  '{{ csrf_token()  }}',
                 'alturam':alturam,
                 'alturacm':alturacm,
                 'larguram':larguram,
                 'larguracm':larguracm,
                 'profundidadem':profundidadem,
                 'profundidadecm':profundidadecm,
                 'idArm':'{{ $armazem->id  }}' },
                 function(data){

                    $(".closeModalConfiguracaoArmazem").click();
                    if(data==1){
                        // $(".idNomeArmazem").text(txtNomeArmazem);
                        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: 'Geometria do armazém alterada 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: 'Geometria do armazém não alterada!'
                        })
                        location.reload(true);
                    }
                }).fail(function(){
                    alert("Infelizmente falhou o acesso à esta função");
                });
        });

        $(".btn0592fd").click(function(){
            $(".txtInputResultPalette").val("#0592fd");
            $(".paletteResult").removeClass("bg-dark");
            $(".paletteResult").css("background-color","#0592fd");
            $(".colorBigView").css("background-color","#0592fd");
        });
        $(".btn0eda7b").click(function(){
            $(".txtInputResultPalette").val("#0eda7b");
            $(".paletteResult").removeClass("bg-dark");
            $(".paletteResult").css("background-color","#0eda7b");
            $(".colorBigView").css("background-color","#0eda7b");
        });
        $(".btn4f03e8").click(function(){
            $(".txtInputResultPalette").val("#4f03e8");
            $(".paletteResult").removeClass("bg-dark");
            $(".paletteResult").css("background-color","#4f03e8");
            $(".colorBigView").css("background-color","#4f03e8");
        });
        $(".btne513f0f3").click(function(){
            $(".txtInputResultPalette").val("#e513f0f3");
            $(".paletteResult").removeClass("bg-dark");
            $(".paletteResult").css("background-color","#e513f0f3");
            $(".colorBigView").css("background-color","#e513f0f3");
        });
        $(".btnf71552").click(function(){
            $(".txtInputResultPalette").val("#f71552");
            $(".paletteResult").removeClass("bg-dark");
            $(".paletteResult").css("background-color","#f71552");
            $(".colorBigView").css("background-color","#f71552");
        });
        $(".btn020d16").click(function(){
            $(".txtInputResultPalette").val("#020d16");
            $(".paletteResult").removeClass("bg-dark");
            $(".paletteResult").css("background-color","#020d16");
            $(".colorBigView").css("background-color","#020d16");
        });
        $(".btn01192cbb").click(function(){
            $(".txtInputResultPalette").val("#01192cbb");
            $(".paletteResult").removeClass("bg-dark");
            $(".paletteResult").css("background-color","#01192cbb");
            $(".colorBigView").css("background-color","#01192cbb");
        });
        $(".btneeaf10f3").click(function(){
            $(".txtInputResultPalette").val("#eeaf10f3");
            $(".paletteResult").removeClass("bg-dark");
            $(".paletteResult").css("background-color","#eeaf10f3");
            $(".colorBigView").css("background-color","#eeaf10f3");
        });
        $(".btndf4313").click(function(){
            $(".txtInputResultPalette").val("#df4313");
            $(".paletteResult").removeClass("bg-dark");
            $(".paletteResult").css("background-color","#df4313");
            $(".colorBigView").css("background-color","#df4313");
        });
        $(".btn801704").click(function(){
            $(".txtInputResultPalette").val("#801704");
            $(".paletteResult").removeClass("bg-dark");
            $(".paletteResult").css("background-color","#801704");
            $(".colorBigView").css("background-color","#801704");
        });
        $(".btn390454").click(function(){
            $(".txtInputResultPalette").val("#390454");
            $(".paletteResult").removeClass("bg-dark");
            $(".paletteResult").css("background-color","#390454");
            $(".colorBigView").css("background-color","#390454");
        });
        $(".btn266303").click(function(){
            $(".txtInputResultPalette").val("#266303");
            $(".paletteResult").removeClass("bg-dark");
            $(".paletteResult").css("background-color","#266303");
            $(".colorBigView").css("background-color","#266303");
        });
    });
</script>
@endsection
