@extends('layouts.app')

@section('conteudo')


<br><br>

@if (session('erro'))
  {{-- expr --}}
  <div class="alert alert-danger" role="alert">
   {{session('erro')}}
</div>
@endif

@if(session('status'))
    <div class="alert alert-success">
        {{ session('status') }}
    </div>
  @endif

  <center>
    @if ($errors->has('foto1'))
        <div class="alert alert-danger">
            {{ $errors->first('foto1') }}
        </div>
    @endif
    @if ($errors->has('foto2'))
        <div class="alert alert-danger">
            {{ $errors->first('foto2') }}
        </div>
    @endif
    @if ($errors->has('foto3'))
        <div class="alert alert-danger">
            {{ $errors->first('foto3') }}
        </div>
    @endif
    @if ($errors->has('foto4'))
        <div class="alert alert-danger">
            {{ $errors->first('foto4') }}
        </div>
    @endif
    </center>

<div style="color: black;">

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


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

        <!-- trazer todas as organizações -->
        <div class="col-12 col-sm-3 col-lg-3">
          <label class="form-label" for="example-select">Organização</label>
          <select class="form-select" id="select1" name="organizacao_id">
            @foreach($options1 as $item)
            <option {{$item->id == $turma->organizacao_id ? 'selected' : ''}} selected value="{{$item->id}}">{{$item->nome}}</option>
            @endforeach
          </select>
        </div>
        <div class="col-12 col-sm-4 col-lg-4">
          <label class="form-label" for="example-select">Projeto</label>
          <select class="form-select" id="select2" name="projeto_id">
          <option value="" selected></option>
            @foreach($options2 as $item)
            <option {{$item->id == $turma->projeto_id ? 'selected' : ''}} value="{{$item->id}}">{{$item->descricao}}</option>
            @endforeach
          </select>
        </div>
        <!-- trazer todas as organizações -->
        <div class="col-10 col-sm-4 col-lg-4">
          <label class="form-label" for="example-select">Turmas</label>
          <select class="form-select" id="select3" name="turma_id">
          <option value="" selected></option>
            @foreach($turmas as $item)
            @if($item->situacao == 1)
            <option {{$item->id == $turma->id ? 'selected' : ''}} value="{{$item->id}}">{{$item->descricao}} | {{$item->ano}} </option>
            @endif
            @endforeach
          </select>
        </div>
        <div class="col-2 col-sm-1 col-lg-1">
          <span class="input-group-text border-0 bg-body">
            <a type="submit"> <i class="fa fa-fw fa-search"></i> </a>
          </span>
        </div>
        <hr>

        <!-- trazer preenchido o nome do professor, turma, projeto, data e a lista com os alunos matriculados -->
        <div class="col-12 col-sm-8 col-lg-8">
          <label class="form-label" for="example-select">Prestador</label>
          <select class="form-control" id="funcionario_id" name="funcionario_id" value="{{$turma->funcionario_id}}" required>
            <option value="{{$funcionario->id}}">{{$funcionario->nome_completo}}</option>
          </select>
        </div>

        <div class="col-12 col-sm-4 col-lg-4">
          <label class="form-label" for="example-select">Data</label>
          <input type="date" class="form-control" id="date" name="data" required>
        </div>

        {{-- <div class="col-4">
          <label class="form-label" for="example-select">Imagens da aula</label>
          <input type="file" class="form-control" id="aula" name="files[]" multiple>
        </div> --}}
        <div class="col-12 col-sm-12 col-lg-12">
            <label class="form-label" for="example-select">Foto</label>
            <input type="file" class="form-control" id="foto1" name="foto1" >
          </div>
          <div class="col-12 col-sm-12 col-lg-12">
            <label class="form-label" for="example-select">Foto</label>
            <input type="file" class="form-control" id="foto2" name="foto2">
          </div>

        @error('image')
            <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
        @enderror

        <div class="form-group">
            <textarea class="ckeditor form-control" name="descricao"></textarea>
        </div>

        <hr>
        @if($estudantes)

        <div class="block-header block-header-default">
            <h4 class="h4">Beneficiários Ativos </h4>
        </div>
        <div class="col-12">
          <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">RM</th>
                <th scope="col">Nome</th>
                <th scope="col">Presença</th>
                <th scope="col">Observação</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($estudantes as $item)
              @if($item->status == 1)
              <tr>
                <td scope="row"> {{$item->rm}} </td> <!-- trazer os rm -->
                <td scope="row">{{$item->nome}}</td> <!-- trazer os nomes -->
                <td scope="row"><input type="checkbox" class="form-check-input" id="chamadaCheck" name="presencas[]" checked value="{{$item->id}}"></td> <!-- deixar todos checados para desmarcar quem não veio -->
                <td scope="row"><input type="text" class="form-control" id="observacoes_estudantes" name="observacoes_estudantes[]"></td> <!-- deixar campo para escrever -->
              </tr>
              @endif
              @endforeach
            </tbody>
          </table>
        </div>

        <hr>

        <div class="block-header block-header-default">
            <h4 class="h4">Beneficiários Inativos </h4>
        </div>
        <div class="col-12">
          <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">RM</th>
                <th scope="col">Nome</th>
                <th scope="col">Presença</th>
                <th scope="col">Observação</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($estudantes as $item)
              @if($item->status == 0)
              <tr>
                <td scope="row"> {{$item->rm}} </td> <!-- trazer os rm -->
                <td scope="row">{{$item->nome}}</td> <!-- trazer os nomes -->
                <td scope="row"><input type="checkbox" class="form-check-input" id="chamadaCheck" name="presencas[]" checked value="{{$item->id}}" disabled></td> <!-- deixar todos checados para desmarcar quem não veio -->
                <td class="text-center fs-sm">
                                    <span style="color: red;">Inativo</span>
                                </td>
              </tr>
              @endif
              @endforeach
            </tbody>
          </table>
        </div>
        @endif
        <div class="col-12">
          <label class="form-label" for="example-select">Observações</label>
          <input type="text" class="form-control" id="observacoes" minlength="25" name="observacoes">
        </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">
            <!-- Adicione um id ao botão de envio -->
            <button id="submitBtn" type="submit" class="btn btn-primary m-1">
                <i class="fa fa-fw fa-user-plus opacity-50 me-1"></i> Registrar Chamada
            </button>
        </a>
    </center>
        </form>
    </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="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.ckeditor').ckeditor();
    });
</script>

<script>
    // Aguarde o carregamento completo do documento
    document.addEventListener("DOMContentLoaded", function () {
        // Obtenha a referência ao CKEditor
        ClassicEditor
            .create(document.querySelector("#js-ckeditor5-classic"))
            .then(editor => {
                // Defina o evento para atualizar o campo "descricao" quando o conteúdo do CKEditor mudar
                editor.model.document.on('change:data', () => {
                    // Obtenha o conteúdo do CKEditor
                    const ckeditorContent = editor.getData();
                    // Defina o valor do campo "descricao" como o conteúdo do CKEditor
                    document.querySelector("#descricao").value = ckeditorContent;
                });
            })
            .catch(error => {
                console.error(error);
            });
    });
</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 = '';

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

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

    document.querySelector('#select3').addEventListener('change', function() {
        let value = this.value;
        // use o método fetch para enviar a requisição
        window.location.href = "/registar_chamada_por_turma/" + value;
    });
</script>

<script>
    // Adicione um manipulador de eventos ao formulário para interceptar o envio
    document.querySelector('form').addEventListener('submit', function() {
        // Desabilite o botão de envio após o envio do formulário
        document.getElementById('submitBtn').disabled = true;
    });
</script>



@endsection