@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('');">
  <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> Relatório de Chamadas
        </h1>
      </div>
    </div>
  </div>
</div>
<!-- END Hero -->




<div class="content content-full">

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

    <div class="row">

        <div class="col-12 col-sm-4 col-lg-4" style="display: inline-block; margin-top:3%;">
            <label class="form-label" for="example-select">Projeto</label>
            <select class="form-select" id="select2" name="projeto_id">
            <option value="" selected></option>
              @if($chamadas[0])
                  @foreach($options2 as $item)
                      <option {{$item->id == $chamadas[0]->projeto_id ? 'selected' : ''}} value="{{$item->id}}">{{$item->descricao}}</option>
                  @endforeach
              @else
                  @foreach($options2 as $item)
                      <option value="{{$item->id}}">{{$item->descricao}}</option>
                  @endforeach
              @endif
            </select>
          </div>
          <div class="col-12 col-sm-4 col-lg-4" style="display: inline-block; margin-top:3%;">
            <label class="form-label" for="example-select">Turmas </label>
            <select class="form-select" id="select3" name="turma_id">
            <option value="" selected></option>
              @if($chamadas[0])
                  @foreach($turmas as $item)
                      @if($item->situacao == 1)
                          <option {{$item->id == $chamadas[0]->turma_id ? 'selected' : ''}} value="{{$item->id}}">{{$item->descricao}}</option>
                      @endif
                  @endforeach
              @else
                  @foreach($turmas as $item)
                  <option value="{{$item->id}}">{{$item->descricao}}</option>
                  @endforeach
              @endif
            </select>
          </div>
          <div class="col-12 col-sm-4 col-lg-4" style="display: inline-block; margin-top:3%;">
            <label class="form-label" for="example-select">Prestadores</label>
            <select class="form-select" id="select4" name="funcionario_id">
            <option value="" selected></option>
              @if($chamadas[0])
                  @foreach($funcionarios as $item)
                      <option {{$item->id == $chamadas[0]->funcionario_id ? 'selected' : ''}} value="{{$item->id}}">{{$item->nome_completo}}</option>
                  @endforeach
              @else
                  @foreach($funcionarios as $item)
                  <option value="{{$item->id}}">{{$item->nome_completo}}</option>
                  @endforeach
              @endif
            </select>
          </div>

    <div class="col-4" style="display: inline-block">
      <label class="form-label" for="data_inicial">Data Inicial</label>
      <input type="date" class="form-control" value="{{ $request->input('data_inicial') }}" id="data_inicial" name="data_inicial">
    </div>
    <div class="col-4" style="display: inline-block">
      <label class="form-label" for="data_final">Data Final</label>
      <input type="date" class="form-control" value="{{ $request->input('data_final') }}" id="data_final" name="data_final">
    </div>
    {{-- <div class="col-4" style="display: inline-block">
      <label class="form-label" for="ano">Por Ano</label>
      <input type="text" class="form-control" value="{{ $request->input('ano') }}" id="ano" name="ano">
    </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="/filtrar_chamadas_relatorio" class="btn btn-danger">
        <i class="bi bi-x-circle"></i> Remover Filtros
    </a>
    </div>


    </div>
  </form>


  <p style="color: red;"> {{$descricao}} </p>

</div>





{{-- só quem tem permissão para visualizar esta página --}}
@can('pode_visualizar_chamada')
<!-- funcionalidade trazer todos os projetos vigentes do ano -->
<!-- Page Content -->
<div class="content content-boxed">
  <!-- Invoice -->
  <div class="block block-rounded">
    <div class="block-header block-header-default">
      <h3 class="block-title">Relatório de Chamadas</h3>
      <div class="block-options">
        <!-- Print Page functionality is initialized dmPrint() -->
          <a href="/imprimir_chamadas_relatorio?projeto_id={{ request('projeto_id') }}&turma_id={{ request('turma_id') }}&funcionario_id={{ request('funcionario_id') }}&data_inicial={{ request('data_inicial') }}&data_final={{ request('data_final') }}">
          <button type="submit" class="btn-block-option">
            <i class="si si-printer me-1"></i> Imprimir Relatório
          </button>
        </a>

        </a>
      </div>
    </div>
    <div class="block-content">
      <div class="p-sm-4 p-xl-7">
        <!-- Invoice Info -->
        <div class="row mb-5">
          <!-- Company Info -->
          <div class="col-6">
            <p class="h3">Relatório de Chamadas</p>
            <address>
              {{ now()->format('d/m/Y H:i:s') }}<br>
            </address>
          </div>
          <!-- END Company Info -->

          <!-- Client Info -->
          <div class="col-6 text-end">
            <p class="h3">Emitido Por</p>
            <address>
              {{$usuario->name}}<br>
              {{$usuario->email}}<br>
            </address>
          </div>
          <!-- END Client Info -->
        </div>
        <!-- END Invoice Info -->

        <!-- Table -->
        <div class="col-12 col-sm-12 col-lg-12" style="width: 90%; margin-left: 5%;">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <!-- <th scope="col">RM</th> -->
                        {{-- <th scope="col">ID Chamada</th> --}}
                        <th scope="col">Nome</th>
                        <th scope="col">Presença</th>
                        <th scope="col">Observação</th>
                        <th scope="col">Data</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($chamadas as $item)
                    <tr>
                        <!-- <td scope="row" > {{$item->rm}} </td>  -->
                        {{-- <td scope="row">{{$item->id_chamada}}</td> --}}
                        <td scope="row">{{$item->nome}}</td>
                        <td scope="row"><input disabled type="checkbox" class="form-check-input" id="chamadaCheck" name="presencas[]" {{ in_array($item->id_chamada, old('presencas', $selected)) ? 'checked' : '' }} value="{{$item->id}}"></td> <!-- deixar todos checados para desmarcar quem não veio -->
                        <td scope="row">
                            <p>{{ isset($selected_observacoes[$loop->index]) ? $selected_observacoes[$loop->index] : ''}}</p>
                        </td>
                        <td scope="row">{{$item->data}}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <!-- END Table -->

        <!-- Footer -->
        <p class="text-muted text-center my-5">
          Relatório de chamadas da AMIS.
        </p>
        <!-- END Footer -->
      </div>
    </div>
  </div>
  <!-- END Invoice -->
</div>

{{ $chamadas->appends(request()->query())->links() }}


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


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

          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;
            select3.appendChild(option);
          });
        });



    });

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

          // console.log(data);

          // use o método fetch para enviar a requisição

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

    document.querySelector('#select4').addEventListener('change', function() {
      let value = this.value;
      // use o método fetch para enviar a requisição
    });


  </script>


@endsection