@foreach ($avisos as $aviso)
                                <div class="card post card-body">

                                    <div class="post-header">
                                        <img src="http://chamados.casasdaagua.com.br/storage/{{ $aviso->photo }}" class="post-image">
                                        <div class="post-info">
                                            <h3>{{ $aviso->name }} <span>{{ $aviso->role }}</span></h3>
                                            <h4>Criado há {{ \Carbon\Carbon::parse($aviso->created_at)->diffForHumans() }}
                                            </h4>

                                        </div>

                                    </div>


                                    <div class="text-container{{$aviso->id}}">
                                        <p id="text-content{{$aviso->id}}">
                                            {{ $aviso->description !== null && !empty($aviso->description) ? $aviso->description : $aviso->name_warning }}   
                                            
                                        </p><a class="hidden link-more" href="#" id="toggle-link{{$aviso->id}}">Ver mais...</a>
                                    </div>
                                    @if ($aviso->images->isNotEmpty())
                                        @if (count($aviso->images) > 1)
                                            <div class="image-mosaic">
                                                @foreach ($aviso->images as $index => $image)
                                                    @if (pathinfo($image->path, PATHINFO_EXTENSION) !== 'pdf')
                                                        <a href="{{ url('storage/' . $image->path) }}" class="image-item {{ $index >= 3 ? 'hidden' : '' }}" data-fancybox="gallery" data-caption="{{$image->id}}">
                                                            <img src="{{ url('storage/' . $image->path) }}"
                                                                alt="Não encontrado">
                                                            @if ($index == 2 && count($aviso->images) > 3)
                                                                <div class="post-anexo overlay-anexo">
                                                                    <span>+ {{ count($aviso->images) - 3 }}</span>
                                                                </div>
                                                            @endif
                                                        </a>
                                                    @endif
                                                @endforeach

                                            </div>
                                        @else
                                            @foreach ($aviso->images as $image)
                                                @if (pathinfo($image->path, PATHINFO_EXTENSION) !== 'pdf')
                                                    <a href="{{ url('storage/' . $image->path) }}" class="image-item" data-fancybox="gallery" data-caption="{{$image->id}}">
                                                        <img src="{{ url('storage/' . $image->path) }}"
                                                            alt="Não encontrado">
                                                    </a>
                                                @elseif (pathinfo($image->path, PATHINFO_EXTENSION) === 'pdf')
                                                    <a href="{{ asset('storage/' . $image->path) }}" target="_blank" style="width: fit-contain; display:flex;"
                                                        id="{{ 'pdf-preview' . $aviso->id }}"
                                                        data-src="{{ asset('storage/' . $image->path) }}">
                                                        <canvas class="image-pdf"
                                                            id="{{ 'pdf-canvas-1' . $aviso->id }}"></canvas>
                                                        <canvas class="image-pdf"
                                                            id="{{ 'pdf-canvas-2' . $aviso->id }}"></canvas>
                                                        <div class="overlay" id="open{{ $aviso->id }}">
                                                            <span id="page-count-{{ $aviso->id }}">+ 0</span>
                                                        </div>

                                                    </a>
                                                    <script>
                                                        document.addEventListener('DOMContentLoaded', function() {
                                                            var id = {{ $aviso->id }};

                                                            const content = document.getElementById('text-content'+id);
                                                            const link = document.getElementById('toggle-link'+id);

                                                            // Armazenar a altura máxima permitida para 5 linhas
                                                            const maxHeight = parseInt(window.getComputedStyle(content).lineHeight) * 4;

                                                            // Verificar se o conteúdo excede a altura máxima
                                                            if (content.scrollHeight > maxHeight) {
                                                                console.log('passou')
                                                                content.style.height = maxHeight + 'px';
                                                                content.style.overflow = 'hidden';
                                                                link.classList.remove('hidden'); // Correção feita aqui
                                                            } 

                                                            // Adicionar evento de clique ao link "Ver mais..."
                                                            link.addEventListener('click', function(event) {
                                                                event.preventDefault();
                                                                if (link.textContent === 'Ver mais...') {
                                                                    content.style.height = 'auto';
                                                                    link.textContent = 'Ver menos...';
                                                                } else {
                                                                    content.style.height = maxHeight + 'px';
                                                                    link.textContent = 'Ver mais...';
                                                                }
                                                            });
                                                            const pdfPath = document.getElementById("pdf-preview" + id).dataset.src;

                                                            const canvas1 = document.getElementById("pdf-canvas-1" + id);
                                                            const canvas2 = document.getElementById("pdf-canvas-2" + id);
                                                            const pageCountSpan = document.getElementById("page-count-" + id);

                                                            function renderPage(pdf, pageNum, canvas) {
                                                                return pdf.getPage(pageNum).then(page => {
                                                                    const scale = (canvas.parentElement.offsetWidth / 2) / page.getViewport({
                                                                        scale: 1.25
                                                                    }).width;
                                                                    const viewport = page.getViewport({
                                                                        scale: scale
                                                                    });

                                                                    canvas.height = viewport.height;
                                                                    canvas.width = viewport.width;

                                                                    const renderContext = {
                                                                        canvasContext: canvas.getContext('2d'),
                                                                        viewport: viewport
                                                                    };
                                                                    return page.render(renderContext).promise;
                                                                });
                                                            }

                                                            function renderPDF() {
                                                                pdfjsLib.getDocument(pdfPath).promise.then(pdf => {
                                                                    pageCountSpan.textContent = `+ ${pdf.numPages - 2}`;

                                                                    // Renderiza a primeira página e depois a segunda
                                                                    renderPage(pdf, 1, canvas1).then(() => {
                                                                        return renderPage(pdf, 2, canvas2)
                                                                    });
                                                                });
                                                            }

                                                            renderPDF();

                                                            // Redimensiona o canvas quando a janela é redimensionada
                                                            window.addEventListener('resize', function() {
                                                                renderPDF();
                                                            });
                                                        });
                                                    </script>
                                                @endif
                                            @endforeach
                                        @endif
                                    @endif
                                    <span class="link-extra">{{$aviso->link}}</span>

                                </div>
                            @endforeach