@extends('layouts.app')

@section('conteudo')

<style>
    .card-img-top{
        height: 400px;
    }
</style>

<br><br>
<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 class="row" style="color: black;">

    <div class="caso  text-center col-12">
        <h1>Chamada</h1>

        {{-- só quem tem permissão para visualizar esta página --}}
        @can('pode_visualizar_chamada')

        <!-- Form Inline - Alternative Style -->
        <form action="/actualizar_chamada/{{$chamada->id}}" method="POST" enctype="multipart/form-data">
            <div class="row  g-4 align-items-center">
                @csrf

                <!-- trazer todas as organizações -->
                <div class="col-12 col-sm-3 col-lg-3">
                    <label class="form-label" for="example-select">Organização</label>
                    <select class="form-control" id="select1" name="organizacao_id" disabled>
                        @foreach($options1 as $item)
                        <option {{$item->id == $turma->organizacao_id ? 'selected' : ''}} selected value="{{$item->id}}">{{$item->nome}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-sm-3 col-lg-3">
                    <label class="form-label" for="example-select">Projeto</label>
                    <select class="form-control" id="select2" name="projeto_id" disabled>
                    <option value="" selected></option>
                        @foreach($options2 as $item)
                        <option {{$item->id == $turma->projeto_id ? 'selected' : ''}} value="{{$item->id}}">{{$item->descricao}}</option>
                        @endforeach
                    </select>
                </div>
                <!-- trazer todas as organizações -->
                <div class="col-10 col-sm-4 col-lg-4">
                    <label class="form-label" for="example-select">Turmas</label>
                    <select class="form-control" id="select3" name="turma_id" disabled>
                    <option value="" selected></option>
                        @foreach($turmas as $item)
                        <option {{$item->id == $turma->id ? 'selected' : ''}} value="{{$item->id}}">{{$item->descricao}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-2 col-sm-2 col-lg-2">
                    <span class="input-group-text border-0 bg-body">
                        <a type="submit"> <i class="fa fa-fw fa-search"></i> </a>
                    </span>
                </div>
                <hr>
                <!-- trazer preenchido o nome do professor, turma, projeto, data e a lista com os alunos matriculados -->
                <div class="col-12 col-sm-9 col-lg-9">
                    <label class="form-label" for="example-select">Prestador</label>
                    <select class="form-control" id="funcionario_id" name="funcionario_id" value="{{$turma->funcionario_id}}" required disabled>
                        <option value="{{$funcionario->id}}">{{$funcionario->nome_completo}}</option>
                    </select>
                </div>
                <!-- <div class="col-4">
          <label class="form-label" for="example-select">Categoria</label>
          <select class="form-select" id="funcionario_id" name="categoria_id" value="{{$turma->categoria_id}}" required>
            @foreach($categorias as $item)
            <option value="{{$item->id}}">{{$item->descricao}}</option>
            @endforeach
          </select>
        </div> -->
                <div class="col-6 col-sm-3 col-lg-3">
                    <label class="form-label" for="example-select">Data {{$chamada->data}} </label>
                    <input type="date" class="form-control" id="date" name="data" value="{{$chamada->data}}">
                </div>
                <!-- <div class="col-4">
                    <label class="form-label" for="example-select">Imagens da aula</label>
                    <input type="file" class="form-control" id="aula" name="files[]" multiple>
                </div> -->
                <div class="col-12 col-sm-12 col-lg-12">
                    <label class="form-label" for="example-select">Foto</label>
                    <input type="file" class="form-control" id="foto1" name="foto1" value="{{$chamada->foto1}}">
                </div>
                <div class="col-12 col-sm-12 col-lg-12 text-center">
                    <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto">
                        @if($chamada->foto1 == null)
                        <p style="font-size: 12px;"> Não Adicionado </p>
                        @else
                        <img style="width: 100px; height: 100px;" src="{{ asset(str_replace('public/', '', 'storage/' . $chamada->foto1)) }}" data-toggle="modal" data-target="#modalEliminar1">
                        @endif
                    </a>
                </div>

                <div class="col-12 col-sm-12 col-lg-12">
                    <label class="form-label" for="example-select">Foto</label>
                    <input type="file" class="form-control" id="foto2" name="foto2" value="{{$chamada->foto2}}">
                </div>

                <div class="col-12 col-sm-12 col-lg-12 text-center">
                    <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto">
                        @if($chamada->foto2 == null)
                        <p style="font-size: 12px;"> Não Adicionado </p>
                        @else
                        <img style="width: 100px; height: 100px;" src="{{ asset(str_replace('public/', '', 'storage/' . $chamada->foto2)) }}" data-toggle="modal" data-target="#modalEliminar2">
                        @endif
                    </a>
                </div>
                <!-- <div class="col-6 col-sm-6 col-lg-6">
                    <label class="form-label" for="example-select">Foto</label>
                    <input type="file" class="form-control" id="foto3" name="foto3" value="{{$chamada->foto3}}">
                </div>

                <div class="col-6 col-sm-6 col-lg-6">
                    <label class="form-label" for="example-select">Foto</label>
                    <input type="file" class="form-control" id="foto4" name="foto4" value="{{$chamada->foto4}}">
                </div>

                <div class="col-6 col-sm-6 col-lg-6 text-center">
                    <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto">
                        @if($chamada->foto3 == null)
                        <p style="font-size: 12px;"> Não Adicionado </p>
                        @else
                        <img style="max-width: 90%; max-height: 90%;" src="{{ asset(str_replace('public/', '', 'storage/' . $chamada->foto3)) }}" data-toggle="modal" data-target="#modalEliminar3">
                        @endif
                    </a>
                </div>
                <div class="col-6 col-sm-6 col-lg-6 text-center">
                    <a class="item item-rounded bg-body-dark text-dark fs-2 mb-2 mx-auto">
                        @if($chamada->foto4 == null)
                        <p style="font-size: 12px;"> Não Adicionado </p>
                        @else
                        <img style="max-width: 90%; max-height: 90%;" src="{{ asset(str_replace('public/', '', 'storage/' . $chamada->foto4)) }}" data-toggle="modal" data-target="#modalEliminar4">
                        @endif
                    </a>
                </div> -->
                <div class="col-12 col-sm-12 col-lg-12">
                    <label class="form-label" for="example-select" style="text-align: right;">Descrição do que foi feito
                        em aula</label>
                    <!-- <input type="text" class="form-control" id="descricao" name="descricao"> -->
                    <br>
                    <div class="form-group">
                        <textarea class="ckeditor form-control" name="descricao">{{$chamada->descricao}}</textarea>
                    </div>
                </div>


            <!-- Modal -->
            <div class="modal fade" id="modalEliminar1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Confirmar Operação</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                        <div class="card" style="width: 90%;">
                            <img class="card-img-top" src="{{ asset(str_replace('public/', '', 'storage/' . $chamada->foto1)) }}" alt="Card image cap">
                          </div>
                    </div>
                    <div class="modal-footer">
                    <a href="/eliminar_foto_chamada/{{$chamada->id}}/1"><button type="button" class="btn btn-danger">Eliminar</button> </a>
                    <a href="{{$chamada->foto1}}" download="{{$chamada->foto1}}"><button type="button" class="btn btn-success">Descarregar</button> </a>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    </div>
                </div>
                </div>
            </div>



            <!-- Modal -->
            <div class="modal fade" id="modalEliminar2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Confirmar Operação</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                        <div class="card" style="width: 90%;">
                            <img class="card-img-top" src="{{ asset(str_replace('public/', '', 'storage/' . $chamada->foto2)) }}" alt="Card image cap">
                          </div>
                    </div>
                    <div class="modal-footer">
                    <a href="/eliminar_foto_chamada/{{$chamada->id}}/2"><button type="button" class="btn btn-danger">Eliminar</button> </a>
                    <a href="{{$chamada->foto2}}" download="{{$chamada->foto2}}"><button type="button" class="btn btn-success">Descarregar</button> </a>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    </div>
                </div>
                </div>
            </div>



            <!-- Modal -->
            <div class="modal fade" id="modalEliminar3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Confirmar Operação</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                        <div class="card" style="width: 90%;">
                            <img class="card-img-top" src="{{ asset(str_replace('public/', '', 'storage/' . $chamada->foto3)) }}" alt="Card image cap">
                          </div>
                    </div>
                    <div class="modal-footer">
                    <a href="/eliminar_foto_chamada/{{$chamada->id}}/3"><button type="button" class="btn btn-danger">Eliminar</button> </a>
                    <a href="{{$chamada->foto3}}" download="{{$chamada->foto3}}"><button type="button" class="btn btn-success">Descarregar</button> </a>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    </div>
                </div>
                </div>
            </div>



            <!-- Modal -->
            <div class="modal fade" id="modalEliminar4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Confirmar Operação</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                        <div class="card" style="width: 90%;">
                            <img class="card-img-top" src="{{ asset(str_replace('public/', '', 'storage/' . $chamada->foto4)) }}" alt="Card image cap">
                          </div>
                    </div>
                    <div class="modal-footer">
                    <a href="/eliminar_foto_chamada/{{$chamada->id}}/4"><button type="button" class="btn btn-danger">Eliminar</button> </a>
                    <a href="{{$chamada->foto4}}" download="{{$chamada->foto4}}"><button type="button" class="btn btn-success">Descarregar</button> </a>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    </div>
                </div>
                </div>
            </div>


                <hr>


                @if($estudantes)
                <div class="block-header block-header-default">
                    <h4 class="h4">Beneficiários Ativos </h4>
                </div>
                <div class="col-12 col-sm-12 col-lg-12">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th scope="col">RM</th>
                                <th scope="col">Nome</th>
                                <th scope="col">Presença</th>
                                <th scope="col">Observação</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($estudantes as $item)
                            @if($item->status == 1)
                            <tr>
                                <td scope="row"> {{$item->rm}} </td> <!-- trazer os rm -->
                                <td scope="row">{{$item->nome}}</td> <!-- trazer os nomes -->
                                <td scope="row"><input type="checkbox" class="form-check-input" id="chamadaCheck" name="presencas[]" {{ in_array($item->id, old('presencas', $selected)) ? 'checked' : '' }} value="{{$item->id}}"></td> <!-- deixar todos checados para desmarcar quem não veio -->
                                <td scope="row"><input type="text" class="form-control" id="observacoes_estudantes" name="observacoes_estudantes[]" value="{{ isset($selected_observacoes[$loop->index]) ? $selected_observacoes[$loop->index] : ''}}"></td> <!-- deixar campo para escrever -->
                            </tr>
                            @endif
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <hr>

                <div class="block-header block-header-default">
                    <h4 class="h4">Beneficiários Inativos </h4>
                </div>
                <div class="col-12 col-sm-12 col-lg-12">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th scope="col">RM</th>
                                <th scope="col">Nome</th>
                                <th scope="col">Presença</th>
                                <th scope="col">Observação</th>
                            </tr>
                        </thead>
                        <tbody>

                            @foreach ($estudantes as $item)
                            @if($item->status == 0)
                            <tr>
                                <td scope="row"> {{$item->rm}} </td> <!-- trazer os rm -->
                                <td scope="row">{{$item->nome}}</td> <!-- trazer os nomes -->
                                <td scope="row"><input type="checkbox" class="form-check-input" id="chamadaCheck" name="presencas[]" {{ in_array($item->id, old('presencas', $selected)) ? 'checked' : '' }} value="{{$item->id}}" disabled></td> <!-- deixar todos checados para desmarcar quem não veio -->
                                <td class="text-center fs-sm">
                                    <span style="color: red;">Inativo</span>
                                </td>
                            </tr>
                            @endif
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif
                <div class="col-12">
                    <label class="form-label" for="example-select">Observações</label>
                    <input type="text" class="form-control" id="observacoes" name="observacoes" value="{{$chamada->observacoes}}">
                </div>
            </div>
            <hr>
            <!-- Regra caso o aluno já tenha cursado ou não ter mais a idade trazer alerta do motivo de não salvar -->
            <center> <a type="submit"> <button type="submit" class="btn btn-primary m-1">
                        <i class="fa fa-fw fa-user-plus opacity-50 me-1"></i> Salvar Chamada
                    </button> </a> </center>


        </form>

    </div>

    {{-- 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 src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.ckeditor').ckeditor();
    });
</script>

<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);
                // 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
            window.location.href = "/registar_chamada_por_turma/" + value;

        });

    });


</script>




@endsection