<?php
require_once 'conexao.php'; // Inclui a conexão MySQLi ($conn)

// Consulta SQL para obter todos os clientes
$sql = "SELECT * FROM clientes";
$resultado = $conn->query($sql);

if ($resultado === false) {
    die("Erro na consulta: " . $conn->error);
}

// Organizar clientes por coluna
$clientes_por_coluna = [
    1 => [], // Contactar
    2 => [], // Contactados
    3 => [], // Negociação
    4 => [], // Agenda ERC
    5 => [], // Visitado
    6 => []  // Vendido
];

while ($cliente = $resultado->fetch_assoc()) {
    $status = $cliente['status'] ?? 1;
    if ($status >= 1 && $status <= 6) {
        $clientes_por_coluna[$status][] = $cliente;
    }
}

// Fechar conexão
$conn->close();
?>

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SON - Sistema de Organização de Negócios</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        
        /* Cabeçalho Fixo */
        .header-fixed {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #f5f5f5;
            padding: 15px 20px;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header-fixed img {
            height: 50px;
            margin-right: 15px;
        }
        
        .header-fixed h2 {
            margin: 0;
            flex-grow: 1;
        }
        
        /* Conteúdo Principal */
        .content-wrapper {
            margin-top: 100px;
            padding: 20px;
        }
        
        .container {
            max-width: 1800px;
            margin: 0 auto;
        }
        
        .quadro-colunas {
            display: flex;
            gap: 15px;
            margin-top: 20px;
            overflow-x: auto;
            padding-bottom: 20px;
        }
        
        .coluna {
            flex: 1;
            min-width: 200px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 15px;
            min-height: 500px;
            display: flex;
            flex-direction: column;
        }
        
        .coluna h2 {
            position: sticky;
            top: 100px;
            background: white;
            z-index: 100;
            text-align: center;
            margin-top: 0;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        
        .coluna-content {
            flex-grow: 1;
            overflow-y: auto;
            max-height: calc(100vh - 250px);
        }
        
        .coluna-1 { border-top: 4px solid #006600; }
        .coluna-2 { border-top: 4px solid #3498db; }
        .coluna-3 { border-top: 4px solid #FFD700; }
        .coluna-4 { border-top: 4px solid #9b59b6; }
        .coluna-5 { border-top: 4px solid #e74c3c; }
        .coluna-6 { border-top: 4px solid #2ecc71; }
        
        .cliente-item {
            background: #f9f9f9;
            border-left: 3px solid #3498db;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 4px;
            cursor: pointer;
            user-select: none;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .cliente-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .cliente-item h3 {
            margin: 0 0 5px 0;
        }
        
        .cliente-item p {
            margin: 5px 0;
            font-size: 0.9em;
            color: #666;
        }
        
        /* Estilos para o modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border-radius: 8px;
            width: 60%;
            max-width: 700px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .close-modal {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .close-modal:hover {
            color: #333;
        }
        
        /* Estilos para drag and drop */
        .updating {
            opacity: 0.6;
            position: relative;
        }
        
        .updating::after {
            content: "Salvando...";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.8em;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .dragging {
            opacity: 0.5;
            transform: scale(0.95);
        }
        
        .drag-over {
            background-color: rgba(52, 152, 219, 0.1);
            border: 2px dashed #3498db !important;
        }
    </style>
</head>
<body>
    <!-- Cabeçalho Fixo -->
    <div class="header-fixed">
        <img src="tvitec.png" alt="Logo TVITEC"> 
        <h2>Sistema de Organização de Negócios</h2>
        <div>
            <button onclick="CadastrarCliente(<?php echo $cliente['id'] ?? 0; ?>)" 
                    style="padding: 8px 15px; background: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer;">
                Novo Cliente
            </button>
        </div>
    </div>

    <!-- Conteúdo Principal -->
    <div class="content-wrapper">
        <div class="container">
            <div class="quadro-colunas">
                <div class="coluna coluna-1">
                    <h2>Contactar</h2>
                    <p>
                        <p>
                    
                    <div class="coluna-content">
                       
                        <?php foreach ($clientes_por_coluna[1] as $cliente): ?>
                            <div class="cliente-item" draggable="true" data-id="<?php echo $cliente['id']; ?>" onclick="abrirDetalhesCliente(<?php echo $cliente['id']; ?>)">
                                <h3><?php echo htmlspecialchars($cliente['Nome_Cliente'] ?? $cliente['Nome'] ?? ''); ?></h3>
                                <p><strong>Email:</strong> <?php echo htmlspecialchars($cliente['Email'] ?? ''); ?></p>
                                <p><strong>Tel:</strong> <?php echo htmlspecialchars($cliente['Telefone'] ?? $cliente['telefone'] ?? ''); ?></p>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
                
                <div class="coluna coluna-2">
                    <h2>Contactados</h2>
                    <p>
                    <p>
                    <div class="coluna-content">
                        <?php foreach ($clientes_por_coluna[2] as $cliente): ?>
                            <div class="cliente-item" draggable="true" data-id="<?php echo $cliente['id']; ?>" onclick="abrirDetalhesCliente(<?php echo $cliente['id']; ?>)">
                                <h3><?php echo htmlspecialchars($cliente['Nome_Cliente'] ?? $cliente['Nome'] ?? ''); ?></h3>
                                <p><strong>Email:</strong> <?php echo htmlspecialchars($cliente['Email'] ?? ''); ?></p>
                                <p><strong>Tel:</strong> <?php echo htmlspecialchars($cliente['Telefone'] ?? $cliente['telefone'] ?? ''); ?></p>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
                
                <div class="coluna coluna-3">
                    <h2>Negociação</h2>
                    <p>
                    <p>
                    <div class="coluna-content">
                        <?php foreach ($clientes_por_coluna[3] as $cliente): ?>
                            <div class="cliente-item" draggable="true" data-id="<?php echo $cliente['id']; ?>" onclick="abrirDetalhesCliente(<?php echo $cliente['id']; ?>)">
                                <h3><?php echo htmlspecialchars($cliente['Nome_Cliente'] ?? $cliente['Nome'] ?? ''); ?></h3>
                                <p><strong>Email:</strong> <?php echo htmlspecialchars($cliente['Email'] ?? ''); ?></p>
                                <p><strong>Tel:</strong> <?php echo htmlspecialchars($cliente['Telefone'] ?? $cliente['telefone'] ?? ''); ?></p>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
                
                <div class="coluna coluna-4">
                    <h2>Agenda</h2>
                    <p>
                    <p>
                    <div class="coluna-content">
                        <?php foreach ($clientes_por_coluna[4] as $cliente): ?>
                            <div class="cliente-item" draggable="true" data-id="<?php echo $cliente['id']; ?>" onclick="abrirDetalhesCliente(<?php echo $cliente['id']; ?>)">
                                <h3><?php echo htmlspecialchars($cliente['Nome_Cliente'] ?? $cliente['Nome'] ?? ''); ?></h3>
                                <p><strong>Email:</strong> <?php echo htmlspecialchars($cliente['Email'] ?? ''); ?></p>
                                <p><strong>Tel:</strong> <?php echo htmlspecialchars($cliente['Telefone'] ?? $cliente['telefone'] ?? ''); ?></p>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
                
                <div class="coluna coluna-5">
                    <h2>Visitado</h2>
                    <p>
                    <p>
                    <div class="coluna-content">
                        <?php foreach ($clientes_por_coluna[5] as $cliente): ?>
                            <div class="cliente-item" draggable="true" data-id="<?php echo $cliente['id']; ?>" onclick="abrirDetalhesCliente(<?php echo $cliente['id']; ?>)">
                                <h3><?php echo htmlspecialchars($cliente['Nome_Cliente'] ?? $cliente['Nome'] ?? ''); ?></h3>
                                <p><strong>Email:</strong> <?php echo htmlspecialchars($cliente['Email'] ?? ''); ?></p>
                                <p><strong>Tel:</strong> <?php echo htmlspecialchars($cliente['Telefone'] ?? $cliente['telefone'] ?? ''); ?></p>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
                
                <div class="coluna coluna-6">
                    <h2>Vendido</h2>
                     <p>
                        <p>
                    <div class="coluna-content">
                        <?php foreach ($clientes_por_coluna[6] as $cliente): ?>
                            <div class="cliente-item" draggable="true" data-id="<?php echo $cliente['id']; ?>" onclick="abrirDetalhesCliente(<?php echo $cliente['id']; ?>)">
                                <h3><?php echo htmlspecialchars($cliente['Nome_Cliente'] ?? $cliente['Nome'] ?? ''); ?></h3>
                                <p><strong>Email:</strong> <?php echo htmlspecialchars($cliente['Email'] ?? ''); ?></p>
                                <p><strong>Tel:</strong> <?php echo htmlspecialchars($cliente['Telefone'] ?? $cliente['telefone'] ?? ''); ?></p>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Modal de Detalhes do Cliente -->
    <div id="detalhesModal" class="modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <h2>Detalhes do Cliente</h2>
            <div id="detalhesClienteConteudo">
                <!-- Conteúdo será carregado aqui via AJAX -->
            </div>
        </div>
    </div>

    <script>
    // Modal de detalhes
    const modal = document.getElementById('detalhesModal');
    const span = document.getElementsByClassName('close-modal')[0];

    // Função para abrir detalhes do cliente
    function abrirDetalhesCliente(clienteId) {
        fetch('detalhes_cliente.php?id=' + clienteId)
            .then(response => response.text())
            .then(data => {
                document.getElementById('detalhesClienteConteudo').innerHTML = data;
                modal.style.display = 'block';
            })
            .catch(error => console.error('Erro:', error));
    }

    // Fechar modal ao clicar no X
    span.onclick = function() {
        modal.style.display = 'none';
    }

    // Fechar modal ao clicar fora
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }

    // Função para atualizar status do cliente
    function atualizarStatusCliente(clienteId, novoStatus) {
        const clienteElement = document.querySelector(`.cliente-item[data-id="${clienteId}"]`);
        clienteElement.classList.add('updating');

        fetch('atualizar_status.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                id: clienteId,
                status: novoStatus
            })
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(err => {
                    throw new Error(err.message || 'Erro no servidor');
                });
            }
            return response.json();
        })
        .then(data => {
            if (!data.success) {
                throw new Error(data.message || 'Erro ao atualizar');
            }
            console.log('Atualizado com sucesso:', data);
        })
        .catch(error => {
            console.error('Erro completo:', error);
            alert('Erro: ' + error.message);
            setTimeout(() => location.reload(), 1000);
        })
        .finally(() => {
            clienteElement.classList.remove('updating');
        });
    }

    // Drag and drop implementation
    document.addEventListener('DOMContentLoaded', function() {
        const clientes = document.querySelectorAll('.cliente-item');
        const colunas = document.querySelectorAll('.coluna');
        
        clientes.forEach(cliente => {
            cliente.addEventListener('dragstart', dragStart);
        });
        
        colunas.forEach(coluna => {
            coluna.addEventListener('dragover', dragOver);
            coluna.addEventListener('drop', drop);
            coluna.addEventListener('dragenter', dragEnter);
            coluna.addEventListener('dragleave', dragLeave);
        });
        
        function dragStart(e) {
            e.dataTransfer.setData('text/plain', e.target.dataset.id);
            setTimeout(() => {
                e.target.classList.add('dragging');
            }, 0);
        }
        
        function dragOver(e) {
            e.preventDefault();
            e.dataTransfer.dropEffect = 'move';
        }
        
        function dragEnter(e) {
            e.preventDefault();
            e.currentTarget.classList.add('drag-over');
        }
        
        function dragLeave(e) {
            e.currentTarget.classList.remove('drag-over');
        }
        
        function drop(e) {
    e.preventDefault();
    e.currentTarget.classList.remove('drag-over');
    
    const clienteId = e.dataTransfer.getData('text/plain');
    const clienteElement = document.querySelector(`.cliente-item[data-id="${clienteId}"]`);
    const colunaAlvo = e.currentTarget;
    
    // Obtém todas as colunas e calcula o novo status (1-6)
    const colunas = document.querySelectorAll('.coluna');
    const colunasArray = Array.from(colunas);
    const novoStatus = colunasArray.indexOf(colunaAlvo) + 1;
    
    // Move visualmente o elemento
    colunaAlvo.querySelector('.coluna-content').appendChild(clienteElement);
    clienteElement.classList.remove('dragging');
    
    // Atualiza no banco de dados
    atualizarStatusCliente(clienteId, novoStatus);
}
    });

    function editarCliente(clienteId) {
        window.location.href = `editar_cliente.php?id=${clienteId}`;
    }
    </script>
</body>
</html>