<?php
session_start();

// Conexão SQLite
$db_check1 = new SQLite3("api/.anspanel.db");
$db_check1->exec("CREATE TABLE IF NOT EXISTS USERS(
    id INT PRIMARY KEY,
    NAME TEXT,
    USERNAME TEXT,
    PASSWORD TEXT,
    ADMIN INT,
    LOGO TEXT
)");

// Verifica se existe algum usuário, se não, cria padrão
$rows = $db_check1->query("SELECT COUNT(*) as count FROM USERS");
$row = $rows->fetchArray();
if ($row["count"] == 0) {
    $db_check1->exec("INSERT INTO USERS(id, NAME, USERNAME, PASSWORD, ADMIN, LOGO) 
        VALUES('1', 'Seu Nome', 'admin', 'admin', '1', '../img_custom/logo/678ed8e771850.png')");
}

// Pega a logo do primeiro usuário admin
$res_login = $db_check1->query("SELECT * FROM USERS WHERE ADMIN = 1 LIMIT 1");
$row_login = $res_login->fetchArray();
$logo_login = $row_login['LOGO'] ?? '../img_custom/logo/678ed8e771850.png';

// Login
if (isset($_POST["login"])) {
    $username = $_POST["username"];
    $password = $_POST["password"];

    $sql_check = "SELECT * FROM USERS WHERE USERNAME='$username' AND PASSWORD='$password' AND ADMIN = 1";
    $ret_check = $db_check1->query($sql_check);
    $row_check = $ret_check->fetchArray();

    if (!$row_check) {
        echo "<div class=\"alert alert-danger\" id=\"flash-msg\"><h4><i class=\"icon fa fa-times\"></i>Usuário ou senha inválidos!</h4></div>";
    } else {
        $_SESSION["admin"] = 1;
        $_SESSION["id"] = $row_check["id"];
        header("Location: /all_users.php");
        exit();
    }
    $db_check1->close();
}
?>

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PAINEL TV</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link href="css/sb-admin-<?php echo $col2 ?? 'default'; ?>.css" rel="stylesheet">
    <link rel="icon" href="img/atvwhite.png" type="image/png">
    <style>
    
            body {
                padding-top: 40px;
                background-color: #121212;
                color: white;
            }

            .container {
                padding: 0 20px;
            }
        

     
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 100vh;
        }

        .form-container {
            background-color: #000;
            padding: 20px;
            border-radius: 10px;
            border-top: 5px solid #4e73df;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
            width: 100%;
            max-width: 400px;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .btn {
            padding: 5px 20px;
            font-size: 16px;
        }

        .btn2 {
            padding: 10px 20px;
            font-size: 20px;
        }

        .password-toggle-icon {
            cursor: pointer;
            user-select: none;
        }

        .outside-image {
            width: 30%;
            max-width: 100%;
            margin-bottom: 20px;
        }

        .form-title {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
        }

        .image-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
    </style>
</head>
<body class="bg-gradient-primary">
<div class="container">
    <div class="form-container">
        <div class="image-container">
            <img src="<?= htmlspecialchars($logo_login) ?>" class="outside-image" alt="Logo">
        </div>
        <div class="form-title">Painel</div>
        <form method="POST">
            <div class="form-group mb-3">
                <input type="text" class="form-control" placeholder="NOME DE USUÁRIO" name="username" required autofocus>
            </div>
            <div class="form-group mb-3">
                <div class="input-group">
                    <input type="password" class="form-control" placeholder="SENHA" name="password" required>
                    <button type="button" class="btn btn-secondary password-toggle-icon" onclick="togglePasswordVisibility()">
                        <i class="fas fa-eye-slash"></i>
                    </button>
                </div>
            </div>
            <button class="btn btn-primary btn-lg w-100" name="login" type="submit">Login</button>
        </form>
    </div>
</div>

<script>
function togglePasswordVisibility() {
    const passwordInput = document.querySelector('[name="password"]');
    const icon = document.querySelector('.password-toggle-icon i');
    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        icon.className = 'fas fa-eye';
    } else {
        passwordInput.type = 'password';
        icon.className = 'fas fa-eye-slash';
    }
}
</script>
</body>
</html>
