<?php 
// Utilização dos novos caminhos de configuração
include '../config.php';
include '../configuracao/modelo.php';
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestão de Grupo de Produtos</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root { --primary-color: #2c3e50; }
        .card-main { border-radius: 12px; overflow: hidden; border: none; }
        .nav-pills .nav-link.active { background-color: var(--primary-color); }
        .table-container { max-height: 450px; overflow-y: auto; }
        /* Esconde o sistema na tabela conforme solicitado */
        .col-sistema { display: none; } 
    </style>
</head>
<body class="bg-light">

<div class="container py-5">
    <div class="card shadow card-main">
        <div class="card-header text-white p-3" style="background-color: var(--primary-color);">
            <h5 class="mb-0 text-center">Administração de Grupos</h5>
        </div>
        
        <div class="card-body p-4">
            <ul class="nav nav-pills nav-fill mb-4 p-1 bg-secondary bg-opacity-10 rounded shadow-sm" id="pills-tab" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active fw-bold" id="tab-consulta-btn" data-bs-toggle="pill" data-bs-target="#tab-consulta">
                        PESQUISAR REGISTOS
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link fw-bold" id="tab-form-btn" data-bs-toggle="pill" data-bs-target="#tab-form">
                        NOVO / ALTERAR
                    </button>
                </li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane fade show active" id="tab-consulta">
                    <div class="table-responsive table-container border rounded">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th width="80">Cód.</th>
                                    <th width="100">Status</th>
                                    <th width="120">Data</th>
                                    <th>Descrição</th>
                                    <th width="150" class="text-center">Gerir</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                // Conexão via $mysqli vinda do modelo.php
                                $sql = "SELECT * FROM grupo_produto ORDER BY codigo DESC";
                                $res = $mysqli->query($sql);
                                if($res && $res->num_rows > 0){
                                    while ($f = $res->fetch_assoc()){
                                ?>
                                <tr>
                                    <td class="fw-bold">#<?= $f['codigo'] ?></td>
                                    <td>
                                        <span class="badge w-100 <?= $f['ativo'] == 'S' ? 'bg-success' : 'bg-danger' ?>">
                                            <?= $f['ativo'] == 'S' ? 'Ativo' : 'Inativo' ?>
                                        </span>
                                    </td>
                                    <td class="small text-muted"><?= date('d/m/Y', strtotime($f['data'])) ?></td>
                                    <td class="text-truncate" style="max-width: 300px;"><?= htmlspecialchars($f['descricao']) ?></td>
                                    <td class="text-center">
                                        <button onclick='editar(<?= json_encode($f) ?>)' class="btn btn-sm btn-info text-white shadow-sm">Editar</button>
                                        <a href="processar.php?del=<?= $f['codigo'] ?>" class="btn btn-sm btn-outline-danger" onclick="return confirm('Apagar registo?')">Excluir</a>
                                    </td>
                                </tr>
                                <?php } } else { echo "<tr><td colspan='5' class='text-center p-4'>Sem dados.</td></tr>"; } ?>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade" id="tab-form">
                    <form action="processar.php" method="POST" class="row g-3">
                        <input type="hidden" name="codigo" id="id_codigo">
                        
                        <div class="col-md-3">
                            <label class="form-label small fw-bold">ESTADO</label>
                            <select name="ativo" id="id_ativo" class="form-select border-2">
                                <option value="S">ATIVO</option>
                                <option value="N">INATIVO</option>
                            </select>
                        </div>
                        
                        <div class="col-md-3">
                            <label class="form-label small fw-bold">DATA DO GRUPO</label>
                            <input type="date" name="data" id="id_data" class="form-control border-2" value="<?= date('Y-m-d') ?>">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-danger">ENUM SISTEMA (Obrigatório)</label>
                            <input type="text" name="enumsistema" id="id_sistema" class="form-control border-2" maxlength="1024" required>
                        </div>

                        <div class="col-12">
                            <label class="form-label small fw-bold">DESCRIÇÃO DOS PRODUTOS</label>
                            <textarea name="descricao" id="id_desc" class="form-control border-2" rows="4" maxlength="254"></textarea>
                        </div>

                        <div class="col-12 mt-4 pt-3 border-top d-flex gap-2">
                            <button type="submit" name="salvar" class="btn btn-primary px-5 fw-bold shadow">GRAVAR REGISTO</button>
                            <button type="button" onclick="location.reload()" class="btn btn-outline-secondary px-4">CANCELAR</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function editar(d) {
        document.getElementById('id_codigo').value = d.codigo;
        document.getElementById('id_ativo').value = d.ativo;
        document.getElementById('id_data').value = d.data;
        document.getElementById('id_sistema').value = d.enumsistema;
        document.getElementById('id_desc').value = d.descricao;

        var bootstrapTab = new bootstrap.Tab(document.getElementById('tab-form-btn'));
        bootstrapTab.show();
    }
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>