@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> Apresentações
        </h1>
        @can('pode_visualizar_apresentacao')
        <a class="btn btn-primary my-2" href="/apresentacoes">
          <i class="fa fa-fw fa-list"></i>
          <span class="d-none d-sm-inline ms-1">Listar Apresentações</span>
        </a>
        @endcan
      </div>
    </div>
  </div>
</div>
<!-- END Hero -->
{{-- só quem tem permissão para visualizar esta página --}}
@can('pode_visualizar_apresentacao')
<div class="content">
  <!-- Elements -->
  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">Registrar Novo Evento</h3>
    </div>
    <div class="block-content">
      <div class="row">
        <div class="col-lg-12 space-y-6">
          <!-- Form Inline - Alternative Style -->
          <form action="/salvar_apresentacao" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row g-4 align-items-center">
              <div class="col-3">
                <label class="form-label" for="organizacao_id">Organização*</label>
                <select class="form-select" id="organizacao_id" name="organizacao_id" required>
                  @foreach($organizacoes as $item)
                  <option selected value="{{$item->id}}">{{$item->nome}}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-6">
                <label class="form-label" for="nome">Evento*</label>
                <input type="text" class="form-control" id="nome" name="nome" placeholder="Nome" required>
              </div>
              <div class="col-3">
                <label class="form-label" for="projeto_id">Projeto*</label>
                <select class="form-select" id="projeto_id" name="projeto_id" required>
                  @foreach($projetos as $item)
                  <option selected value="{{$item->id}}">{{$item->descricao}}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-6">
                <label class="form-label" for="identificacao_projeto">Nº de Identificação do Projeto*</label>
                <input type="text" class="form-control" id="identificacao_projeto" name="identificacao_projeto" required>
              </div>
              <div class="col-3">
                <label class="form-label" for="ano">Ano</label>
                <input type="text" class="form-control" id="ano" name="ano" value="{{ date('Y') }}">
              </div>
              <div class="col-3">
                <label class="form-label" for="data">Data do Evento</label>
                <input type="date" class="form-control" id="data" name="data">
              </div>
              <div class="col-3">
                <label class="form-label" for="horario_entrada">Horário (início)</label>
                <input type="time" class="form-control" id="horario_entrada" name="horario_entrada">
              </div>
              <div class="col-3">
                <label class="form-label" for="horario_saida">Horário (fim)</label>
                <input type="time" class="form-control" id="horario_saida" name="horario_saida">
              </div>
              <div class="col-3">
                <label class="form-label" for="publico">Público Atingido</label>
                <input type="number" class="form-control" id="publico" name="publico_atingido">
              </div>
              <div class="col-3">
                <label class="form-label" for="beneficiarios_atingidos">Beneficiários Atingidos</label>
                <input type="number" class="form-control" id="beneficiarios_atingidos" name="beneficiarios_atingidos">
              </div>
              <div class="col-5">
                <label class="form-label" for="local">Local</label>
                <input type="text" class="form-control" id="local" name="local">
              </div>
              <div class="col-7">
                <label class="form-label" for="endereco">Endereço</label>
                <input type="text" class="form-control" id="endereco" name="endereco">
              </div>
              <div class="col-12">
                <label class="form-label" for="link">Link</label>
                <textarea name="link" id="link" cols="30" rows="2"></textarea>
              </div>
              <div class="col-12">
                <label class="form-label" for="descricao">Descrição do Evento</label>
                <textarea name="descricao" id="descricao" cols="30" rows="5"></textarea>
              </div>
              <h4>Pessoal envolvido </h4>
              <div class="col-6">
                <a data-bs-toggle="modal" data-bs-target="#modalAddBeneficiario">
                  <button type="button" class="btn btn-alt-primary">
                    <i class="fa fa-fw fa-plus"></i> Beneficiário
                  </button>
                </a>
              </div>
              <div class="col-6">
                <a data-bs-toggle="modal" data-bs-target="#modalAddInstrutores">
                  <button type="button" class="btn btn-alt-primary">
                    <i class="fa fa-fw fa-plus"></i> Instrutores
                  </button>
                </a>
              </div>
              <div class="col-6">
                <label class="form-label" for="beneficiario">Beneficiários</label>
                <textarea name="beneficiario" id="beneficiario" cols="30" rows="2" readonly style="background-color: #dcdcdc;"></textarea>
              </div>
              <input type="hidden" class="form-control" id="beneficiario" name="beneficiario">
              <div class="col-6">
                <label class="form-label" for="instrutores">Instrutores</label>
                <textarea name="instrutores" id="instrutores" cols="30" rows="2" readonly style="background-color: #dcdcdc;"></textarea>
              </div>
              <input type="hidden" class="form-control" id="instrutores" name="instrutores">
              <h4>Fotos do Evento</h4>
              <div class="col-6">
                <label class="form-label" for="fotos1">Fotos 1</label>
                <input type="file" name="fotos1" id="fotos1" class="form-control" value="">
              </div>
              <div class="col-6">
                <label class="form-label" for="fotos2">Fotos 2</label>
                <input type="file" name="fotos2" id="fotos2" class="form-control" value="">
              </div>
              <div class="col-6">
                <label class="form-label" for="fotos3">Fotos 3</label>
                <input type="file" name="fotos3" id="fotos3" class="form-control" value="">
              </div>
              <div class="col-6">
                <label class="form-label" for="fotos4">Fotos 4</label>
                <input type="file" name="fotos4" id="fotos4" class="form-control" value="">
              </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 Evento
                  </button>
                </a>
              </center>
              <div class="errMsgContainer mb-3">
              </div>
          </form>
          <!-- END Form Inline - Alternative Style -->
        </div>
        <!-- END Inline Layout -->
        <!-- modal -->
        <div class="modal fade bd-example-modal-lg" id="modalAddBeneficiario" tabindex="-1" role="dialog" aria-labelledby="modalBeneficiarioLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Pesquisar Beneficiário</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="input-group input-group-lg">
                  <input type="text" id="search-input-beneficiario" name="id" class="form-control form-control-alt" placeholder="Digite o nome do Beneficiário">
                  <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>
              <center>
                <div class="row  g-4 align-items-center">
                  <ul id="search-results-beneficiario" class="search-results"></ul>
                </div>
              </center>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="addBeneficiario()">Adicionar</button>
              </div>
            </div>
          </div>
        </div>

        <div class="modal fade bd-example-modal-lg" id="modalAddInstrutores" tabindex="-1" role="dialog" aria-labelledby="modalInstrutoresLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Pesquisar Instrutor</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="p-3 bg-body-extra-light rounded push">
                  <div class="input-group input-group-lg">
                    <input type="text" id="search-input-instrutores" name="id" class="form-control form-control-alt" placeholder="Digite o nome do Prestador">
                    <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-instrutores" class="search-results"></ul>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="addInstrutor()">Adicionar</button>
              </div>
            </div>
          </div>
        </div>

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

<style>
  .search-results a {
    cursor: pointer;
  }
  .search-results a:hover {
    background-color: #f1f1f1;
    color: #333;
  }
</style>

<script src="/js/axios.min.js"></script>

<script>
  const searchInputBeneficiario = document.getElementById('search-input-beneficiario');
  const searchResultsBeneficiario = document.getElementById('search-results-beneficiario');
  const beneficiarioTextarea = document.getElementById('beneficiario');

  function addToBeneficiario(element) {
    const nomeBeneficiario = element.textContent.trim();
    beneficiarioTextarea.value += nomeBeneficiario + '\n';
  }

  searchResultsBeneficiario.addEventListener('click', (event) => {
    if (event.target.tagName === 'A') {
      event.preventDefault();
      addToBeneficiario(event.target);
      $('#modalAddBeneficiario').modal('hide');
    //   alert('Beneficiário adicionado com sucesso!');
    }
  });

  searchInputBeneficiario.addEventListener('input', () => {
    axios.get('/search_estudante', {
        params: {
          query: searchInputBeneficiario.value
        }
      })
      .then(response => {
        searchResultsBeneficiario.innerHTML = '';
        response.data.forEach(item => {
          const link = document.createElement('a');
          link.textContent = item.nome;
          const li = document.createElement('li');
          li.appendChild(link);
          searchResultsBeneficiario.appendChild(li);
        });
      });
  });
</script>

<script>
  const searchInputInstrutores = document.getElementById('search-input-instrutores');
  const searchResultsInstrutores = document.getElementById('search-results-instrutores');
  const instrutorTextarea = document.getElementById('instrutores');

  function addToInstrutor(element) {
    const nomeInstrutor = element.textContent.trim();
    instrutorTextarea.value += nomeInstrutor + '\n';
  }

  searchResultsInstrutores.addEventListener('click', (event) => {
    if (event.target.tagName === 'A') {
      event.preventDefault();
      addToInstrutor(event.target);
      $('#modalAddInstrutores').modal('hide');
    //   alert('Instrutor adicionado com sucesso!');
    }
  });

  searchInputInstrutores.addEventListener('input', () => {
    axios.get('/search_funcionario', {
        params: {
          query: searchInputInstrutores.value
        }
      })
      .then(response => {
        searchResultsInstrutores.innerHTML = '';
        response.data.forEach(item => {
          const link = document.createElement('a');
          link.textContent = item.nome_completo;
          const li = document.createElement('li');
          li.appendChild(link);
          searchResultsInstrutores.appendChild(li);
        });
      });
  });
</script>

@endsection