<style>
/* === RESET / BASE === */
.sociais ul                     {list-style:none; margin:0; padding:0;}
.sociais li                     {float:left; display:inline-block}
.sociais a, .sociais button, .sociais input[type="search"] {background:var(--sociaisbkg); color:var(--sociaisicon); padding:8px; border-radius:7px; display:block; position:relative}
.sociais button                 {border:0; cursor:pointer; line-height:inherit;}
.sociais input                  {border:0; font-size:100%; line-height:inherit; outline:none;}
.sociais input[type="search"]   {display:none; width:130px; height:18px; color:var(--ssearchfont); box-sizing:content-box;}
.sociais a:hover, .sociais button:hover, .sociais input[type="search"]:hover {background:var(--sociaishov);}
/* === TODOS OS ÍCONES E SEARCH === */
.sociais li.cleanToggle         {display:inline-block; width:30px; height:30px; border-radius:7px; margin-right: 7px;}
.sociais li.cleanToggle > a     {display:flex; justify-content:center; align-items:center; width:100%; height:100%; color:var(--sociaisicon); text-decoration:none;}
.sociais li.cleanToggle > a i   {font-size:21px; display:block; text-align:center;}
/* === SEARCH === */
.sociais li.search              {display:inline-block; height:30px; margin-right:0px;}
.sociais li.search input[type="search"] {background: #898989; color:var(--ssearchfont); width:130px; height:18px; padding:6px 9px; display:none; border-radius:7px; border:0}
.sociais li.search button       {background:var(--sociaisbkg); color:var(--sociaisicon); cursor:pointer; display:flex; justify-content:center; align-items:center; width:30px; height:30px; border-radius:7px; border:0; }
.sociais li.search button:hover {background:var(--sbkghov)}
.sociais li.search button i     {font-size:20px;}
/* === DROPDOWNS === */
.dropdown                       {position:relative; display:inline-block;}
.dropdown-content               {display:none; position:absolute; top:36px; left:0; min-width:150px; border-radius: 8px; overflow:hidden; z-index:1000;}
.dropdown-content a             {background:var(--sociaissubbkg); color:var(--ssubfont); font: 700 13px/20px "Roboto"; padding:6px 20px; border-radius: 0; display:block}
.dropdown-content a:hover       {background:var(--ssubhov)}
.dropdown:hover .dropdown-content {display:block;}
.dropdown-fontes > a::after, .dropdown.acessibilidade > a::after {content:none !important;}
</style>
<link css_style rel="stylesheet" href="css/style<?= $_COOKIE['contraste'] ?>.css">

<div class="sociais">
    <?php 
    $p_busca = $pesquisaTrans ? 'pesquisa_trans' : 'pesquisa';
    $p_pag   = $pesquisaTrans ? 'pag_trans' : 'pag';
    ?>
    <form action="<?= $p_pag ?>.php?pg=<?= $p_busca ?>" id="formularioBuscar" method="get">
        <fieldset>
            <ul class="toolbar clearfix">
                <li class="cleanToggle dropdown" title="Segmentos">
                    <a href="#" class="dropdown-link"><i class="fa fa-caret-down"></i></a>
                    <div class="dropdown-content">
                        <a href="https://jp.net.br/jp/web">JP Padrão</a>
                        <a href="https://jp.net.br/jp-academias/web">Academias</a>
                        <a href="https://jp.net.br/jp-advogados/web">Advogados</a>
                        <a href="https://jp.net.br/jp-beleza/web">Beleza</a>
                        <a href="https://jp.net.br/jp-blog/web">Blog</a>
                        <a href="https://jp.net.br/jp-colegios/web">Colégios</a>
                        <a href="https://jp.net.br/jp-ctgs/web">CTGs</a>
                        <a href="https://jp.net.br/jp-detetives/web">Detetives</a>
                        <a href="https://jp.net.br/jp-escolas/web">Escolas</a>
                        <a href="https://jp.net.br/jp-fastfood/web">FastFood</a>
                        <a href="https://jp.net.br/jp-federacoes/web">Federações</a>
                        <a href="https://jp.net.br/jp-imoveis/web">Imóveis</a>
                    </div>
                </li>
                <li class="cleanToggle dropdown" title="Modelos">
                    <a href="#" class="dropdown-link"><i class="fa fa-caret-down"></i></a>
                    <div class="dropdown-content">
                        <a href="<?= URL ?>/jp/web/index.php"><i class="fa fa-caret-right mr7"></i>Modelo Web</a>
                        <a href="<?= URL ?>/jp/web/index1.php"><i class="fa fa-caret-right mr7"></i>Modelo Web 1</a>
                        <a href="<?= URL ?>/jp/web/index2.php"><i class="fa fa-caret-right mr7"></i>Modelo Web 2</a>
                        <a href="<?= URL ?>/jp/web/index3.php"><i class="fa fa-caret-right mr7"></i>Modelo Web 3</a>
                    </div>
                </li>
                <li class="cleanToggle dropdown" title="Mais Temas">
                    <a href="#" class="dropdown-link"><i class="fa fa-caret-down"></i></a>
                    <div class="dropdown-content">
                        <a href="#" onclick="mudarTema('blue'); return false;"title="Tema Blue"><i class="fa fa-caret-right mr7"></i>Blue</a>
                        <a href="#" onclick="mudarTema('black'); return false;"title="Tema Black"><i class="fa fa-caret-right mr7"></i>Black</a>
                        <a href="#" onclick="mudarTema('dark'); return false;"title="Tema Dark"><i class="fa fa-caret-right mr7"></i>Dark</a>
                        <a href="#" onclick="mudarTema('orion'); return false;"title="Tema Orion"><i class="fa fa-caret-right mr7"></i>Orion</a>
                        <a href="#" onclick="mudarTema('green'); return false;"title="Tema Green"><i class="fa fa-caret-right mr7"></i>Green</a>
                        <a href="#" onclick="mudarTema('red'); return false;"title="Tema Red"><i class="fa fa-caret-right mr7"></i>Red</a>
                        <a href="#" onclick="mudarTema('violeta'); return false;"title="Tema Violeta"><i class="fa fa-caret-right mr7"></i>Violeta</a>
                  </div>
                </li>
                <li class="cleanToggle dropdown acessibilidade" title="Acessibilidade">
                    <a href="#" class="dropdown-link"><i class="fa fa-wheelchair"></i></a>
                    <div class="dropdown-content">
                        <a href="#" id="zoom0" title="Fonte normal"><i class="fa fa-font mr7" style="font-size:14px;"></i>Normal</a>
                        <a href="#" id="zoomIn" title="Aumentar tamanho"><i class="fa fa-plus mr7" style="font-size:14px;"></i>Aumentar</a>
                        <a href="#" id="zoomOut" title="Diminuir tamanho"><i class="fa fa-minus mr7" style="font-size:14px;"></i>Diminuir</a>
                    </div>
                </li>
                <li class="cleanToggle"><a href="pag.php?pg=apis/mapa_site" title="Mapa do Site"><i class="fa fa-sitemap crp"></i></a></li>
                <li class="cleanToggle"><a href="#" id="contraste"style_contraste="css/style_contraste.css" style_css="css/style.css" title="Contraste"><i class="icon-normal fa fa-adjust"></i></a></li>
                <li class="cleanToggle"><a modal-href="#openWebmail" title="Webmail"><i class="fa fa-envelope-square crp"></i></a></li>
                <li class="cleanToggle"><a modal-href="#openAdmin" title="Adm"><i class="fa fa-cog crp"></i></a></li>
                <li class="search">
                    <input type="hidden" value="<?= $p_busca ?>" name="pg" id="pg">
                    <input type="search" id="search" name="busca" placeholder="Busca no site">
                </li>
                <li class="search"><button type="button" id="btn-search" title="Busca no Site"><i class="fa fa-search"></i></button></li>
            </ul>
        </fieldset>
    </form>
</div>

<script>
$(function(){
    $('#btn-search').on('click', function(e) {
        e.preventDefault();
        const $search = $('#search');
        const valor = $search.val().trim();
        if(valor) return $("#formularioBuscar").submit();
        $('.cleanToggle').animate({width:'toggle'});
        $search.animate({width:'toggle'}, function(){$(this).focus(); }); 
    });
    $('#search').on('keypress', function(e){
        if(e.which === 13){e.preventDefault(); $("#formularioBuscar").submit();}
    });
});

/* Acessibilidade */
var currFFZoom = 1;
var currIEZoom = 100;
$('#zoomIn').on('click',function(){
    var step = 0.1;
    currFFZoom += step; 
    $('body').css('MozTransform','scale(' + currFFZoom + ')');
    var step = 10;
    currIEZoom += step;
    $('body').css('zoom', ' ' + currIEZoom + '%');
    cacheZoom();
});
$('#zoomOut').on('click',function(){
    var step = 0.1;
    currFFZoom -= step;                 
    $('body').css('MozTransform','scale(' + currFFZoom + ')');
    var step = 10;
    currIEZoom -= step;
    $('body').css('zoom', ' ' + currIEZoom + '%');
    cacheZoom();
});
$('#zoom0').on('click',function(){
    currFFZoom = 1;                 
    $('body').css('MozTransform','scale(' + currFFZoom + ')');
    currIEZoom = 100;
    $('body').css('zoom', ' ' + currIEZoom + '%');
    cacheZoom();
});

// Função para obter o valor de um cookie pelo nome
function getCookie(name) {
    var match = document.cookie.match(new RegExp(name + '=([^;]+)'));
    return match ? match[1] : null; }
function setCookie(name, value) {
    document.cookie = name + '=' + value + '; path=/'; }
function updateIcon() {
    var iconNormalClass = 'fa-adjust';
    var iconContrasteClass = 'fa-circle';
    var contrasteCookie = getCookie('contraste');
    if (contrasteCookie === '_contraste') {$('#contraste i').removeClass(iconNormalClass).addClass(iconContrasteClass);} 
    else {$('#contraste i').removeClass(iconContrasteClass).addClass(iconNormalClass);}
}

// Lidar com o clique no botão de contraste
$('#contraste').on('click', function () {
    style_css = $(this).attr('style_css');
    style_contraste = $(this).attr('style_contraste');
    ativo = $('[css_style]').attr('href');
    if (ativo == style_css) {
        $('[css_style]').attr('href', style_contraste);
        setCookie('contraste', '_contraste');
    } else {
        $('[css_style]').attr('href', style_css);
        setCookie('contraste', '');
    }
    // Atualizar o ícone imediatamente após a troca de estilo
    updateIcon();
});

// Verificar o cookie ao carregar a página
$(document).ready(function () {updateIcon();});
function cacheZoom(){
    zoom = $('body').css('zoom');
    document.cookie = "zoom="+zoom;
}
</script>
