{% extends "layouts/dashboard.twig" %}

{% block title %}{{ title }} - {{ platformName }}{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <h1 class="mt-4">{{ title }}</h1>
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item"><a href="/admin/dashboard">{{ __('dashboard.title') }}</a></li>
        <li class="breadcrumb-item"><a href="/admin/erp">{{ __('erp.title') }}</a></li>
        <li class="breadcrumb-item active">{{ title }}</li>
    </ol>

    {% include '@erp/admin/nav.twig' %}

    <div class="row">
        <div class="col-xl-3 col-md-4">
            <div class="card mb-4 sticky-top" style="top: 80px; z-index: 100;">
                <div class="card-header">
                    <i class="bi bi-list-ul me-1"></i>
                    Índice
                </div>
                <div class="list-group list-group-flush">
                    <a href="#introducao" class="list-group-item list-group-item-action">Introdução</a>
                    <a href="#visao-geral" class="list-group-item list-group-item-action">Visão Geral</a>
                    <a href="#modulos" class="list-group-item list-group-item-action">Módulos Integrados</a>
                    <a href="#faq" class="list-group-item list-group-item-action">Perguntas Frequentes</a>
                </div>
            </div>
        </div>
        
        <div class="col-xl-9 col-md-8">
            <!-- Introdução -->
            <div class="card mb-4" id="introducao">
                <div class="card-header bg-primary text-white">
                    <i class="bi bi-info-circle me-1"></i>
                    Introdução
                </div>
                <div class="card-body">
                    <p class="lead">Bem-vindo ao Manual Geral do ERP {{ platformName }}.</p>
                    <p>O ERP (Enterprise Resource Planning) é o núcleo de gestão empresarial do sistema, integrando diversos módulos para controle financeiro, comercial, produção e muito mais.</p>
                </div>
            </div>

            <!-- Visão Geral -->
            <div class="card mb-4" id="visao-geral">
                <div class="card-header">
                    <i class="bi bi-speedometer2 me-1"></i>
                    Visão Geral
                </div>
                <div class="card-body">
                    <p>O Dashboard principal do ERP oferece uma visão consolidada dos módulos ativos e atalhos rápidos para as principais funcionalidades.</p>
                    <p>A partir daqui, você pode navegar para áreas específicas como Vendas, Compras, Financeiro, RH, etc.</p>
                </div>
            </div>

            <!-- Módulos Integrados -->
            <div class="card mb-4" id="modulos">
                <div class="card-header">
                    <i class="bi bi-grid-3x3-gap me-1"></i>
                    Módulos Integrados
                </div>
                <div class="card-body">
                    <p>O ERP (Enterprise Resource Planning) é o núcleo de gestão empresarial do sistema {{ platformName }}, integrando diversos módulos para controle financeiro, comercial, produção e muito mais.</p>
                    <ul>
                        <li><strong>Vendas (Sales):</strong> Gestão de pedidos, orçamentos e clientes.</li>
                        <li><strong>Compras (Purchases):</strong> Controle de pedidos de compra e fornecedores.</li>
                        <li><strong>Financeiro:</strong> Contas a pagar/receber, fluxo de caixa e relatórios.</li>
                        <li><strong>Estoque (Stock):</strong> Controle de inventário e movimentações.</li>
                        <li><strong>Produção (PCP):</strong> Ordens de produção e controle de chão de fábrica.</li>
                        <li><strong>RH (HRM):</strong> Gestão de colaboradores e folha de pagamento.</li>
                    </ul>
                    <p>Cada módulo possui seu próprio manual específico, acessível através do botão "Manual" na barra de navegação de cada seção.</p>
                </div>
            </div>

            <!-- FAQ -->
            <div class="card mb-4" id="faq">
                <div class="card-header">
                    <i class="bi bi-question-circle me-1"></i>
                    Perguntas Frequentes
                </div>
                <div class="card-body">
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    Como ativar um novo módulo?
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    A ativação de módulos é feita na seção de Configurações do Sistema ou através do suporte técnico.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}