@extends('layouts.app')

@section('conteudo')

 <!-- Main Container -->
 <main id="main-container">

    <!-- Page Content -->
    <div class="bg-image" >
      <div class="row g-0 justify-content-center bg-black-75">
        <div class="hero-static col-sm-8 col-md-6 col-xl-4 d-flex align-items-center p-2 px-sm-0">
          <!-- Reminder Block -->
          <div class="block block-transparent block-rounded w-100 mb-0 overflow-hidden">
            <div class="block-content block-content-full px-lg-5 px-xl-6 py-4 py-md-5 py-lg-6 bg-body-extra-light">
              <!-- Header -->
              <div class="mb-2 text-center">
                <a class="link-fx fw-bold fs-1" href="#">
                    <center> <h3>Vincular Usuário ao Funcionário</h3> </center>
                </a>

                <div class="row g-4 align-items-center">
                    <!-- trazer alunos para matricular ou digitar o nome do aluno -->

                        <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">
                            <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 style="cursor: pointer;">
                    {{-- Listagem do resultado da pesquisa --}}
                    <ul id="search-results"></ul>
                </div>

              </div>
              <!-- END Header -->

              <form class="js-validation-reminder" action="/salvar_vinculo_usuario_funcionario" method="POST">
                @csrf
                 <div class="mb-4">
                    <p class="text-uppercase fw-bold fs-sm text-muted">Usuário Selecionado</p>
                  <select class="form-select" id="example-select" name="id_usuario">
                      <option value="{{ $user->id }}" selected>{{ $user->name }}</option>
                  </select>
                </div>
                <input type="hidden" name="funcionario_id" id="funcionario_id" class="form-control" readonly>
                    <div class="col-12">
                        <p class="text-uppercase fw-bold fs-sm text-muted">Prestador </p>
                        <input type="text" id="funcionario_nome" class="form-control" required readonly>
                    </div>
                    <br>
                <div class="text-center mb-4">
                  <button type="submit" class="btn btn-hero btn-primary">
                    <i class="fa fa-fw fa-reply opacity-50 me-1"></i> Vincular
                  </button>
                </div>
              </form>
              <!-- END Reminder Form -->
            </div>
          </div>
          <!-- END Reminder Block -->
        </div>
      </div>
    </div>
    <!-- END Page Content -->
  </main>
  <!-- END Main Container -->

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="/js/jquery-3.4.1.min.js"></script>
  <script src="/js/main.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("#funcionario_id");
            input.value = id;
            input.setAttribute("name", "funcionario_id");

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

            searchResults.innerHTML = '';
        }




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


    </script>


  @endsection