@extends('layouts.app')

@section('conteudo')

<!-- Hero -->
<div class="bg-image" style="background-image: url(''); margin-top: 70px;">
    <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> Ocorrência
                </h1>
                @can('pode_visualizar_ocorrencia')
                <a class="btn btn-primary my-2" href="/ocorrencias">
                    <i class="fa fa-fw fa-list"></i>
                    <span class="d-none d-sm-inline ms-1">Listar Ocorrência</span>
                </a>
                @endcan
            </div>
        </div>
    </div>
</div>
<!-- END Hero -->

{{-- só quem tem permissão para visualizar esta página --}}
@can('pode_visualizar_ocorrencia')
<div class="content">
    <!-- Elements -->
    <div class="block block-rounded">
        <div class="block-header block-header-default">
            <h3 class="block-title">Visualizando ocorrência na data {{date ('d-m-Y', strtotime($ocorrencias->data))}}</h3>
        </div>
        <div class="block-content">

            <div class="row">
                <div class="row  g-4 align-items-center" >
                    @csrf
                    <!-- <input type="hidden" name="estudante_id" id="estudante_id" value="{{$estudante->id}}" class="form-control" readonly> -->
                    
                    <div class="col-10" style="margin-top: -30px;">
                        <label class="form-label" for="estudante_id">Beneficiário*</label>
                        <p>{{$estudante->nome}}</p>
                        <!-- <input type="text" id="estudante_nome" class="form-control" value="" readonly> -->
                    </div>
                    
                    <div class="col-12">
                        <label class="form-label" for="descricao">Descrição</label>
                        <p>{{$ocorrencias->descricao}}</p>
                        <!-- <input type="file" class="form-control" id="descricao" name="descricao" value=""> -->
                    </div>
                </div>
                <!-- END Form Inline - Alternative Style -->



            </div>
        </div>
        <!-- END Elements -->
    </div>
</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

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    const searchInput = document.getElementById('search-input');
    const searchResults = document.getElementById('search-results');

    function addToInput(element) {
        let id = element.parentElement.getAttribute("data-id");
        var input = document.querySelector("#estudante_id");
        input.value = id;
        input.setAttribute("name", "estudante_id");

        var input2 = document.querySelector("#estudante_nome");
        input2.value = element.innerText;

        searchResults.innerHTML = '';
    }




    searchInput.addEventListener('input', () => {
        axios.get('/search_estudante', {
                params: {
                    query: searchInput.value
                }
            })
            .then(response => {
                searchResults.innerHTML = '';
                response.data.forEach(item => {
                    const link = document.createElement('a');
                    link.textContent = item.nome;
                    link.setAttribute("onclick", "addToInput(this)");
                    const li = document.createElement('li');
                    li.setAttribute("data-id", item.id);
                    li.appendChild(link);
                    searchResults.appendChild(li);
                });
            });
    });
</script>

@endsection