<?php
require_once "../includes/lang.php";

$emailPrefill = trim((string)($_GET["email"] ?? ""));
$companyEmailEsc = htmlspecialchars($emailPrefill, ENT_QUOTES, "UTF-8");
?>
<!DOCTYPE html>
<html lang="<?= htmlspecialchars(currentLang(), ENT_QUOTES, "UTF-8") ?>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?= htmlspecialchars(t("pricing"), ENT_QUOTES, "UTF-8") ?> - Konzona Hub</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 rel="stylesheet" href="assets/css/owl.carousel.min.css" type="text/css">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/colors/purple.css">
<link rel="shortcut icon" href="assets/images/favicon-icon/favicon.png">

<style>
  .navbar .logo img { max-height: 42px; width: auto; }
.email-box { max-width: 600px; margin: 0 auto 20px; }
.email-box input { height: 44px; }
.helper-note { font-size: 13px; color: #666; margin-top: 6px; }
.plan_info .btn { margin-top: 10px; }
.section-subtle { color: #666; margin-bottom: 20px; }
</style>

<script type="text/javascript">
(function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; if(typeof namespace === "string"){cal.ns[namespace] = cal.ns[namespace] || api;p(cal.ns[namespace], ar);p(cal, ["initNamespace", namespace]);} else p(cal, ar); return;} p(cal, ar); }; })(window, "https://app.cal.eu/embed/embed.js", "init");
Cal("init", "remoteconsulting", {origin:"https://app.cal.eu"});
Cal.ns.remoteconsulting("ui", {"cssVarsPerTheme":{"light":{"cal-brand":"#5410db"}},"hideEventTypeDetails":false,"layout":"month_view"});
</script>
<script type="text/javascript">
(function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; if(typeof namespace === "string"){cal.ns[namespace] = cal.ns[namespace] || api;p(cal.ns[namespace], ar);p(cal, ["initNamespace", namespace]);} else p(cal, ar); return;} p(cal, ar); }; })(window, "https://app.cal.eu/embed/embed.js", "init");
Cal("init", "onsite-4", {origin:"https://app.cal.eu"});
Cal.ns["onsite-4"]("ui", {"cssVarsPerTheme":{"light":{"cal-brand":"#5410db"}},"hideEventTypeDetails":false,"layout":"month_view"});
</script>
<script type="text/javascript">
(function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; if(typeof namespace === "string"){cal.ns[namespace] = cal.ns[namespace] || api;p(cal.ns[namespace], ar);p(cal, ["initNamespace", namespace]);} else p(cal, ar); return;} p(cal, ar); }; })(window, "https://app.cal.eu/embed/embed.js", "init");
Cal("init", "onsite-8", {origin:"https://app.cal.eu"});
Cal.ns["onsite-8"]("ui", {"cssVarsPerTheme":{"light":{"cal-brand":"#5410db"}},"hideEventTypeDetails":false,"layout":"month_view"});
</script>
<script type="text/javascript">
(function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; if(typeof namespace === "string"){cal.ns[namespace] = cal.ns[namespace] || api;p(cal.ns[namespace], ar);p(cal, ["initNamespace", namespace]);} else p(cal, ar); return;} p(cal, ar); }; })(window, "https://app.cal.eu/embed/embed.js", "init");
Cal("init", "zakazite-konsultacije", {origin:"https://app.cal.eu"});
Cal.ns["zakazite-konsultacije"]("floatingButton", {"calLink":"konzonaconsulting/zakazite-konsultacije","config":{"layout":"month_view","useSlotsViewOnSmallScreen":"true"},"buttonText":"Zakazivanje konsultacija","buttonColor":"#4514bc"});
Cal.ns["zakazite-konsultacije"]("ui", {"hideEventTypeDetails":false,"layout":"month_view"});
</script>
</head>
<body>
<header id="header">
<nav class="navbar navbar-default navbar-fixed-top" data-spy="affix" data-offset-top="10">
<div class="container">
<div class="navbar-header">
<div class="logo"><a href="index.php"><img src="assets/images/logo.png" alt="image"/></a></div>
<button id="menu_slide" data-target="#navigation" aria-expanded="false" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navigation">
<ul class="nav navbar-nav">
<li><a href="index.php">Home</a></li>
<li><a href="terms.php"><?= htmlspecialchars(t("terms_of_use"), ENT_QUOTES, "UTF-8") ?></a></li>
<li><a href="index.php"><?= htmlspecialchars(t("login"), ENT_QUOTES, "UTF-8") ?></a></li>
</ul>
</div>
</div>
</nav>
</header>

<section id="inner_banner" class="parallex-bg">
<div class="container">
<div class="white-text text-center div_zindex"><h1><?= htmlspecialchars(t("pricing"), ENT_QUOTES, "UTF-8") ?></h1></div>
</div>
<div class="dark-overlay"></div>
</section>

<section id="inner_pages">
<div class="container">
<div class="email-box">
<label for="companyEmail"><strong>Email for payment slip delivery</strong></label>
<input type="email" id="companyEmail" class="form-control" value="<?= $companyEmailEsc ?>" placeholder="company@example.com" required>
<div class="helper-note">This email will be used when you click Get Started and generate payment info.</div>
<div class="row" style="margin-top:10px;">
  <div class="col-md-3"><input type="text" id="companyName" class="form-control" placeholder="Company name"></div>
  <div class="col-md-3"><input type="text" id="companyTaxId" class="form-control" placeholder="PIB"></div>
  <div class="col-md-3"><input type="text" id="contactPerson" class="form-control" placeholder="Contact person"></div>
  <div class="col-md-3"><input type="text" id="phoneNumber" class="form-control" placeholder="Phone number"></div>
</div>
<div class="row" style="margin-top:10px;">
  <div class="col-md-6"><input type="text" id="companyAddress" class="form-control" placeholder="Company address"></div>
</div>
<div id="pricingMsg" style="margin-top:8px;font-weight:600;color:#2e7d32;"></div>
<div id="pricingSlipWrap" style="display:none;margin-top:12px;">
  <iframe id="pricingSlipFrame" title="Uplatnica" style="width:100%;height:820px;border:1px solid #ddd;border-radius:6px;background:#fff;"></iframe>
</div>
</div>

<div class="row">
<div class="col-md-4">
<div class="pricing_wrap">
<div class="pricing_header"><h2>Essence</h2><p>brza selekcija</p></div>
<div class="plan_info">
<div class="plan_price">100€</div>
<ul>
<li><span>2</span> Zahteva za radnike</li>
<li><span>7 dana</span> pristup bazi</li>
<li><span>Osnovni</span> profil radnika</li>
<li><span>Bez videa</span> radnika</li>
<li><span>Ograničena</span> podrška</li>
</ul>
<button class="btn js-get-started" data-plan="COMPANY_BASIC">Get Started</button>
</div>
</div>
</div>

<div class="col-md-4">
<div class="pricing_wrap active">
<div class="pricing_header"><p class="popular_plan">Most Popular</p><h2>Prime</h2><p>detaljnija selekcija i filtriranje radnika</p></div>
<div class="plan_info">
<div class="plan_price">220€</div>
<ul>
<li><span>5</span> zahteva za radnike</li>
<li><span>15 dana</span> pristup bazi</li>
<li><span>Proširen prikaz</span> profila radnika</li>
<li><span>Video intervju</span> radnika</li>
<li><span>24/7</span> Podrška</li>
</ul>
<button class="btn js-get-started" data-plan="COMPANY_PRO">Get Started</button>
</div>
</div>
</div>

<div class="col-md-4">
<div class="pricing_wrap">
<div class="pricing_header"><h2>Prestige</h2><p>bez limita profila radnika</p></div>
<div class="plan_info">
<div class="plan_price">450€</div>
<ul>
<li><span>15</span> zahteva za radnike</li>
<li><span>30 dana</span> pristup bazi</li>
<li><span>Pun prikaz</span> Profila radnika</li>
<li><span>Video</span> intervju i sposobnosti</li>
<li><span>24/7</span> Podrška</li>
</ul>
<button class="btn js-get-started" data-plan="COMPANY_ENTERPRISE">Get Started</button>
</div>
</div>
</div>
</div>

<h3>Konsultacije</h3>
<p class="section-subtle">Konsultacije su namenjene kompanijama koje žele jasno da definišu strategiju zapošljavanja pre ulaska u operativnu saradnju.</p>
<p class="section-subtle">Konsultacije mogu biti online ili onsite i obuhvataju analizu potreba, preporuku modela saradnje i plan zapošljavanja.</p>
<p class="section-subtle"><a href="terms.php#faq">FAQ</a></p>

<div class="row">
<div class="col-md-4">
<div class="pricing_wrap">
<div class="pricing_header"><h2>Remote</h2><p>video poziv po započetom satu do 3h ograničeno</p></div>
<div class="plan_info">
<div class="plan_price">120€/h</div>
<a class="btn" data-cal-link="konzonaconsulting/remoteconsulting" data-cal-namespace="remoteconsulting" data-cal-config='{"layout":"month_view"}' style="cursor:pointer;">Izaberite termin</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="pricing_wrap active">
<div class="pricing_header"><p class="popular_plan">Van Beograda</p><h2>Onsite 4</h2><p>do 4h sa uračunatim vremenom puta i logistikom</p></div>
<div class="plan_info">
<div class="plan_price">600€</div>
<a class="btn" data-cal-link="konzonaconsulting/onsite-4" data-cal-namespace="onsite-4" data-cal-config='{"layout":"month_view"}' style="cursor:pointer;">Izaberite termin</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="pricing_wrap">
<div class="pricing_header"><p class="popular_plan">Van Beograda</p><h2>Onsite 8</h2><p>do 8h sa uračunatim vremenom puta i logistikom</p></div>
<div class="plan_info">
<div class="plan_price">900€</div>
<a class="btn" data-cal-link="konzonaconsulting/onsite-8" data-cal-namespace="onsite-8" data-cal-config='{"layout":"month_view"}' style="cursor:pointer;">Izaberite termin</a>
</div>
</div>
</div>
</div>
</div>
</section>

<script>
(function () {
  function setPricingMsg(text, ok) {
    var el = document.getElementById("pricingMsg");
    if (!el) return;
    el.style.color = ok ? "#2e7d32" : "#c62828";
    el.textContent = text || "";
  }

  async function goToSubscription(planCode) {
    var emailInput = document.getElementById("companyEmail");
    var email = (emailInput && emailInput.value ? emailInput.value.trim() : "");
    var companyName = (document.getElementById("companyName").value || "").trim();
    var taxId = (document.getElementById("companyTaxId").value || "").trim();
    var contactPerson = (document.getElementById("contactPerson").value || "").trim();
    var phoneNumber = (document.getElementById("phoneNumber").value || "").trim();
    var companyAddress = (document.getElementById("companyAddress").value || "").trim();

    if (!companyName || !taxId || !email || !contactPerson || !phoneNumber) {
      setPricingMsg("Company name, PIB, Email, Contact person i Phone number su obavezni.", false);
      return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setPricingMsg("Unesite ispravan email.", false);
      return;
    }

    try {
      var r = await fetch("../api/subscriptions.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "same-origin",
        body: JSON.stringify({
          csrf: "",
          allow_public_slip: 1,
          plan_code: planCode,
          company_name: companyName,
          company_address: companyAddress || "N/A",
          company_tax_id: taxId,
          company_email: email,
          contact_person: contactPerson,
          phone_number: phoneNumber
        })
      });
      var j = await r.json().catch(function(){ return { success:false, error:"invalid_response" }; });
      if (!j.success) {
        var details = (j && (j.error || j.message)) ? (" (" + (j.error || j.message) + ")") : "";
        setPricingMsg("Predračun nije generisan." + details, false);
        return;
      }
      setPricingMsg("Predračun je generisan i poslat na mail.", true);
      var wrap = document.getElementById("pricingSlipWrap");
      var frame = document.getElementById("pricingSlipFrame");
      if (j.data && j.data.slip_pdf_endpoint && wrap && frame) {
        frame.src = j.data.slip_pdf_endpoint;
        wrap.style.display = "block";
      }
    } catch (e) {
      setPricingMsg("Predračun nije generisan.", false);
    }
  }

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