@extends('layouts.basico')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.text-line').forEach(function(container) {
            const content = container.querySelector('div');

            // Remove <p> vazios
            content.querySelectorAll('p').forEach(p => {
                if (!p.textContent.trim()) {
                    p.remove();
                }
            });

            // Define uma altura máxima fixa para todas as previews
            const maxHeight = parseInt(window.getComputedStyle(content).lineHeight) * 5;

            // Ajusta a altura e o tamanho da fonte para todos os elementos restantes <p> e <h1>-<h5>
            content.style.height = maxHeight + 'px';
            content.style.overflow = 'hidden';
            
            content.querySelectorAll('p').forEach(p => {
                p.style.fontSize = '13px';
            });

            content.querySelectorAll('h1, h2, h3, h4, h5').forEach(h => {
                h.style.fontSize = '13px';
            });
        });
    });
</script>
@section('content')
    <title>Avisos Públicos - CDA </title>
    <section id="more-services" class="more-services" style="margin-top: 50px;">
        <div class="container" data-aos="fade-up">
            <div class="row">
                @foreach ($avisosPublicos as $avisoPublico)
                    <div class="col-md-4 align-items-stretch">
                        <div class="card-post-compact link-saiba-mais" data-bs-target="#avisoModalToggle" data-bs-toggle="modal"
                            data-id="{{ $avisoPublico->id }}">
                            <div class="card">
                                <div class="card-body">
                                    <div class="flex-row" style="display: flex; align-items:center;">
                                        @if ($avisoPublico->photo)
                                            <img src="http://chamados.casasdaagua.com.br/storage/{{ $avisoPublico->photo }}"
                                                style="height: 50px; width: 50px; border-radius: 50%; margin-right: 1em;">
                                        @else
                                            <img src="{{ asset('img/user-img.png') }}" alt="Profile" style="height: 50px; width: 50px; border-radius: 50%; margin-right: 1em;">
                                        @endif
                                        
                                        <div>
                                            @if ($avisoPublico->role)

                                                <span>{{ $avisoPublico->role }}</span>
                                            @else
                                                <span>Colaborador</span>
                                            @endif
                                            <h5 class="m-0">{{ $avisoPublico->name }}</h5>
                                        </div>
                                    </div>
                                    @if ($avisoPublico->images->isNotEmpty())
                                        @foreach ($avisoPublico->images as $index => $image)
                                            @if (pathinfo($image->path, PATHINFO_EXTENSION) === 'pdf')
                                                <span class="file-shown">
                                                    <i class="bi bi-file-pdf-fill"></i>
                                                </span>
                                            @else
                                                <span class="file-shown">
                                                    <i class="bi bi-image-fill"></i>
                                                </span>
                                            @endif
                                            @break
                                        @endforeach
                                    @endif
                                    
                                    <hr>


                                    <div class="description-text mt-2">
                                        <div class="text-line">
                                            <div>
                                                <p class="m-0"><strong>{{ $avisoPublico->name_warning }}</strong><br><br></p>
                                            
                                                {!! $avisoPublico->description !!}
                                            </div>
                                        </div>
                                    
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    
                @endforeach
            </div>

            <a href="/" class="btn-voltar"><i class="bi bi-arrow-left-circle-fill"></i> Voltar</a>
            <div class="pagination justify-content-center mt-4 mb-4">
                {{ $avisosPublicos->links() }}
            </div>
        </div>
    </section>
   
    {{-- Modal Avisos --}}
    <div class="modal fade" id="avisoModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel"
        tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header" style="border: none;">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="container px-5">
                    {{-- 
                    <div class="card-header">
                        <nav class="header-nav ms-auto">
                            <ul class="d-flex align-items-center">
                                <li class="nav-item dropdown pe-3">
                                    <span class="nav-link nav-profile d-flex align-items-center pe-0">

                                        <img src="{{ asset('img/user-img.png') }}" id="semFoto" alt="Profile"
                                            class="rounded-circle" style="display:none;">

                                        <img src="" id="comFoto" alt="Perfil" class="rounded-circle"
                                            style="display:none;">

                                        <span class="d-none d-md-block ps-2" id="name-user-aviso"></span>

                                    </span>
                                </li>
                            </ul>
                        </nav>
                    </div> --}}

                    <div class="card-body">
                        <h5 class="card-title" id="titulo-aviso"></h5>
                        <div class="testimonial-item py-2" id="aviso-texto">
                            <div class="text-container">
                                <div id="descricao-aviso">

                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="flex flex-row justify-content-between my-5">
                            <div class="flex flex-row" style="align-items:center">
                                <a id="anexo-show-aviso" class="btn btn-primary rounded-pill btn-sm me-2"><i
                                        class="bi bi-file-earmark-check"></i> Ver Anexo</a>
                                <a href="" target="_blank" class="btn btn-primary rounded-pill btn-sm me-2"
                                    id="link-show-aviso"><i class="bi bi-link-45deg"></i> Link</a>
                                <img src="{{ asset('img/user-img.png') }}" id="semFoto" alt="Profile"
                                    class="rounded-circle" style="display:none; width: 30px;">
                                <img src="" id="comFoto" alt="Perfil" class="rounded-circle"
                                    style="display:none; width: 30px;">
                                <span class="d-none d-md-block ps-2" id="name-user-aviso"></span>

                            </div>
                            {{-- <div>
                                <a id="editar-aviso" class="btn btn-primary rounded-pill btn-sm" title="Editar"><i
                                        class="bi bi-pencil-fill"></i></a>
                                <a class="btn btn-primary rounded-pill btn-sm" data-bs-toggle="modal"
                                    data-bs-target="#modalexcluirAviso" title="Remover" data-id="" id="excluir-aviso"><i
                                        class="bi bi-trash-fill"></i></a>
                            </div> --}}
                        </div>

                    </div>

                </div>



            </div>
        </div>

    </div>
@endsection