<?php
    include(__DIR__ . '/../app/prensa.php');
    function fetchPosts($url) {
        return decode_api($url);
    }
    $catList = getList("categories");    
    $userList = getListC("users");
    $noticias = [];
    $itemsPerPage = 8; 
    $totalPages ="1";
    $currentPage = isset($_POST['page']) ? max(1, intval($_POST['page'])) : 1;
    // if (isset($_POST['page'])) {
    //     $currentPage = max(1, intval($_POST['page'])); 
    // }
    $params = [
        'per_page' => $itemsPerPage,
        'page' => $currentPage,
    ];
    $category =isset($_POST['category']) ? $_POST['category'] : null;
    if ($category !== null) {
        $categoryId = find_wp_category_id($category, $catList);
        if ($categoryId !== null) {
            $params['categories'] = $categoryId;
        }
    }
    $author = isset($_POST['author']) ? $_POST['author'] : null;
    if ($author !== null) {
        $params['author'] = $author;
    }
    $url = wp_posts_url($params);
    $noticias = fetchPosts($url);
    $totalPages = wp_api_last_total_pages(1);
?>
<?php
$maxPagesToShow = 3; 
$midpoint = ceil($maxPagesToShow / 2);
$startPage = max($currentPage - $midpoint, 1);
$endPage = min($startPage + $maxPagesToShow - 1, $totalPages);
if ($endPage - $startPage < $maxPagesToShow - 1) {
    $startPage = max($endPage - $maxPagesToShow + 1, 1);
}
$endPage = min($endPage, $totalPages);

function home_news_page_url($page, $category = null) {
    $query = ['page' => (int) $page];
    if ($category !== null && $category !== '') {
        $query['category'] = $category;
    }

    return '/?' . http_build_query($query) . '#news';
}
?>
<div class="section  flv_section flv_sections_18" id="news">
    <div class="section_wrapper clearfix">        
        <div class="column one column_fancy_heading">
            <div class="fancy_heading fancy_heading_icon">
                <div class="animate" data-anim-type="zoomInLeftLarge">
                    <h3 class="title">NOTICIAS DEL MUNICIPIO</h3>
                    <div class="inside">
                        <span class="big">Las noticias más relevantes de nuestro municipio.</span>
                    </div>
                </div>
            </div>
            <div class="categories">
                <button class="category-btn active" data-category="" data-page="1">Todas</button>
                <button class="category-btn" data-category="273" data-page="1">Destacado</button>
                <button class="category-btn" data-category="4" data-page="1">Obras</button>
                <button class="category-btn" data-category="26" data-page="1">Leyes Municipales</button>
                <button class="category-btn" data-category="8" data-page="1">Salud</button>
            </div>  
        </div>
        <div class="column one">          
            <div id="loading-overlay">
                <div class="spinner"></div>
            </div>
            <div class="posts_group lm_wrapper masonry isotope">
                <div class="posts-grid" id="postsGrid">
                    <?php foreach($noticias as $post): ?>
                        <?php 
                            $content = $post['content']['rendered'];
                            $firstImageURL = $firstDocURL = $firstVideoURL = null;
                            
                            $firstImageURL = wp_post_featured_image_url($post, false);
                            if (preg_match('/<a[^>]+href="([^"]+\.pdf)"/i', $content, $matches)) {
                                $pdfUrl = $matches[1];
                                $firstDocURL = wp_secure_media_url($matches[1]); 
                            }
                            if (preg_match('/<video[^>]+src="([^"]+\.(?:mp4|webm|ogv))"/i', $content, $matches)) {
                                $firstVideoURL = wp_secure_media_url($matches[1]);
                            }
                            $author = [];
                            foreach ($userList as $authorData) {
                                if ($authorData['id'] == $post['author']) {
                                    $author = $authorData;
                                    break;
                                }
                            }
                            $categories = [];
                            foreach ($catList as $cat) {
                                if(!empty($post['categories'])){
                                    foreach ($post['categories'] as $catPost) {
                                        if ($cat['id'] == $catPost) {
                                            $categories[] = $cat;
                                            if($cat['id']==26 && empty($firstImageURL)){
                                                $firstImageURL="/assets/images/content/news/leyes.jpg";
                                            }
                                        }
                                    } 
                                }
                            }
                        ?> 
                        <div class="post-item">
                            <div class="date_label">
                                <?php echo date("d-m-Y", strtotime($post['date_gmt']));?>
                            </div>                            
                            <div class="image_frame post-photo-wrapper">
                                <div class="image_wrapper" style="height: 180px !important; width: 100% !important; overflow: hidden;">
                                    <?php if(!empty($firstImageURL)): ?>
                                        <a href="<?php echo $post['link'];?>">
                                            <img src="<?php echo htmlspecialchars($firstImageURL); ?>" class="wp-post-image" loading="lazy" decoding="async"/>                                                
                                        </a>
                                    <?php elseif(!empty($firstDocURL)): ?>
                                        <object data="<?= $firstDocURL ?>" style="width:100%;height:100%" aria-label="Embedded document">
                                            <p>Documento no disponible. <a href="<?= $firstDocURL ?>">Descargar</a></p>
                                        </object>
                                    <?php elseif(!empty($firstVideoURL)): ?>
                                        <video controls style="width:100%;height:100%">
                                            <source src="<?= $firstVideoURL ?>" type="video/mp4">
                                            Tu navegador no soporta videos HTML5.
                                        </video>
                                    <?php else: ?>
                                        <div style="background:#f5f5f5;width:100%;height:100%;display:flex;align-items:center;justify-content:center;">
                                            <i class="icon-doc-text" style="font-size:48px;color:#ccc;"></i>
                                        </div>
                                    <?php endif; ?>                                    
                                    <div class="image_links">  
                                        <a href="<?php echo $post['link']; ?>" class="link">
                                            <i class="icon-doc-text"></i> VER PUBLICACIÓN
                                        </a>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="post-desc-wrapper">
                                <div class="post-desc">
                                    <div class="post-meta">
                                        <div class="author-date">
                                            <span class="author"><span>Publicado por </span>
                                                <i class="icon-user"></i> <a href="#"><?= $author['name'] ?? 'Desconocido' ?></a>
                                            </span>
                                            <span class="date"><span> Fecha </span><i class="icon-clock"></i>
                                                <?php echo date("d-m-Y", strtotime($post['date_gmt']));?>
                                            </span>
                                        </div>
                                        <div class="category">
                                            <span class="cat-btn">Categoría <i class="icon-down-dir"></i></span>
                                            <div class="cat-wrapper">
                                                <ul class="post-categories">
                                                    <?php foreach($categories as $cat): ?>
                                                    <li>
                                                        <a href="<?= $cat['link']?>" rel="category tag"><?= $cat['name']?></a>
                                                    </li>
                                                    <?php endforeach; ?>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="post-title">
                                        <h3 class="entry-title">
                                            <a href="<?= $post['link'] ?>">
                                            <?php 
                                                $title = $post['title']['rendered'];
                                                echo strlen($title) > 45 ? substr($title, 0, 45) . '...' : $title;
                                            ?>
                                            </a>
                                        </h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>                
            </div>
            <div class="pager pager_wrapper">
                <?php if ($currentPage > 1): ?>
                    <a class="prev_page news-page-link" href="<?= home_news_page_url($currentPage - 1, $category) ?>" data-page="<?= ($currentPage - 1) ?>">
                        <i class="icon-left-open"></i> Atras
                    </a>
                <?php endif; ?>                        
                <div class="pages">
                    <?php if ($startPage > 1) {
                            echo '<a class="news-page-link" href="' . home_news_page_url(1, $category) . '" data-page="1">1</a>';
                            if ($startPage > 2) {
                                echo '<span class="ellipsis">...</span>';
                            }
                        }
                        for ($i = $startPage; $i <= $endPage; $i++): ?>
                            <a href="<?= home_news_page_url($i, $category) ?>" data-page="<?= $i ?>" class="news-page-link <?= $currentPage == $i ? 'active' : '' ?>">
                                <?= $i ?>
                            </a>
                        <?php endfor;
                        if ($endPage < $totalPages) {
                            if ($endPage < $totalPages - 1) {
                                echo '<span class="ellipsis">...</span>';
                            }
                            echo '<a class="news-page-link" href="' . home_news_page_url($totalPages, $category) . '" data-page="' . $totalPages . '">' . $totalPages . '</a>';
                    } ?>
                </div>
                <?php if ($currentPage < $totalPages): ?>
                    <a class="next_page news-page-link" href="<?= home_news_page_url($currentPage + 1, $category) ?>" data-page="<?= ($currentPage + 1) ?>">
                        Siguiente <i class="icon-right-open"></i>
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>
<style>
    .posts_group {
        margin-top:0px;
        padding: 0 0 10px 0;
    }
    .posts-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }    
    .post-item {
        width: 100% !important;
        margin: 5 !important;
        height: 100%;
        display: flex;
        flex-direction: column;

        position: relative;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }
    
    .post-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    /* .image_frame, .post-photo-wrapper, .image_wrapper {
        height: 200px !important;
        width: 100% !important;
        overflow: hidden;
    }     */
    .image_frame img, 
    .image_frame object,
    .jp-jplayer {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }    
    .post-desc-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-top: 0px;
    } 
    
    .post-title h3, .post-title h2, .post-title h4 {
        font-size: 16px !important;
        line-height: 1.3;
        margin: 0px 0;
    }
    
    .post-meta {
        font-size: 12px;
    }
</style>

<style>   
    
    .image_wrapper {
        width: 100%;
        overflow: hidden;
        position: relative;
    }
    
    .image_wrapper img,
    .image_wrapper object,
    .image_wrapper video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .post-item:hover .image_wrapper img {
        transform: scale(1.05);
    }
    

    .post-item:hover .image_links {
        transform: translateY(0);
    }
    
    .ellipsis {
        padding: 8px 5px;
    }

    #news .categories {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin: 0 0 14px;
    }

    #news .pager_wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    #news .pager_wrapper .pages {
        display: flex !important;
        flex: 0 0 auto;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    #news .pager_wrapper a,
    #news .pager_wrapper .pages a,
    #news .pager_wrapper .pages span {
        flex: 0 0 auto;
        white-space: nowrap !important;
        box-sizing: border-box;
    }
    
    /* Responsive Grid */
    @media (max-width: 1200px) {
        .posts-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    
    @media (max-width: 992px) {
        .posts-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    /* Mobile Horizontal Scroll Layout */
    @media (max-width: 767px) {
        #news.flv_section {
            padding-top: 18px !important;
            padding-bottom: 10px !important;
        }

        #news .section_wrapper {
            padding-bottom: 0 !important;
        }

        #news .column {
            margin-bottom: 0 !important;
        }

        #news .column_fancy_heading {
            margin-bottom: 8px !important;
        }

        #news .fancy_heading {
            margin-bottom: 10px;
        }

        #news .posts_group {
            padding-bottom: 2px;
        }

        .posts-grid {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            grid-template-columns: unset;
        }
        
        .posts-grid::-webkit-scrollbar {
            display: none;
        }
        
        .post-item {
            flex: 0 0 85%;
            scroll-snap-align: start;
            margin: 0 5px;
            height: auto;
            min-width: 0;
        }
        
        .image_wrapper {
            height: 200px !important;
        }
        
        #news .categories {
            display: flex !important;
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            justify-content: flex-start;
            padding: 10px 15px;
            margin: 0 -15px 15px;
            -webkit-overflow-scrolling: touch;
        }

        #news .categories::-webkit-scrollbar,
        #news .pager_wrapper::-webkit-scrollbar {
            display: none;
        }
        
        .category-btn {
            flex: 0 0 auto;
            white-space: nowrap;
        }

        #news .pager_wrapper {
            display: flex !important;
            flex-wrap: nowrap !important;
            justify-content: center;
            gap: 8px;
            margin: 10px auto 0 !important;
            padding: 0 12px !important;
        }

        #news .pager_wrapper .pages {
            flex-wrap: nowrap !important;
            gap: 4px;
            margin: 0 !important;
            padding: 4px !important;
        }

        #news .pager_wrapper > a,
        #news .pager_wrapper .pages a,
        #news .pager_wrapper .pages span {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            width: auto !important;
            min-width: 30px;
            height: 32px;
            line-height: 32px;
            padding: 0 7px;
            margin: 0 !important;
        }
        
    }
    
    /* Loading Spinner */
    #loading-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.8);
        z-index: 9999;
        justify-content: center;
        align-items: center;
    }
    
    .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

<script>
    $(document).ready(function() {
        function initHorizontalScroll() {
            if ($(window).width() < 768) {
                $('#postsGrid').addClass('mobile-scroll');
            } else {
                $('#postsGrid').removeClass('mobile-scroll');
            }
        }
        initHorizontalScroll();
        $(window).resize(initHorizontalScroll);
        const urlParams = new URLSearchParams(window.location.search);
        const currentCategory = urlParams.get('category') || '';
        const currentPage = urlParams.get('page') || 1;
        
        $('.category-btn').removeClass('active');
        $(`.category-btn[data-category="${currentCategory}"]`).addClass('active');
        
        $('.category-btn').on('click', function() {
            const category = $(this).data('category');
            const page = $(this).data('page');
            
            $('#loading-overlay').show();
            
            $('.category-btn').removeClass('active');
            $(this).addClass('active');
            
            const newUrl = updateQueryStringParameter(window.location.href, 'category', category);
            const finalUrl = updateQueryStringParameter(newUrl, 'page', page);
            
            history.pushState(null, null, finalUrl);
            
            $.ajax({
                url: 'sections/section-news.php',
                type: 'POST',
                data: {
                    page: page,
                    category: category
                },
                success: function(response) {
                    const $response = $(response);
                    $('#postsGrid').html($response.find('#postsGrid').html());
                    $('.pager_wrapper').html($response.find('.pager_wrapper').html());
                    $('#loading-overlay').hide();
                    initHorizontalScroll();
                }
            });
        });

        $(document).off('click.newsPager').on('click.newsPager', '#news .news-page-link', function(event) {
            event.preventDefault();

            const page = $(this).data('page') || 1;
            const category = $('.category-btn.active').data('category') || '';
            loadNewsPage(page, category);
        });

        function loadNewsPage(page, category) {
            $('#loading-overlay').show();

            let newUrl = updateQueryStringParameter(window.location.href, 'page', page);
            newUrl = updateQueryStringParameter(newUrl, 'category', category);
            history.pushState(null, null, `${newUrl.split('#')[0]}#news`);

            $.ajax({
                url: 'sections/section-news.php',
                type: 'POST',
                data: {
                    page: page,
                    category: category
                },
                success: function(response) {
                    const $response = $(response);
                    $('#postsGrid').html($response.find('#postsGrid').html());
                    $('.pager_wrapper').html($response.find('.pager_wrapper').html());
                    $('#loading-overlay').hide();
                    initHorizontalScroll();
                }
            });
        }
        
        function updateQueryStringParameter(uri, key, value) {
            const re = new RegExp(`([?&])${key}=.*?(&|$)`, "i");
            const separator = uri.indexOf('?') !== -1 ? "&" : "?";
            if (uri.match(re)) {
                return uri.replace(re, `$1${key}=${value}$2`);
            }
            return `${uri}${separator}${key}=${value}`;
        }
        
        if ('ontouchstart' in window) {
            $('.post-item').on('touchstart', function() {
                $(this).addClass('touching');
            }).on('touchend', function() {
                $(this).removeClass('touching');
            });
        }
    });
</script>