@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> Transferências
        </h1>
        @can('pode_registrar_transferencia')
        <a class="btn btn-primary my-2" href="/registar_transferencia">
          <i class="fa fa-fw fa-plus"></i>
          <span class="d-none d-sm-inline ms-1">Registrar transferência</span>
        </a>
        @endcan
      </div>
    </div>
  </div>
</div>
<!-- END Hero -->

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

<div class="content content-boxed">


  <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 ">
        <!-- Current Jobs -->
        <h2 class="content-heading">
            <i class="fa fa-briefcase text-muted me-1"></i> Listagem de transferencias
        </h2>
        @foreach($transferencias as $item)
        <div class="block block-rounded ">
            <div class="block-content ">
                <div class="d-sm-flex row">
                    <div class="col-12 col-sm-6 col-lg-2" style="margin-bottom: 10px;">
                        <div class="btn-group btn-group-sm">
                            @can('pode_visualizar_transferencia')
                            <a class="btn btn-alt-secondary" href="/visualizar_transferencia/{{$item->id}}">
                                <i class="fa fa-fw fa-eye"></i>
                            </a>
                            @endcan
                            <br>
                            @can('pode_editar_transferencia')
                            <a class="btn btn-alt-secondary" href="/editar_transferencia/{{$item->id}}">
                                <i class="fa fa-pencil-alt text-info"></i>
                            </a>
                            @endcan
                            @can('pode_eliminar_transferencia')
                            <a class="btn btn-alt-secondary" data-toggle="modal" data-target="#modalEliminar{{$item->id}}">
                                <i class="fa fa-times text-danger"></i>
                            </a>
                            @endcan
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-10">
                        <p class="h4 d-inline-block text-dark">
                            Estudante: {{$item->nome_Estudante}}
                        </p>
                        <p class="text-muted" style="margin-top: -15px;">
                            Turma Antiga: {{$item->descricao_turma_antiga}} | {{$item->ano}}
                        </p>
                        <p class="text-muted" style="margin-top: -15px;">
                            Turma Nova: {{$item->descricao_turma_atual}} | {{$item->ano}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="modalEliminar{{$item->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Confirmar Operação</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Tem a certeza que pretende eliminar essa transferencia?
                    </div>
                    <div class="modal-footer">
                        <a href="/eliminar_transferencia/{{$item->id}}"><button type="button" class="btn btn-danger">Eliminar</button> </a>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    </div>
                </div>
            </div>
        </div>

        @endforeach

        {{ $transferencias->links() }}

    </div>

  <!-- {{ $transferencias->links() }} -->
</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="/js/axios.min.js"></script>

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

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

@endsection