<?php
    include(__DIR__ . '/../app/prensa.php');

        $url = wp_posts_url(['per_page' => 2]);
        $catList = getList("categories");
        $userList =getList("users");
        if (!empty($category)) {
            $url = wp_posts_url(['per_page' => 2, 'categories' => $category]);
           }
        if(!empty($author)){
            $url = wp_posts_url(['per_page' => 2, 'author' => $author]);
        }
        $noticias = decode_api($url);
    ?>
        <style>
            @media (max-width: 576px) {
                #Footer .widgets_wrapper {
                    padding: 18px 0 8px;
                }
                #Footer .widgets_wrapper .container {
                    width: calc(100% - 36px);
                    max-width: 430px;
                }
                #Footer .widgets_wrapper .column {
                    width: 100%;
                    margin: 0;
                }
                #Footer .widgets_wrapper .column:nth-child(n+2) {
                    display: none;
                }
                #Footer .widgets_wrapper .widget {
                    margin-bottom: 0;
                    padding-bottom: 0;
                }
                #Footer .textwidget img {
                    width: 132px;
                    height: auto;
                    margin-bottom: 8px;
                }
                #Footer h4 {
                    font-size: 18px;
                    line-height: 1.2;
                    margin: 0 0 8px;
                }
                #Footer p {
                    font-size: 13px;
                    line-height: 1.45;
                    margin-bottom: 10px;
                    overflow-wrap: anywhere;
                }
                #Footer .icon_bar {
                    width: 36px;
                    height: 36px;
                    line-height: 36px;
                    margin-right: 3px;
                }
                #Footer .footer_copy {
                    padding: 8px 0;
                }
                #Footer .footer_copy .copyright {
                    font-size: 11px;
                    line-height: 1.4;
                    padding: 0 8px;
                }
            }
            #Footer .textwidget > img {
                width: 180px;
                max-width: 72%;
                height: auto;
                object-fit: contain;
                margin-bottom: 12px;
            }
        </style>
        <footer id="Footer" class="clearfix">
            <div class="widgets_wrapper">
                <div class="container">
                    <div class=" one-third column">
                        <aside id="text-8" class="widget widget_text">
                            <div class="textwidget"><img src="/assets/images/brand/Logos GAMQ whiteText.png" width="180" height="auto" alt="Gobierno Autonomo Municipal de Quillacollo">
                            <h4>Acerca de Nosotros</h4>
                            <p>
                            Direccion: Plaza 06 de Agosto Acera Este <br>
                            Telefonos:(591) + 4 + 4362771-72-73 <br>
                            <!-- email: admin@quillacollo.gob.bo -->
                            email: admin@quillacollo.gob.bo
                                </p>
                                <a href="https://www.facebook.com/people/Gobierno-Aut%C3%B3nomo-Municipal-de-Quillacollo/100069003586474/" class="icon_bar icon_bar_facebook icon_bar_small">
                                    <span class="t"><i class="icon-facebook "></i></span>
                                    <span class="b"><i class="icon-facebook"></i></span></a>
                                <a href="https://quillacollo.gob.bo/" class="icon_bar icon_bar_google icon_bar_small">
                                    <span class="t"><i class="icon-gplus"></i></span>
                                    <span class="b"><i class="icon-gplus"></i></span></a>
                                <a href="https://www.youtube.com/@alcaldiaquillacollo6225" class="icon_bar icon_bar_youtube icon_bar_small">
                                    <span class="t"><i class="icon-play"></i></span>
                                    <span class="b"><i class="icon-play"></i></span></a>
                            </div>
                        </aside>

                        <!-- <aside class="widget_text widget widget_custom_html">
                            <div class="textwidget custom-html-widget">
                                <p style="font-size: 35px; text-align: right;">
                                    <a href="#"><i class="icon-twitter-circled"></i></a>
                                    <a href="#"><i class="icon-facebook-circled"></i></a>
                                    <a href="#"><i class="icon-skype-circled"></i></a>
                                </p>
                            </div>
                        </aside> -->
                    </div>
                    <div class="one-third column">
                        <aside class="widget widget_mfn_recent_posts">
                            <h4>Mapa de Quillacollo  </h4>
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d84208.16386594198!2d-66.33908756997607!3d-17.339826766930575!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x93e30b7bf247bc8b%3A0xbb3549689b244b2d!2sQuillacollo!5e0!3m2!1ses-419!2sbo!4v1693588554870!5m2!1ses-419!2sbo"
                            width="330" height="230" style="border-radius: 5%; " allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </aside>
                    </div>
                    <div class="one-third column">
                        <!-- Recent posts -->
                        <aside class="widget widget_mfn_recent_posts">
                            <h4>Ultimas Noticias</h4>
                            <div class="Recent_posts">
                                <?php if($noticias && count($noticias) > 0){?>
                                <ul>
                                    <?php
                                    foreach ($noticias as $post){
                                        $firstImageURL = wp_post_featured_image_url($post, false);
                                        if(!empty($category)){
                                             $categories = [];//null;
                                            foreach ($catList as $category) {
                                                foreach ($post['categories'] as $catPost) {
                                                    if ($category['id'] == $catPost) {
                                                        $categories[] = $category;
                                                    }
                                                }
                                            }
                                        }
                                    ?>
                                    <li class="post format-image has-post-thumbnail  category-mobile category-photography tag-design tag-html5">
                                        <a href="<?= $post['link']?>">
                                            <div class="photo">
                                                <?php if(!empty($firstImageURL)){?>
                                                <img width="80" height="80" src="<?php echo htmlspecialchars($firstImageURL) ?>" alt="<?php echo htmlspecialchars(strip_tags($post['title']['rendered'] ?? 'Noticia')) ?>">
                                                <?php }?>
                                            </div>
                                            <div class="desc">
                                                <h6><?= $post['title']['rendered'] ?></h6>
                                                <span class="date"><i class="icon-clock"></i>
                                                <!-- {{ \Carbon\Carbon::parse($post['date_gmt'])->format('d-m-Y') }} -->
                                                <?php echo date("d-m-Y", strtotime($post['date_gmt']));?>
                                            </span>
                                            <?php if (!empty($categories)){
                                                  foreach($categories as $cat){ ?>
                                                    <a href="<?= $cat['link']?>" rel="category tag"><?= $cat['name']?></a>
                                            <?php }
                                                  }?>
                                            </div>
                                        </a>
                                    </li>
                                    <?php }?>
                                </ul>
                                
                                <?php }?>
                            </div>
                        </aside>
                    </div>
                </div>
            </div>
            <!-- Footer copyright-->
            <div class="footer_copy">
                <div class="container">
                    <div class="column one">
                        <a id="back_to_top" href="#" class="button button_left button_js"> <span class="button_icon"> <i class="icon-up-open-big"></i> </span> </a>
                        <div class="copyright">
                            &copy; 2025 Jefatura de Tecnologia de Informacion - Gobierno Autonomo Municipal de Quillacollo. Todos los derechos reservados.
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <div id="global-chatbot-widget"></div>
        <script>
            (function() {
                if (document.getElementById('chatbot-container')) {
                    if (typeof initializeChatbot === 'function') {
                        initializeChatbot();
                    }
                    return;
                }

                var chatbotMount = document.getElementById('global-chatbot-widget');
                if (!chatbotMount || typeof jQuery === 'undefined') {
                    return;
                }

                jQuery(chatbotMount).load('/modules/e-gamq/chatbot.html', function(response, status, xhr) {
                    if (status === 'error') {
                        console.error('Error loading /modules/e-gamq/chatbot.html:', xhr.status, xhr.statusText);
                        return;
                    }

                    jQuery.getScript('/modules/e-gamq/chatbot.js')
                        .done(function() {
                            if (typeof initializeChatbot === 'function') {
                                initializeChatbot();
                            }
                        })
                        .fail(function(jqxhr, settings, exception) {
                            console.error('Error loading /modules/e-gamq/chatbot.js:', exception);
                        });
                });
            })();
        </script>