@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">Editar 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="/actualizar_documento/{{$documento->id}}" method="POST" enctype="multipart/form-data">
          <div class="row  g-4 align-items-center">
            @csrf
            <input type="hidden" name="estudante_id" id="estudante_id" value="{{$estudante->id}}" class="form-control" readonly>
            <div class="col-8">
              <label class="form-label" for="estudante_id">Beneficiário*</label>
              <input type="text" id="estudante_nome" class="form-control" value="{{$estudante->nome}}" readonly>
            </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" {{$documento->fotos == 1 ? 'selected' : ''}}>Sim</option>
                <option value="0" {{$documento->fotos == 0 ? 'selected' : ''}}>Não</option>
              </select>
            </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" value="{{$documento->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" value="{{$documento->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" value="{{$documento->certidao}}">
            </div>
            <div class="col-4 text-center">
              CPF/RG
              <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto" href="{{$documento->rgCpf}}" download="{{$documento->rgCpf}}">
                @if($documento->rgCpf == "")
                <p style="font-size: 12px;"> Não Adicionado </p>
                @else
                <img class="fa-fw" src="/images/download-pdf.jpg">
                @endif
              </a>
            </div>
            <div class="col-4 text-center">
              CPF/RG Responsável
              <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto" href="{{$documento->rgCpf_responsavel}}" download="{{$documento->rgCpf_responsavel}}">
                @if($documento->rgCpf_responsavel == "")
                <p style="font-size: 12px;"> Não Adicionado </p>
                @else
                <img class="fa-fw" src="/images/download-pdf.jpg">
                @endif
              </a>
            </div>
            <div class="col-4 text-center">
              Certidão
              <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto" href="{{$documento->certidao}}" download="{{$documento->certidao}}">
                @if($documento->certidao == "")
                <p style="font-size: 12px;"> Não Adicionado </p>
                @else
                <img class="fa-fw" src="/images/download-pdf.jpg">
                @endif
              </a>
            </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" value="{{$documento->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" value="{{$documento->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" value="{{$documento->sus}}">
            </div>
            <div class="col-4 text-center">
              Endereço
              <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto" href="{{$documento->endereco}}" download="{{$documento->endereco}}">
                @if($documento->endereco == "")
                <p style="font-size: 12px;"> Não Adicionado </p>
                @else
                <img class="fa-fw" src="/images/download-pdf.jpg">
                @endif
              </a>
            </div>

            <div class="col-4 text-center">
            Vacina
              <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto" href="{{$documento->vacina}}" download="{{$documento->vacina}}">
                @if($documento->vacina == "")
                <p style="font-size: 12px;"> Não Adicionado </p>
                @else
                <img class="fa-fw" src="/images/download-pdf.jpg">
                @endif
              </a>
            </div>

            <div class="col-4 text-center">
            SUS
              <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto" href="{{$documento->sus}}" download="{{$documento->sus}}">
                @if($documento->sus == "")
                <p style="font-size: 12px;"> Não Adicionado </p>
                @else
                <img class="fa-fw" src="/images/download-pdf.jpg">
                @endif
              </a>
            </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" value="{{$documento->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" value="{{$documento->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" value="{{$documento->atestado}}">
            </div>
            <div class="col-4 text-center">
              NIS
              <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto" href="{{$documento->nis}}" download="{{$documento->nis}}">
                @if($documento->nis == "")
                <p style="font-size: 12px;"> Não Adicionado </p>
                @else
                <img class="fa-fw" src="/images/download-pdf.jpg">
                @endif
              </a>
            </div>

            <div class="col-4 text-center">
              Declaração Escolar
              <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto" href="{{$documento->declaracao_escolar}}" download="{{$documento->declaracao_escolar}}">
                @if($documento->declaracao_escolar == "")
                <p style="font-size: 12px;"> Não Adicionado </p>
                @else
                <img class="fa-fw" src="/images/download-pdf.jpg">
                @endif
              </a>
            </div>

            <div class="col-4 text-center">
              Atestado Médico
              <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto" href="{{$documento->atestado}}" download="{{$documento->atestado}}">
                @if($documento->atestado == "")
                <p style="font-size: 12px;"> Não Adicionado </p>
                @else
                <img class="fa-fw" src="/images/download-pdf.jpg">
                @endif
              </a>
            </div>
            

            <hr>


            


          </div>
          <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>
</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