<?php
require_once "../includes/lang.php";
?>
<!DOCTYPE html>
<html lang="<?= htmlspecialchars(currentLang(), ENT_QUOTES, "UTF-8") ?>">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?= htmlspecialchars(t("pricing"), ENT_QUOTES, "UTF-8") ?> - Package Selection</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<style>
  .wrap { max-width: 980px; margin: 40px auto; }
  .card { border:1px solid #ddd; border-radius:10px; padding:16px; margin-bottom:16px; }
  .card h3 { margin-top:0; }
</style>
</head>
<body>
<div class="wrap container">
  <h2>Company Package Selection</h2>
  <p>Select a package before login and generate a payment slip preview.</p>

  <div class="form-group">
    <label>Email for payment slip delivery</label>
    <input type="email" id="email" class="form-control" placeholder="company@example.com">
  </div>

  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <h3>Essence</h3>
        <p>100€</p>
        <button class="btn btn-primary js-pick" data-plan="COMPANY_BASIC">Get Started</button>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <h3>Prime</h3>
        <p>220€</p>
        <button class="btn btn-primary js-pick" data-plan="COMPANY_PRO">Get Started</button>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <h3>Prestige</h3>
        <p>450€</p>
        <button class="btn btn-primary js-pick" data-plan="COMPANY_ENTERPRISE">Get Started</button>
      </div>
    </div>
  </div>

  <div id="msg" style="margin-top:12px;"></div>
  <div style="margin-top:12px;">
    <a href="pricing.php" class="btn btn-default">Back to Pricing</a>
    <a href="index.php" class="btn btn-default">Login</a>
  </div>
</div>

<script>
(function(){
  function setMsg(t, ok){
    var m = document.getElementById("msg");
    m.style.color = ok ? "green" : "red";
    m.textContent = t || "";
  }

  function go(plan) {
    var email = (document.getElementById("email").value || "").trim();
    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setMsg("Valid email is required.", false);
      return;
    }
    window.location.href = "pricing.php?email=" + encodeURIComponent(email) + "&plan_code=" + encodeURIComponent(plan || "");
  }

  var btns = document.querySelectorAll(".js-pick");
  for (var i=0;i<btns.length;i++){
    btns[i].addEventListener("click", function(){ go(this.getAttribute("data-plan") || ""); });
  }
})();
</script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
