@extends('layouts.app')

@section('conteudo')

<br><br>

@if($estudante == null)
<center>
  <div class="alert alert-danger" role="alert">
    O RM ou nome inserido não foi encontrado
  </div>
</center>
@endif


<div style="color: black;">

  <div class="caso  text-center">
    <h1>Matricular</h1>
    {{-- só quem tem permissão para visualizar esta página --}}
    @can('pode_visualizar_matricula')

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



    @if($estudante && $estudante != 'vazio')


    <!-- User Info -->
    <div class="block block-rounded">
      @can('pode_registrar_matricula')
      <a class="btn btn-primary my-2" href="/matriculas" style="margin-left: 94%;">
        <i class="fa fa-reply" aria-hidden="true"></i>
      </a>
      @endcan
      <div class="block-content text-center">
        <div class="py-4">
          <div class="mb-3">
            <img class="img-avatar img-avatar96" src="{{$estudante->foto}}" alt="">
          </div>
          <h1 class="fs-lg mb-0">
            {{$estudante->nome}}
          </h1>
          <p class="text-muted">
            <i class="fa fa-award text-warning me-1"></i>
            Estudante
          </p>
        </div>
      </div>
      <div class="block-content bg-body-light text-center">
        <div class="row items-push text-uppercase">
          <div class="col-6 col-md-3">
            <div class="fw-semibold text-dark mb-1">RM</div>
            <a class="link-fx fs-3" href="javascript:void(0)">{{$estudante->rm}}</a>
          </div>
          <div class="col-6 col-md-3">
            <div class="fw-semibold text-dark mb-1">Data Nascimento</div>
            <a class="link-fx fs-3" href="javascript:void(0)">{{date ('d-m-Y', strtotime($estudante->data_nascimento))}}</a>
          </div>
          <div class="col-6 col-md-3">
            <div class="fw-semibold text-dark mb-1">Sexo</div>
            <a class="link-fx fs-3" href="javascript:void(0)">{{$estudante->sexo == 1 ? 'Masculino' : 'Feminino'}}</a>
          </div>
          <div class="col-6 col-md-3">
            <div class="fw-semibold text-dark mb-1">Responsável</div>
            <a class="link-fx fs-3" href="javascript:void(0)">{{$responsavel->nome_completo ?? ''}}</a>
          </div>
        </div>
      </div>
    </div>
    <!-- END User Info -->

    <form method="post" action="/salvar_matricula">
      @csrf


      <!-- Page Content -->
      <div class="content">
        <!-- Elements -->
        <div class="block block-rounded">
          <div class="block-header block-header-default">
            <h3 class="block-title">Matricular Novo Beneficiário</h3>
          </div>
          <div class="block-content">

            <div class="row">

              <div class="col-lg-12 space-y-6">

                <!-- Form Inline - Alternative Style -->
                <form action="/salvar_estudante" method="POST" enctype="multipart/form-data">
                  <div class="row  g-4 align-items-center">
                    @csrf

                    <input type="hidden" class="form-control" id="nome" name="estudante_id" placeholder="Nome" value="{{$estudante->id}}" readonly required>
                    <input type="hidden" class="form-control" id="nome" name="nome_estudante" placeholder="Nome" value="{{$estudante->nome}}" readonly required>

                    <div class="row  g-4 align-items-center">

                      <!-- trazer todas as organizações -->
                      <div class="col-3">
                        <label class="form-label" for="example-select">Organização</label>
                        <select class="form-select" id="select1" name="organizacao_id">
                          <option value="" selected></option>
                          @foreach($organizacoes as $item)
                          <option value="{{$item->id}}">{{$item->nome}}</option>
                          @endforeach
                        </select>
                      </div>
                      <div class="col-4">
                        <label class="form-label" for="example-select">Projeto</label>
                        <select class="form-select" id="select2" name="projeto_id">
                          <option value="" selected></option>
                          @foreach($projetos as $item)
                          <option value="{{$item->id}}">{{$item->descricao}}</option>
                          @endforeach
                        </select>
                      </div>
                      <!-- trazer todas as organizações -->
                      <div class="col-5">
                        <label class="form-label" for="example-select">Turmas</label>
                        <select class="form-select" id="select3" name="turma_id" required>
                          <option value="" selected></option>
                          @foreach($turmas as $item)
                          @if($item->situacao == 1)
                          <option value="{{$item->id}}">{{$item->descricao}} | {{$item->ano}} </option>
                          @endif
                          @endforeach
                        </select>
                      </div>

                      <hr>

                    </div>

                    <!-- ideal ja trazer selecionado com o ano vigente -->
                    <div class="col-3">
                      <label class="form-label" for="example-select">Ano*</label>
                      <input type="text" class="form-control" id="ano" name="ano" value="2025">
                    </div>

                    <div class="col-9">
                      <label class="form-label" for="example-select">Observações</label>
                      <input type="text" class="form-control" id="nome" name="observacoes" placeholder="observacoes">
                    </div>
                    <!-- funcão para verificar se possui documentos pendentes -->
                    <!-- <div class="col-3">
                      <label class="form-label" for="example-select">Documentos Pendentes</label>
                      <select class="form-select" id="documentos_pendentes" name="documentos_pendentes" disabled>
                        <option value="Pendente">Pendente</option>
                        <option value="Não Pendente">Não Pendente</option>
                      </select>
                    </div> -->

                  </div>
                  <hr>
                  <!-- Regra caso o aluno já tenha cursado ou não ter mais a idade trazer alerta do motivo de não salvar -->
                  <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> Matricular Beneficiário
                      </button> </a> </center>

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



          </div>
        </div>
        <!-- END Elements -->
      </div>

      <!-- END Page Content -->


    </form>
    @endif

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



<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_estudante', {
        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 = '/registar_matriculas/' + item.id;
          const li = document.createElement('li');
          li.appendChild(link);
          // li.textContent = item.id;
          searchResults.appendChild(li);
        });
      });
  });
</script>


<script>
  document.querySelector('#select1').addEventListener('change', function() {
    let value = this.value;

    // use o método fetch para enviar a requisição
    fetch('{{ route('selects.filter_projetos_por_organizacao')}}', {
          method: 'POST',
          body: JSON.stringify({
            _token: '{{ csrf_token() }}',
            value: value
          }),
          headers: {
            'Content-Type': 'application/json'
          }
        })
      .then(response => response.json())
      .then(data => {
        let select2 = document.querySelector('#select2');
        select2.innerHTML = '';

        let option = document.createElement('option');
        option.value = "";
        option.text = "";
        select2.appendChild(option);
        // use o método forEach para percorrer as opções filtradas e adicioná-las ao select2
        data.forEach(function(item) {
          let option = document.createElement('option');
          option.value = item.id;
          option.text = item.descricao;
          select2.appendChild(option);
        });
      });
  });

  document.querySelector('#select2').addEventListener('change', function() {
    let value = this.value;

    // use o método fetch para enviar a requisição
    //   window.location.href = "/visualizar_turmas_recentes_por_projeto_selecionado/" + value;


    // use o método fetch para enviar a requisição
    fetch('{{ route('selects.filter_turmas_por_projeto')}}', {
          method: 'POST',
          body: JSON.stringify({
            _token: '{{ csrf_token() }}',
            value: value
          }),
          headers: {
            'Content-Type': 'application/json'
          }
        })
      .then(response => response.json())
      .then(data => {
        let select3 = document.querySelector('#select3');
        select3.innerHTML = '';

        console.log(data);
        // use o método forEach para percorrer as opções filtradas e adicioná-las ao select3

        let option = document.createElement('option');
        option.value = "";
        option.text = "";
        select3.appendChild(option);
        data.forEach(function(item) {
          let option = document.createElement('option');
          option.value = item.id;
          option.text = item.descricao + ' | ' + item.ano;
          select3.appendChild(option);
        });
      });


  });
</script>



@endsection