@component('v2-cms::components.box', ['title' => 'Gestão de Módulos (Feature Flags)'])
    <p class="text-muted mb-4">
        Ative ou desative módulos do sistema. Módulos desativados têm seus menus ocultados no CMS
        e suas rotas bloqueadas. As configurações <strong>não são perdidas</strong> ao desativar.
    </p>

    @php
        // ─── Ícones por grupo (estrutural — grupos vêm dos diretórios físicos) ───
        $groupIcons = [
            'PUBLICACOES'    => 'bi-newspaper',
            'INSTITUCIONAL'  => 'bi-buildings',
            'INFRAESTRUTURA' => 'bi-shield-lock-fill',
            'CONTEUDO'       => 'bi-file-earmark-text',
            'SISTEMA'        => 'bi-gear-wide-connected',
            'LAYOUTS'        => 'bi-grid-1x2-fill',
            'API'            => 'bi-code-square',
            'RELACIONAMENTOS'=> 'bi-people',
            'UTILITARIOS'    => 'bi-tools',
            'ATOSOFICIAIS'   => 'bi-file-text',
            'SUPPORT'        => 'bi-wrench',
        ];

        // ─── Filtra e agrupa ───
        $groups = [];
        foreach ($modules as $mod) {
            // Nunca exibe módulos do grupo SUPPORT
            if (strtoupper($mod['group']) === 'SUPPORT') {
                continue;
            }
            // Pula módulos sem grupo definido
            if ($mod['group'] === 'OUTROS' || empty($mod['group'])) {
                continue;
            }
            $groups[$mod['group']][] = $mod;
        }
        ksort($groups);
    @endphp

    {{-- ═══════════════════════════════════════════════════════════════
         Grupos de Módulos
         ═══════════════════════════════════════════════════════════════ --}}
    @foreach($groups as $group => $groupModules)
        @php
            $groupSlug = str_slug($group);
            $groupIcon = $groupIcons[$group] ?? 'bi-box-seam';
            $activeCount = count(array_filter($groupModules, function ($m) { return $m['active']; }));
        @endphp

        <div class="mb-4">
            {{-- Cabeçalho do grupo --}}
            <div class="d-flex align-items-center gap-2 mb-3 pb-2 border-bottom">
                <i class="{{ $groupIcon }} fs-5 text-muted" aria-hidden="true"></i>
                <h5 class="fw-bold text-dark mb-0 text-uppercase" style="letter-spacing: 0.03em;">
                    {{ $group }}
                </h5>
                <span class="badge bg-light text-dark border ms-auto rounded-pill">
                    {{ $activeCount }}/{{ count($groupModules) }} ativos
                </span>
            </div>

            {{-- Cards de módulos --}}
            <div class="row g-3">
                @foreach($groupModules as $mod)
                    @php
                        $isActive = $mod['active'];
                        $modIcon  = $mod['icon'] ?? $groupIcon;
                        $desc     = $mod['description'] ?? 'Módulo do sistema.';
                    @endphp

                    <div class="col-md-6 col-12">
                        <div class="card border h-100 shadow-sm module-card {{ $isActive ? '' : 'bg-light' }}">
                            <div class="card-body d-flex align-items-start gap-3">
                                {{-- Ícone --}}
                                <div class="module-icon d-flex align-items-center justify-content-center flex-shrink-0"
                                     style="width: 42px; height: 42px; border-radius: 10px; background: {{ $isActive ? 'var(--cms-brand-primary, #3c8dbc)' : '#e9ecef' }};">
                                    <i class="{{ $modIcon }} text-white small" aria-hidden="true"
                                       style="font-size: var(--text-md);"></i>
                                </div>

                                {{-- Informações --}}
                                <div class="flex-grow-1 min-w-0">
                                    <div class="d-flex align-items-center justify-content-between gap-2">
                                        <span class="fw-bold text-dark text-truncate">{{ $mod['title'] }}</span>
                                        <span class="small text-muted text-nowrap font-monospace" style="font-size: var(--text-xs);">
                                            {{ $mod['name'] }}
                                        </span>
                                    </div>
                                    <p class="small text-secondary mb-0 mt-1" style="line-height: 1.4;">
                                        {{ $desc }}
                                    </p>
                                </div>

                                {{-- Switch --}}
                                <div class="flex-shrink-0 ms-2 pt-1">
                                    <div class="form-check form-switch mb-0">
                                        <input type="checkbox"
                                               class="form-check-input module-toggle cursor-pointer"
                                               id="toggle-{{ $mod['name'] }}"
                                               data-module="{{ $mod['name'] }}"
                                               data-title="{{ $mod['title'] }}"
                                               {{ $isActive ? 'checked' : '' }}
                                               style="width: 2.5em; height: 1.5em;">
                                        <label class="form-check-label visually-hidden"
                                               for="toggle-{{ $mod['name'] }}">
                                            {{ $isActive ? 'Ativo' : 'Inativo' }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endforeach

    {{-- ═══════════════════════════════════════════════════════════════
         Informações
         ═══════════════════════════════════════════════════════════════ --}}
    <div class="alert alert-info d-flex gap-2 p-3 mt-4 mb-0" role="alert">
        <i class="bi bi-info-circle-fill fs-5 flex-shrink-0 mt-1"></i>
        <div>
            <h4 class="alert-heading h6 fw-bold mb-1">Como funciona?</h4>
            <p class="mb-0 small text-secondary">
                Módulos <strong>ativos</strong> aparecem na barra lateral do CMS e têm suas rotas
                disponíveis. Ao desativar um módulo, ele é ocultado do menu e o acesso às suas
                rotas é bloqueado. Nenhuma configuração ou dado é perdido.
                Módulos da categoria <strong>SUPPORT</strong> são sempre ativos e não aparecem nesta lista.
            </p>
        </div>
    </div>
@endcomponent

{{-- ═══════════════════════════════════════════════════════════════
     Modal de Confirmação — renderizado no nível <body> via @push('modals')
     ═══════════════════════════════════════════════════════════════ --}}
@push('modals')
<div class="modal fade" id="toggleConfirmModal" tabindex="-1" role="dialog"
     aria-labelledby="toggleConfirmModalLabel" aria-hidden="true"
     data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold" id="toggleConfirmModalLabel">
                    <i class="bi bi-exclamation-triangle-fill text-warning me-1"></i>
                    Confirmar Alteração
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body pt-3">
                <p class="mb-0" id="confirmModalMessage">
                    Carregando...
                </p>
            </div>
            <div class="modal-footer border-0 pt-2">
                <button type="button" class="btn btn-outline-secondary fw-bold" data-bs-dismiss="modal">
                    <i class="bi bi-x-lg me-1"></i> Cancelar
                </button>
                <button type="button" class="btn fw-bold d-inline-flex align-items-center gap-1"
                        id="confirmToggleBtn">
                    <i class="bi bi-check-lg"></i> <span id="confirmToggleBtnText">Confirmar</span>
                </button>
            </div>
        </div>
    </div>
</div>
@endpush

{{-- ═══════════════════════════════════════════════════════════════
     JavaScript — Modal de Confirmação + AJAX
     ═══════════════════════════════════════════════════════════════ --}}
@push('js')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const modal     = new bootstrap.Modal(document.getElementById('toggleConfirmModal'));
    const modalBody = document.getElementById('confirmModalMessage');
    const confirmBtn = document.getElementById('confirmToggleBtn');
    let pendingToggle = null; // { checkbox, module, title, newState }

    // Helper: obtém o span de texto do botão de confirmação dinamicamente
    // (necessário porque confirmBtn.innerHTML recria o elemento a cada reset)
    function getConfirmTextSpan() {
        return document.getElementById('confirmToggleBtnText');
    }

    // Intercepta clique nos switches
    document.querySelectorAll('.module-toggle').forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
            const module  = this.dataset.module;
            const title   = this.dataset.title;
            const newState = this.checked;

            // Armazena estado pendente
            pendingToggle = {
                checkbox: this,
                module: module,
                title: title,
                newState: newState
            };

            // Monta mensagem do modal
            if (newState) {
                modalBody.innerHTML =
                    '<strong>Ativar módulo?</strong><br>' +
                    'Você está prestes a <strong class="text-success">ativar</strong> o módulo ' +
                    '<strong>' + title + '</strong> (' + module + ').<br><br>' +
                    'O menu e as rotas serão restaurados imediatamente.';
                confirmBtn.className = 'btn btn-success fw-bold d-inline-flex align-items-center gap-1';
                getConfirmTextSpan().textContent = 'Sim, Ativar';
            } else {
                modalBody.innerHTML =
                    '<strong>Desativar módulo?</strong><br>' +
                    'Você está prestes a <strong class="text-danger">desativar</strong> o módulo ' +
                    '<strong>' + title + '</strong> (' + module + ').<br><br>' +
                    'Isso irá <strong>ocultar os menus</strong> no CMS e <strong>bloquear as rotas</strong> ' +
                    'deste módulo. Nenhuma configuração será perdida.';
                confirmBtn.className = 'btn btn-danger fw-bold d-inline-flex align-items-center gap-1';
                getConfirmTextSpan().textContent = 'Sim, Desativar';
            }

            modal.show();
        });
    });

    // Confirma toggle via AJAX
    confirmBtn.addEventListener('click', function () {
        if (!pendingToggle) {
            modal.hide();
            return;
        }

        const { checkbox, module, title, newState } = pendingToggle;

        // Desabilita botão durante requisição
        confirmBtn.disabled = true;
        confirmBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Salvando...';

        fetch('{{ route('v2.supportconfigs.modules.toggle') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                module_key: module,
                active: newState ? 1 : 0
            })
        })
        .then(function (response) {
            if (!response.ok) {
                return response.json().then(function (err) { throw err; });
            }
            return response.json();
        })
        .then(function (data) {
            if (data.success) {
                // Mantém checkbox no estado alterado
                checkbox.checked = newState;

                // Atualiza visual do card (classe bg-light)
                var card = checkbox.closest('.module-card');
                if (card) {
                    if (newState) {
                        card.classList.remove('bg-light');
                    } else {
                        card.classList.add('bg-light');
                    }
                }

                // Atualiza cor do ícone
                var iconBox = card ? card.querySelector('.module-icon') : null;
                if (iconBox) {
                    iconBox.style.background = newState
                        ? 'var(--cms-brand-primary, #3c8dbc)'
                        : '#e9ecef';
                }
            } else {
                // Reverte checkbox
                checkbox.checked = !newState;
                alert('Erro: ' + (data.message || 'Falha ao alterar módulo.'));
            }
        })
        .catch(function () {
            // Reverte checkbox em caso de erro
            checkbox.checked = !newState;
            alert('Erro de comunicação. Tente novamente.');
        })
        .finally(function () {
            confirmBtn.disabled = false;
            confirmBtn.innerHTML = '<i class="bi bi-check-lg"></i> <span id="confirmToggleBtnText">Confirmar</span>';
            modal.hide();
            pendingToggle = null;
        });
    });

    // Reverte checkbox se modal for fechado sem confirmar
    document.getElementById('toggleConfirmModal').addEventListener('hidden.bs.modal', function () {
        if (pendingToggle) {
            pendingToggle.checkbox.checked = !pendingToggle.newState;
            pendingToggle = null;
        }
        confirmBtn.disabled = false;
        confirmBtn.innerHTML = '<i class="bi bi-check-lg"></i> <span id="confirmToggleBtnText">Confirmar</span>';
    });
});
</script>
@endpush

@push('styles')
<style>
.module-card {
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.module-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}
.form-check-input:checked {
    background-color: var(--cms-brand-primary, #3c8dbc);
    border-color: var(--cms-brand-primary, #3c8dbc);
}
</style>
@endpush