@extends('layouts.main')

@section('content')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.3.122/pdf.min.js"></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            document.querySelectorAll('.text-container').forEach(function(container) {
                const content = container.querySelector('div');
                const link = container.querySelector('.link-more');

                // 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) {
                    content.style.height = maxHeight + 'px';
                    content.style.overflow = 'hidden';
                    link.classList.remove('hidden'); // Mostrar o link "Ver mais..."
                }

                // Adicionar evento de clique ao link "Ver mais..."
                container.querySelectorAll('a,div').forEach( button => {
                        button.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...';
                            }
                        });
                    }
                   
                )
            });
        });

    </script>
    {{-- <script>

        document.addEventListener('DOMContentLoaded', function() {
          var calendarEl = document.getElementById('calendar');
          var calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar:{
                center:'',
                end:''
            },
            initialView: 'dayGridMonth'
          });
          calendar.render();
        });
  
      </script> --}}
    <div class="flex" style="display:flex;justify-content: flex-end;">
        <div class="col-md-6">



            <section class="testimonials" id="testimonials-redes-sociais">
                <div class="container">
                    <div class="section-title" data-aos="fade-up">
                        <img class="d-block w-100" id="banner-bem-vindos" src="{{ asset('img/banner.jpg') }}">
                        <img class="d-none w-100" id="banner-bem-vindos-mobile" src="{{ asset('img/banner-mobile.jpg') }}">
                    </div>
                </div>
            </section>

            <section class="testimonials" id="testimonials-avisos">
                <div class="flex container">
                    <div class="col col-md-12">
                    
                        <div data-aos="fade-up">
                            @if (Auth::check())
                                @if (Auth::user()->level <= 2)
                                    <a href="{{ route('criarAviso') }}" class="btn btn-primary rounded-pill btn-sm mb-4" id="btn-criar-aviso"><i class="bi bi-journal-plus"></i> Novo aviso</a>
                                    <a href="{{ route('acessoAvisosUsuarioLogado') }}" class="btn btn-secondary rounded-pill btn-sm mb-4" id="btn-seus-aviso"><i class="bi bi-stickies-fill"></i> Seus avisos</a>
                                @endif
                            @endif
                            <div class="testimonials-slider-infor " id="postList" data-aos="fade-up" data-aos-delay="100">
                                @foreach ($avisos as $aviso)
                                    <div class="card post card-body">

                                        <div class="post-header">
                                            @if ($aviso->photo)
                                                <img src="http://chamados.casasdaagua.com.br/storage/{{$aviso->photo}}"
                                                class="post-image">
                                            @else
                                                <img src="http://chamados.casasdaagua.com.br/storage/{{$aviso->photo}}"
                                                class="post-image">
                                            @endif
                                            <div class="post-info">
                                                <h3>{{ $aviso->name }} <span>{{ $aviso->role }}</span></h3>
                                                <h4>Publicado
                                                    {{ \Carbon\Carbon::parse($aviso->created_at)->locale('pt_BR')->diffForHumans() }}
                                                </h4>

                                            </div>

                                        </div>


                                        <div class="text-container mb-2">
                                            <div>
                                                {!! $aviso->description !== null && !empty($aviso->description) ? $aviso->description : $aviso->name_warning !!}
                                            </div>
                                            <a class="hidden link-more" 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" >
                                                                <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{{ $image->id }}"
                                                            >
                                                            <img src="{{ url('storage/' . $image->path) }}"
                                                                alt="Não encontrado">
                                                        </a>
                                                    @elseif (pathinfo($image->path, PATHINFO_EXTENSION) === 'pdf')
                                                        <a class="no-class" href="{{ asset('storage/' . $image->path) }}"
                                                            data-fancybox="gallery{{ $image->id }}"
                                                            data-caption="{{ $image->id }}" style="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 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

                            </div>
                            <div class="list-all text-center pb-5" id="all-avisos">
                                <p> <a href="{{ route('acessoAvisosPublicados') }}">Clique aqui</a> para listar os avisos.
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
            </section>
        </div>
        <div class="col-md-2 offset-md-3 ">
            {{-- <div
            class="m-2"
        >
                <div id='calendar'></div>

        </div> --}}

            <div class="card bg-white shadow-sm me-4" data-aos="fade-left">
                <div class="card-head">
                    <img src="{{ asset('img/cdafamilia2.png') }}" style="filter:brightness(.5)" alt="">
                    <div class="box">
                        {{-- <div class="topline">
                            <span>Ago</span>
                        </div>
                        <div class="dateline">
                            <span>28</span>
                        </div> --}}
                        <a href="https://www.instagram.com/cda.familia/" target="_blank" class="instagram-btn"><i class="fa-brands fa-instagram"></i>Acessar</a>
                    </div>
                </div>
                <div class="card-body" style="padding: 60px 20px 10px 20px">
                    <div class="mb-2">
                        <p class="m-0"><strong>Família Casas da Água</strong></p>
                        <span class="text-muted" style="font-size: 11px">@cda.familia</span>
                    </div>

                    <p style="font-size: 12px;">Fique ligado no instagram para mais novidades!</p>
                </div>
            </div>
            <div class="sentinel"></div>
            <div class="card bg-white shadow-sm me-4 important-card" data-aos="fade-left" data-aos-delay="100">
                <div class="card-body importantes">
                    <div class="mb-4">
                        <p class="m-0 title">Avisos importantes</p>
                    </div>
                    @foreach ($importantes as $aviso)
                        <div class="mb-2">
                            <a href="{{ route('acessoAvisosImportantes') }}">
                                <p class="m-0"><strong>{{ $aviso->name_warning }}</strong></p>
                            </a>
                        </div>
                        <hr>
                    @endforeach
                </div>
            </div>

        </div>
    </div>

    {{-- Modal Avisos --}}
    <div class="modal fade" id="avisoModalImportant" aria-hidden="true" aria-labelledby=""
        tabindex="" style="z-index: 9999 !important;">
        <div class="modal-dialog modal-xl 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="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 pt-2" id="aviso-texto">
                        <p class="text-left">
                            <span id="descricao-aviso"></span>
                        </p>
                    </div>
                </div>

                <div class="card-footer">
                    <a class="null-link" href="" target="_blank" id="anexo-show-aviso"><i
                            class="bi bi-file-earmark-check"></i> Ver anexo</a>
                </div>

                <div class="card-footer">
                    <a class="null-link" href="" target="_blank" id="link-show-aviso"><i
                            class="bi bi-link-45deg"></i> Acessar link</a>
                </div>
            </div>
        </div>
    </div>
    <footer id="footer">
        <div class="container d-md-flex py-4">
            <div class="me-md-auto text-center text-md-start">
                <div class="copyright">&copy; Copyright <strong><span>Casas da Água</span></strong>. Todos os direitos
                    reservados</div>
                <div class="credits">Precisa de suporte? <a href="http://chamados.casasdaagua.com.br" target="_blank">Clique aqui</a></div>
            </div>
            <div class="social-links text-center text-md-right pt-3 pt-md-0">
                <a href="https://www.facebook.com/casasdagua/" target="_blank" class="facebook"><i
                        class="bx bxl-facebook"></i></a>
                <a href="https://www.instagram.com/casasdaaguaoficial/" target="_blank" class="instagram"><i
                        class="bx bxl-instagram"></i></a>
                <a href="https://www.linkedin.com/company/casas-da-%C3%A1gua-materiais-de-constru%C3%A7%C3%A3o-e-eletrodom%C3%A9sticos/mycompany/"
                    target="_blank" class="linkedin"><i class="bx bxl-linkedin"></i></a>
            </div>
        </div>
    </footer>
@endsection