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

@section('conteudo')
<style>
    .tabs {
           display: block;
           display: -webkit-flex;
           display: -moz-flex;
           display: flex;
           -webkit-flex-wrap: wrap;
           -moz-flex-wrap: wrap;
           flex-wrap: wrap;
           margin: 0;
           overflow: hidden; }
           .tabs [class^="tab"] label,
           .tabs [class*=" tab"] label {
               color: #333;
               cursor: pointer;
               display: block;
               font-size: 1.1em;
               font-weight: 300;
               line-height: 1em;
               padding: 2rem 0;
               text-align: center; }
           .tabs [class^="tab"] [type="radio"],
           .tabs [class*=" tab"] [type="radio"] {
               border-bottom: 1px solid rgba(239, 237, 239, 0.5);
               cursor: pointer;
               -webkit-appearance: none;
               -moz-appearance: none;
               appearance: none;
               display: block;
               width: 100%;
               -webkit-transition: all 0.3s ease-in-out;
               -moz-transition: all 0.3s ease-in-out;
               -o-transition: all 0.3s ease-in-out;
               transition: all 0.3s ease-in-out; }
               .tabs [class^="tab"] [type="radio"]:hover, .tabs [class^="tab"] [type="radio"]:focus,
               .tabs [class*=" tab"] [type="radio"]:hover,
               .tabs [class*=" tab"] [type="radio"]:focus {
               border-bottom: 1px solid #fd264f; }
               .tabs [class^="tab"] [type="radio"]:checked,
               .tabs [class*=" tab"] [type="radio"]:checked {
               border-bottom: 2px solid #fd264f; }
               .tabs [class^="tab"] [type="radio"]:checked + div,
               .tabs [class*=" tab"] [type="radio"]:checked + div {
               opacity: 1; }
               .tabs [class^="tab"] [type="radio"] + div,
               .tabs [class*=" tab"] [type="radio"] + div {
               display: block;
               opacity: 0;
               padding: 2rem 0;
               width: 90%;
               -webkit-transition: all 0.3s ease-in-out;
               -moz-transition: all 0.3s ease-in-out;
               -o-transition: all 0.3s ease-in-out;
               transition: all 0.3s ease-in-out; }
           .tabs .tab-2 {
               width: 50%; }
               .tabs .tab-2 [type="radio"] + div {
               width: 200%;
               margin-left: 200%; }
               .tabs .tab-2 [type="radio"]:checked + div {
               margin-left: 0; }
               .tabs .tab-2:last-child [type="radio"] + div {
               margin-left: 100%; }
               .tabs .tab-2:last-child [type="radio"]:checked + div {
               margin-left: -100%; }
  </style>
<nav class="container animate__animated animate__zoomInDown">

    <div class="row">
        <nav class="12">
            {{-- <a href="http://flkt-crnpio.github.io/pitaya/">made with<br>pitaya</a> --}}
            <br>
            <h4>
                <i class="fa fa-building"></i>
                CONFIGURAÇÃO DE ARMAZÉM<br>
                <i>Bases do armazem</i>
            </h4>
            <br>
            <hr>
            <nav class="d-none">
                {{ $bases=\App\Models\Base::  orderBy('created_at','Asc')->get() }}

            </nav>
            <div class="tabs">
                <div class="tab-2">
                    <label for="tab2-1">Bases</label>
                    <input id="tab2-1" name="tabs-two" type="radio" checked="checked">
                    <div>
                        <h4>Escolha uma base</h4>
                        <p>Que deseja sobre ela fazer a configuração do armazém.</p>

                        <div id="stepper1" class="bs-stepper">
                            <table id="reservasTable" class="table container  table-striped table-hover">
                                <thead>
                                    <tr class="">
                                        <th>#</th>
                                        <th>Base</th>
                                        <th>País</th>
                                        <th>Província</th>
                                        <th>Município</th>
                                        <th>Bairro</th>
                                        <th>Referência</th>
                                        <th>Numero</th>
                                        <th>Escolher</th>

                                        </tr>
                                        </thead>
                                        <tbody>
                                            <div class="d-none">
                                                {{ $i=1 }}

                                            </div>
                                        @foreach($bases as $base)
                                        <tr>

                                            <td>{{ $base->id }}</td>
                                            <td>{{ $base->base}}</td>
                                            <td>{{ $base->pais}}</td>
                                            <td>{{ $base->provincia}}</td>
                                            <td>{{ $base->municipio}}</td>
                                            <td>{{ $base->bairro}}</td>
                                            <td>{{ $base->referencia}}</td>
                                            <td>{{ $base->numero}}</td>



                                            <td>
                                                <a href="{{ route('us.armazem.conf.arm.ver.base',$base->id) }}" class="btn btn-sm btn-outline-primary btnSelecionarReserva"> <i class="fa fa-cog "></i> Escolher
                                                <input type="hidden" class="codigoId" value="{{ $base->id }}"></a>
                                                {{-- <a href="{{ route('us.armazem.gestao.caixas.ver.reserva',$base->id ) }}" class="btn btn-sm btn-outline-secondary"> <i class="fa fa-eye"></i> Ver mais</a> --}}
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                <tfoot></tfoot>
                            </table>

                        </div>


                    </div>



                </div>
                <div class="tab-2">
                <!-- <label for="tab2-2">+ Nova base</label> -->
                <input id="tab2-2" name="tabs-two" type="radio">
                <div>
                    <h4>Cadastrar nova base</h4>
                    {{-- <p>Basta fazer a leitura do codigo com o software da pistola com a sua conta logada .</p> --}}

                    <nav class="container">

                      <form class=" g-3">
                        <div class="col-md-6">
                         <div class="form-floating">
                            <input class="form-control" id="floatingInputGrid" placeholder="Digite o nome aqui"  >
                            <label for="floatingInputGrid">Nome da base</label>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <label for="inputPassword4" class="form-label">Password</label>
                          <input type="password" class="form-control" id="inputPassword4">
                        </div>
                        <div class="col-12">
                          <label for="inputAddress" class="form-label">Address</label>
                          <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
                        </div>
                        <div class="col-12">
                          <label for="inputAddress2" class="form-label">Address 2</label>
                          <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
                        </div>
                        <div class="col-md-6">
                          <label for="inputCity" class="form-label">City</label>
                          <input type="text" class="form-control" id="inputCity">
                        </div>
                        <div class="col-md-4">
                          <label for="inputState" class="form-label">State</label>
                          <select id="inputState" class="form-select">
                            <option selected>Choose...</option>
                            <option>...</option>
                          </select>
                        </div>
                        <div class="col-md-2">
                          <label for="inputZip" class="form-label">Zip</label>
                          <input type="text" class="form-control" id="inputZip">
                        </div>
                        <div class="col-12">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="gridCheck">
                            <label class="form-check-label" for="gridCheck">
                              Check me out
                            </label>
                          </div>
                        </div>
                        <div class="col-12">
                          <button type="submit" class="btn btn-primary">Sign in</button>
                        </div>
                      </form>
                    </nav>
                </div>
                </div>
            </div>
        </nav>


    </div>
</nav>
@endsection