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

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


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

  </div>

  <form action="/relatorio_chamadas_mensal" 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($options1 as $item)
                        <option value="{{$item->id}}">{{$item->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($options2 as $item)
                        <option value="{{$item->id}}">{{$item->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>

                <!-- 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-10 col-sm-3">
                    <button id="gerarRelatorio" class="btn btn-primary mt-2">Gerar Relatório</button>
                </div>

            </div>

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

            <!-- Tabela Dinâmica -->
            <div class="block block-rounded">
                <div class="block-content block-content-full">
                    <table class="table table-bordered table-striped table-vcenter">
                        <thead>
                            <tr>
                                <th style="width: 30%;">Instituição</th>
                                <th style="width: 70%;">ASSOCIAÇÃO MORUMBI DE INTEGRAÇÃO SOCIAL - AMIS</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="fw-semibold">Projeto</td>
                                <td class="d-none d-sm-table-cell">{{$projeto->descricao ?? '---'}}</td>
                            </tr>
                            <tr>
                                <td class="fw-semibold">Instrutor</td>
                                <td class="d-none d-sm-table-cell">{{$funcionario_turma->nome_completo ?? '---'}}</td>
                            </tr>
                            <tr>
                                <td class="fw-semibold">Turma</td>
                                <td class="d-none d-sm-table-cell">{{$turma->descricao ?? '---'}}</td>
                            </tr>
                            <tr>
                                <td class="fw-semibold">Mês</td>
                                <td class="d-none d-sm-table-cell">{{$mesEmExtenso}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Seção de Tabela dos Estudantes -->
@if($estudantes)
    <h2 style="color: #3498db;">Faltas dos estudantes - Mês: {{ $mesSelecionado }}</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', strtotime($estudantes[0]->data))}}</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($estudantes[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/' . $estudantes[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($estudantes[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/' . $estudantes[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</th>
                @for($day = 1; $day <= date('t', strtotime($mesSelecionado)); $day++)
                    <th>{{ $day }}</th>
                @endfor
                <th>Frequência</th>
            </tr>
        </thead>
        <tbody>
            @php
                $totalAlunos = count($estudantes);
            @endphp
            @foreach($estudantes as $estudante)
                <tr>
                    <td class="text-center">
                        <img class="img-avatar img-avatar-thumb" src="{{ $estudante->foto ?? '/images/sem-foto1.jpg' }}" alt="{{ $estudante->nome }}">
                    </td>
                    <td>{{ $estudante->nome }}</td>
                    @php
                        $frequencia = 0;
                    @endphp
                    @for($day = 1; $day <= date('t', strtotime($mesSelecionado)); $day++)
    <td>
        @php
            $anoAtual = date('Y');
            $date = date('Y-m-d', strtotime($anoAtual . '-' . $mesSelecionado . '-' . $day));
            $dayOfWeek = date('N', strtotime($date));

            // Verifica se o dia da semana é um dia útil (1 a 5)
            if ($dayOfWeek >= 1 && $dayOfWeek <= 5) {
                // Verifica se houve chamada para este dia específico
                $chamadaParaEsteDia = $chamadas->first(function ($chamada) use ($date) {
                    return $chamada->data == $date;
                });

                if ($chamadaParaEsteDia) {
                    // Verifica se o estudante está presente nesta chamada
                    $presente = in_array($estudante->id, $chamadaParaEsteDia->presencas);

                    if ($presente) {
                        echo '<span style="color: blue;"> P </span>';
                        $frequencia++;
                    } else {
                        echo '<span style="color: red;"> A </span>';
                    }
                } else {
                    // Se não houve chamada, marca como 'N'
                    echo '<span style="color: black;"> N </span>';
                }
            } else {
                // Se não é um dia útil, marca como '---'
                echo '<span style="color: black;"> --- </span>';
            }
        @endphp
    </td>
@endfor

                    <td><span style="color: #3498db; font-weight: bold;">{{ $frequencia }}</span></td>
                </tr>


            @endforeach
            <tr>
                <td colspan="{{ date('t', strtotime($mesSelecionado)) + 2 }}"><span style="color: #3498db; font-weight: bold;">Total de Alunos: {{ $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.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.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