@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> Documentos
        </h1>
        <!-- <a class="btn btn-primary my-2" href="/registar_documento" data-bs-toggle="modal" data-bs-target="#addDocumentModal"> -->
        @can('pode_registrar_documento')
        <a class="btn btn-primary my-2" href="/registar_documento">
          <i class="fa fa-fw fa-plus"></i>
          <span class="d-none d-sm-inline ms-1">Registrar Documento</span>
        </a>
        @endcan
      </div>
    </div>
  </div>
</div>
<!-- END Hero -->


<br><br>
<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 beneficiário ou rm 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>

<div class="content content-boxed">
  <!-- Current Jobs -->
  <h2 class="content-heading">
    <i class="fa fa-briefcase text-muted me-1"></i> Listagem de Documentos
  </h2>

  {{-- só quem tem permissão para visualizar esta página --}}
  @can('pode_visualizar_documento')

  @foreach($documentos 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>
          </a> -->
          @can('pode_visualizar_documento')
          <a class="btn btn-alt-secondary" href="/visualizar_documento/{{$item->id}}">
            <i class="fa fa-fw fa-eye"></i>
          </a>
          @endcan
          <div class="btn-group btn-group-sm">
            @can('pode_editar_documento')
            <a class="btn btn-alt-secondary update_document_form" href="/editar_documento/{{$item->id}}" data-id="{{$item->id}}" data-descricao="{{$item->nome}}">
              <i class="fa fa-pencil-alt text-info"></i>
            </a>
            @endcan
            @can('pode_eliminar_documento')
            <a class="btn btn-alt-secondary delete_document" href="/eliminar_documento/{{$item->id}}" data-id="{{$item->id}}">
              <i class="fa fa-times text-danger"></i>
            </a>
            @endcan
          </div>
        </div>
        <div class="py-2">
          <p class=" h4 mb-1 d-inline-block text-dark">
            {{$item->nome}}
          </p>
          <!-- <div class="fs-sm fw-semibold text-muted mb-2">
                    Criado aos: {{$item->created_at}}
                  </div> -->
          <!-- <p class="text-muted mb-2">
                    {{$item->created_at}}
                  </p> -->

        </div>
      </div>
    </div>
  </div>
  @endforeach
  {{-- 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

</div>
<!-- END Page Content -->

{!! $documentos->links() !!}
<script src="/js/axios.min.js"></script>


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

  searchInput.addEventListener('input', () => {
    axios.get('/search_documento', {
        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;
          link.href = '/visualizar_documento_por_estudante/' + item.id;
          const li = document.createElement('li');
          li.appendChild(link);
          // li.textContent = item.id;
          searchResults.appendChild(li);
        });
      });
  });
</script>



@endsection