// Função para o shortcode customizado
function custom_tabs_shortcode($atts) {
    // Define os atributos padrão para o shortcode
    $atts = shortcode_atts(
        array(
            'count' => 5, // Número de itens por aba, padrão é 5
        ), 
        $atts,
        'custom_tabs'
    );

    // Número de itens que você quer mostrar
    $count = intval($atts['count']);

    // Começo do buffer de saída para capturar o HTML
    ob_start(); ?>
    <div id="custom-tabs" class="story tabs-wrapper" data-current="most-viewed">
        <!-- Abas principais -->
        <div class="tabs primary-tabs">
            <button class="tabs__item _current" data-target="most-viewed">Mais Vistos</button>
            <button class="tabs__item" data-target="most-commented">Mais Comentados</button>
        </div>

        <!-- Conteúdo de "Mais Vistos" -->
        <div class="tab-content story__tab-target _current" data-finder="most-viewed">
            <!-- Abas secundárias -->
            <div class="tabs secondary-tabs">
                <button class="tabs__item _current" data-target="most-viewed-translation">Tradução</button>
                <button class="tabs__item" data-target="most-viewed-original">Original</button>
            </div>
            <div class="tab-pane story__tab-target _current" data-finder="most-viewed-translation">
                [fictioneer_latest_stories count="" orderby="views" type="list" terms="none" footer_words="false" footer_comments="true" footer_views="true" fandoms="Tradução" footer_date="false" footer_rating="false"]            </div>
            <div class="tab-pane story__tab-target" data-finder="most-viewed-original">
                [fictioneer_latest_stories count="" orderby="views" type="list" terms="none" footer_words="false" footer_comments="true" footer_views="true" fandoms="Original" footer_date="false" footer_rating="false"]            </div>
        </div>

        <!-- Conteúdo de "Mais Comentados" -->
        <div class="tab-content story__tab-target" data-finder="most-commented">
            <div class="tabs secondary-tabs">
                <button class="tabs__item _current" data-target="most-commented-translation">Tradução</button>
                <button class="tabs__item" data-target="most-commented-original">Original</button>
            </div>
            <div class="tab-pane story__tab-target _current" data-finder="most-commented-translation">
                [fictioneer_latest_stories count="" orderby="comment_count" type="list" terms="none" footer_words="false" footer_comments="true" footer_views="true" fandoms="Tradução" footer_date="false" footer_rating="false"]            </div>
            <div class="tab-pane story__tab-target" data-finder="most-commented-original">
                [fictioneer_latest_stories count="" orderby="comment_count" type="list" terms="none" footer_words="false" footer_comments="true" footer_views="true" fandoms="Original" footer_date="false" footer_rating="false"]            </div>
        </div>
    </div>
    <script>
        // Script para alternar abas
        function toggleTab(target) {
            const container = target.closest('.tabs-wrapper');
            const parentTabGroup = target.closest('.tab-content') || container;

            parentTabGroup.querySelectorAll('.tabs__item._current, .story__tab-target._current').forEach(element => {
                element.classList.remove('_current');
            });

            const targetContent = parentTabGroup.querySelector(`[data-finder="${target.dataset.target}"]`);
            if (targetContent) targetContent.classList.add('_current');
            target.classList.add('_current');

            if (parentTabGroup.classList.contains('tabs-wrapper')) {
                const firstSecondaryTab = targetContent.querySelector('.tabs.secondary-tabs .tabs__item');
                if (firstSecondaryTab) firstSecondaryTab.click();
            }
        }

        document.querySelectorAll('.tabs__item').forEach(tab => {
            tab.addEventListener('click', event => toggleTab(event.currentTarget));
        });
    </script>
    <style>
        .tabs-wrapper {
            display: flex;
            flex-direction: column;
            width: 80%;
            margin: 0 auto;
            padding: 0 20px;
            align-items: normal;
        }

        .tabs {
            justify-content: center;
        }

        .primary-tabs {
            margin-bottom: 10px;
            text-align: center;
            align-self: center;
        }

        .secondary-tabs {
            margin-top: 10px;
            margin-bottom: 1.5rem !important;
            text-align: center;
            align-self: center;
        }

        .story__tab-target:not(._current) {
            display: none;
        }

        .tab-pane {
            display: none;
        }

        .tab-pane._current {
            display: block;
        }
    </style>
    {"version":"1.0","provider_name":"Illusia","provider_url":"https:\/\/illusia.com.br","author_name":"Asu","author_url":"https:\/\/illusia.com.br\/author\/asuvn\/","title":"Cap\u00edtulo 1374: O Jogo com Vit\u00f3ria Confirmada","type":"rich","width":600,"height":338,"html":"<blockquote class=\"wp-embedded-content\" data-secret=\"GfVEW0tAla\"><a href=\"https:\/\/illusia.com.br\/story\/tlm-o-lendario-mecanico\/tlm-capitulo-1374\/\">Cap\u00edtulo 1374: O Jogo com Vit\u00f3ria Confirmada<\/a><\/blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/illusia.com.br\/story\/tlm-o-lendario-mecanico\/tlm-capitulo-1374\/embed\/#?secret=GfVEW0tAla\" width=\"600\" height=\"338\" title=\"&#8220;Cap\u00edtulo 1374: O Jogo com Vit\u00f3ria Confirmada&#8221; &#8212; Illusia\" data-secret=\"GfVEW0tAla\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe><script>\n\/*! This file is auto-generated *\/\n!function(d,l){\"use strict\";l.querySelector&&d.addEventListener&&\"undefined\"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!\/[^a-zA-Z0-9]\/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),o=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]'),c=new RegExp(\"^https?:$\",\"i\"),i=0;i<o.length;i++)o[i].style.display=\"none\";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute(\"style\"),\"height\"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):\"link\"===t.message&&(r=new URL(s.getAttribute(\"src\")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",function(){for(var e,t,s=l.querySelectorAll(\"iframe.wp-embedded-content\"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute(\"data-secret\"))||(t=Math.random().toString(36).substring(2,12),e.src+=\"#?secret=\"+t,e.setAttribute(\"data-secret\",t)),e.contentWindow.postMessage({message:\"ready\",secret:t},\"*\")},!1)))}(window,document);\n<\/script>\n"}