<?php
include_once('../config.php');
include_once('../header.php');

// Lógica de busca simples via PHP para quando a página carrega
$busca_rapida = $_POST['busca_rapida'] ?? '';
?>

<style>
    /* AJUSTES GERAIS */
    .module-wrapper { display: flex; flex-direction: column; padding: 10px; align-items: center; }
    
    .consulta-container { 
        width: 100%; 
        max-width: 900px; 
        background: #fff; 
        border: 1px solid #ccc; 
        padding: 15px; /* Reduzi um pouco para o celular */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
        box-sizing: border-box;
    }

    /* CAMPO DE BUSCA RESPONSIVO */
    .search-box { 
        width: 100%; 
        padding: 15px; 
        font-size: 16px; /* Ajustado para não dar zoom automático no iPhone */
        border: 2px solid #00569e; 
        background: #fff8e1; 
        text-transform: uppercase; 
        margin-bottom: 20px; 
        box-sizing: border-box; 
        border-radius: 5px;
    }

    /* TABELA COM SCROLL LATERAL */
    .price-table { width: 100%; border-collapse: collapse; margin-top: 10px; min-width: 600px; /* Garante que os dados não fiquem espremidos */ }
    
    /* Envolvemos a tabela em um scroll no mobile via JS ou CSS se necessário, 
       mas aqui vamos garantir o container com scroll */
    .consulta-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .price-table th { background: #00569e; color: white; padding: 12px 10px; text-align: left; font-size: 11px; white-space: nowrap; }
    .price-table td { padding: 12px 10px; border-bottom: 1px solid #eee; font-size: 13px; }
    
    .price-table tr:hover { background: #f9f9f9; }
    .price-tag { font-weight: bold; color: #c00; font-size: 15px; white-space: nowrap; }
    .stock-tag { font-size: 10px; color: #666; }
    
    .badge-estoque { padding: 3px 6px; border-radius: 4px; font-size: 10px; font-weight: bold; display: inline-block; }
    .disponivel { background: #d4edda; color: #155724; }
    .indisponivel { background: #f8d7da; color: #721c24; }
    
    /* BOTÕES DE AÇÃO NO MOBILE */
    .btn-acao { 
        padding: 8px 10px; 
        border-radius: 3px; 
        text-decoration: none; 
        font-size: 10px; 
        font-weight: bold; 
        color: #fff; 
        display: inline-block;
        margin: 2px; /* Espaço para não clicar errado */
    }
    .btn-edit { background: #007bff; }
    .btn-del { background: #dc3545; }

    /* REGRAS PARA TELAS PEQUENAS */
    @media (max-width: 600px) {
        .consulta-container { padding: 10px; border: none; box-shadow: none; }
        .search-box { padding: 12px; font-size: 14px; }
        .price-table td { padding: 10px 5px; }
    }
</style>

<div class="module-wrapper">
    <div class="consulta-container">
        <div style="font-weight: bold; margin-bottom: 15px; color: #00569e; font-size: 16px; text-align: center;">
            🔍 CONSULTA POR NOME OU CATEGORIA
        </div>

        <input type="text" id="inputBusca" class="search-box" placeholder="BUSCAR PRODUTO OU CATEGORIA..." oninput="filtrarTabela()" autofocus>

        <table class="price-table" id="tabelaPrecos">
            <thead>
                <tr>
                    <th>DESCRIÇÃO DO PRODUTO</th>
                    <th>CATEGORIA</th>
                    <th style="text-align: center;">ESTOQUE</th>
                    <th style="text-align: right;">PREÇO DE VENDA</th>
                    <th style="text-align: center; width: 120px;">AÇÕES</th>
                </tr>
            </thead>
            <tbody>
                <?php
                $sql = "SELECT * FROM produtos ORDER BY nome ASC";
                $res = mysqli_query($conn, $sql);

                if(mysqli_num_rows($res) > 0):
                    while($p = mysqli_fetch_assoc($res)):
                        $id = $p['id'] ?? $p['ID'];
                        $nome = $p['nome'] ?? $p['NOME'];
                        $categoria = $p['categoria'] ?? $p['CATEGORIA'];
                        $estoque = $p['estoque'] ?? $p['ESTOQUE'] ?? 0;
                        $preco = $p['preco'] ?? $p['PRECO'] ?? 0;

                        $status_classe = ($estoque > 0) ? 'disponivel' : 'indisponivel';
                        $status_texto = ($estoque > 0) ? 'EM ESTOQUE' : 'ESGOTADO';
                ?>
                <tr class="linha-item">
                    <td style="font-weight: bold;" class="nome-txt"><?php echo $nome; ?></td>
                    <td style="font-size: 11px; color: #777;" class="cat-txt"><?php echo $categoria; ?></td>
                    <td style="text-align: center;">
                        <span class="badge-estoque <?php echo $status_classe; ?>"><?php echo $estoque; ?> UN</span>
                        <div class="stock-tag"><?php echo $status_texto; ?></div>
                    </td>
                    <td style="text-align: right;" class="price-tag">
                        R$ <?php echo number_format($preco, 2, ',', '.'); ?>
                    </td>
                    <td style="text-align: center;">
                        <a href="alterar_produto.php?id=<?php echo $id; ?>" class="btn-acao btn-edit">ALTERAR</a>
                        <a href="excluir_produto.php?id=<?php echo $id; ?>" class="btn-acao btn-del" onclick="return confirm('DESEJA EXCLUIR ESTE PRODUTO?')">EXCLUIR</a>
                    </td>
                </tr>
                <?php endwhile; else: ?>
                <tr><td colspan="5" style="text-align:center; padding:30px;">NENHUM PRODUTO ENCONTRADO.</td></tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<script>
function filtrarTabela() {
    var input = document.getElementById("inputBusca");
    var filter = input.value.toUpperCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
    var table = document.getElementById("tabelaPrecos");
    var tr = table.getElementsByClassName("linha-item");

    for (var i = 0; i < tr.length; i++) {
        // Pega o texto do nome e da categoria
        var tdNome = tr[i].getElementsByClassName("nome-txt")[0];
        var tdCat  = tr[i].getElementsByClassName("cat-txt")[0];
        
        if (tdNome || tdCat) {
            var txtNome = (tdNome.textContent || tdNome.innerText).toUpperCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
            var txtCat  = (tdCat.textContent || tdCat.innerText).toUpperCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
            
            // Se o filtro estiver no nome OU na categoria, mostra a linha
            if (txtNome.indexOf(filter) > -1 || txtCat.indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
}
</script>