@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>
        @can('pode_visualizar_documento')
        <a class="btn btn-primary my-2" href="/listar_documentos">
          <i class="fa fa-fw fa-list"></i>
          <span class="d-none d-sm-inline ms-1">Listar Documentos</span>
        </a>
        @endcan
      </div>
    </div>
  </div>
</div>
<!-- END Hero -->

{{-- só quem tem permissão para visualizar esta página --}}
@can('pode_visualizar_documento')
<div class="content">
  <!-- Elements -->
  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">Registrar Novos Documentos</h3>
    </div>
    <div class="block-content">

      <div class="row">
        <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 estudante 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 style="cursor: pointer;">
          {{-- Listagem do resultado da pesquisa --}}
          <ul id="search-results"></ul>
        </div>
        <!-- Form Inline - Alternative Style -->
        <form action="/salvar_documento" method="POST" enctype="multipart/form-data">
          <div class="row  g-4 align-items-center">
            @csrf

            <input type="hidden" name="estudante_id" id="estudante_id" class="form-control" readonly>
            <div class="col-12">
              <label class="form-label" for="estudante_id">Beneficiário*</label>
              <input type="text" id="estudante_nome" class="form-control" readonly>
            </div>
            <!-- <div class="col-2">
              <label class="form-label" for="id_rm">RM</label>
              <input type="text" class="form-control" id="id_rm" name="id_rm" disabled>
            </div> -->
            <div class="col-4">
              <label class="form-label" for="rgCpf">Identidade RG/CPF</label>
              <input type="file" class="form-control" id="rgCpf" name="rgCpf">
            </div>
            <div class="col-4">
              <label class="form-label" for="rgCpf_responsavel">RG/CPF Responsável</label>
              <input type="file" class="form-control" id="rgCpf_responsavel" name="rgCpf_responsavel">
            </div>
            <div class="col-4">
              <label class="form-label" for="certidao">Certidão de Nascimento</label>
              <input type="file" class="form-control" id="certidao" name="certidao">
            </div>
            <div class="col-4">
              <label class="form-label" for="endereco">Comprovante de Endereço</label>
              <input type="file" class="form-control" id="endereco" name="endereco">
            </div>
            <div class="col-4">
              <label class="form-label" for="vacina">Comprovante de Vacina</label>
              <input type="file" class="form-control" id="vacina" name="vacina">
            </div>
            <div class="col-4">
              <label class="form-label" for="sus">Cartão SUS</label>
              <input type="file" class="form-control" id="sus" name="sus">
            </div>
            <div class="col-4">
              <label class="form-label" for="nis">Cartão Cidadão NIS</label>
              <input type="file" class="form-control" id="nis" name="nis">
            </div>
            <div class="col-4">
              <label class="form-label" for="declaracao_escolar">Declaração Escolar</label>
              <input type="file" class="form-control" id="declaracao_escolar" name="declaracao_escolar">
            </div>
            <div class="col-4">
              <label class="form-label" for="atestado">Atestado Médico</label>
              <input type="file" class="form-control" id="atestado" name="atestado">
            </div>
            <div class="col-4">
              <label class="form-label" for="fotos">Entrega de Fotos</label>
              <select class="form-select" id="fotos" name="fotos">
                <option value="1">Sim</option>
                <option value="0">Não</option>
              </select>
            </div>
          </div>
          <hr>
          <center> <a type="submit"> <button type="submit" class="btn btn-primary m-1">
                <i class="fa fa-fw fa-user-plus opacity-50 me-1"></i> Salvar Documento
              </button> </a> </center>

        </form>
        <!-- END Form Inline - Alternative Style -->



      </div>
    </div>

    <!-- END Elements -->
  </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
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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

    function addToInput(element) {
      let id = element.parentElement.getAttribute("data-id");
      var input = document.querySelector("#estudante_id");
      input.value = id;
      input.setAttribute("name", "estudante_id");

      var input2 = document.querySelector("#estudante_nome");
      input2.value = element.innerText;

      searchResults.innerHTML = '';
    }




    searchInput.addEventListener('input', () => {
      axios.get('/search_estudante', {
          params: {
            query: searchInput.value
          }
        })
        .then(response => {
          searchResults.innerHTML = '';
          response.data.forEach(item => {
            const link = document.createElement('a');
            link.textContent = item.nome;
            link.setAttribute("onclick", "addToInput(this)");
            const li = document.createElement('li');
            li.setAttribute("data-id", item.id);
            li.appendChild(link);
            searchResults.appendChild(li);
          });
        });
    });
  </script>

  @endsection