<?php
include('includes/functions.php');
$table_name = "user";

$log_check = $db->select($table_name, '*', 'id = :id', '', [':id' => 1]);
$loggedinuser = !empty($log_check) ? $log_check[0]['username'] : null;

if (!empty($loggedinuser) && isset($_SESSION['name']) && $_SESSION['name'] === $loggedinuser) {
    header("Location: main.php");
    exit;
}

$data = ['id' => '1','username' => 'admin','password' => 'admin'];
$db->insertIfEmpty($table_name, $data);

if (isset($_POST["login"])){
	$username = $_POST["username"];
	$userData = $db->select($table_name, '*', 'username = :username', '', [':username' => $username]);
	if ($userData) {
		$storedPassword = $userData[0]['password'];
		$enteredPassword = $_POST["password"];
		if ($enteredPassword == $storedPassword) {
			session_regenerate_id();
			$_SESSION['loggedin'] = TRUE;
			$_SESSION['name'] = $_POST['username'];
			if ($_POST['username'] == 'admin'){
				header('Location: user.php');
			}else{
				header('Location: main.php');
			}
		}else{
			header('Location: ./api/index.php');
		}
	}else{
		header('Location: ./api/index.php');
	}
	$db->close();
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title><?php echo isset($config_ini['panel_name']) ? htmlspecialchars($config_ini['panel_name']) : 'Panel'; ?></title>
  <link rel="icon" type="image/x-icon" href="./img/favicon.ico">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Roboto', sans-serif;
      background: #0f0f0f;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .login-wrap {
      width: 100%;
      max-width: 380px;
    }

    /* Logo */
    .login-logo {
      text-align: center;
      margin-bottom: 32px;
    }
    .login-logo img {
      height: 56px;
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0 4px 16px rgba(255,0,0,.35));
    }

    /* Card */
    .login-card {
      background: #212121;
      border: 1px solid #3d3d3d;
      border-radius: 16px;
      padding: 36px 32px;
      box-shadow: 0 8px 40px rgba(0,0,0,.6);
    }

    .login-card h2 {
      color: #f1f1f1;
      font-size: 20px;
      font-weight: 500;
      text-align: center;
      margin-bottom: 28px;
      letter-spacing: .5px;
    }

    .form-group {
      margin-bottom: 18px;
    }
    .form-group label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: #aaaaaa;
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 8px;
    }
    .input-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }
    .input-wrap i {
      position: absolute;
      left: 14px;
      color: #555;
      font-size: 15px;
    }
    .input-wrap input {
      width: 100%;
      background: #2d2d2d;
      border: 1px solid #3d3d3d;
      border-radius: 8px;
      color: #f1f1f1;
      padding: 12px 14px 12px 40px;
      font-family: 'Roboto', sans-serif;
      font-size: 14px;
      outline: none;
      transition: border-color .15s;
    }
    .input-wrap input:focus { border-color: #ff0000; }
    .input-wrap input::placeholder { color: #555; }

    .btn-login {
      width: 100%;
      background: #ff0000;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 13px;
      font-family: 'Roboto', sans-serif;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      margin-top: 8px;
      transition: background .15s, transform .1s;
      letter-spacing: .5px;
    }
    .btn-login:hover { background: #cc0000; }
    .btn-login:active { transform: scale(.98); }

    .login-footer {
      text-align: center;
      margin-top: 20px;
      font-size: 13px;
      color: #555;
    }
    .login-footer a {
      color: #ff0000;
      text-decoration: none;
    }
    .login-footer a:hover { text-decoration: underline; }

    /* Mobile */
    @media (max-width: 420px) {
      .login-card { padding: 28px 20px; }
      .login-logo img { height: 44px; }
    }
  </style>
</head>
<body>

<div class="login-wrap">

  <!-- Logo -->
  <div class="login-logo">
    <img src="./img/ytp.jpg" alt="Logo">
  </div>

  <!-- Card -->
  <div class="login-card">
    <h2>Entrar no Painel</h2>

    <form method="post">
      <div class="form-group">
        <label>Username</label>
        <div class="input-wrap">
          <i class="fas fa-user"></i>
          <input type="text" name="username" placeholder="Digite seu usuário" autocomplete="username">
        </div>
      </div>

      <div class="form-group">
        <label>Password</label>
        <div class="input-wrap">
          <i class="fas fa-lock"></i>
          <input type="password" name="password" placeholder="••••••••" autocomplete="current-password">
        </div>
      </div>

      <button type="submit" name="login" class="btn-login">
        <i class="fas fa-sign-in-alt"></i> Entrar
      </button>
    </form>
  </div>

  
  </div>

</div>

</body>
</html>