<?php
require_once 'protege.php';
require_once '../config.php';

$busca = trim($_GET['busca'] ?? '');

if ($busca) {
    $stmt = $pdo->prepare("
        SELECT 
            c.*,
            COUNT(l.id) AS total_licencas
        FROM clientes c
        LEFT JOIN licencas l ON l.cliente_id = c.id
        WHERE c.nome LIKE ? OR c.email LIKE ? OR c.whatsapp LIKE ?
        GROUP BY c.id
        ORDER BY c.id DESC
    ");
    $like = "%{$busca}%";
    $stmt->execute([$like, $like, $like]);
} else {
    $stmt = $pdo->query("
        SELECT 
            c.*,
            COUNT(l.id) AS total_licencas
        FROM clientes c
        LEFT JOIN licencas l ON l.cliente_id = c.id
        GROUP BY c.id
        ORDER BY c.id DESC
    ");
}

$clientes = $stmt->fetchAll();
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Clientes - PromoCreative LED Mapper</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
*{box-sizing:border-box}
body{
    margin:0;
    background:
        radial-gradient(circle at top left,rgba(0,170,255,.16),transparent 32%),
        radial-gradient(circle at bottom right,rgba(255,122,0,.13),transparent 28%),
        #060b16;
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
}
.sidebar{
    width:280px;height:100vh;position:fixed;left:0;top:0;
    background:rgba(8,15,29,.96);
    border-right:1px solid rgba(255,255,255,.08);
    padding:26px;
}
.logo{margin-bottom:34px}
.logo strong{display:block;font-size:21px;line-height:1.2}
.logo span{display:block;margin-top:8px;color:#7f95bd;font-size:13px}
.sidebar a{
    display:block;color:#b7c7e8;text-decoration:none;
    padding:14px 15px;border-radius:13px;margin-bottom:8px;
}
.sidebar a:hover,.sidebar a.active{
    background:linear-gradient(135deg,rgba(255,122,0,.18),rgba(0,170,255,.18));
    color:#fff;
}
.main{margin-left:280px;padding:36px}
.header{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:26px;gap:16px;
}
.header h1{margin:0;font-size:30px}
.header p{margin:8px 0 0;color:#8fa3c7}
.btn{
    display:inline-block;
    background:linear-gradient(135deg,#ff7a00,#00aaff);
    color:#fff;text-decoration:none;
    padding:13px 18px;border-radius:14px;font-weight:bold;
}
.card{
    background:rgba(13,24,43,.92);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:24px;
    box-shadow:0 24px 70px rgba(0,0,0,.35);
}
.search{
    display:flex;gap:12px;margin-bottom:22px;
}
.search input{
    flex:1;
    padding:14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background:#08111f;
    color:#fff;
    outline:none;
}
.search button{
    padding:14px 18px;
    border:0;
    border-radius:14px;
    background:#13223a;
    color:#fff;
    cursor:pointer;
}
.table{width:100%;border-collapse:collapse}
.table th,.table td{
    padding:15px 13px;
    border-bottom:1px solid rgba(255,255,255,.07);
    text-align:left;
    font-size:14px;
}
.table th{color:#7f95bd;font-weight:normal}
.small{color:#7f95bd;font-size:13px}
.badge{
    display:inline-block;
    padding:6px 11px;
    border-radius:999px;
    font-size:12px;
}
.ativo{background:rgba(0,255,160,.12);color:#9fffc8}
.bloqueado{background:rgba(255,60,60,.12);color:#ffc1c1}
.empty{
    text-align:center;
    padding:35px;
    color:#8fa3c7;
}
.action{
    color:#00d4ff;
    text-decoration:none;
    font-weight:bold;
}
@media(max-width:950px){
    .sidebar{position:relative;width:100%;height:auto}
    .main{margin-left:0;padding:20px}
    .header{flex-direction:column;align-items:flex-start}
    .search{flex-direction:column}
}
</style>
</head>

<body>

<div class="sidebar">
    <div class="logo">
        <strong>PromoCreative<br>LED Mapper</strong>
        <span>Painel de licenças</span>
    </div>

    <a href="dashboard.php">Dashboard</a>
    <a class="active" href="clientes.php">Clientes</a>
    <a href="licencas.php">Licenças</a>
    <a href="gerar_licenca.php">Gerar Licença</a>
    <a href="computadores.php">Computadores</a>
    <a href="logout.php">Sair</a>
</div>

<div class="main">
    <div class="header">
        <div>
            <h1>Clientes</h1>
            <p>Gerencie os clientes cadastrados no sistema de licenças.</p>
        </div>

        <a class="btn" href="gerar_licenca.php">+ Nova licença</a>
    </div>

    <div class="card">
        <form class="search" method="GET">
            <input type="text" name="busca" value="<?= htmlspecialchars($busca); ?>" placeholder="Buscar por nome, e-mail ou WhatsApp">
            <button type="submit">Buscar</button>
        </form>

        <?php if (empty($clientes)): ?>
            <div class="empty">Nenhum cliente encontrado.</div>
        <?php else: ?>
            <table class="table">
                <thead>
                    <tr>
                        <th>Cliente</th>
                        <th>WhatsApp</th>
                        <th>Status</th>
                        <th>Licenças</th>
                        <th>Cadastro</th>
                        <th>Ação</th>
                    </tr>
                </thead>
                <tbody>
                <?php foreach ($clientes as $c): ?>
                    <tr>
                        <td>
                            <?= htmlspecialchars($c['nome']); ?><br>
                            <span class="small"><?= htmlspecialchars($c['email']); ?></span>
                        </td>
                        <td><?= htmlspecialchars($c['whatsapp'] ?? '-'); ?></td>
                        <td>
                            <span class="badge <?= htmlspecialchars($c['status']); ?>">
                                <?= htmlspecialchars($c['status']); ?>
                            </span>
                        </td>
                        <td><?= (int)$c['total_licencas']; ?></td>
                        <td><?= date('d/m/Y', strtotime($c['criado_em'])); ?></td>
                        <td>
                            <a class="action" href="cliente_detalhes.php?id=<?= (int)$c['id']; ?>">Ver</a>
                        </td>
                    </tr>
                <?php endforeach; ?>
                </tbody>
            </table>
        <?php endif; ?>
    </div>
</div>

</body>
</html>