@extends('layouts.app')

@section('conteudo')

<!-- Hero -->
<div class="bg-image" style="background-image: url(''); margin-top: 70px;">
    <div class="bg-black-50">
        <div class="content content-full">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="flex-grow-1 fs-2 text-white my-2">
                    <i class="fa fa-boxes text-white-50 me-1"></i> Ex-Prestadores
                </h1>
                @can('pode_visualizar_funcionario')
                <a class="btn btn-primary my-2" href="/funcionarios" style="margin-left: 10px;">
                    <i class="fa fa-fw fa-list"></i>
                    <span class="d-none d-sm-inline ms-1">Vizualizar Prestadores</span>
                </a>
                @endcan
            </div>
        </div>
    </div>
</div>
<!-- END Hero -->
{{-- só quem tem permissão para visualizar esta página --}}
@can('pode_visualizar_funcionario')

<!-- funcionalidade trazer todos os funcionarios com o campo ex-prestador estar não -->
<div class="content content-boxed">
    <!-- Current Jobs -->
    <h2 class="content-heading">
        <i class="fa fa-briefcase text-muted me-1"></i> Listagem
    </h2>

    <div class="p-3 bg-body-extra-light rounded push">
        <div class="input-group input-group-lg">
            <input type="text" id="search-input" name="id" class="form-control form-control-alt" placeholder="Digite o nome do Prestador ou CPF e pressione enter">
            <span class="input-group-text border-0 bg-body">
                <button type="submit" style="border: none;"> <i class="fa fa-fw fa-search"></i> </button>
            </span>
        </div>
    </div>


    <div class="row  g-4 align-items-center">
        <ul id="search-results"></ul>
    </div>


  @foreach($funcionarios as $item)
  <div class="block block-rounded">
    <div class="block-content block-content-full">
      <div class="d-sm-flex">
        <div class="ms-sm-2 me-sm-4 py-2 text-center">
          <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto" href="javascript:void(0)">
              <i class="fab fa-fw fa-cloudsmith"></i>
            {{-- <img class="fa-fw" src="{{$item->logotipo}}"> --}}
          </a>
          <div class="btn-group btn-group-sm">
            <a class="btn btn-alt-secondary" href="/editar_funcionario/{{$item->id}}">
              <i class="fa fa-pencil-alt text-info"></i>
            </a>
            <a class="btn btn-alt-secondary" href="/eliminar_funcionario/{{$item->id}}">
              <i class="fa fa-times text-danger"></i>
            </a>
          </div>
        </div>
        <div class="py-2">
          <a class="link-fx h4 mb-1 d-inline-block text-dark" href="/visualizar_funcionario/{{$item->id}}">
            {{$item->nome_completo}}
          </a>
          <div class="fs-sm fw-semibold text-muted mb-2">
            Criado aos: {{$item->created_at}}
          </div>
          <p class="text-muted mb-2">
            {{$item->cpf}}
          </p>
          <div>
            <span class="badge bg-primary">{{$item->estado}}</span>
            <span class="badge bg-primary">{{$item->cidade}}</span>
            <span class="badge bg-primary">{{$item->cnpj}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  @endforeach

</div>
{{-- Pra quem não tem permissão de visualizar essa página aparecerá a mensagem abaixo --}}
@else

<center>
    <br>
    <div class="alert alert-danger" role="alert">
        Você não tem permissão pra visualizar essa página!
    </div>
</center>

@endcan
<!-- END Page Content -->

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    const searchInput = document.getElementById('search-input');
    const searchResults = document.getElementById('search-results');

    searchInput.addEventListener('input', () => {
        axios.get('/search_funcionario', {
                params: {
                    query: searchInput.value
                }
            })
            .then(response => {
                console.log(response);
                console.log(response.data);
                searchResults.innerHTML = '';
                response.data.forEach(item => {
                    const link = document.createElement('a');
                    link.textContent = item.nome_completo;
                    link.href = '/visualizar_funcionario/' + item.id;
                    const li = document.createElement('li');
                    li.appendChild(link);
                    // li.textContent = item.id;
                    searchResults.appendChild(li);
                });
            });
    });
</script>


@endsection