@extends('layouts.app')

@section('conteudo')


<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid black;
        text-align: center;
        padding: 8px;
    }

    /* Custom styles for the table cells */
    .absent {
        color: red;
    }

    .present {
        color: blue;
    }

    .text-wrap {
        min-width: 40px;
        max-width: 70px;
        word-wrap: break-word;
    }


    /* .weekend {
        background-color: grey;
    } */
</style>

<style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f7ff;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        .form-label {
            font-weight: bold;
            color: #3498db;
        }

        .form-select,
        .form-control {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #3498db;
            border-radius: 5px;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .table th,
        .table td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #3498db;
        }

        .table th {
            background-color: #3498db;
            color: #fff;
        }

        .table tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        .table tbody tr:hover {
            background-color: #dff0ff;
        }

        .total {
            font-weight: bold;
        }

        .total span {
            color: #3498db;
        }
    </style>
</head>


<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>Relatório de Chamadas</h1>
    {{-- só quem tem permissão para visualizar esta página --}}
    @can('pode_visualizar_chamada')


    <!-- Form Inline - Alternative Style -->

  </div>

  <form action="/relatorio_chamadas" method="POST">
    @csrf

        <!-- Form Inline - Alternative Style -->
            <div class="row g-4 align-items-center">

                <!-- Organização -->
                <div class="col-12 col-sm-3">
                    <label class="form-label" for="select1">Organização</label>
                    <select class="form-select" id="select1" name="organizacao_id">
                        @foreach($organizacoes as $organizacao)
                        <option value="{{$organizacao->id}}">{{$organizacao->nome}}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Projeto -->
                <div class="col-12 col-sm-3">
                    <label class="form-label" for="select2">Projeto</label>
                    <select class="form-select" id="select2" name="projeto_id" required>
                        <option value="" selected></option>
                        @foreach($projetos as $projeto)
                        <option value="{{$projeto->id}}">{{$projeto->descricao}}</option>
                        @endforeach
                    </select>
                </div>


                <!-- Prestadores -->
                <div class="col-10 col-sm-3">
                    <label class="form-label" for="select4">Prestadores</label>
                    <select class="form-select" id="select4" name="funcionario_id" required>
                        <option value="" selected></option>
                        @foreach($funcionarios as $item)
                            <option value="{{$item->id}}">{{$item->nome_completo}}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-10 col-sm-3">
                    <label class="form-label" for="example-select">Situação</label>
                    <select class="form-select filter-select" id="situacao" name="situacao">
                        <option>Todas</option>
                        <option value="1">Ativa</option>
                        <option value="0">Inativa</option>
                    </select>
                </div>

                <!-- Turmas -->
                <div class="col-10 col-sm-3">
                    <label class="form-label" for="select3">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>


                <!-- Mês -->
                <div class="col-10 col-sm-3">
                    <label class="form-label" for="mes">Mês</label>
                    <input class="form-control" type="month" id="mes" name="mes" required>
                </div>


                <div class="col-10 col-sm-3">
                    <input class="form-check-input" type="checkbox" id="juntar_turmas" name="juntar_turmas" value="1">
                    <label class="form-check-label" for="juntar_turmas">Juntar todas as turmas</label>
                  </div>

                <div class="col-4 col-sm-2">
                    <button id="gerarRelatorio" class="btn btn-primary mt-2">Gerar Relatório</button>
                </div>

                <div class="col-4 col-sm-1">
                    <a href="" class="btn btn-danger mt-2">Limpar </a>
                 </div>

            </div>

        </form>
            <br><br><br>

              <!-- Tabela Dinâmica Atualizada -->
            <div class="block block-rounded">
                <div class="block-content block-content-full">
                    <table class="table table-bordered table-striped table-vcenter">
                        <thead>
                            <tr>
                                <th>Instituição</th>
                                <th>ASSOCIAÇÃO MORUMBI DE INTEGRAÇÃO SOCIAL - AMIS</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Projeto</td>
                                <td>{{ $projetoAssociado->descricao ?? '---' }}</td>
                            </tr>
                            <tr>
                                <td>Instrutor</td>
                                <td>{{ $funcionarioResponsavel->nome_completo ?? '---' }}</td>
                            </tr>
                            <tr>
                                <td>Turma</td>
                                <td>
                                    @if(isset($turmaSelecionada) && $turmaSelecionada)
                                        {{ $turmaSelecionada->descricao . ' | ' . $turmaSelecionada->ano }}
                                    @else
                                        ---
                                    @endif
                                </td>
                            </tr>

                            <tr>
                                <td>Mês</td>
                                <td>{{ $mesEmExtenso ?? '---' }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Seção de Tabela dos Estudantes -->
@if($estudantesDaTurma->isNotEmpty())
<h2 style="color: #3498db;">Faltas dos estudantes - Mês: {{ $mesEmExtenso }}</h2>

    <div class="block block-rounded" style="height: 100%;">
                <div class="block-header block-header-default">
                    <h3 class="block-title">Data: {{ date('d-m-Y') }}</h3>
                </div>
                <div class="col-6 col-sm-3 col-lg-3 text-center" style="float:left; margin-top: 10px; margin-left: 25%">
                <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto">
                        @if($estudantesDaTurma[0]->foto1 == null)
                        <p style="font-size: 12px;"> Não Adicionado </p>
                        @else
                        <img style="width: 150px; height: 150px;" src="{{ asset(str_replace('public/', '', 'storage/' . $estudantesDaTurma[0]->foto1)) }}" data-toggle="modal" data-target="#modalEliminar1">
                        @endif
                    </a>
                </div>
                <div class="col-6 col-sm-3 col-lg-3 text-center" style="float:left; margin-top: 10px; margin-right: 20%;">
                <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto">
                        @if($estudantesDaTurma[0]->foto2 == null)
                        <p style="font-size: 12px;"> Não Adicionado </p>
                        @else
                        <img style="width: 150px; height: 150px;" src="{{ asset(str_replace('public/', '', 'storage/' . $estudantesDaTurma[0]->foto2)) }}" data-toggle="modal" data-target="#modalEliminar2">
                        @endif
                    </a>
                </div>
            </div>


    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Foto</th>
                <th>Beneficiário {{strtotime($mesSelecionado)}} </th>
                @php
                    $mesCarbon = \Carbon\Carbon::createFromFormat('m-Y', $mesSelecionado)->startOfMonth();
                @endphp

                @for($day = 1; $day <= $mesCarbon->daysInMonth; $day++)
                    <th>{{ $day }}</th>
                @endfor
                <th>Frequência</th>
            </tr>
        </thead>

        <tbody>
            @php
                $totalAlunos = count($estudantesDaTurma);
            @endphp
            @foreach($estudantesDaTurma as $estudante)
            <tr>
                <td class="text-center">
                    <img class="img-avatar img-avatar-thumb" src="{{ $estudante->foto ?? asset('images/sem-foto1.jpg') }}" alt="{{ $estudante->nome }}">
                </td>
                <td>{{ $estudante->nome }}</td>
                @php
                    $frequencia = 0;
                @endphp
                @for($day = 1; $day <= date('t', strtotime("01-".$mesSelecionado)); $day++)
                    @php
                        list($mes, $ano) = explode('-', $mesSelecionado);
                        $date = "{$ano}-{$mes}-" . sprintf("%02d", $day);
                        $dayOfWeek = date('N', strtotime($date));
                    @endphp
                    <td class="text-wrap">
                        @if($dayOfWeek >= 1 && $dayOfWeek <= 5) {{-- Dias úteis --}}
                            @php
                                $chamadaParaEsteDia = $chamadasDoMes->first(fn($chamada) => $chamada->data === $date);
                            @endphp
                            @if($chamadaParaEsteDia)
                                @if($estudante->created_at <= $chamadaParaEsteDia->created_at &&
                                    (!$estudante->data_inativacao || $estudante->data_inativacao >= $chamadaParaEsteDia->data))
                                    @if(in_array($estudante->id, $chamadaParaEsteDia->presencas ?? [])) {{-- Dias que houve chamadas e o aluno esteve presente --}}
                                        <span class="present">P</span>
                                        @php $frequencia++; @endphp
                                    @else {{-- Dias que houve chamadas e o aluno faltou --}}
                                        <span class="absent">F</span>
                                    @endif
                                @else
                                    <span class="not-enrolled">N</span>
                                @endif
                            @else {{-- Dias que não houve chamadas --}}
                                <span class="weekend"> </span>
                            @endif
                        @else {{-- Fim de semana --}}
                            <span class="weekend">--</span>
                        @endif
                    </td>
                @endfor

                <td><span class="total">{{ $frequencia }}</span></td>
            </tr>
            @endforeach

            <tr>
                <td colspan="{{ date('t', strtotime($mesSelecionado)) + 2 }}" class="total">Total de Alunos: <span>{{ $totalAlunos }}</span></td>
            </tr>
        </tbody>



    </table>
@endif


  {{-- 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>
    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_funcionarios_por_projeto') }}', {
              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 = '';

              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.id;
                  option.text = item.nome_completo;
                  select4.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 => {
        });
    });

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

          // use o método fetch para enviar a requisição
          fetch('{{ route('selects.filter_turmas_por_funcionario') }}', {
              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 = '';

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


  </script>


<script>
      document.querySelector('#select4').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_funcionario')}}', {
          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() {
      turma = this.value;
    });

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

    buttonGerarRelatorio.addEventListener('click', function() {
        let value = inputMes.value;
        const mesSelecionado = value;

        if(value){
        // use o método fetch para enviar a requisição
        window.location.href = "/relatorio_chamadas/" + turma + '/' + mesSelecionado;
        }

    });



  });
</script>



<script>
    document.addEventListener("DOMContentLoaded", function() {
    const juntarTurmasCheckbox = document.getElementById('juntar_turmas');
    const selectTurmas = document.getElementById('select3');

    juntarTurmasCheckbox.addEventListener('change', function() {
        if (this.checked) {
            selectTurmas.removeAttribute('required');
        } else {
            selectTurmas.setAttribute('required', 'required');
        }
    });
});
</script>


<script>
    document.getElementById('situacao').addEventListener('change', function() {
    let situacao = this.value;
    let funcionarioId = document.getElementById('select4').value; // Certifique-se de que o id do select de funcionários é 'select4'

    // Faz a requisição AJAX para buscar as turmas filtradas
    fetch('/selects/filter_turmas_por_situacao', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}' // Adiciona o token CSRF para a segurança
        },
        body: JSON.stringify({
            situacao: situacao,
            funcionario_id: funcionarioId
        })
    })
    .then(response => response.json())
    .then(turmas => {
        // Limpa o select de turmas
        let turmaSelect = document.getElementById('select3');
        turmaSelect.innerHTML = '<option value="">Selecione uma turma</option>';

        // Popula o select de turmas com as novas opções
        turmas.forEach(turma => {
            let option = document.createElement('option');
            option.value = turma.id;
            option.textContent = turma.descricao + ' | ' + turma.ano;
            turmaSelect.appendChild(option);
        });
    })
    .catch(error => console.error('Erro ao buscar turmas:', error));
});

    </script>

@endsection