@php
    $titulo = 'EPIs Início'
@endphp
@include('components.head')
<style>
    .form-control {
       height: 40px;
       /* Ajusta a altura da caixa de pesquisa */
   }

   .card-header {
       color: #007bff !important;
       /* Azul aplicado com prioridade */
       font-family: 'Arial', sans-serif;
       /* Definindo fonte personalizada */
       font-weight: bold;

   }
</style>
<div class="container">
    <h5>EPIs</h5>
    <div class="row align-items-center ">
        <!-- Primeiro formulário -->
        <div class="col-lg-12">
            
            <form action="" method="GET" class="d-flex">
                <!-- Campo de pesquisa -->
                <input
                    type="text"
                    name="search"
                    class="form-control me-2"
                    placeholder="Pesquisa de epi"
                    value="{{ request('search') }}">
                <!-- Botão para limpar a pesquisa -->
                @if(request('search'))
                    <a href="" class="btn btn-danger me-2">Limpar</a>
                @endif
                <button type="submit" class="btn btn-primary">Pesquisar</button>
                <button type="button" onclick="window.location.href='{{route('rh.epi.criar')}}'" class="btn btn-success ml-2">Cadastrar</button>
            </form>
            
        </div>
    
        
    </div>
    <div class="mt-3">

        <h5>EPIs cadastradas</h5>
    </div>
     
        {{-- @foreach ($epis as  $epi)
            <div class="col-3 mb-2">

                <div class="card">
                    <div class="card-header">{{$epi['item']}}</div>
                    <div class="card-body">
                        <h6>{{$epi['qtd']}}</h6>
                    </div>
                </div>
            </div>
        @endforeach --}}
         <div class="table-responsive card shadow">

            <table class="table">
                <tr class="text-center">
                    <th>Nome do EPI</th>
                    <th>Valor do EPI</th>
                    <th>Quantidade</th>
                    <th>Ação</th>
                </tr>
        @foreach ($epis as  $epi)
       
                <tr class="text-center">
                    <td> {{$epi['item']}} </td>
                    <td>R$ {{$epi['valor']}} </td>
                    <td> {{$epi['qtd']}} </td>
                    <td class="d-flex justify-content-center"> <button type="button"class="btn btn-primary ">Ver mais</button> </td>
                </tr>
           
        @endforeach
      </table>
      @php
    $totalItems = count($epis);
    $perPage = 3; // Quantidade de itens por página
    $currentPage = request()->get('pagina', 1); // Obtém a página da query string
    $totalPages = ceil($totalItems / $perPage); // Calcula o total de páginas
    $start = ($currentPage - 1) * $perPage; // Índice inicial para fatiar o array
    $currentItems = array_slice($epis, $start, $perPage); // Pega os itens da "página atual"
@endphp

        </div>
        <nav class="mt-3 d-flex justify-content-end" aria-label="Navegação de página">
    <ul class="pagination">
        {{-- Botão "Anterior" --}}
        <li class="page-item {{ $currentPage == 1 ? 'disabled' : '' }}">
            <a class="page-link" href="?pagina={{ $currentPage - 1 }}" aria-label="Anterior">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>

        {{-- Números das páginas --}}
        @for ($i = 1; $i <= $totalPages; $i++)
            <li class="page-item {{ $i == $currentPage ? 'active' : '' }}">
                <a class="page-link" href="?pagina={{ $i }}">{{ $i }}</a>
            </li>
        @endfor

        {{-- Botão "Próximo" --}}
        <li class="page-item {{ $currentPage == $totalPages ? 'disabled' : '' }}">
            <a class="page-link" href="?pagina={{ $currentPage + 1 }}" aria-label="Próximo">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>
</div>
@include('components.footer')