<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API JSM - Documentação</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#eff6ff',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                        }
                    }
                }
            }
        }
    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>

<body class="bg-gray-50">
    <!-- Header -->
    <header class="bg-white shadow-sm border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <h1 class="text-2xl font-bold text-gray-900">API JSM - INGASOFT</h1>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        v1.0
                    </span>
                </div>
            </div>
        </div>
    </header>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="lg:grid lg:grid-cols-4 lg:gap-8">
            <!-- Sidebar -->
            <div class="lg:col-span-1">
                <nav class="sticky top-8">
                    <div class="bg-white rounded-lg shadow p-6">
                        <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4">Navegação</h3>
                        <ul class="space-y-2">
                            <li><a href="#introducao" class="text-gray-600 hover:text-primary-600 block py-1">Introdução</a></li>
                            <li><a href="#autenticacao" class="text-gray-600 hover:text-primary-600 block py-1">Autenticação</a></li>
                            <li><a href="#endpoints" class="text-gray-600 hover:text-primary-600 block py-1">Endpoints</a></li>
                            <li class="ml-4">
                                <ul class="space-y-1">
                                    <li><a href="#vendas" class="text-sm text-gray-500 hover:text-primary-600 block py-1">Vendas</a></li>
                                    <li><a href="#produtos" class="text-sm text-gray-500 hover:text-primary-600 block py-1">Produtos</a></li>
                                    <li><a href="#produto-especifico" class="text-sm text-gray-500 hover:text-primary-600 block py-1">Produto Específico</a></li>
                                    <li><a href="#produtos-unidade" class="text-sm text-gray-500 hover:text-primary-600 block py-1">Por Unidade</a></li>
                                    <li><a href="#unidades-medida" class="text-sm text-gray-500 hover:text-primary-600 block py-1">Unidades de Medida</a></li>
                                </ul>
                            </li>
                            <li><a href="#response-format" class="text-gray-600 hover:text-primary-600 block py-1">Formato de Resposta</a></li>
                            <li><a href="#examples" class="text-gray-600 hover:text-primary-600 block py-1">Exemplos</a></li>
                            <li><a href="#error-handling" class="text-gray-600 hover:text-primary-600 block py-1">Tratamento de Erros</a></li>
                        </ul>
                    </div>
                </nav>
            </div>

            <!-- Main content -->
            <div class="lg:col-span-3 mt-8 lg:mt-0">
                <!-- Introdução -->
                <section id="introducao" class="mb-12">
                    <div class="bg-white rounded-lg shadow p-8">
                        <h2 class="text-3xl font-bold text-gray-900 mb-4">Documentação da API JSM</h2>
                        <p class="text-lg text-gray-600 mb-6">
                            Bem-vindo à documentação da API JSM IngaSoft. Esta API permite acesso em tempo real aos dados de vendas e produtos do sistema, fornecendo informações detalhadas sobre transações, clientes, vendedores e produtos.
                        </p>
                        <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-info-circle text-blue-400"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-blue-700">
                                        <strong>Base URL:</strong> <code class="bg-white px-2 py-1 rounded">http://apijsm.eletroluz.net/api/jsm</code>
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div class="bg-gradient-to-r from-green-50 to-green-100 p-4 rounded-lg">
                                <div class="flex items-center">
                                    <i class="fas fa-chart-line text-green-600 text-2xl mr-3"></i>
                                    <div>
                                        <h4 class="font-semibold text-green-800">Vendas em Tempo Real</h4>
                                        <p class="text-sm text-green-600">Acesse dados atualizados de vendas</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-gradient-to-r from-blue-50 to-blue-100 p-4 rounded-lg">
                                <div class="flex items-center">
                                    <i class="fas fa-box text-blue-600 text-2xl mr-3"></i>
                                    <div>
                                        <h4 class="font-semibold text-blue-800">Catálogo Completo</h4>
                                        <p class="text-sm text-blue-600">Consulte produtos e especificações</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-gradient-to-r from-purple-50 to-purple-100 p-4 rounded-lg">
                                <div class="flex items-center">
                                    <i class="fas fa-filter text-purple-600 text-2xl mr-3"></i>
                                    <div>
                                        <h4 class="font-semibold text-purple-800">Filtros Avançados</h4>
                                        <p class="text-sm text-purple-600">Filtre por data, categoria e mais</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tabela de Unidades -->
                        <div class="mt-8">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                                <i class="fas fa-building text-blue-500 mr-2"></i>
                                Unidades da Empresa
                            </h3>
                            <div class="bg-white border border-gray-200 rounded-lg overflow-hidden shadow">
                                <?php
                                // Fonte única de dados para as unidades (fácil de editar)
                                $unidades = [
                                    ['codigo' => 1, 'nome' => 'MATRIZ - MARINGA'],
                                    // ['codigo' => 6, 'nome' => 'FILIAL - SARANDI'],
                                    /*['codigo' => 7, 'nome' => 'FILIAL - CIANORTE'],
                                    ['codigo' => 8, 'nome' => 'FILIAL - CAMPO MOURAO'],
                                    ['codigo' => 9, 'nome' => 'FILIAL - UMUARAMA'],
                                    ['codigo' => 12, 'nome' => 'DEPOSITO'],
                                    ['codigo' => 13, 'nome' => 'FILIAL - APUCARANA'],
                                    ['codigo' => 15, 'nome' => 'CENTRO DISTRIBUIÇÃO - CD'],
                                    ['codigo' => 17, 'nome' => 'EXCELEDS'],
                                    ['codigo' => 19, 'nome' => 'FOCO - CD'],*/
                                    ['codigo' => 20, 'nome' => 'FILIAL - LONDRINA'],
                                    /*['codigo' => 21, 'nome' => 'FILIAL - MARINGÁ 02'],
                                    ['codigo' => 24, 'nome' => 'EXPRESS - 5 CONJUNTOS'],
                                    ['codigo' => 25, 'nome' => 'ELETROLUZ - INTERNO'],
                                    ['codigo' => 26, 'nome' => 'FILIAL - PONTA GROSSA'],
                                    ['codigo' => 27, 'nome' => 'FILIAL - PRESIDENTE PRUDENTE'],
                                    ['codigo' => 28, 'nome' => 'EXCELEDS - DEPOSITO'],
                                    ['codigo' => 29, 'nome' => 'FOCO - PRES PRUDENTE'],
                                    ['codigo' => 30, 'nome' => 'JUNCAO - CD + FOCO'],*/
                                ];

                                // Cálculo dinâmico do resumo
                                $matrizes = 0;
                                foreach ($unidades as $u) {
                                    if ((int)$u['codigo'] === 1) {
                                        $matrizes++;
                                    }
                                }
                                $filiais = count($unidades) - $matrizes;
                                ?>
                                <div class="overflow-x-auto">
                                    <table class="min-w-full divide-y divide-gray-200">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                    Código
                                                </th>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                    Nome Fantasia
                                                </th>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                    Tipo
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-200">
                                            <?php foreach ($unidades as $u):
                                                $isMatriz = ((int)$u['codigo'] === 1);
                                                $badgeClass = $isMatriz ? 'bg-blue-100 text-blue-800' : 'bg-yellow-100 text-yellow-800';
                                                $tipoLabel = $isMatriz ? 'Matriz' : 'Filial';
                                            ?>
                                                <tr class="hover:bg-gray-50">
                                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                                        <?= htmlspecialchars((string)$u['codigo'], ENT_QUOTES, 'UTF-8') ?>
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                                                        <?= htmlspecialchars((string)$u['nome'], ENT_QUOTES, 'UTF-8') ?>
                                                    </td>
                                                    <td class="px-6 py-4 whitespace-nowrap">
                                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium <?= $badgeClass ?>">
                                                            <?= $tipoLabel ?>
                                                        </span>
                                                    </td>
                                                </tr>
                                            <?php endforeach; ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <!-- Resumo estatístico -->
                            <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 text-center">
                                    <div class="text-2xl font-bold text-blue-600"><?= $matrizes ?></div>
                                    <div class="text-sm text-blue-800">Matriz</div>
                                </div>
                                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-center">
                                    <div class="text-2xl font-bold text-yellow-600"><?= $filiais ?></div>
                                    <div class="text-sm text-yellow-800">Filiais</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Autenticação -->
                <section id="autenticacao" class="mb-12">
                    <div class="bg-white rounded-lg shadow p-8">
                        <h2 class="text-2xl font-bold text-gray-900 mb-6">
                            <i class="fas fa-key text-primary-500 mr-2"></i>
                            Autenticação
                        </h2>
                        <p class="text-gray-600 mb-4">
                            A API utiliza autenticação por token. Todas as requisições devem incluir o token de autenticação no header da requisição.
                        </p>

                        <div class="bg-gray-800 rounded-lg p-4 mb-4">
                            <h4 class="text-white font-semibold mb-2">Header obrigatório:</h4>
                            <code class="text-green-400">ApiToken: TOKEN</code>
                        </div>

                        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-exclamation-triangle text-yellow-400"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-yellow-700">
                                        <strong>Importante:</strong> Mantenha seu token seguro e não o compartilhe publicamente. Em caso de comprometimento, entre em contato para renovação.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Endpoints -->
                <section id="endpoints" class="mb-12">
                    <h2 class="text-2xl font-bold text-gray-900 mb-8">
                        <i class="fas fa-plug text-primary-500 mr-2"></i>
                        Endpoints
                    </h2>

                    <!-- Vendas -->
                    <div id="vendas" class="bg-white rounded-lg shadow p-8 mb-8">
                        <div class="flex items-center mb-4">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 mr-3">
                                GET
                            </span>
                            <h3 class="text-xl font-bold text-gray-900">Retornar Vendas</h3>
                        </div>

                        <p class="text-gray-600 mb-4">Retorna uma lista paginada de vendas ordenadas pelas mais recentes. Cada venda inclui informações detalhadas sobre o produto, cliente, vendedor e transação.</p>

                        <div class="bg-gray-800 rounded-lg p-4 mb-4">
                            <code class="text-white">GET /vendas?page={page}&pageSize={pageSize}&date={date}&dateStart={dateStart}&dateEnd={dateEnd}&empresa={empresa}&tipo_pedido={tipo_pedido}</code>
                        </div>

                        <h4 class="font-semibold text-gray-900 mb-3">Parâmetros:</h4>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Parâmetro</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Obrigatório</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Descrição</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">page</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">integer</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sim</td>
                                        <td class="px-6 py-4 text-sm text-gray-500">Número da página desejada (inicia em 1)</td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">pageSize</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">integer</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sim</td>
                                        <td class="px-6 py-4 text-sm text-gray-500">Quantidade de itens por página (mín: 5, máx: 100)</td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">date</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Não</td>
                                        <td class="px-6 py-4 text-sm text-gray-500">Filtrar vendas por data específica (formato: YYYY-MM-DD)</td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">dateStart</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Não</td>
                                        <td class="px-6 py-4 text-sm text-gray-500">Data inicial do período (YYYY-MM-DD)</td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">dateEnd</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Não</td>
                                        <td class="px-6 py-4 text-sm text-gray-500">Data final do período (YYYY-MM-DD)</td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">empresa</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">integer</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Não</td>
                                        <td class="px-6 py-4 text-sm text-gray-500">Código da empresa/unidade (ex: 20)</td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">tipo_pedido</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Não</td>
                                        <td class="px-6 py-4 text-sm text-gray-500">
                                            Filtrar por tipo do pedido:<br>
                                            • <code class="bg-gray-100 px-1 rounded text-xs">"pedido"</code> - Vendas finalizadas (com data de fechamento)<br>
                                            • <code class="bg-gray-100 px-1 rounded text-xs">"orcamento"</code> - Orçamentos/vendas não finalizadas
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <h4 class="font-semibold text-gray-900 mt-6 mb-3">Exemplo de Requisição:</h4>
                        <div class="bg-gray-800 rounded-lg p-4 mb-4">
                            <code class="text-green-400">http://apijsm.eletroluz.net/api/jsm/vendas?page=1&pageSize=50&date=2025-07-15&dateStart=2025-07-15&dateEnd=2025-07-16&empresa=20</code>
                        </div>

                        <h4 class="font-semibold text-gray-900 mt-6 mb-3">Estrutura da Resposta:</h4>
                        <div class="bg-gray-50 rounded-lg p-4 mb-4">
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 text-sm">
                                <div class="bg-white p-3 rounded border">
                                    <h5 class="font-semibold text-gray-700 mb-1">Paginação</h5>
                                    <p class="text-gray-600">page, pageSize, total</p>
                                </div>
                                <div class="bg-white p-3 rounded border">
                                    <h5 class="font-semibold text-gray-700 mb-1">Transação</h5>
                                    <p class="text-gray-600">number_identifier, purchase_date, total_price</p>
                                </div>
                                <div class="bg-white p-3 rounded border">
                                    <h5 class="font-semibold text-gray-700 mb-1">Vendedor/Cliente</h5>
                                    <p class="text-gray-600">seller_identifier, customer_identifier</p>
                                </div>
                                <div class="bg-white p-3 rounded border">
                                    <h5 class="font-semibold text-gray-700 mb-1">Produto</h5>
                                    <p class="text-gray-600">sku, description, category, quantity</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Produtos -->
                    <div id="produtos" class="bg-white rounded-lg shadow p-8 mb-8">
                        <div class="flex items-center mb-4">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 mr-3">
                                GET
                            </span>
                            <h3 class="text-xl font-bold text-gray-900">Retornar Todos os Produtos</h3>
                        </div>

                        <p class="text-gray-600 mb-4">Retorna uma lista completa com todos os produtos disponíveis no catálogo, incluindo informações como SKU, EAN, descrição, categoria e fornecedor.</p>

                        <div class="bg-gray-800 rounded-lg p-4 mb-4">
                            <code class="text-white">GET /produtos?empresa={empresa}</code>
                        </div>

                        <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-info-circle text-blue-400"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-blue-700">
                                        <strong>Nota:</strong> Este endpoint retorna todos os produtos de uma vez. Para grandes volumes de dados, considere usar filtros específicos.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <h4 class="font-semibold text-gray-900 mb-3">Parâmetros:</h4>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Parâmetro</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Obrigatório</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Descrição</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">empresa</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">integer</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Não</td>
                                        <td class="px-6 py-4 text-sm text-gray-500">Código da empresa/unidade para filtrar produtos (ex: 20)</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <h4 class="font-semibold text-gray-900 mt-6 mb-3">Exemplos:</h4>
                        <div class="space-y-2">
                            <div class="bg-gray-800 rounded-lg p-4">
                                <code class="text-green-400">http://apijsm.eletroluz.net/api/jsm/produtos</code>
                                <span class="text-gray-400 ml-2"># Todos os produtos</span>
                            </div>
                            <div class="bg-gray-800 rounded-lg p-4">
                                <code class="text-green-400">http://apijsm.eletroluz.net/api/jsm/produtos?empresa=20</code>
                                <span class="text-gray-400 ml-2"># Produtos da empresa 20</span>
                            </div>
                        </div>
                    </div>

                    <!-- Produto Específico -->
                    <div id="produto-especifico" class="bg-white rounded-lg shadow p-8 mb-8">
                        <div class="flex items-center mb-4">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 mr-3">
                                GET
                            </span>
                            <h3 class="text-xl font-bold text-gray-900">Retornar Produto Específico</h3>
                        </div>

                        <p class="text-gray-600 mb-4">Retorna informações detalhadas de um produto específico, filtrado pelo SKU. Ideal para consultas de produtos individuais.</p>

                        <div class="bg-gray-800 rounded-lg p-4 mb-4">
                            <code class="text-white">GET /produtos/{sku}?empresa={empresa}</code>
                        </div>

                        <h4 class="font-semibold text-gray-900 mb-3">Parâmetros:</h4>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Parâmetro</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Obrigatório</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Descrição</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">sku</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sim</td>
                                        <td class="px-6 py-4 text-sm text-gray-500">SKU do produto (ex: "206859", "85064")</td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">empresa</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">integer</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Não</td>
                                        <td class="px-6 py-4 text-sm text-gray-500">Código da empresa/unidade (ex: 20)</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <h4 class="font-semibold text-gray-900 mt-6 mb-3">Exemplos:</h4>
                        <div class="space-y-2">
                            <div class="bg-gray-800 rounded-lg p-4">
                                <code class="text-green-400">http://apijsm.eletroluz.net/api/jsm/produtos/206859</code>
                                <span class="text-gray-400 ml-2"># Chuveiro Zagonel</span>
                            </div>
                            <div class="bg-gray-800 rounded-lg p-4">
                                <code class="text-green-400">http://apijsm.eletroluz.net/api/jsm/produtos/85064</code>
                                <span class="text-gray-400 ml-2"># Cabo de Informática</span>
                            </div>
                            <div class="bg-gray-800 rounded-lg p-4">
                                <code class="text-green-400">http://apijsm.eletroluz.net/api/jsm/produtos/206859?empresa=20</code>
                                <span class="text-gray-400 ml-2"># Chuveiro Zagonel da empresa 20</span>
                            </div>
                        </div>
                    </div>

                    <!-- Produtos por Unidade -->
                    <div id="produtos-unidade" class="bg-white rounded-lg shadow p-8 mb-8">
                        <div class="flex items-center mb-4">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 mr-3">
                                GET
                            </span>
                            <h3 class="text-xl font-bold text-gray-900">Retornar Produtos por Unidade de Medida</h3>
                        </div>

                        <p class="text-gray-600 mb-4">Retorna uma lista de produtos filtrados pela unidade de medida especificada. Útil para categorizar produtos por tipo de medição.</p>

                        <div class="bg-gray-800 rounded-lg p-4 mb-4">
                            <code class="text-white">GET /produtos/measureUnit/{unit}?empresa={empresa}</code>
                        </div>

                        <h4 class="font-semibold text-gray-900 mb-3">Parâmetros:</h4>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Parâmetro</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Obrigatório</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Descrição</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">unit</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sim</td>
                                        <td class="px-6 py-4 text-sm text-gray-500">Unidade de medida (PC, M, UN, etc.)</td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">empresa</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">integer</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Não</td>
                                        <td class="px-6 py-4 text-sm text-gray-500">Código da empresa/unidade (ex: 20)</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <h4 class="font-semibold text-gray-900 mb-3">Unidades Comuns:</h4>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
                            <div class="bg-gray-50 p-3 rounded text-center">
                                <code class="font-semibold">PC</code>
                                <p class="text-xs text-gray-600 mt-1">Peças</p>
                            </div>
                            <div class="bg-gray-50 p-3 rounded text-center">
                                <code class="font-semibold">M</code>
                                <p class="text-xs text-gray-600 mt-1">Metros</p>
                            </div>
                            <div class="bg-gray-50 p-3 rounded text-center">
                                <code class="font-semibold">UN</code>
                                <p class="text-xs text-gray-600 mt-1">Unidades</p>
                            </div>
                            <div class="bg-gray-50 p-3 rounded text-center">
                                <code class="font-semibold">KG</code>
                                <p class="text-xs text-gray-600 mt-1">Quilogramas</p>
                            </div>
                        </div>

                        <h4 class="font-semibold text-gray-900 mt-6 mb-3">Exemplos:</h4>
                        <div class="space-y-2">
                            <div class="bg-gray-800 rounded-lg p-4">
                                <code class="text-green-400">http://apijsm.eletroluz.net/api/jsm/produtos/measureUnit/PC</code>
                                <span class="text-gray-400 ml-2"># Produtos vendidos por peça</span>
                            </div>
                            <div class="bg-gray-800 rounded-lg p-4">
                                <code class="text-green-400">http://apijsm.eletroluz.net/api/jsm/produtos/measureUnit/M</code>
                                <span class="text-gray-400 ml-2"># Produtos vendidos por metro</span>
                            </div>
                            <div class="bg-gray-800 rounded-lg p-4">
                                <code class="text-green-400">http://apijsm.eletroluz.net/api/jsm/produtos/measureUnit/PC?empresa=20</code>
                                <span class="text-gray-400 ml-2"># Produtos por peça da empresa 20</span>
                            </div>
                        </div>
                    </div>

                    <!-- Unidades de Medida -->
                    <div id="unidades-medida" class="bg-white rounded-lg shadow p-8 mb-8">
                        <div class="flex items-center mb-4">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 mr-3">
                                GET
                            </span>
                            <h3 class="text-xl font-bold text-gray-900">Consultar Unidades de Medida</h3>
                        </div>

                        <p class="text-gray-600 mb-4">Retorna informações sobre as unidades de medida disponíveis no sistema. Permite listar todas ou filtrar por código específico ou sigla da unidade.</p>

                        <div class="bg-gray-800 rounded-lg p-4 mb-4">
                            <code class="text-white">GET /measureUnit?codigo={codigo}&unidade={unidade}</code>
                        </div>

                        <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-info-circle text-blue-400"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-blue-700">
                                        <strong>Nota:</strong> Este é um endpoint público que não requer filtro por empresa. Use apenas um filtro por vez (codigo OU unidade).
                                    </p>
                                </div>
                            </div>
                        </div>

                        <h4 class="font-semibold text-gray-900 mb-3">Parâmetros (opcionais):</h4>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Parâmetro</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Obrigatório</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Descrição</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">codigo</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">integer</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Não</td>
                                        <td class="px-6 py-4 text-sm text-gray-500">Código da unidade (ex: 19)</td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">unidade</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Não</td>
                                        <td class="px-6 py-4 text-sm text-gray-500">Sigla da unidade (ex: "BR", "PC", "UN")</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <h4 class="font-semibold text-gray-900 mt-6 mb-3">Exemplos:</h4>
                        <div class="space-y-2">
                            <div class="bg-gray-800 rounded-lg p-4">
                                <code class="text-green-400">http://apijsm.eletroluz.net/api/jsm/measureUnit</code>
                                <span class="text-gray-400 ml-2"># Todas as unidades</span>
                            </div>
                            <div class="bg-gray-800 rounded-lg p-4">
                                <code class="text-green-400">http://apijsm.eletroluz.net/api/jsm/measureUnit?codigo=19</code>
                                <span class="text-gray-400 ml-2"># Unidade com código 19</span>
                            </div>
                            <div class="bg-gray-800 rounded-lg p-4">
                                <code class="text-green-400">http://apijsm.eletroluz.net/api/jsm/measureUnit?unidade=BR</code>
                                <span class="text-gray-400 ml-2"># Unidade com sigla "BR"</span>
                            </div>
                        </div>

                        <h4 class="font-semibold text-gray-900 mt-6 mb-3">Estrutura da Resposta:</h4>
                        <div class="bg-gray-800 rounded-lg p-4 mb-4">
                            <pre class="text-sm text-gray-300 overflow-x-auto"><code>[
  {
    "CODIGO": 19,
    "UNIDADE": "BR"
  }
]</code></pre>
                        </div>

                        <h5 class="font-semibold text-gray-900 mb-3">Campos da Resposta:</h5>
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <div>
                                <div class="space-y-3">
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">CODIGO</code>
                                        <span class="text-sm text-gray-600">Código numérico da unidade</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">UNIDADE</code>
                                        <span class="text-sm text-gray-600">Sigla da unidade (PC, UN, M, etc.)</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </section>

                <!-- Formato de Resposta -->
                <section id="response-format" class="mb-12">
                    <div class="bg-white rounded-lg shadow p-8">
                        <h2 class="text-2xl font-bold text-gray-900 mb-6">
                            <i class="fas fa-code text-primary-500 mr-2"></i>
                            Formato de Resposta
                        </h2>

                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Estrutura da Resposta de Vendas</h3>
                        <p class="text-gray-600 mb-4">A resposta da API de vendas retorna um objeto JSON com informações de paginação e um array de resultados:</p>

                        <div class="bg-gray-800 rounded-lg p-4 mb-6 overflow-x-auto">
                            <pre class="text-sm text-gray-300"><code>{
  "page": "1",
  "pageSize": 5,
  "total": "761948",
  "results": [
    {
      "number_identifier": "2544454",
      "purchase_date": "2025-07-15T14:06:31Z",
      "total_price": "146.53000",
      "store_cnpj": "000502754000140",
      "seller_identifier": "JOZY",
      "seller_cpf": "04059881929",
      "operator_identifier": null,
      "operator_cpf": null,
      "customer_document": "15160521968",
      "customer_identifier": "ANTONIO PEDRO NETTO",
      "customer_email": "contato@cliente.com.br",
      "customer_telefone": "4499999999",
      "sku": "206859",
      "ean": "7908649605637",
      "description": "ZAGONEL CHUVEIRO DUCHA MOMENT 220V",
      "quantity": "1.00000",
      "unit_price": "146.53100",
      "measureUnit": "PC",
      "value_measureUnit": null,
      "category": "CHUVEIROS E ACESSÓRIOS",
      "subcategory": "CHUVEIRO",
      "supplier": "ZAGONEL S.A",
      "supplier_submark": "ZAGONEL S.A",
      "DATA_FECHAMENTO": "2025-07-15 00:00:00.000",
      "tipo_pedido": "Pedido",
      "company": "MATRIZ - MARINGA"
    }
  ]
}</code></pre>
                        </div>

                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Campos da Resposta</h3>
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <!-- Metadados -->
                            <div>
                                <h4 class="font-semibold text-gray-800 mb-3 border-b pb-2">Metadados de Paginação</h4>
                                <div class="space-y-3">
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">page</code>
                                        <span class="text-sm text-gray-600">Página atual</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">pageSize</code>
                                        <span class="text-sm text-gray-600">Itens por página</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">total</code>
                                        <span class="text-sm text-gray-600">Total de registros</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Informações da Venda -->
                            <div>
                                <h4 class="font-semibold text-gray-800 mb-3 border-b pb-2">Informações da Venda</h4>
                                <div class="space-y-3">
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">number_identifier</code>
                                        <span class="text-sm text-gray-600">Número da venda</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">purchase_date</code>
                                        <span class="text-sm text-gray-600">Data/hora da compra (ISO 8601)</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">total_price</code>
                                        <span class="text-sm text-gray-600">Valor total da venda</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">store_cnpj</code>
                                        <span class="text-sm text-gray-600">CNPJ da loja</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Informações do Vendedor -->
                            <div>
                                <h4 class="font-semibold text-gray-800 mb-3 border-b pb-2">Vendedor/Operador</h4>
                                <div class="space-y-3">
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">seller_identifier</code>
                                        <span class="text-sm text-gray-600">Nome/ID do vendedor</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">seller_cpf</code>
                                        <span class="text-sm text-gray-600">CPF do vendedor</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">operator_identifier</code>
                                        <span class="text-sm text-gray-600">ID do operador (opcional)</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">operator_cpf</code>
                                        <span class="text-sm text-gray-600">CPF do operador (opcional)</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Informações do Cliente -->
                            <div>
                                <h4 class="font-semibold text-gray-800 mb-3 border-b pb-2">Cliente</h4>
                                <div class="space-y-3">
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">customer_document</code>
                                        <span class="text-sm text-gray-600">CPF/CNPJ do cliente</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">customer_identifier</code>
                                        <span class="text-sm text-gray-600">Nome/Razão social</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">customer_email</code>
                                        <span class="text-sm text-gray-600">E-mail do cliente</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">customer_telefone</code>
                                        <span class="text-sm text-gray-600">Telefone do cliente</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Informações do Produto -->
                            <div>
                                <h4 class="font-semibold text-gray-800 mb-3 border-b pb-2">Produto</h4>
                                <div class="space-y-3">
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">sku</code>
                                        <span class="text-sm text-gray-600">Código SKU</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">ean</code>
                                        <span class="text-sm text-gray-600">Código de barras EAN</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">description</code>
                                        <span class="text-sm text-gray-600">Descrição do produto</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">category</code>
                                        <span class="text-sm text-gray-600">Categoria principal</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">subcategory</code>
                                        <span class="text-sm text-gray-600">Subcategoria</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Valores e Quantidades -->
                            <div>
                                <h4 class="font-semibold text-gray-800 mb-3 border-b pb-2">Valores e Quantidades</h4>
                                <div class="space-y-3">
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">quantity</code>
                                        <span class="text-sm text-gray-600">Quantidade vendida</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">unit_price</code>
                                        <span class="text-sm text-gray-600">Preço unitário</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">measureUnit</code>
                                        <span class="text-sm text-gray-600">Unidade de medida</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">value_measureUnit</code>
                                        <span class="text-sm text-gray-600">Valor da unidade</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Fornecedor -->
                            <div>
                                <h4 class="font-semibold text-gray-800 mb-3 border-b pb-2">Fornecedor</h4>
                                <div class="space-y-3">
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">supplier</code>
                                        <span class="text-sm text-gray-600">Nome do fornecedor</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">supplier_submark</code>
                                        <span class="text-sm text-gray-600">Submarca do fornecedor</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Informações Adicionais -->
                            <div>
                                <h4 class="font-semibold text-gray-800 mb-3 border-b pb-2">Informações Adicionais</h4>
                                <div class="space-y-3">
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">DATA_FECHAMENTO</code>
                                        <span class="text-sm text-gray-600">Data de fechamento do pedido</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">tipo_pedido</code>
                                        <span class="text-sm text-gray-600">Tipo do pedido</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">company</code>
                                        <span class="text-sm text-gray-600">Nome da empresa/unidade</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-6 bg-blue-50 border-l-4 border-blue-400 p-4">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-info-circle text-blue-400"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-blue-700">
                                        <strong>Observações:</strong> Alguns campos podem conter valor <code>null</code> quando a informação não está disponível. As datas seguem o padrão ISO 8601 (UTC). Valores monetários são retornados como strings para preservar precisão decimal.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <h3 class="text-lg font-semibold text-gray-900 mb-4 mt-8">Estrutura da Resposta de Produtos</h3>
                        <p class="text-gray-600 mb-4">A resposta da API de produtos retorna um array de objetos JSON com informações detalhadas sobre cada produto:</p>

                        <div class="bg-gray-800 rounded-lg p-4 mb-6 overflow-x-auto">
                            <pre class="text-sm text-gray-300"><code>[
  {
    "company": "FILIAL - LONDRINA",
    "stockUpdateAt": "2025-07-22T00:00:00Z",
    "ean": "7892190004530",
    "sku": 78,
    "cnpj": "000502754001200",
    "currentStock": "24.00000",
    "minStock": "1.00000",
    "measureUnit": "PC"
  }
]</code></pre>
                        </div>

                        <h4 class="font-semibold text-gray-900 mb-3">Campos da Resposta de Produtos</h4>
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <div>
                                <h5 class="font-semibold text-gray-800 mb-3 border-b pb-2">Informações da Empresa</h5>
                                <div class="space-y-3">
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">company</code>
                                        <span class="text-sm text-gray-600">Nome da empresa/unidade</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">cnpj</code>
                                        <span class="text-sm text-gray-600">CNPJ da empresa</span>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <h5 class="font-semibold text-gray-800 mb-3 border-b pb-2">Informações do Produto</h5>
                                <div class="space-y-3">
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">sku</code>
                                        <span class="text-sm text-gray-600">Código SKU do produto</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">ean</code>
                                        <span class="text-sm text-gray-600">Código de barras EAN</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">measureUnit</code>
                                        <span class="text-sm text-gray-600">Unidade de medida</span>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <h5 class="font-semibold text-gray-800 mb-3 border-b pb-2">Estoque</h5>
                                <div class="space-y-3">
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">currentStock</code>
                                        <span class="text-sm text-gray-600">Estoque atual</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">minStock</code>
                                        <span class="text-sm text-gray-600">Estoque mínimo</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">stockUpdateAt</code>
                                        <span class="text-sm text-gray-600">Data da última atualização</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Exemplos de Código -->
                <section id="examples" class="mb-12">
                    <div class="bg-white rounded-lg shadow p-8">
                        <h2 class="text-2xl font-bold text-gray-900 mb-6">
                            <i class="fas fa-terminal text-primary-500 mr-2"></i>
                            Exemplos de Código
                        </h2>

                        <div class="space-y-8">
                            <!-- JavaScript/Fetch -->
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 mb-3">JavaScript (Fetch API)</h3>
                                <div class="bg-gray-800 rounded-lg p-4">
                                    <pre class="text-sm text-gray-300 overflow-x-auto"><code>const apiToken = 'TOKEN';
const baseUrl = 'http://apijsm.eletroluz.net/api/jsm';

// Buscar vendas do dia atual
async function getVendasHoje() {
  const hoje = new Date().toISOString().split('T')[0]; // YYYY-MM-DD
  
  try {
    const response = await fetch(`${baseUrl}/vendas?page=1&pageSize=10&date=${hoje}`, {
      headers: {
        'ApiToken': apiToken,
        'Content-Type': 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    console.log(`Total de vendas: ${data.total}`);
    console.log('Vendas:', data.results);
    
    return data;
  } catch (error) {
    console.error('Erro ao buscar vendas:', error);
  }
}

// Buscar produto específico
async function getProduto(sku) {
  try {
    const response = await fetch(`${baseUrl}/produtos/${sku}`, {
      headers: {
        'ApiToken': apiToken
      }
    });
    
    const produto = await response.json();
    console.log('Produto encontrado:', produto);
    return produto;
  } catch (error) {
    console.error('Erro ao buscar produto:', error);
  }
}

// Exemplos de uso
getVendasHoje();
getProduto('206859');</code></pre>
                                </div>
                            </div>

                            <!-- Python -->


                            <!-- cURL -->
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 mb-3">cURL</h3>
                                <div class="bg-gray-800 rounded-lg p-4">
                                    <pre class="text-sm text-gray-300 overflow-x-auto"><code># Buscar vendas com paginação
curl -X GET "http://apijsm.eletroluz.net/api/jsm/vendas?page=1&pageSize=5" \
     -H "ApiToken: TOKEN" \
     -H "Content-Type: application/json"

# Buscar vendas de uma data específica
curl -X GET "http://apijsm.eletroluz.net/api/jsm/vendas?page=1&pageSize=10&date=2025-07-15" \
     -H "ApiToken: TOKEN"

# Buscar todos os produtos
curl -X GET "http://apijsm.eletroluz.net/api/jsm/produtos" \
     -H "ApiToken: TOKEN"

# Buscar produto específico
curl -X GET "http://apijsm.eletroluz.net/api/jsm/produtos/206859" \
     -H "ApiToken: TOKEN"

# Buscar produtos por unidade de medida
curl -X GET "http://apijsm.eletroluz.net/api/jsm/produtos/measureUnit/PC" \
     -H "ApiToken: TOKEN"

# Buscar unidades de medida (público - sem token)
curl -X GET "http://apijsm.eletroluz.net/api/jsm/measureUnit"

# Buscar unidade específica por código
curl -X GET "http://apijsm.eletroluz.net/api/jsm/measureUnit?codigo=19"

# Buscar unidade específica por sigla
curl -X GET "http://apijsm.eletroluz.net/api/jsm/measureUnit?unidade=BR"

# Salvar resposta em arquivo JSON
curl -X GET "http://apijsm.eletroluz.net/api/jsm/vendas?page=1&pageSize=5" \
     -H "ApiToken: TOKEN" \
     -o vendas.json</code></pre>
                                </div>
                            </div>


                        </div>
                    </div>
                </section>



                <!-- Limites e Performance -->
                <section class="mb-12">
                    <div class="bg-white rounded-lg shadow p-8">
                        <h2 class="text-2xl font-bold text-gray-900 mb-6">
                            <i class="fas fa-tachometer-alt text-primary-500 mr-2"></i>
                            Limites e Performance
                        </h2>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-lg">
                                <div class="flex items-center mb-3">
                                    <i class="fas fa-clock text-blue-600 text-2xl mr-3"></i>
                                    <h3 class="font-semibold text-blue-800">Rate Limiting</h3>
                                </div>
                                <p class="text-sm text-blue-700 mb-2">Recomendamos não exceder:</p>
                                <ul class="text-sm text-blue-600 space-y-1">
                                    <li>• 100 requisições/minuto</li>
                                    <li>• 5 requisições/segundo</li>
                                </ul>
                            </div>

                            <div class="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-lg">
                                <div class="flex items-center mb-3">
                                    <i class="fas fa-database text-green-600 text-2xl mr-3"></i>
                                    <h3 class="font-semibold text-green-800">Paginação</h3>
                                </div>
                                <p class="text-sm text-green-700 mb-2">Limites por página:</p>
                                <ul class="text-sm text-green-600 space-y-1">
                                    <li>• Mínimo: 5 itens</li>
                                    <li>• Máximo: 50 itens</li>
                                    <li>• Recomendado: 20 itens</li>
                                </ul>
                            </div>

                            <div class="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-lg">
                                <div class="flex items-center mb-3">
                                    <i class="fas fa-stopwatch text-purple-600 text-2xl mr-3"></i>
                                    <h3 class="font-semibold text-purple-800">Timeout</h3>
                                </div>
                                <p class="text-sm text-purple-700 mb-2">Tempo de resposta:</p>
                                <ul class="text-sm text-purple-600 space-y-1">
                                    <li>• Típico: 500-2000ms</li>
                                    <li>• Máximo: 30 segundos</li>
                                    <li>• Configure timeout: 10s</li>
                                </ul>
                            </div>
                        </div>

                        <div class="mt-6 bg-yellow-50 border-l-4 border-yellow-400 p-4">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-info-circle text-yellow-400"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-yellow-700">
                                        <strong>Performance:</strong> Para consultas de grandes volumes de dados, utilize filtros (como data) e paginação adequada. Considere implementar cache local para dados que não mudam frequentemente.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Casos de Uso -->
                <section class="mb-12">
                    <div class="">
                        <h2 class="text-2xl font-bold text-gray-900 mb-6">
                            <i class="fas fa-lightbulb text-primary-500 mr-2"></i>
                            Casos de Uso Comuns
                        </h2>

                        <div class="space-y-8 ">
                            <!-- Dashboard de Vendas -->
                            <div class="bg-white rounded-lg shadow border border-gray-200 rounded-lg p-6">
                                <h3 class="text-lg font-semibold text-gray-900 mb-3">
                                    <i class="fas fa-chart-bar text-blue-500 mr-2"></i>
                                    Dashboard de Vendas em Tempo Real
                                </h3>
                                <p class="text-gray-600 mb-4">Criar um dashboard que mostra vendas do dia atual, produtos mais vendidos e performance por vendedor.</p>

                                <div class="bg-gray-50 rounded p-4 mb-4">
                                    <h4 class="font-semibold text-gray-800 mb-2">Endpoints necessários:</h4>
                                    <ul class="text-sm text-gray-600 space-y-1">
                                        <li>• <code>/vendas?date=hoje</code> - Vendas do dia</li>
                                        <li>• <code>/produtos</code> - Catálogo para referência</li>
                                    </ul>
                                </div>

                                <div class="bg-blue-50 border border-blue-200 rounded p-4">
                                    <h4 class="font-semibold text-blue-800 mb-2">Métricas calculáveis:</h4>
                                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                                        <div>• Faturamento total</div>
                                        <div>• Número de vendas</div>
                                        <div>• Ticket médio</div>
                                        <div>• Top produtos</div>
                                        <div>• Performance por vendedor</div>
                                        <div>• Vendas por categoria</div>
                                        <div>• Clientes únicos</div>
                                        <div>• Produtos por unidade</div>
                                    </div>
                                </div>
                            </div>

                            <!-- Relatório de Estoque -->
                            <div class="bg-white rounded-lg shadow border border-gray-200 rounded-lg p-6">
                                <h3 class="text-lg font-semibold text-gray-900 mb-3">
                                    <i class="fas fa-boxes text-green-500 mr-2"></i>
                                    Análise de Produtos e Categorias
                                </h3>
                                <p class="text-gray-600 mb-4">Analisar performance de produtos, identificar categorias mais vendidas e sazonalidades.</p>

                                <div class="bg-gray-50 rounded p-4 mb-4">
                                    <h4 class="font-semibold text-gray-800 mb-2">Fluxo recomendado:</h4>
                                    <ol class="text-sm text-gray-600 space-y-1 list-decimal list-inside">
                                        <li>Buscar vendas por período específico</li>
                                        <li>Agrupar por categoria/subcategoria</li>
                                        <li>Calcular quantidades e valores por produto</li>
                                        <li>Identificar produtos sem movimento</li>
                                    </ol>
                                </div>
                            </div>

                            <!-- CRM de Clientes -->
                            <div class="bg-white rounded-lg shadow border border-gray-200 rounded-lg p-6">
                                <h3 class="text-lg font-semibold text-gray-900 mb-3">
                                    <i class="fas fa-users text-purple-500 mr-2"></i>
                                    CRM e Análise de Clientes
                                </h3>
                                <p class="text-gray-600 mb-4">Construir perfis de clientes baseado no histórico de compras e identificar oportunidades.</p>

                                <div class="bg-gray-50 rounded p-4">
                                    <h4 class="font-semibold text-gray-800 mb-2">Dados extraíveis:</h4>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-600">
                                        <div>
                                            <strong>Por cliente:</strong>
                                            <ul class="mt-1 space-y-1">
                                                <li>• Histórico de compras</li>
                                                <li>• Valor total gasto</li>
                                                <li>• Frequência de compras</li>
                                                <li>• Produtos preferidos</li>
                                            </ul>
                                        </div>
                                        <div>
                                            <strong>Segmentação:</strong>
                                            <ul class="mt-1 space-y-1">
                                                <li>• Clientes VIP (alto valor)</li>
                                                <li>• Clientes frequentes</li>
                                                <li>• Clientes inativos</li>
                                                <li>• Novos clientes</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-white border-t mt-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div class="col-span-1 md:col-span-2">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">API JSM - IngaSoft</h3>
                    <p class="text-gray-600 text-sm mb-4">
                        API para acesso aos dados de vendas e produtos em tempo real.
                        Desenvolvida para integração com sistemas externos e criação de dashboards personalizados.
                    </p>
                    <div class="flex space-x-4">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                            <i class="fas fa-circle text-green-500 mr-1" style="font-size: 6px;"></i>
                            API Online
                        </span>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            Versão 1.0
                        </span>
                    </div>
                </div>

                <div>
                    <h4 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Recursos</h4>
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li><a href="#endpoints" class="hover:text-primary-600">Endpoints</a></li>
                        <li><a href="#examples" class="hover:text-primary-600">Exemplos</a></li>
                        <li><a href="#error-handling" class="hover:text-primary-600">Tratamento de Erros</a></li>
                        <li><a href="#response-format" class="hover:text-primary-600">Formato de Resposta</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Suporte</h4>
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li>
                            <i class="fas fa-clock mr-2"></i>
                            Atualizado em: 15/07/2025
                        </li>
                        <li>
                            <i class="fas fa-server mr-2"></i>
                            Uptime: 99.9%
                        </li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-200 mt-8 pt-6">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-500 text-sm">
                        © 2025 IngaSoft. Todos os direitos reservados.
                    </p>
                    <p class="text-gray-500 text-sm mt-2 md:mt-0">
                        Documentação gerada em: 15 de Julho de 2025 às 17:26 UTC
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Highlight current section in navigation
        window.addEventListener('scroll', () => {
            let current = '';
            const sections = document.querySelectorAll('section[id]');

            sections.forEach(section => {
                const sectionTop = section.offsetTop - 100;
                const sectionHeight = section.clientHeight;
                if (pageYOffset >= sectionTop && pageYOffset < sectionTop + sectionHeight) {
                    current = section.getAttribute('id');
                }
            });

            document.querySelectorAll('nav a').forEach(link => {
                link.classList.remove('text-primary-600', 'font-semibold');
                link.classList.add('text-gray-600');
                if (link.getAttribute('href') === '#' + current) {
                    link.classList.remove('text-gray-600');
                    link.classList.add('text-primary-600', 'font-semibold');
                }
            });
        });

        // Copy code functionality
        document.querySelectorAll('pre code').forEach((block) => {
            const button = document.createElement('button');
            button.className = 'absolute top-2 right-2 px-3 py-1 bg-gray-600 text-white text-xs rounded hover:bg-gray-500 transition-colors';
            button.textContent = 'Copiar';

            const wrapper = block.parentElement;
            wrapper.style.position = 'relative';
            wrapper.appendChild(button);

            button.addEventListener('click', () => {
                navigator.clipboard.writeText(block.textContent).then(() => {
                    button.textContent = 'Copiado!';
                    button.className = 'absolute top-2 right-2 px-3 py-1 bg-green-600 text-white text-xs rounded';
                    setTimeout(() => {
                        button.textContent = 'Copiar';
                        button.className = 'absolute top-2 right-2 px-3 py-1 bg-gray-600 text-white text-xs rounded hover:bg-gray-500 transition-colors';
                    }, 2000);
                });
            });
        });

        // Search functionality (simple implementation)
        function addSearchFunctionality() {
            const searchInput = document.createElement('input');
            searchInput.type = 'text';
            searchInput.placeholder = 'Buscar na documentação...';
            searchInput.className = 'w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent';

            const searchContainer = document.createElement('div');
            searchContainer.className = 'mb-4';
            searchContainer.appendChild(searchInput);

            const nav = document.querySelector('nav .bg-white');
            nav.insertBefore(searchContainer, nav.firstChild.nextSibling);

            searchInput.addEventListener('input', (e) => {
                const searchTerm = e.target.value.toLowerCase();
                const sections = document.querySelectorAll('section');

                sections.forEach(section => {
                    const text = section.textContent.toLowerCase();
                    const shouldShow = text.includes(searchTerm) || searchTerm === '';
                    section.style.display = shouldShow ? 'block' : 'none';
                });
            });
        }

        // Initialize search functionality
        document.addEventListener('DOMContentLoaded', addSearchFunctionality);

        // API status indicator
        function updateAPIStatus() {
            const statusIndicators = document.querySelectorAll('.fa-circle');
            // Simulate API status check - in real implementation, you'd ping the API
            const isOnline = true; // This would be the result of an actual API ping

            statusIndicators.forEach(indicator => {
                if (isOnline) {
                    indicator.className = 'fas fa-circle text-green-500 mr-1';
                } else {
                    indicator.className = 'fas fa-circle text-red-500 mr-1';
                }
            });
        }

        // Update API status every 30 seconds
        setInterval(updateAPIStatus, 30000);
        updateAPIStatus(); // Initial check

        // Add keyboard shortcuts
        document.addEventListener('keydown', (e) => {
            // Ctrl/Cmd + K to focus search
            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
                e.preventDefault();
                const searchInput = document.querySelector('input[placeholder*="Buscar"]');
                if (searchInput) {
                    searchInput.focus();
                }
            }
        });
    </script>
</body>

</html>