{% extends "cliente/base.php" %}
{% block body %}

<div class="content-wrapper bg-light">
    <div class="container-full">

        <!-- Content Header (Page header) -->
        <div class="content-header">

        </div>

        <!-- Main content -->
        <section class="content">
            <div class="row justify-content-center">
                <div class="col-lg-3 col-md-4 col-12" style="min-width: 305px;">
                    <div class="box">
                        <div class="box-header bg-purple text-center">
                            <h4 class="fw-bolder">Como Podemos Ajudar?</h4>
                        </div>
                        <!-- Menu itens ajuda -->
                        <div class="box-body">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="pt-3 text-start">
                                        <ul class="nav flex-column" id="helpMenu">
                                            <li class="nav-item">
                                                <a href="javascript:void(0)" class="nav-link menu-item" data-target="dashboard">
                                                    <i class="fa-solid fa-gauge-simple-high me-2"></i>Dashboard
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#relatoriosMenu" role="button" aria-expanded="false">
                                                    <i class="fa-solid fa-chart-line me-2"></i>Relatórios
                                                </a>
                                                <div class="collapse" id="relatoriosMenu">
                                                    <ul class="list-unstyled ps-3">
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="relatorio_atendente"><i class="ti-more me-2"></i>Atendentes</a></li>
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="relatorio_api"><i class="ti-more me-2"></i>API</a></li>
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="relatorio_transmissoes"><i class="ti-more me-2"></i>Transmissões</a></li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#contatosMenu" role="button" aria-expanded="false">
                                                    <i class="fa-solid fa-address-book me-2"></i>Contatos
                                                </a>
                                                <div class="collapse" id="contatosMenu">
                                                    <ul class="list-unstyled ps-3">
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="ver_contatos"><i class="ti-more me-2"></i> Ver Contatos</a></li>
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="contatos_grupos"><i class="ti-more me-2"></i> Grupos</a></li>
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="contatos_transmissao"><i class="ti-more me-2"></i> Transmissões</a></li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#funilMenu" role="button" aria-expanded="false">
                                                    <i class="fa-solid fa-filter me-2"></i>Funil de Atendimento
                                                </a>
                                                <div class="collapse" id="funilMenu">
                                                    <ul class="list-unstyled ps-3">
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="meus_funis"><i class="ti-more me-2"></i> Meus Funis</a></li>
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="calendario_funil"><i class="ti-more me-2"></i> Calendário</a></li>
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="historico_funil"><i class="ti-more me-2"></i> Histórico</a></li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="nav-item">
                                                <a href="javascript:void(0)" class="nav-link menu-item" data-target="agendamentos">
                                                    <i class="fa-solid fa-clock me-2"></i>Agendamentos
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#chatbotMenu" role="button" aria-expanded="false">
                                                    <i class="fa-solid fa-robot me-2"></i>ChatBot
                                                </a>
                                                <div class="collapse" id="chatbotMenu">
                                                    <ul class="list-unstyled ps-3">
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="criando_resposta"><i class="ti-more me-2"></i> Criando uma Resposta</a></li>
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="criando_acao"><i class="ti-more me-2"></i> Criando uma Ação</a></li>
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="criando_condicoes"><i class="ti-more me-2"></i> Criando Condições</a></li>
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="criando_requisicao"><i class="ti-more me-2"></i> Criando uma Requisição</a></li>
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="testes_producao"><i class="ti-more me-2"></i> Teste e Produção</a></li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#conversasMenu" role="button" aria-expanded="false">
                                                    <i class="fa-solid fa-comments me-2"></i>Conversas
                                                </a>
                                                <div class="collapse" id="conversasMenu">
                                                    <ul class="list-unstyled ps-3">
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="ver_conversas"><i class="ti-more me-2"></i> Ver Conversas</a></li>
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="conversas_tags"><i class="ti-more me-2"></i> Tags</a></li>
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="conversas_preferencias"><i class="ti-more me-2"></i> Preferências</a></li>
                                                    </ul>
                                                </div>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#chatMenu" role="button" aria-expanded="false">
                                                    <i class="fa-solid fa-comment-dots me-2"></i>Chat
                                                </a>
                                                <div class="collapse" id="chatMenu">
                                                    <ul class="list-unstyled ps-3">
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="informacoes_chat"><i class="ti-more me-2"></i> Chat</a></li>
                                                        <li><a href="javascript:void(0)" class="nav-link menu-item" data-target="listagem_grupos"><i class="ti-more me-2"></i> Listagem de Grupos</a></li>
                                                    </ul>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- Menu itens ajuda -->
                    </div>
                </div>
                <div class="col-lg-8 col-md-9 col-12">
                    <!-- Carregar os componentes de ajuda -->
                    <div id="main-content" class="box listagem-de-grupos text-start">
                        <div id="main-title" class="box-header">
                            <h4 class="fw-bold"><i class="fa-solid fa-ticket"></i> Encontre aqui passos detalhados para resolver suas dúvidas.</h4>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    </section>
    <!-- /.content -->
</div>
</div>

{% endblock %}
{% block scripts %}
<style>
    .img-tamanho {
        max-width: 330px;
        width: 100%;
    }

    .listagem-de-grupos .box-body {
        max-height: 70vh;
        overflow-y: auto;
    }

    .box-body {
        color: #646464;
    }

    .card-title {
        color: #475f7b;
    }

    .box .flex-column>li {
        border-bottom: none;
        margin: 0;
    }

    .nav-item a:hover,
    .nav-item a:active,
    .nav-item a:link {
        color: #585EA8 !important;
        font-weight: bold;
        font-size: 16px !important;
        border-radius: 10px !important;
    }

    .theme-primary .nav>li>a:hover,
    .theme-primary .nav>li>a:active,
    .theme-primary .nav>li>a:focus {
        color: #fff !important;
        background: #60b86c !important;
        border-radius: 10px !important;
    }

    .theme-primary a:hover,
    .theme-primary a:active,
    .theme-primary a:focus {
        color: #fff !important;
        background: #60b86c !important;
        border-radius: 10px !important;
    }

    a {
        color: #585EA8 !important;
    }

    @media (max-width: 768px) {
		.fixed .content-wrapper {
	    	margin-top: 75px!important;
		}
	}
	
	.fixed .content-wrapper {
	    margin-top: 0px;
	}
</style>

<script>
    $(document).ready(function() {
        $('body').addClass('sidebar-collapse');

        $('.menu-item').on('click', function() {
            var target = $(this).data('target');
            var url = './src/Views/cliente/componentes_ajuda/' + target + '.html';

            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Resposta não funcionou');
                    }
                    return response.text();
                })
                .then(data => {
                    $('#main-content').html(data);
                })
                .catch(error => {
                    $('#main-content').html('<p>Erro ao carregar o conteúdo.</p>');
                });
        });

        $('*[data-target="dashboard"]').trigger('click')
    });
</script>
{% endblock %}