@extends('theme')
@section('title', 'Portal da Transparência - Angra dos Reis :: Mapa do site')
@section('content')

<section>
    <div class="container my-5">

        @php
            $breadcrumbs = [
                ['route' => route('index'), 'title' => __('Página Inicial')],
                ['currentPage' => 'page', 'title' => __('Mapa do site')],
            ];
            $mapaSummary = __('Listagem completa de páginas do Portal da Transparência e do portal institucional angra.rj.gov.br, incluindo conteúdos publicados dinamicamente.');
            $mapaSummary .= ' ' . number_format($totalLinks, 0, ',', '.') . ' ' . __('links no total') . '.';
        @endphp
        @include('components._breadcrumb', $breadcrumbs)

        @include('components._titleMain', [
            'title' => __('Mapa do site'),
            'summary' => $mapaSummary,
        ])

        <div class="ms-root">

        {{-- ── Atalhos → Busca → Mapa (vertical) ─────────────── --}}
        <div class="ms-page-tools">
            <aside class="ms-shortcuts" aria-label="{{ __('Atalhos rápidos') }}">
                <div class="ms-shortcuts-links">
                    <p class="ms-shortcuts-label">{{ __('Atalhos') }}</p>
                    <div class="ms-shortcuts-links-grid">
                        <a href="{{ route('index') }}" class="ms-shortcut-link">
                            <i class="fa-solid fa-shield-halved" aria-hidden="true"></i>
                            {{ __('Portal da Transparência') }}
                        </a>
                        <a href="{{ $angra['base'] ?? 'https://angra.rj.gov.br' }}/" class="ms-shortcut-link" target="_blank" rel="noopener noreferrer">
                            <i class="fa-solid fa-landmark" aria-hidden="true"></i>
                            angra.rj.gov.br
                            <i class="fa-solid fa-arrow-up-right-from-square ms-ext-icon" aria-hidden="true"></i>
                        </a>
                        <a href="https://portal.angra.rj.gov.br/" class="ms-shortcut-link" target="_blank" rel="noopener noreferrer">
                            <i class="fa-solid fa-globe" aria-hidden="true"></i>
                            portal.angra.rj.gov.br
                            <i class="fa-solid fa-arrow-up-right-from-square ms-ext-icon" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

                @if (!empty($mapaAccordionSections))
                    <div class="ms-shortcuts-summary">
                        <p class="ms-shortcuts-label">{{ __('Por portal') }}</p>
                        <div class="ms-shortcuts-totals-grid">
                            @foreach ($mapaAccordionSections as $mapaSection)
                                <div class="ms-shortcut-total">
                                    <span class="ms-shortcut-total-title">{{ $mapaSection['title'] }}</span>
                                    <span class="ms-shortcut-count">{{ number_format($mapaSection['linkCount'] ?? 0, 0, ',', '.') }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </aside>

            <div class="ms-search-block">
                <label for="mapa-do-site-busca" class="ms-search-label">
                    {{ __('Buscar nesta página') }}
                </label>
                <div class="ms-search-wrap">
                    <i class="fa-solid fa-magnifying-glass ms-search-icon" aria-hidden="true"></i>
                    <input
                        type="search"
                        id="mapa-do-site-busca"
                        class="ms-search-input"
                        placeholder="{{ __('Digite o nome da página ou serviço...') }}"
                        autocomplete="off"
                    >
                </div>
                <p id="mapa-do-site-busca-vazio" class="ms-empty-msg d-none" role="status">
                    {{ __('Nenhum link encontrado para o termo buscado.') }}
                </p>
            </div>
        </div>

        <div class="ms-map-content">
        {{-- ── Seções separadas, cada uma com acordeão de links ─ --}}
        @foreach ($mapaAccordionSections as $sectionIndex => $mapaSection)
            @include('components._mapaDoSiteSection', [
                'section' => $mapaSection,
                'sectionIndex' => $sectionIndex,
                'openFirst' => $sectionIndex === 0,
            ])
        @endforeach
        </div>

        {{-- Rodapé da página --}}
        <footer class="ms-page-footer">
            <p class="ms-footer-text">{{ __('Portal da Transparência · Prefeitura Municipal de Angra dos Reis') }}</p>
            <a href="#" class="ms-back-top" onclick="window.scrollTo({top:0,behavior:'smooth'});return false;">
                <i class="fa-solid fa-arrow-up" aria-hidden="true"></i>
                {{ __('Voltar ao topo') }}
            </a>
        </footer>

        </div>{{-- /.ms-root --}}
    </div>
</section>

{{-- ════════════════════════════════════════════════════════════
     ESTILOS
     ════════════════════════════════════════════════════════════ --}}
<style>
/* ── Layout do mapa ─────────────────────────────────────────── */
.ms-root,
.ms-root * {
    box-sizing: border-box;
}

/* ── Ferramentas: atalhos → busca (vertical) ─────────────── */
.ms-page-tools {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.ms-search-block {
    width: 100%;
}

.ms-map-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Busca ───────────────────────────────────────────────── */
.ms-search-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #5c6358;
    margin-bottom: 6px;
    letter-spacing: .03em;
}

.ms-search-wrap {
    position: relative;
}

.ms-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #9aa096;
    pointer-events: none;
}

.ms-search-input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    font-size: 14px;
    background: #fff;
    border: 1px solid #d0d4cc;
    border-radius: 10px;
    color: #1a1f18;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.ms-search-input:focus {
    border-color: #198754;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, .12);
}

.ms-search-input::placeholder {
    color: #adb5ad;
}

.ms-empty-msg {
    font-size: 13px;
    color: #9aa096;
    margin-top: 8px;
}

/* ── Atalhos (card no topo) ──────────────────────────────── */
.ms-shortcuts {
    background: #fff;
    border: 1px solid #e0e2de;
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ms-shortcuts-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9aa096;
    margin: 0 0 8px;
}

.ms-shortcuts-links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.ms-shortcut-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #198754;
    text-decoration: none;
    padding: 4px 0;
    transition: color .12s;
}

.ms-shortcut-link:hover {
    color: #0f5132;
    text-decoration: underline;
}

.ms-shortcut-link .fa-landmark,
.ms-shortcut-link .fa-shield-halved,
.ms-shortcut-link .fa-globe {
    font-size: 12px;
    opacity: .7;
    flex-shrink: 0;
}

.ms-shortcuts-summary {
    padding-top: 1rem;
    border-top: 1px solid #e9ebe7;
}

.ms-shortcuts-totals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 16px;
}

.ms-shortcut-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 12px;
    color: #5c6358;
    padding: 4px 0;
}

.ms-shortcut-total-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-shortcut-count {
    font-weight: 600;
    color: #1a1f18;
    flex-shrink: 0;
}

/* ── Ícone externo ───────────────────────────────────────── */
.ms-ext-icon {
    font-size: 10px;
    opacity: .45;
    flex-shrink: 0;
}

.ms-int-icon {
    font-size: 10px;
    opacity: .3;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Seções ──────────────────────────────────────────────── */
.ms-section {
    margin-bottom: 3rem;
}

.ms-section-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e2de;
}

.ms-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #1a1f18;
    letter-spacing: .01em;
    margin: 0;
}

.ms-section-icon {
    color: #198754;
    margin-right: 7px;
    font-size: 14px;
}

.ms-section-desc {
    font-size: 13px;
    color: #7a8077;
    margin-bottom: 1.25rem;
    line-height: 1.65;
}

.ms-count-badge--truncated {
    background: #fff3cd;
    color: #664d03;
    border-color: #ffecb5;
}

.ms-count-badge-sep {
    font-weight: 500;
    opacity: .75;
    margin: 0 2px;
}

.ms-count-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: #0a4d28;
    background: #d1e7dd;
    border-radius: 99px;
    padding: 2px 10px;
    border: 1px solid #a3cfbb;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Grade de grupos ─────────────────────────────────────── */
.ms-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.ms-group {
    background: #fff;
    border: 1px solid #e0e2de;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    transition: border-color .15s, box-shadow .15s;
}

.ms-group:hover {
    border-color: #c3c9bf;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.ms-group-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #9aa096;
    margin-bottom: .8rem;
}

/* ── Lista de links ──────────────────────────────────────── */
.ms-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ms-link-item {
    border-bottom: 1px solid #f0f1ee;
    padding: 5px 0;
}

.ms-link-item:last-child {
    border-bottom: none;
}

.ms-link-item a {
    font-size: 13px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color .12s;
}

.ms-link--int {
    color: #1a1f18;
}

.ms-link--int:hover {
    color: #198754;
}

.ms-link--ext {
    color: #5c6358;
}

.ms-link--ext:hover {
    color: #1a1f18;
}

/* ── Acordeão (conteúdo dinâmico) ───────────────────────── */
.ms-accordion {
    border: 1px solid #e0e2de;
    border-radius: 12px;
    overflow: hidden;
}

.ms-acc-item {
    border-bottom: 1px solid #e0e2de;
}

.ms-acc-item:last-child {
    border-bottom: none;
}

.ms-acc-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #fff;
    border: none;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    color: #1a1f18;
    text-align: left;
    transition: background .12s;
    gap: 1rem;
}

.ms-acc-btn:hover {
    background: #f7f8f5;
}

.ms-acc-btn--open {
    background: #edf7f2;
    color: #0a4d28;
}

.ms-acc-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.ms-acc-arrow {
    font-size: 13px;
    color: #9aa096;
    transition: transform .2s ease;
}

.ms-acc-arrow--open {
    transform: rotate(180deg);
    color: #198754;
}

.ms-acc-panel {
    display: none;
    padding: 1rem 1.25rem 1.25rem;
    background: #fff;
    border-top: 1px solid #f0f1ee;
}

.ms-acc-panel--open {
    display: block;
}

.ms-acc-desc {
    font-size: 12.5px;
    color: #7a8077;
    margin-bottom: .85rem;
    line-height: 1.6;
}

.ms-acc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
}

.ms-acc-link-item a {
    font-size: 12.5px;
    color: #198754;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 7px;
    transition: background .1s, color .1s;
}

.ms-acc-link-item .ms-int-icon {
    font-size: 10px;
    opacity: .45;
    flex-shrink: 0;
}

.ms-acc-link-item a:hover {
    background: #edf7f2;
    color: #0a4d28;
}

.ms-acc-more {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px dashed #e0e2de;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}

.ms-acc-more-btn {
    font-weight: 600;
}

.ms-acc-more-hint {
    line-height: 1.4;
}

/* ── Rodapé da página ────────────────────────────────────── */
.ms-page-footer {
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e2de;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.ms-footer-text {
    font-size: 12px;
    color: #9aa096;
    margin: 0;
}

.ms-back-top {
    font-size: 12px;
    color: #198754;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color .12s;
}

.ms-back-top:hover {
    color: #0f5132;
}

/* ── Estados de busca (ocultar) ──────────────────────────── */
.mapa-do-site-link-item.mapa-hidden,
.ms-group.mapa-hidden,
.mapa-do-site-section.mapa-hidden,
.mapa-do-site-block.mapa-hidden {
    display: none !important;
}

/* ── Responsivo ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .ms-shortcuts-links-grid {
        flex-direction: column;
        gap: 4px;
    }

    .ms-shortcuts-totals-grid {
        grid-template-columns: 1fr;
    }

    .ms-groups {
        grid-template-columns: 1fr;
    }

    .ms-acc-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .ms-page-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}
</style>

{{-- ════════════════════════════════════════════════════════════
     SCRIPTS
     ════════════════════════════════════════════════════════════ --}}
<script>
document.addEventListener('DOMContentLoaded', function () {

    /* ── Busca ─────────────────────────────────────────────── */
    const input    = document.getElementById('mapa-do-site-busca');
    const emptyMsg = document.getElementById('mapa-do-site-busca-vazio');
    const items    = document.querySelectorAll('.mapa-do-site-link-item');

    if (input) {
        input.addEventListener('input', function () {
            const term = input.value.trim().toLowerCase();
            let visible = 0;

            items.forEach(function (el) {
                const haystack = el.getAttribute('data-search') || '';
                const match    = term === '' || haystack.includes(term);
                el.classList.toggle('mapa-hidden', !match);
                if (match) visible++;
            });

            /* ocultar grupos sem resultados */
            document.querySelectorAll('.mapa-do-site-group').forEach(function (group) {
                const hasVisible = group.querySelector('.mapa-do-site-link-item:not(.mapa-hidden)');
                group.classList.toggle('mapa-hidden', term !== '' && !hasVisible);
            });

            /* ocultar seções sem resultados */
            document.querySelectorAll('.mapa-do-site-section').forEach(function (section) {
                const hasVisible = section.querySelector('.mapa-do-site-link-item:not(.mapa-hidden)');
                section.classList.toggle('mapa-hidden', term !== '' && !hasVisible);
            });

            /* acordeão: ocultar blocos sem resultados e abrir os que têm */
            document.querySelectorAll('.mapa-do-site-block').forEach(function (block) {
                const hasVisible = block.querySelector('.mapa-do-site-link-item:not(.mapa-hidden)');
                block.classList.toggle('mapa-hidden', term !== '' && !hasVisible);

                /* abre automaticamente blocos com resultado durante busca */
                if (term && hasVisible) {
                    const btn   = block.querySelector('.ms-acc-btn');
                    const panel = btn ? document.getElementById(btn.dataset.target) : null;
                    const arrow = btn ? btn.querySelector('.ms-acc-arrow') : null;
                    if (panel && !panel.classList.contains('ms-acc-panel--open')) {
                        panel.classList.add('ms-acc-panel--open');
                        if (btn)   btn.classList.add('ms-acc-btn--open');
                        if (arrow) arrow.classList.add('ms-acc-arrow--open');
                        if (btn)   btn.setAttribute('aria-expanded', 'true');
                    }
                }
            });

            if (emptyMsg) {
                emptyMsg.classList.toggle('d-none', term === '' || visible > 0);
            }
        });
    }

    /* ── Acordeão ─────────────────────────────────────────── */
    document.querySelectorAll('.ms-acc-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const panelId = this.dataset.target;
            const panel   = document.getElementById(panelId);
            const arrow   = this.querySelector('.ms-acc-arrow');
            if (!panel) return;

            const isOpen = panel.classList.contains('ms-acc-panel--open');

            panel.classList.toggle('ms-acc-panel--open', !isOpen);
            this.classList.toggle('ms-acc-btn--open',    !isOpen);
            this.setAttribute('aria-expanded', String(!isOpen));

            if (arrow) {
                arrow.classList.toggle('ms-acc-arrow--open', !isOpen);
            }
        });
    });

});
</script>

@endsection