@extends('layouts.app')

@section('conteudo')

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

    .table-responsive {
        overflow-x: auto;
    }

    .table th, .table td {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 150px;
        font-size: 12px;
        padding: 5px;
    }

    .table th {
        background-color: #f2f2f2;
    }

    .table td {
        word-wrap: break-word;
    }

    .footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #f8f9fa;
        text-align: center;
        padding: 10px 0;
    }
</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 Beneficiários
        </h1>
      </div>
    </div>
  </div>
</div>
<!-- END Hero -->

<div class="content content-full">
  <!-- Filtros -->


  <div class="col-4" style="display: inline-block; margin-left: 1px; margin-top: 20px;">

    <a href="/filtrar_estudantes_relatorio" class="btn btn-primary">
        <i class="fa fa-fw fa-search"></i> Novo Filtro de Beneficiários
    </a>
  </div>

</div>





{{-- só quem tem permissão para visualizar esta página --}}
@can('pode_visualizar_estudante')
<!-- 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 Beneficiário</h3>
      <div class="block-options">
        <!-- Print Page functionality is initialized dmPrint() -->
        <form id="printForm" method="post" action="/imprimir_estudantes_relatorio">
            @csrf

            <input type="hidden" name="sexo" value="{{ $request->input('sexo') }}">
            <input type="hidden" name="cor" value="{{ $request->input('cor') }}">
            <input type="hidden" name="possui_irmaos" value="{{ $request->input('possui_irmaos') }}">
            <input type="hidden" name="ex_beneficiario" value="{{ $request->input('ex_beneficiario') }}">
            <input type="hidden" name="aluno_autorizado_sair" value="{{ $request->input('aluno_autorizado_sair') }}">
            <input type="hidden" name="autorizacao_imagem" value="{{ $request->input('autorizacao_imagem') }}">
            <input type="hidden" name="projeto_id" value="{{ $request->input('projeto_id') }}">
            <input type="hidden" name="turma_id" value="{{ $request->input('turma_id') }}">
            <input type="hidden" name="data_inicial" value="{{ $request->input('data_inicial') }}">
            <input type="hidden" name="data_final" value="{{ $request->input('data_final') }}">
            <input type="hidden" name="faixa_etaria_de" value="{{ $request->input('faixa_etaria_de') }}">
            <input type="hidden" name="faixa_etaria_ate" value="{{ $request->input('faixa_etaria_ate') }}">
            <input type="hidden" name="ano" value="{{ $request->input('ano') }}">
            <input type="hidden" name="page" value="{{ $estudantes->currentPage() }}">

            @foreach($camposVisiveis as $campo)
                <input type="hidden" name="campos_visiveis[]" value="{{ $campo }}">
            @endforeach

            <button type="submit" class="btn-block-option">
                <i class="si si-printer me-1"></i> Imprimir Relatório
            </button>
        </form>
    </div>

      </div>
      <div class="block-content">
        <div class="p-sm-4 p-xl-7">
          <!-- Invoice Info -->
          <div class="row mb-5">
            <div class="col-6">
              <p class="h3">Relatório de Beneficiário</p>
              <address>
                {{ now()->format('d/m/Y H:i:s') }}<br>
              </address>
            </div>
            <div class="col-6 text-end">
              <p class="h3">Emitido Por</p>
              <address>
                {{$usuario->name}}<br>
                {{$usuario->email}}<br>
              </address>
            </div>
          </div>

          <!-- Table -->
          <div class="table-responsive push">
            <table class="table table-bordered">
              <thead class="bg-body">
                <tr>
                  <th>Beneficiário</th>
                  <th>Idade</th>
                  <th>Data de Nascimento</th>
                  <th>CPF Beneficiário</th>
                  <th>RG Beneficiário</th>
                  <th>Telefone/WhatsApp</th>
                  <th>Responsável</th>
                </tr>
              </thead>
              <tbody>
                @foreach($estudantes as $estudante)
                <tr>
                  <td class="text-end">{{ $estudante->nome }}</td>
                  <td class="text-end">{{ $estudante->idade }}</td>
                  <td class="text-end">{{ $estudante->data_nascimento }}</td>
                  <td class="text-end">{{ $estudante->cpf }}</td>
                  <td class="text-end">{{ $estudante->rg }}</td>
                  <td class="text-end">{{ $estudante->telefone_emergencia }}</td>
                  <td class="text-end">{{ $estudante->responsavel_para_tirar1_nome }}</td>
                </tr>
                @endforeach
                <tr>
                  <td colspan="4" class="fw-bold text-uppercase text-end bg-body-light">Total Por Página</td>
                  <td class="fw-bold text-end bg-body-light">{{ $estudantes->count() }}</td>
                </tr>
                <tr>
                  <td colspan="4" class="fw-bold text-uppercase text-end bg-body-light">Total Geral</td>
                  <td class="fw-bold text-end bg-body-light">{{ $total_geral }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <p class="text-muted text-center my-5">
            Relatório de estudantes da AMIS.
          </p>
        </div>
        <!-- END Invoice Info -->

      </div>
    </div>
  </div>
</div>

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

{{-- Pra quem não tem permissão de visualizar essa página aparecerá a mensagem abaixo --}}
<center>
  <br>
  <div class="alert alert-danger" role="alert">
    Você não tem permissão pra visualizar essa página!
  </div>
</center>
@endcan

<div class="footer">
  <p class="text-muted">Relatório de estudantes da AMIS</p>
</div>

<script>
    function QuantMinimaFaixaEtaria(input) {
        if (parseInt(input.value) < 1) {
            input.value = 1;
        }
    }

    function abrirImpressao() {
        let url = new URL(window.location.origin + "/imprimir_estudantes_relatorio");
        let params = new URLSearchParams(window.location.search);

        url.search = params;

        let printWindow = window.open(url.toString(), '_blank');
        printWindow.onload = function() {
            printWindow.print();
        };
    }

    window.print();
</script>



<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() {
        turma = this.value;
      });

      const inputMes = document.getElementById('mes');
      const buttonGerarRelatorio = document.getElementById('gerarRelatorio');
    });

    document.getElementById("input").addEventListener("keypress", function(event) {
    if (event.keyCode === 13) {
      event.preventDefault();
    }
  });


  </script>


<script>
    document.getElementById('printForm').addEventListener('submit', function(e) {
    const checkboxes = document.querySelectorAll('.campos-visiveis input[type="checkbox"]');
    const hiddenFieldsContainer = document.getElementById('hiddenFieldsContainer');

    // Limpa os campos ocultos anteriores
    hiddenFieldsContainer.innerHTML = '';

    // Cria campos ocultos para cada checkbox marcado
    checkboxes.forEach(function(checkbox) {
        if (checkbox.checked) {
            const hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = 'campos_visiveis[]';
            hiddenInput.value = checkbox.value;
            hiddenFieldsContainer.appendChild(hiddenInput);
        }
    });
});

</script>

@endsection