<?php
include '../configuracao/conexao.php'; 

// Captura os dados da URL
$localidade = htmlspecialchars($_GET['localidade'] ?? '');
$grupo_selecionado = $_GET['grupo'] ?? '';
$descricao_grupo_selecionado=$_GET['descricaogrupo'] ?? '';
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cardápio - <?php echo htmlspecialchars($descricao_grupo_selecionado); ?></title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
            background-color: #1a1a1a; 
            color: #fff; 
            padding: 15px; 
        }
        .container { max-width: 500px; margin: 0 auto; }
        
        .header-categoria {
            text-align: center;
            margin-bottom: 25px;
            border-bottom: 2px solid #00d4ff;
            padding-bottom: 10px;
        }
        .header-categoria h2 { color: #00d4ff; font-size: 1.4rem; text-transform: uppercase; }

        .card-produto { 
            background: #2d2d2d; 
            border-radius: 12px; 
            padding: 15px; 
            margin-bottom: 15px; 
            display: flex; 
            flex-direction: column; 
            gap: 10px; 
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            border: 1px solid #3d3d3d;
            width: 100%;
            overflow: hidden;
        }
        
        .topo-card { 
            display: flex; 
            gap: 15px; 
            align-items: flex-start; 
        }
        
        .foto-produto { 
            width: 90px; 
            height: 90px; 
            border-radius: 8px; 
            object-fit: cover; 
            background: #444;
            flex-shrink: 0;
            cursor: zoom-in; /* Indica que a foto é clicável */
            transition: transform 0.2s;
        }

        .foto-produto:active {
            transform: scale(0.95);
        }

        .info-produto { 
            flex: 1; 
            min-width: 0; 
            word-wrap: break-word;
            overflow-wrap: break-word;
            word-break: break-word;
        }

        .nome-produto { 
            font-size: 1.1rem; 
            font-weight: bold; 
            color: #fff; 
            margin-bottom: 4px; 
        }

        .desc-completa { 
            font-size: 0.85rem; 
            color: #aaa; 
            line-height: 1.4; 
            border-top: 1px solid #3d3d3d;
            padding-top: 10px;
            margin-top: 5px;
            word-wrap: break-word;
        }

        .video-link {
            display: inline-block;
            margin-top: 10px;
            color: #ff4757;
            text-decoration: none;
            font-size: 0.85rem;
            font-weight: bold;
        }

        .footer-card { 
            display: flex; 
            justify-content: flex-start; 
            align-items: center; 
            margin-top: 5px; 
        }

        .preco-produto { 
            font-weight: bold; 
            color: #2ed573; 
            font-size: 1.2rem; 
            white-space: nowrap;
        }
        
        .btn-voltar { 
            color: #aaa; 
            text-decoration: none; 
            display: block; 
            text-align: center; 
            margin-top: 20px; 
            font-size: 0.9rem; 
            padding-bottom: 20px;
        }

        /* --- Estilos do Modal para a Foto Grande --- */
        .modal-foto {
            display: none;
            position: fixed;
            z-index: 9999;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.9);
            justify-content: center;
            align-items: center;
            cursor: zoom-out;
        }

        .modal-foto img {
            max-width: 90%;
            max-height: 80%;
            border-radius: 12px;
            box-shadow: 0 0 25px rgba(0,212,255,0.4);
            transform: scale(0.8);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .modal-foto.ativo img {
            transform: scale(1);
        }
    </style>
</head>
<body>

<div class="container">
    <div class="header-categoria">
        <h2><?php echo htmlspecialchars($descricao_grupo_selecionado); ?></h2>
    </div>

    <?php
    $sql = "SELECT * from reg_0200  WHERE reg_0200_grupo = ? ";
    $stmt = $mysqli->prepare($sql);
    $stmt->bind_param("s", $grupo_selecionado);
    $stmt->execute();
    $resultado = $stmt->get_result();

    if ($resultado->num_rows > 0) {
        while ($p = $resultado->fetch_assoc()) {
            $fotoURL = !empty($p['reg_0200_foto']) ? htmlspecialchars($p['reg_0200_foto']) : 'https://via.placeholder.com/150?text=Sem+Foto';
            
            echo '<div class="card-produto">';
                echo '<div class="topo-card">';
                    // Adicionado evento onclick para expandir a imagem
                    echo '<img src="' . $fotoURL . '" class="foto-produto" alt="Foto" onclick="abrirFoto(this.src)">';
                    
                    echo '<div class="info-produto">';
                        echo '<div class="nome-produto">' . htmlspecialchars($p['reg_0200_cod_item']) . '</div>';
                        echo '<div class="footer-card">';
                            echo '<span class="preco-produto">R$ ' . htmlspecialchars($p['reg_0200_preco']) . '</span>';
                        echo '</div>';
                    echo '</div>';
                echo '</div>';
	
                if(!empty($p['reg_0200_descr_item'])) {
                    echo '<div class="desc-completa">' . nl2br(htmlspecialchars($p['reg_0200_descr_item'])) . '</div>';
                }

                if(!empty($p['reg_0200_video'])) {
                    echo '<a href="'.htmlspecialchars($p['reg_0200_video']).'" target="_blank" class="video-link">🎬 Assistir vídeo do preparo</a>';
                }
            echo '</div>';
        }
    } else {
        echo '<p style="text-align:center; padding: 40px; color: #666;">Nenhum item encontrado nesta categoria.</p>';
    }
    ?>

    <a href="grupo_produtos.php?localidade=<?php echo urlencode($localidade); ?>" class="btn-voltar">← Voltar para Categorias</a>
</div>

<div id="modalFoto" class="modal-foto" onclick="fecharFoto()">
    <img id="imgGrande" src="" alt="Foto ampliada">
</div>

<script>
function abrirFoto(src) {
    const modal = document.getElementById('modalFoto');
    const img = document.getElementById('imgGrande');
    
    img.src = src;
    modal.style.display = 'flex';
    
    // Pequena pausa para disparar a animação CSS
    setTimeout(() => {
        modal.classList.add('ativo');
    }, 10);
}

function fecharFoto() {
    const modal = document.getElementById('modalFoto');
    modal.classList.remove('ativo');
    
    // Espera a animação terminar para esconder o display
    setTimeout(() => {
        modal.style.display = 'none';
    }, 300);
}

// Fecha o modal ao apertar a tecla ESC
document.addEventListener('keydown', function(event) {
    if (event.key === "Escape") {
        fecharFoto();
    }
});
</script>

</body>
</html>