@extends('public.layout')

@php
    if (!function_exists('calculateReadingTime')) {
        function calculateReadingTime($body)
        {
            if (!$body) {
                return 2;
            }
            $text = strip_tags($body);
            $words = str_word_count($text);
            $minutes = ceil($words / 200);
            return max(1, $minutes);
        }
    }

    // Garantir que seoData existe e tem valores padrão
    if (!isset($seoData)) {
        $seoData = [];
    }

    // Adicionar breadcrumbs para SEO
    $seoData['breadcrumbs'] = [['name' => 'Home', 'url' => url('/')]];

    if (isset($section)) {
        $seoData['breadcrumbs'][] = [
            'name' => $section->name,
            'url' => url()->current(),
        ];
    }

    // Garantir tipo de conteúdo
    $seoData['type'] = 'website';
@endphp

@section('seo')
    @php
        // Passar dados de SEO para o layout
        // O layout já acessa $seoData diretamente
    @endphp
@endsection

@section('content')
    <div class="jl_block_content">
        <div class="jlc-container">
            <div class="jlc-row">
                <div class="jlc-col-md-8 jl_main_achv jl_hide_line jl_achv_tpl_list">
                    <div class="jl_breadcrumbs"> <span class="jl_item_bread">
                            <a href="/">
                                Home </a>
                        </span>
                        <i class="jli-right-chevron"></i>
                        <span class="jl_item_bread">
                            <a href="/{{ $section->slug }}">
                                {{ $section->name }} </a>
                        </span>
                    </div>
                    <div class="jl_ache_head">
                        <div class="jl_pc_sec_title">
                            <h1 class="jl_pc_sec_h">{{ $section->name }}</h1>
                            @if ($section->description)
                                <div class="post_subtitle_text">
                                    <p>{{ $section->description }}</p>
                                </div>
                            @endif
                        </div>
                        <span class="jl_auth_numw">
                            <span class="jl_auth_num h1">{{ $articles->total() }}</span>
                            <span class="jl_auth_txt">Notícias</span>
                        </span>
                    </div>
                    <div class="jl_clear_at block-section jl-main-block jl_wrapper_cat jl_en_fr jl_frli jl_fgs"
                        data-section-slug="{{ $section->slug }}"
                        data-current-page="{{ $articles->currentPage() }}"
                        data-last-page="{{ $articles->lastPage() }}">
                        <div class="jl_clear_at">
                            <div class="jl_main_list_cw jl_wrap_eb jl_clear_at jl_lm_list">
                                <div class="jl_fli_wrap jl-roww jl_contain jl-col-row" id="articles-container">
                                    @include('components.article-list-items', ['articles' => $articles->items()])
                                </div>
                                    <div class="jl-loadmore-wrapper" style="display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 30px; margin-bottom: 30px;">
                                        <button type="button" class="jl-load-link jl-loadmore-btn" 
                                            data-section-slug="{{ $section->slug }}"
                                            data-current-page="{{ $articles->currentPage() }}">
                                            <span class="jl-load-text">Ver mais</span>
                                            <span class="jl-load-animation" style="display: none;">
                                                <span class="jl-loading-spinner"></span>
                                                Carregando...
                                            </span>
                                        </button>
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="jlc-col-md-4 jl_smmain_side">
                    <div class="jl_sidebar_w">
                        <div id="bopea_widget_add_layouts-1" class="widget jl_cus_layouts_widget">
                            <div class="widget_jl_wrapper jl-cuslayouts-wrapper">
                                <div class="jl_cuslayouts_inner">
                                    <div data-elementor-type="wp-post" data-elementor-id="12383"
                                        class="elementor elementor-12383">
                                        <div class="elementor-element elementor-element-8cf430a e-flex e-con-boxed e-con e-parent e-lazyloaded"
                                            data-id="8cf430a" data-element_type="container">
                                            <div class="e-con-inner">
                                                <div class="elementor-element elementor-element-2cf9fe78 elementor-widget elementor-widget-bopea-social-list"
                                                    data-id="2cf9fe78" data-element_type="widget"
                                                    data-widget_type="bopea-social-list.default">
                                                    <div class="elementor-widget-container">

                                                        <ul class="jl_wr_soci jl_sh_cter jl_sh1">
                                                            <li class="jl_facebook_url"
                                                                style="--jl-social-color:#4080FF;">
                                                                <a aria-label="facebook"
                                                                    href="https://jellywp.com/wp/bopea4/category/inspiration/#"
                                                                    target="_blank" rel="nofollow">
                                                                    <span class="jl_sh_i"><i
                                                                            class="jli-facebook"></i></span>
                                                                    <span class="jl_sh_t">Facebook</span>
                                                                    <span class="jl_sh_w">
                                                                        <span class="jl_sh_c">23k</span>
                                                                        <span class="jl_sh_l">Likes</span>
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="jl_twitter_url jl_dk_sc"
                                                                style="--jl-social-color:var(--jl-social-skin, #000);">
                                                                <a aria-label="X"
                                                                    href="https://jellywp.com/wp/bopea4/category/inspiration/#"
                                                                    target="_blank" rel="nofollow">
                                                                    <span class="jl_sh_i"><i class="jli-x"></i></span>
                                                                    <span class="jl_sh_t"></span>
                                                                    <span class="jl_sh_w">
                                                                        <span class="jl_sh_c">93k</span>
                                                                        <span class="jl_sh_l">Follows</span>
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="jl_instagram_url"
                                                                style="--jl-social-color:#5e368b;">
                                                                <a aria-label="instagram"
                                                                    href="https://jellywp.com/wp/bopea4/category/inspiration/#"
                                                                    target="_blank" rel="nofollow">
                                                                    <span class="jl_sh_i"><i
                                                                            class="jli-instagram"></i></span>
                                                                    <span class="jl_sh_t">Instagram</span>
                                                                    <span class="jl_sh_w">
                                                                        <span class="jl_sh_c">32k</span>
                                                                        <span class="jl_sh_l">Follows</span>
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="jl_pinterest_url"
                                                                style="--jl-social-color:#bd081c;">
                                                                <a aria-label="pinterest"
                                                                    href="https://jellywp.com/wp/bopea4/category/inspiration/#"
                                                                    target="_blank" rel="nofollow">
                                                                    <span class="jl_sh_i"><i
                                                                            class="jli-pinterest"></i></span>
                                                                    <span class="jl_sh_t">Pinterest</span>
                                                                    <span class="jl_sh_w">
                                                                        <span class="jl_sh_c">42k</span>
                                                                        <span class="jl_sh_l">Pin</span>
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="jl_youtube_url" style="--jl-social-color:#ff0000;">
                                                                <a aria-label="YouTube"
                                                                    href="https://jellywp.com/wp/bopea4/category/inspiration/#"
                                                                    target="_blank" rel="nofollow">
                                                                    <span class="jl_sh_i"><i
                                                                            class="jli-youtube"></i></span>
                                                                    <span class="jl_sh_t">YouTube</span>
                                                                    <span class="jl_sh_w">
                                                                        <span class="jl_sh_c">100k</span>
                                                                        <span class="jl_sh_l">Subscribers</span>
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="jl_vimeo_url" style="--jl-social-color:#1ab7ea;">
                                                                <a aria-label="vimeo"
                                                                    href="https://jellywp.com/wp/bopea4/category/inspiration/#"
                                                                    target="_blank" rel="nofollow">
                                                                    <span class="jl_sh_i"><i class="jli-vimeo"></i></span>
                                                                    <span class="jl_sh_t">Vimeo</span>
                                                                    <span class="jl_sh_w">
                                                                        <span class="jl_sh_c">89k</span>
                                                                        <span class="jl_sh_l">Followers</span>
                                                                    </span>
                                                                </a>
                                                            </li>

















                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="elementor-element elementor-element-a55c0ae elementor-widget elementor-widget-bopea-section-title"
                                                    data-id="a55c0ae" data-element_type="widget"
                                                    data-widget_type="bopea-section-title.default">
                                                    <div class="elementor-widget-container">
                                                        <div class="jlcus_sec_title jl_sec_style8 jl_secf_title  ">
                                                            <div class="jlcus_sect_inner">
                                                                <h2 class="jl-heading-text">
                                                                    <span class="jl_ttw">Latest Posts</span>
                                                                </h2>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="elementor-element elementor-element-2f340292 elementor-widget elementor-widget-bopea-main-ov-sm-li"
                                                    data-id="2f340292" data-element_type="widget"
                                                    data-widget_type="bopea-main-ov-sm-li.default">
                                                    <div class="elementor-widget-container">
                                                        <div id="blockid_2f340292"
                                                            class="block-section jl-main-block jl_hide_line"
                                                            data-blockid="blockid_2f340292"
                                                            data-section_style="jl_main_ov_sm_li" data-post_type="post"
                                                            data-post_type_tax="none" data-page_max="13"
                                                            data-page_current="1" data-author="none"
                                                            data-order="date_post" data-posts_per_page="4"
                                                            data-offset="31" data-tabs_link="none">
                                                            <div class="jl_mb_wrap_f jl_wrap_eb jl_clear_at">
                                                                <div class="jl-roww jl_contain jl_contain_mix jl-col-row">
                                                                    @include('components.latest-posts')
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .jl-loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-top-color: #007bff;
            animation: spin 0.8s linear infinite;
            vertical-align: middle;
            margin-right: 8px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .jl-loadmore-wrapper {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            width: 100% !important;
            position: relative !important;
            z-index: 10 !important;
            margin-top: 30px !important;
            margin-bottom: 30px !important;
            clear: both !important;
        }
        
        .jl-loadmore-btn {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            padding: 12px 30px;
            background-color: #007bff !important;
            color: #fff !important;
            border: none !important;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: background-color 0.3s ease;
            position: relative;
            z-index: 11;
        }
        
        .jl-loadmore-btn:hover {
            background-color: #0056b3;
        }
        
        .jl-loadmore-btn:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
            opacity: 0.7;
        }
        
        .jl-load-animation {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loadMoreBtn = document.querySelector('.jl-load-link.jl-loadmore-btn');
            if (!loadMoreBtn) {
                console.log('Botão de carregar mais não encontrado');
                return;
            }

            let isLoading = false;

            loadMoreBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                if (isLoading) {
                    console.log('Já está carregando...');
                    return;
                }

                const sectionSlug = this.getAttribute('data-section-slug');
                let currentPage = parseInt(this.getAttribute('data-current-page')) || 1;
                const blockSection = this.closest('.block-section');
                const lastPage = blockSection ? parseInt(blockSection.getAttribute('data-last-page')) || 1 : 999;
                
                // Calcular próxima página
                let nextPage = currentPage + 1;
                
                // Se chegou ao fim, recomeçar da página 1
                if (nextPage > lastPage) {
                    console.log('Não há mais páginas - recomeçando da página 1');
                    nextPage = 1;
                    currentPage = 0;
                }
                
                console.log('Carregando página:', nextPage, 'para seção:', sectionSlug);

                isLoading = true;
                const loadText = this.querySelector('.jl-load-text');
                const loadAnimation = this.querySelector('.jl-load-animation');
                const button = this;
                
                // Mostrar loading
                if (loadText) loadText.style.display = 'none';
                if (loadAnimation) loadAnimation.style.display = 'inline-flex';
                button.disabled = true;
                button.style.cursor = 'wait';

                const url = `/api/sections/${sectionSlug}/load-more?page=${nextPage}`;
                console.log('Fazendo requisição para:', url);

                fetch(url, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json'
                    },
                    credentials: 'same-origin'
                })
                .then(response => {
                    console.log('Resposta recebida:', response.status);
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('Dados recebidos:', data);
                    
                    if (!data) {
                        throw new Error('Resposta vazia da API');
                    }

                    // Adicionar HTML ao container
                    if (data.html && data.html.trim() !== '') {
                        const container = document.getElementById('articles-container');
                        if (container) {
                            // Contar quantos artigos existem antes de adicionar
                            const articlesBefore = container.querySelectorAll('.jl_clist_layout').length;
                            
                            container.insertAdjacentHTML('beforeend', data.html);
                            console.log('Artigos adicionados ao container');
                            
                            // Encontrar o primeiro artigo novo (o primeiro após os que já existiam)
                            const allArticles = container.querySelectorAll('.jl_clist_layout');
                            const firstNewArticle = allArticles[articlesBefore];
                            
                            // Mover o botão para depois dos novos artigos
                            const wrapper = button.closest('.jl-loadmore-wrapper');
                            if (wrapper && container) {
                                // Remover o botão da posição atual
                                wrapper.remove();
                                
                                // Encontrar o elemento pai correto para inserir o botão
                                const parentContainer = container.parentElement;
                                if (parentContainer) {
                                    parentContainer.insertAdjacentElement('beforeend', wrapper);
                                } else {
                                    container.insertAdjacentElement('afterend', wrapper);
                                }
                                
                                // Garantir que o botão mantenha os estilos corretos
                                button.style.backgroundColor = '#007bff';
                                button.style.color = '#fff';
                                button.style.border = 'none';
                                button.style.borderRadius = '5px';
                                button.style.padding = '12px 30px';
                                button.style.fontSize = '16px';
                                button.style.fontWeight = '500';
                                button.style.display = 'inline-flex';
                                button.style.position = 'relative';
                                button.style.zIndex = '11';
                                wrapper.style.display = 'flex';
                                wrapper.style.justifyContent = 'center';
                                wrapper.style.alignItems = 'center';
                                wrapper.style.width = '100%';
                                wrapper.style.position = 'relative';
                                wrapper.style.zIndex = '10';
                                wrapper.style.marginTop = '30px';
                                wrapper.style.marginBottom = '30px';
                                wrapper.style.clear = 'both';
                                
                                console.log('Botão movido para depois dos novos artigos');
                            }
                            
                            // Scroll até o primeiro artigo novo
                            if (firstNewArticle) {
                                setTimeout(() => {
                                    firstNewArticle.scrollIntoView({ behavior: 'smooth', block: 'start' });
                                    console.log('Scroll até o primeiro artigo novo');
                                }, 100);
                            }
                        } else {
                            console.error('Container de artigos não encontrado');
                        }
                    } else {
                        console.warn('HTML vazio na resposta');
                    }

                    // Atualizar última página se necessário
                    if (blockSection && data.last_page) {
                        blockSection.setAttribute('data-last-page', data.last_page);
                    }
                    
                    // Atualizar página atual
                    const newCurrentPage = data.current_page || nextPage;
                    let nextCurrentPage = newCurrentPage;
                    
                    // Verificar se há mais páginas
                    const hasMore = data.has_more === true || (newCurrentPage < (data.last_page || lastPage));
                    console.log('Tem mais páginas?', hasMore, 'Página atual:', newCurrentPage, 'Última página:', data.last_page || lastPage);
                    
                    // Se não há mais páginas, resetar para recomeçar da página 1 na próxima vez
                    if (!hasMore) {
                        console.log('Não há mais páginas - próximo clique recomeçará da página 1');
                        nextCurrentPage = 0; // Resetar para 0, então nextPage será 1
                    }
                    
                    // Atualizar página atual no botão
                    button.setAttribute('data-current-page', nextCurrentPage);
                    if (blockSection) {
                        blockSection.setAttribute('data-current-page', nextCurrentPage);
                    }
                    
                    // Sempre restaurar botão para próximo carregamento (botão sempre visível e funcional)
                    if (loadText) loadText.style.display = 'inline';
                    if (loadAnimation) loadAnimation.style.display = 'none';
                    button.disabled = false;
                    button.style.cursor = 'pointer';
                    
                    // Garantir que o wrapper do botão está visível (pegar novamente caso tenha sido movido)
                    const wrapper = button.closest('.jl-loadmore-wrapper');
                    if (wrapper) {
                        wrapper.style.display = 'flex';
                        wrapper.style.visibility = 'visible';
                        wrapper.style.opacity = '1';
                        wrapper.style.justifyContent = 'center';
                        wrapper.style.alignItems = 'center';
                        wrapper.style.width = '100%';
                        wrapper.style.position = 'relative';
                        wrapper.style.zIndex = '10';
                        wrapper.style.marginTop = '30px';
                        wrapper.style.marginBottom = '30px';
                        wrapper.style.clear = 'both';
                        
                        // Garantir que o botão tenha a cor azul e esteja visível
                        button.style.backgroundColor = '#007bff';
                        button.style.color = '#fff';
                        button.style.border = 'none';
                        button.style.borderRadius = '5px';
                        button.style.padding = '12px 30px';
                        button.style.fontSize = '16px';
                        button.style.fontWeight = '500';
                        button.style.cursor = 'pointer';
                        button.style.display = 'inline-flex';
                        button.style.position = 'relative';
                        button.style.zIndex = '11';
                        button.style.visibility = 'visible';
                        button.style.opacity = '1';
                    }
                    
                    console.log('Botão restaurado - sempre disponível para próximo carregamento. Próxima página será:', nextCurrentPage + 1);
                })
                .catch(error => {
                    console.error('Erro ao carregar mais artigos:', error);
                    alert('Erro ao carregar mais artigos. Por favor, tente novamente.');
                    
                    // Restaurar botão em caso de erro
                    if (loadText) loadText.style.display = 'inline';
                    if (loadAnimation) loadAnimation.style.display = 'none';
                    button.disabled = false;
                    button.style.cursor = 'pointer';
                })
                .finally(() => {
                    isLoading = false;
                    console.log('Carregamento finalizado');
                });
            });
        });
    </script>
@endsection