@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <div>
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Documentação do Sistema</h1>
        <p class="text-sm text-gray-600 dark:text-gray-400">Base de conhecimento completa para operação segura.</p>
    </div>

    <x-common.component-card title="Base de Conhecimento">
        <div class="flex flex-wrap gap-2">
            <button class="tab-btn rounded-lg border border-gray-200 px-3 py-2 text-sm font-medium text-gray-700" data-tab="admin">Manual Administrativo</button>
            <button class="tab-btn rounded-lg border border-gray-200 px-3 py-2 text-sm font-medium text-gray-700" data-tab="professor">Manual do Professor</button>
            <button class="tab-btn rounded-lg border border-gray-200 px-3 py-2 text-sm font-medium text-gray-700" data-tab="secretaria">Manual de Secretaria</button>
            <button class="tab-btn rounded-lg border border-gray-200 px-3 py-2 text-sm font-medium text-gray-700" data-tab="uat">Guia de Testes (UAT)</button>
        </div>

        <div class="mt-6 space-y-6">
            <div class="tab-content" data-content="admin">
                <h2 class="text-lg font-semibold text-gray-900">Manual Administrativo</h2>
                <p class="text-sm text-gray-600">Consulte o detalhamento completo nesta aba.</p>
            </div>

            <div class="tab-content hidden" data-content="professor">
                <h2 class="text-lg font-semibold text-gray-900">Manual do Professor</h2>
                <p class="text-sm text-gray-600">Consulte o detalhamento completo nesta aba.</p>
            </div>

            <div class="tab-content hidden" data-content="secretaria">
                <h2 class="text-lg font-semibold text-gray-900">Manual de Secretaria</h2>
                <p class="text-sm text-gray-600">Consulte o detalhamento completo nesta aba.</p>
            </div>

            <div class="tab-content hidden" data-content="uat">
                <h2 class="text-lg font-semibold text-gray-900">Guia de Testes (UAT)</h2>

                <div class="space-y-6 text-sm text-gray-700">
                    <section class="rounded-xl border border-gray-200 p-4">
                        <h3 class="text-base font-semibold text-gray-900">1) Configuração</h3>
                        <table class="min-w-full text-sm">
                            <thead class="text-left text-gray-500">
                                <tr>
                                    <th class="pb-3">Ação</th>
                                    <th class="pb-3">Dados de Teste Sugeridos</th>
                                    <th class="pb-3">Resultado Esperado</th>
                                    <th class="pb-3">Ponto de Atenção</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-700">
                                <tr class="border-t border-gray-100">
                                    <td class="py-3">Cadastrar Escola</td>
                                    <td class="py-3">Escola Municipal Central (EMC-001)</td>
                                    <td class="py-3">Escola disponível em turmas/matrículas</td>
                                    <td class="py-3">Sem escola não há turmas/matrículas</td>
                                </tr>
                                <tr class="border-t border-gray-100">
                                    <td class="py-3">Criar Regras de Avaliação</td>
                                    <td class="py-3">Bimestral Padrão, aritmética</td>
                                    <td class="py-3">Médias calculadas corretamente</td>
                                    <td class="py-3">Sem regra, médias inconsistentes</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>

                    <section class="rounded-xl border border-gray-200 p-4">
                        <h3 class="text-base font-semibold text-gray-900">2) Estrutura</h3>
                        <table class="min-w-full text-sm">
                            <thead class="text-left text-gray-500">
                                <tr>
                                    <th class="pb-3">Ação</th>
                                    <th class="pb-3">Dados de Teste Sugeridos</th>
                                    <th class="pb-3">Resultado Esperado</th>
                                    <th class="pb-3">Ponto de Atenção</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-700">
                                <tr class="border-t border-gray-100">
                                    <td class="py-3">Criar Turma</td>
                                    <td class="py-3">5º Ano A, turno manhã</td>
                                    <td class="py-3">Turma listada</td>
                                    <td class="py-3">Sem disciplina, boletim incompleto</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>

                    <section class="rounded-xl border border-gray-200 p-4">
                        <h3 class="text-base font-semibold text-gray-900">3) Secretaria</h3>
                        <table class="min-w-full text-sm">
                            <thead class="text-left text-gray-500">
                                <tr>
                                    <th class="pb-3">Ação</th>
                                    <th class="pb-3">Dados de Teste Sugeridos</th>
                                    <th class="pb-3">Resultado Esperado</th>
                                    <th class="pb-3">Ponto de Atenção</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-700">
                                <tr class="border-t border-gray-100">
                                    <td class="py-3">Realizar Matrícula</td>
                                    <td class="py-3">Aluno Maria Souza, status ativa</td>
                                    <td class="py-3">Aluno aparece na turma</td>
                                    <td class="py-3">Sem turma, diário/boletim não funcionam</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>

                    <section class="rounded-xl border border-gray-200 p-4">
                        <h3 class="text-base font-semibold text-gray-900">4) Professor</h3>
                        <table class="min-w-full text-sm">
                            <thead class="text-left text-gray-500">
                                <tr>
                                    <th class="pb-3">Ação</th>
                                    <th class="pb-3">Dados de Teste Sugeridos</th>
                                    <th class="pb-3">Resultado Esperado</th>
                                    <th class="pb-3">Ponto de Atenção</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-700">
                                <tr class="border-t border-gray-100">
                                    <td class="py-3">Lançar Avaliação</td>
                                    <td class="py-3">Prova 1, nota 8/10</td>
                                    <td class="py-3">Avaliação no boletim</td>
                                    <td class="py-3">Sem avaliação, média zerada</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>

                    <section class="rounded-xl border border-gray-200 p-4">
                        <h3 class="text-base font-semibold text-gray-900">5) Encerramento</h3>
                        <table class="min-w-full text-sm">
                            <thead class="text-left text-gray-500">
                                <tr>
                                    <th class="pb-3">Ação</th>
                                    <th class="pb-3">Dados de Teste Sugeridos</th>
                                    <th class="pb-3">Resultado Esperado</th>
                                    <th class="pb-3">Ponto de Atenção</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-700">
                                <tr class="border-t border-gray-100">
                                    <td class="py-3">Executar Snapshot</td>
                                    <td class="py-3">Fechamento anual 2026</td>
                                    <td class="py-3">Histórico consolidado</td>
                                    <td class="py-3">Pendências bloqueiam fechamento</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>

                    <section class="rounded-xl border border-gray-200 p-4">
                        <h3 class="text-base font-semibold text-gray-900">6) Transporte Escolar</h3>
                        <table class="min-w-full text-sm">
                            <thead class="text-left text-gray-500">
                                <tr>
                                    <th class="pb-3">Ação</th>
                                    <th class="pb-3">Dados de Teste Sugeridos</th>
                                    <th class="pb-3">Resultado Esperado</th>
                                    <th class="pb-3">Ponto de Atenção</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-700">
                                <tr class="border-t border-gray-100">
                                    <td class="py-3">Cadastrar Rota</td>
                                    <td class="py-3">Rota Centro; veículo ABC1D23</td>
                                    <td class="py-3">Rota listada</td>
                                    <td class="py-3">Sem rota, não vincula aluno</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>

                    <section class="rounded-xl border border-gray-200 p-4">
                        <h3 class="text-base font-semibold text-gray-900">7) Merenda/Alimentação</h3>
                        <table class="min-w-full text-sm">
                            <thead class="text-left text-gray-500">
                                <tr>
                                    <th class="pb-3">Ação</th>
                                    <th class="pb-3">Dados de Teste Sugeridos</th>
                                    <th class="pb-3">Resultado Esperado</th>
                                    <th class="pb-3">Ponto de Atenção</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-700">
                                <tr class="border-t border-gray-100">
                                    <td class="py-3">Cadastrar Cardápio</td>
                                    <td class="py-3">Cardápio Semanal</td>
                                    <td class="py-3">Cardápio listado</td>
                                    <td class="py-3">Sem cardápio, módulo vazio</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>

                    <section class="rounded-xl border border-gray-200 p-4">
                        <h3 class="text-base font-semibold text-gray-900">8) Biblioteca</h3>
                        <table class="min-w-full text-sm">
                            <thead class="text-left text-gray-500">
                                <tr>
                                    <th class="pb-3">Ação</th>
                                    <th class="pb-3">Dados de Teste Sugeridos</th>
                                    <th class="pb-3">Resultado Esperado</th>
                                    <th class="pb-3">Ponto de Atenção</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-700">
                                <tr class="border-t border-gray-100">
                                    <td class="py-3">Cadastrar Livro</td>
                                    <td class="py-3">Livro Exemplo; 10 unid.</td>
                                    <td class="py-3">Livro listado</td>
                                    <td class="py-3">Sem livro, empréstimo falha</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>

                    <section class="rounded-xl border border-gray-200 p-4">
                        <h3 class="text-base font-semibold text-gray-900">9) Almoxarifado</h3>
                        <table class="min-w-full text-sm">
                            <thead class="text-left text-gray-500">
                                <tr>
                                    <th class="pb-3">Ação</th>
                                    <th class="pb-3">Dados de Teste Sugeridos</th>
                                    <th class="pb-3">Resultado Esperado</th>
                                    <th class="pb-3">Ponto de Atenção</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-700">
                                <tr class="border-t border-gray-100">
                                    <td class="py-3">Cadastrar Item</td>
                                    <td class="py-3">Papel A4; mínimo 20</td>
                                    <td class="py-3">Item listado</td>
                                    <td class="py-3">Sem item, movimentação falha</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>

                    <section class="rounded-xl border border-gray-200 p-4">
                        <h3 class="text-base font-semibold text-gray-900">10) RH e Afastamentos</h3>
                        <table class="min-w-full text-sm">
                            <thead class="text-left text-gray-500">
                                <tr>
                                    <th class="pb-3">Ação</th>
                                    <th class="pb-3">Dados de Teste Sugeridos</th>
                                    <th class="pb-3">Resultado Esperado</th>
                                    <th class="pb-3">Ponto de Atenção</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-700">
                                <tr class="border-t border-gray-100">
                                    <td class="py-3">Cadastrar Servidor</td>
                                    <td class="py-3">Ana Lima; cargo Secretaria</td>
                                    <td class="py-3">Servidor listado</td>
                                    <td class="py-3">Sem servidor, relatórios vazios</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>

                    <section class="rounded-xl border border-gray-200 p-4">
                        <h3 class="text-base font-semibold text-gray-900">11) Relatórios e Auditoria</h3>
                        <table class="min-w-full text-sm">
                            <thead class="text-left text-gray-500">
                                <tr>
                                    <th class="pb-3">Ação</th>
                                    <th class="pb-3">Dados de Teste Sugeridos</th>
                                    <th class="pb-3">Resultado Esperado</th>
                                    <th class="pb-3">Ponto de Atenção</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-700">
                                <tr class="border-t border-gray-100">
                                    <td class="py-3">Relatório de Alunos</td>
                                    <td class="py-3">Ano 2026</td>
                                    <td class="py-3">Lista correta</td>
                                    <td class="py-3">Sem dados, relatório vazio</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>

                    <section class="rounded-xl border border-gray-200 p-4">
                        <h3 class="text-base font-semibold text-gray-900">12) Portal do Aluno/Responsável</h3>
                        <table class="min-w-full text-sm">
                            <thead class="text-left text-gray-500">
                                <tr>
                                    <th class="pb-3">Ação</th>
                                    <th class="pb-3">Dados de Teste Sugeridos</th>
                                    <th class="pb-3">Resultado Esperado</th>
                                    <th class="pb-3">Ponto de Atenção</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-700">
                                <tr class="border-t border-gray-100">
                                    <td class="py-3">Acesso ao Portal</td>
                                    <td class="py-3">Email e senha válidos</td>
                                    <td class="py-3">Dashboard carrega</td>
                                    <td class="py-3">Sem vínculo, portal vazio</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>

                    <section class="rounded-xl border border-gray-200 p-4">
                        <h3 class="text-base font-semibold text-gray-900">13) LMS (Ensino Digital)</h3>
                        <table class="min-w-full text-sm">
                            <thead class="text-left text-gray-500">
                                <tr>
                                    <th class="pb-3">Ação</th>
                                    <th class="pb-3">Dados de Teste Sugeridos</th>
                                    <th class="pb-3">Resultado Esperado</th>
                                    <th class="pb-3">Ponto de Atenção</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-700">
                                <tr class="border-t border-gray-100">
                                    <td class="py-3">Criar Aula Live</td>
                                    <td class="py-3">Tipo live; Jitsi</td>
                                    <td class="py-3">Aula listada com status live</td>
                                    <td class="py-3">Sem starts_at, status incorreto</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>

                    <section class="rounded-xl border border-gray-200 p-4">
                        <h3 class="text-base font-semibold text-gray-900">14) Educacenso/INEP</h3>
                        <table class="min-w-full text-sm">
                            <thead class="text-left text-gray-500">
                                <tr>
                                    <th class="pb-3">Ação</th>
                                    <th class="pb-3">Dados de Teste Sugeridos</th>
                                    <th class="pb-3">Resultado Esperado</th>
                                    <th class="pb-3">Ponto de Atenção</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-700">
                                <tr class="border-t border-gray-100">
                                    <td class="py-3">Exportar TXT</td>
                                    <td class="py-3">Ano 2026</td>
                                    <td class="py-3">Arquivo oficial gerado</td>
                                    <td class="py-3">Pendências geram erro</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>
                </div>
            </div>
        </div>
    </x-common.component-card>
</div>

<script>
    const buttons = document.querySelectorAll('.tab-btn');
    const contents = document.querySelectorAll('.tab-content');
    function activateTab(name) {
        contents.forEach(content => {
            content.classList.toggle('hidden', content.dataset.content !== name);
        });
        buttons.forEach(btn => {
            const active = btn.dataset.tab === name;
            btn.classList.toggle('bg-brand-500', active);
            btn.classList.toggle('text-white', active);
        });
    }
    buttons.forEach(btn => btn.addEventListener('click', () => activateTab(btn.dataset.tab)));
    activateTab('admin');
</script>
@endsection