@extends('layouts.app')

@section('conteudo')

<style>
    .campos-visiveis{
        display: inline-block;
        margin: 25px;
    }
</style>

<br><br>
<center>
    @if (session()->has('error'))
    <div class="alert alert-danger" role="alert">
        {{ session('error') }}
    </div>
    @endif
</center>

<!-- 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> Turmas
                </h1>
                <!-- @can('pode_registrar_turma') -->
                <a class="btn btn-primary my-2" href="/registar_turma">
                    <!-- <a class="btn btn-primary my-2" data-bs-toggle="modal" data-bs-target="#addTurmaModal"> -->
                    <i class="fa fa-fw fa-plus"></i>
                    <span class="d-none d-sm-inline ms-1">Registrar Turma</span>
                </a>
                <!-- @endcan -->

                <!-- @can('pode_visualizar_turma') -->
                <a class="btn btn-primary my-2" href="/turmas_antigas" style="margin-left: 10px;">
                    <!-- <a class="btn btn-primary my-2" data-bs-toggle="modal" data-bs-target="#addTurmaModal"> -->
                    <i class="fa fa-fw fa-list"></i>
                    <span class="d-none d-sm-inline ms-1">Turmas Antigas</span>
                </a>

                <!-- @can('pode_eliminar_turma') -->
                <a class="btn btn-danger my-2" href="/inativar_todas_matriculas_turmas_antigas" style="margin-left: 10px;">
                    <i class="fa fa-fw fa-list"></i>
                    <span class="d-none d-sm-inline ms-1">Inativar Todas Turmas Antigas</span>
                </a>

                <a class="btn btn-success my-2" href="/ativar_turmas_ano_passado" style="margin-left: 10px;">
                    <i class="fa fa-fw fa-list"></i>
                    <span class="d-none d-sm-inline ms-1">Ativar Turmas 2023</span>
                </a>
                @endcan
                <!-- @endcan -->
            </div>
        </div>
    </div>
</div>
<!-- END Hero -->





{{-- só quem tem permissão para visualizar esta página --}}
@can('pode_visualizar_turma')

<div class="row">


<!-- funcionalidade trazer todos os aluno  matriculados em algum curso ou menor de 18 anos ou com o campo ex beneficiarios estar não -->
<div class="content content-boxed">



    <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 da turma para pesquisar">
        <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>

  </div>

    <form action="/filtrar_turmas" method="get">
        @csrf

    <div class="col-12 col-sm-6 col-lg-4">
        <label class="form-label" for="funcionario_id" style="margin-top: 10px;">Filtrar por Organização</label>
        <select id="select1" class="form-select col-6" name="organizacao_id">
            @foreach($options1 as $option)
            <option value="{{ $option->id }}">{{ $option->nome }}</option>
            @endforeach
        </select>
    </div>


<!-- Adicione a classe "filter-select" em todos os selects que serão utilizados para filtrar -->
<div class="col-12 col-sm-6 col-lg-4" style="margin-top: 10px;">
    <label class="form-label" for="funcionario_id">Filtrar por Projeto</label>
    <select id="select2" class="form-select col-6 filter-select" name="projeto_id" data-filter-type="projeto">
        <option value="0">Todos os projetos</option>
        @foreach($options2 as $option)
            <option {{$option->id == $projeto_id ? 'selected' : ''}} value="{{ $option->id }}">{{ $option->descricao }}</option>
        @endforeach
    </select>
</div>

<div class="col-12 col-sm-4 col-lg-4" style="margin-top: 10px;">
    <label class="form-label" for="example-select">Prestadores</label>
    <select class="form-select filter-select" id="select4" name="funcionario_id" data-filter-type="funcionario">
        <option value="" selected></option>
        @foreach($funcionarios as $item)
            <option {{$item->id == $funcionario_id ? 'selected' : ''}} value="{{ $item->id }}">{{$item->nome_completo}}</option>
        @endforeach
    </select>
</div>

<div class="col-12 col-sm-4 col-lg-4" style="margin-top: 10px;">
    <label class="form-label" for="select_ano">Ano</label>
    <select class="form-select filter-select" id="select_ano" name="ano" data-filter-type="ano">
        <option value="" selected></option>
        @for ($ano_corrente = 2010; $ano_corrente <= 2025; $ano_corrente++)
            <option {{$ano_corrente == $ano ? 'selected' : ''}} value="{{ $ano_corrente }}" >{{ $ano_corrente }}</option>
        @endfor
    </select>
</div>

<div class="col-12 col-sm-4 col-lg-4" style="margin-top: 10px;">
    <label class="form-label" for="example-select">Situação</label>
    <select class="form-select filter-select" id="select4" name="situacao" data-filter-type="funcionario">
        <option {{1 == $situacao ? 'selected' : ''}} value="1">Ativa</option>
        <option {{0 == $situacao ? 'selected' : ''}} value="0">Inativa</option>
    </select>
</div>


<div class="col-4" style="display: inline-block; margin-left: 30px;">
    <button class="btn btn-primary my-2" type="submit">
      <!-- <a class="btn btn-primary my-2" data-bs-toggle="modal" data-bs-target="#addProjetModal"> -->
      <i class="fa fa-fw fa-search"></i>
      <span class="d-none d-sm-inline ms-1">Aplicar Filtros</span>
    </button>
    <a href="/turmas" class="btn btn-danger">
      <i class="bi bi-x-circle"></i> Remover Filtros
  </a>
  </div>


</form>



    <div class="content ">
        <!-- Current Jobs -->
        <h2 class="content-heading">
            <i class="fa fa-briefcase text-muted me-1"></i> Listagem de Turmas
        </h2>
        @foreach($turmas as $item)
        <div class="block block-rounded ">
            <div class="block-content ">
                <div class="d-sm-flex row">
                    <div class="col-12 col-sm-6 col-lg-2" style="margin-bottom: 10px;">
                        <div class="btn-group btn-group-sm">
                            @can('pode_visualizar_turma')
                            <a class="btn btn-alt-secondary" href="/visualizar_turma/{{$item->id}}">
                                <i class="fa fa-fw fa-eye"></i>
                            </a>
                            @endcan
                            <br>
                            @can('pode_editar_turma')
                            <a class="btn btn-alt-secondary" href="/editar_turma/{{$item->id}}">
                                <i class="fa fa-pencil-alt text-info"></i>
                            </a>
                            @endcan
                            @can('pode_eliminar_turma')
                            <a class="btn btn-alt-secondary" data-toggle="modal" data-target="#modalEliminar{{$item->id}}">
                                <i class="fa fa-times text-danger"></i>
                            </a>
                            @endcan
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-10">
                        <p class="h4 d-inline-block text-dark">
                            {{$item->descricao}} | {{$item->ano}}
                        </p>
                        <p class="text-muted" style="margin-top: -15px;">
                            Instrutor: {{$item->nome_completo}}
                        </p>
                        <p class="text-muted" style="margin-top: -15px;">
                            Coordenador: {{$item->nome_coordenador}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="modalEliminar{{$item->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Confirmar Operação</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Tem a certeza que pretende eliminar essa turma?
                    </div>
                    <div class="modal-footer">
                        <a href="/eliminar_turma/{{$item->id}}"><button type="button" class="btn btn-danger">Eliminar</button> </a>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    </div>
                </div>
            </div>
        </div>

        @endforeach

        {{ $turmas->links() }}

    </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
    <!-- END Page Content -->



<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_turma', {
        params: {
          query: searchInput.value
        }
      })
      .then(response => {
        // console.log(response);
        // console.log(response.data);
        searchResults.innerHTML = '';
        response.data.data.forEach(item => {
          const link = document.createElement('a');
          link.textContent = item.descricao;
          link.href = '/visualizar_turma/' + item.id;
          const li = document.createElement('li');
          li.appendChild(link);
          // li.textContent = item.id;
          searchResults.appendChild(li);
        });
      });
  });
</script>


<script>
    document.querySelectorAll('.filter-select').forEach(function(select) {
        select.addEventListener('change', function() {
            // Recolha os valores de todos os selects com a classe "filter-select"
            let filters = {};
            document.querySelectorAll('.filter-select').forEach(function(filterSelect) {
                filters[filterSelect.getAttribute('data-filter-type')] = filterSelect.value;
            });

            // Use o método fetch para enviar a requisição com todos os filtros
            fetch('{{ route('selects.filter_por_multiplos_filtros')}}', {
                method: 'POST',
                body: JSON.stringify({
                    _token: '{{ csrf_token() }}',
                    filters: filters
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                // Atualize a interface do usuário com os dados filtrados
                // (você precisará implementar esta parte de acordo com a sua lógica)
                console.log(data);
            });
        });
    });
</script>


    @endsection