@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="select_funcionarios">Prestadores</label>
                    <select class="form-select" id="select_funcionarios" name="funcionario_id" required>
                        <option value="" selected></option>
                        @foreach($funcionarios as $item)
                            <option value="{{$item->id}}">{{$item->nome_completo}}</option>
                        @endforeach
                    </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}}</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>{{ $turmaSelecionada->descricao ?? '---' }}</td>
                            </tr>
                            <tr>
                                <td>Mês</td>
                                <td>{{ $mesEmExtenso ?? '---' }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            @foreach ($turmas as $turma)




            <!-- 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"> Turma: {{$turma->descricao}} | {{$turma->ano}}</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="{{ $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="{{ $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)
            @if($estudante->turma_id == $turma->id)
                <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); // Definindo a variável $date aqui
                            $dayOfWeek = date('N', strtotime($date));
                            // Filtra as chamadas para a turma atual e para a data específica
                            $chamadaParaEsteDia = $chamadasDoMes->first(function ($chamada) use ($estudante, $date) {



                                return $chamada->turma_id == $estudante->turma_id && $chamada->data === $date;
                            });

                        @endphp
                        <td class="text-wrap">
                            @if($dayOfWeek >= 1 && $dayOfWeek <= 5) {{-- Dias úteis --}}
                                @if($chamadaParaEsteDia && in_array($estudante->id, $chamadaParaEsteDia->presencas ?? [])) {{-- Dias que houve chamadas e o aluno esteve presente --}}
                                    <span class="present">P</span>
                                    @php $frequencia++; @endphp
                                @elseif($chamadaParaEsteDia) {{-- Dias que houve chamadas e o aluno faltou --}}
                                    <span class="absent">F</span>
                                @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>
            @endif
        @endforeach

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


    </table>
@endif

@endforeach

  {{-- 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
    //   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 + ' | ' + item.ano;
          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.querySelector('#select_funcionarios').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;
          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;
        // use o método fetch para enviar a requisição
        window.location.href = "/relatorio_chamadas/" + turma + '/' + mesSelecionado;
    });

    // Adicione este bloco de código para lidar com a seleção do mês no momento da carga da página
    window.addEventListener('DOMContentLoaded', function() {
        let value = inputMes.value;
        const mesSelecionado = 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>

@endsection