{"id":41328,"date":"2026-03-05T12:16:18","date_gmt":"2026-03-05T12:16:18","guid":{"rendered":"https:\/\/anex.creative-brackets.com\/?page_id=41328"},"modified":"2026-03-13T11:36:44","modified_gmt":"2026-03-13T11:36:44","slug":"service-contract-calculator","status":"publish","type":"page","link":"https:\/\/anex.creative-brackets.com\/en\/service-contract-calculator\/","title":{"rendered":"Service contract calculator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"41328\" class=\"elementor elementor-41328 elementor-41201\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-67f3b9e e-flex e-con-boxed e-con e-parent\" data-id=\"67f3b9e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7f1a458 elementor-widget elementor-widget-html\" data-id=\"7f1a458\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"anex-calc\">\r\n  <style>\r\n    .anex-calc{\r\n      --card:#ffffff;\r\n      --text:#021228;\r\n      --muted:rgba(2,18,40,.72);\r\n      --line:rgba(2,18,40,.14);\r\n      --accent:#C7A46B;\r\n      --shadow: 0 14px 40px rgba(2,18,40,.10);\r\n      --radius: 18px;\r\n      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\r\n      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n      font-family: var(--sans);\r\n      color: var(--text);\r\n    }\r\n\r\n    .anex-calc .wrap{ width:100%; max-width:980px; margin:0 auto; display:grid; gap:18px; grid-template-columns:1fr; }\r\n    .anex-calc .card{ background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:var(--radius); padding:22px; }\r\n\r\n    .anex-calc .badge{\r\n      display:inline-flex; align-items:center; gap:8px;\r\n      padding:7px 12px; border-radius:999px;\r\n      background: rgba(199,164,107,.16);\r\n      border:1px solid rgba(199,164,107,.35);\r\n      color: rgba(2,18,40,.88);\r\n      font-size:12px; letter-spacing:.6px; text-transform:uppercase; font-weight:600;\r\n      margin-bottom:14px;\r\n    }\r\n\r\n    .anex-calc h2{ font-size:30px; line-height:1.15; margin:0 0 10px 0; letter-spacing:.2px; }\r\n    .anex-calc .sub{ margin:0 0 18px 0; color:var(--muted); font-size:14px; line-height:1.5; max-width:60ch; }\r\n\r\n    .anex-calc label{ display:block; font-size:13px; color:rgba(2,18,40,.78); margin-bottom:8px; font-weight:600; }\r\n\r\n    .anex-calc .row{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }\r\n\r\n    .anex-calc input[type=\"text\"], .anex-calc .anex-select{\r\n      width:100%;\r\n      padding:13px 14px;\r\n      border-radius:14px;\r\n      border:1px solid var(--line);\r\n      background:#F5F6F7;\r\n      color:var(--text);\r\n      outline:none;\r\n      font-size:16px;\r\n    }\r\n    .anex-calc input[type=\"text\"]{ font-family: var(--mono); }\r\n    .anex-calc .anex-select{ font-family: var(--sans); appearance:none; }\r\n\r\n    .anex-calc input[type=\"text\"]:focus, .anex-calc .anex-select:focus{\r\n      border-color: rgba(199,164,107,.65);\r\n      box-shadow: 0 0 0 4px rgba(199,164,107,.18);\r\n    }\r\n\r\n    .anex-calc .pill{\r\n      font-size:12px; padding:6px 10px; border-radius:999px;\r\n      border:1px solid var(--line); background:#fff;\r\n      color:rgba(2,18,40,.75); white-space:nowrap; font-weight:600;\r\n    }\r\n\r\n    .anex-calc .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }\r\n    @media (max-width:520px){ .anex-calc .grid2{ grid-template-columns:1fr; } }\r\n\r\n    .anex-calc .btns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }\r\n    .anex-calc button{\r\n      border: 1px solid rgba(199,164,107,.45);\r\n      background: rgba(199,164,107,.14);\r\n      color: rgba(2,18,40,.92);\r\n      padding: 10px 12px;\r\n      border-radius: 14px;\r\n      cursor:pointer;\r\n      font-size: 13px;\r\n      font-weight: 700;\r\n    }\r\n    .anex-calc button:hover{ background: rgba(199,164,107,.20); border-color: rgba(199,164,107,.70); }\r\n    .anex-calc button:active{ transform: translateY(1px); }\r\n\r\n    .anex-calc .kpi{ display:grid; gap:12px; }\r\n    .anex-calc .kpiItem{ padding:14px; border-radius:16px; border:1px solid var(--line); background:#F5F6F7; }\r\n    .anex-calc .kpiTop{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }\r\n    .anex-calc .kpiLabel{ font-size:12px; color:rgba(2,18,40,.70); font-weight:700; }\r\n    .anex-calc .kpiValue{ font-family:var(--mono); font-size:22px; letter-spacing:.2px; margin-top:6px; color:var(--text); font-weight:800; }\r\n\r\n    .anex-calc .note{\r\n      margin-top:16px; border-top:1px dashed rgba(2,18,40,.18);\r\n      padding-top:12px; color:rgba(2,18,40,.66);\r\n      font-size:12px; line-height:1.55;\r\n    }\r\n    .anex-calc .mono{ font-family: var(--mono); }\r\n  <\/style>\r\n<div class=\"wrap\">\r\n  <section class=\"card\">\r\n    <div class=\"badge\">Our services \u2022 Calculator<\/div>\r\n    <h2>Service contract calculator<\/h2>\r\n    <p class=\"sub\">\r\n      Enter the net amount and select the calculation mode. The total cost (gross) is calculated using the coefficients from your table.\r\n    <\/p>\r\n\r\n    <!-- CURRENCY + RATE -->\r\n    <div class=\"grid2\" style=\"margin-bottom:14px;\">\r\n      <div>\r\n        <label for=\"uod_currency\">Input currency<\/label>\r\n        <div class=\"row\">\r\n          <select id=\"uod_currency\" class=\"anex-select\">\r\n            <option value=\"RSD\" selected>RSD<\/option>\r\n            <option value=\"EUR\">EUR<\/option>\r\n          <\/select>\r\n          <span class=\"pill\">select<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div>\r\n        <label for=\"uod_rate\">EUR\/RSD exchange rate<\/label>\r\n        <div class=\"row\">\r\n          <input id=\"uod_rate\" type=\"text\" inputmode=\"decimal\" placeholder=\"e.g. 117.4\" value=\"117.4\" \/>\r\n          <span class=\"pill\">RSD<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- MODE + NET -->\r\n    <div class=\"grid2\">\r\n      <div>\r\n        <label for=\"uod_mode\">Calculation mode<\/label>\r\n        <div class=\"row\">\r\n          <select id=\"uod_mode\" class=\"anex-select\">\r\n            <option value=\"1.768033946\">Tax + Pension + Health insurance<\/option>\r\n            <option value=\"1.543209877\">Tax + Pension<\/option>\r\n            <option value=\"1.190476190\">Tax only<\/option>\r\n          <\/select>\r\n          <span class=\"pill mono\" id=\"uod_factorPill\">1.768033946<\/span>\r\n        <\/div>\r\n\r\n        <div style=\"margin-top:14px;\">\r\n          <label for=\"uod_neto\">Net (<span id=\"uod_lblCurrency\">RSD<\/span>)<\/label>\r\n          <div class=\"row\">\r\n            <input id=\"uod_neto\" type=\"text\" inputmode=\"decimal\" placeholder=\"e.g. 500000\" \/>\r\n            <span class=\"pill\" id=\"uod_pillCurrency\">RSD<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"btns\">\r\n            <button type=\"button\" id=\"uod_btnExample\">Example<\/button>\r\n            <button type=\"button\" id=\"uod_btnClear\">Clear<\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"kpi\">\r\n        <div class=\"kpiItem\">\r\n          <div class=\"kpiTop\">\r\n            <div class=\"kpiLabel\">Total cost (Gross)<\/div>\r\n            <span class=\"pill\">calculated<\/span>\r\n          <\/div>\r\n          <div class=\"kpiValue\" id=\"uod_bruto\">\u2014<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"kpiItem\">\r\n          <div class=\"kpiTop\">\r\n            <div class=\"kpiLabel\">Taxes and contributions<\/div>\r\n            <span class=\"pill\">Gross \u2212 Net<\/span>\r\n          <\/div>\r\n          <div class=\"kpiValue\" id=\"uod_razlika\">\u2014<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"kpiItem\">\r\n          <div class=\"kpiTop\">\r\n            <div class=\"kpiLabel\">Tax burden<\/div>\r\n            <span class=\"pill\">(Gross \u2212 Net) \/ Net<\/span>\r\n          <\/div>\r\n          <div class=\"kpiValue\" id=\"uod_opterecenje\">\u2014<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"note\">\r\n      The coefficients are taken from your table. If you want a detailed breakdown into \u201ctax \/ pension \/ health insurance\u201d\r\n      per item, send the Excel formula or parameters (rates\/bases) \u2014 then I can calculate each component separately.\r\n    <\/div>\r\n  <\/section>\r\n<\/div>\r\n\r\n  <script>\r\n    const elCurrency = document.getElementById('uod_currency');\r\n    const elRate = document.getElementById('uod_rate');\r\n    const elMode = document.getElementById('uod_mode');\r\n    const elFactorPill = document.getElementById('uod_factorPill');\r\n\r\n    const elLblCurrency = document.getElementById('uod_lblCurrency');\r\n    const elPillCurrency = document.getElementById('uod_pillCurrency');\r\n\r\n    const elNeto = document.getElementById('uod_neto');\r\n    const elBruto = document.getElementById('uod_bruto');\r\n    const elRazlika = document.getElementById('uod_razlika');\r\n    const elOpt = document.getElementById('uod_opterecenje');\r\n\r\n    function parseNumberSR(value) {\r\n      if (value == null) return NaN;\r\n      let v = String(value).trim();\r\n      if (!v) return NaN;\r\n      v = v.replace(\/\\s+\/g, '');\r\n\r\n      if (v.includes('.') && v.includes(',')) {\r\n        v = v.replace(\/\\.\/g, '').replace(',', '.');\r\n      } else if (v.includes(',')) {\r\n        v = v.replace(',', '.');\r\n      } else {\r\n        if (\/^\\d{1,3}(\\.\\d{3})+$\/.test(v)) v = v.replace(\/\\.\/g, '');\r\n      }\r\n      const num = Number(v);\r\n      return Number.isFinite(num) ? num : NaN;\r\n    }\r\n\r\n    function formatMoney(num, currency) {\r\n      if (!Number.isFinite(num)) return '\u2014';\r\n      const s = num.toLocaleString('sr-RS', { minimumFractionDigits: 2, maximumFractionDigits: 2 });\r\n      return currency === 'EUR' ? (s + ' \u20ac') : (s + ' RSD');\r\n    }\r\n\r\n    function formatPct(num) {\r\n      if (!Number.isFinite(num)) return '\u2014';\r\n      return num.toLocaleString('sr-RS', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '%';\r\n    }\r\n\r\n    function syncCurrencyUI() {\r\n      const c = elCurrency.value || 'RSD';\r\n      elLblCurrency.textContent = c;\r\n      elPillCurrency.textContent = c;\r\n\r\n      const eur = (c === 'EUR');\r\n      elRate.disabled = !eur;\r\n      elRate.style.opacity = eur ? '1' : '.55';\r\n    }\r\n\r\n    function render() {\r\n      const currency = elCurrency.value || 'RSD';\r\n      const rate = parseNumberSR(elRate.value);\r\n      const netoIn = parseNumberSR(elNeto.value);\r\n\r\n      const factor = parseNumberSR(elMode.value);\r\n      elFactorPill.textContent = Number.isFinite(factor) ? String(factor) : '\u2014';\r\n\r\n      if (!Number.isFinite(netoIn) || netoIn <= 0 || !Number.isFinite(factor) || factor <= 0) {\r\n        elBruto.textContent = '\u2014';\r\n        elRazlika.textContent = '\u2014';\r\n        elOpt.textContent = '\u2014';\r\n        return;\r\n      }\r\n\r\n      if (currency === 'EUR' && (!Number.isFinite(rate) || rate <= 0)) {\r\n        elBruto.textContent = '\u2014';\r\n        elRazlika.textContent = '\u2014';\r\n        elOpt.textContent = '\u2014';\r\n        return;\r\n      }\r\n\r\n      \/\/ Neto (unos) -> RSD\r\n      const netoRSD = (currency === 'EUR') ? (netoIn * rate) : netoIn;\r\n\r\n      \/\/ Bruto (ukupan tro\u0161ak) u RSD po koeficijentu\r\n      const brutoRSD = netoRSD * factor;\r\n\r\n      \/\/ Prikaz u valuti unosa\r\n      const brutoOut = (currency === 'EUR') ? (brutoRSD \/ rate) : brutoRSD;\r\n\r\n      const razlikaOut = brutoOut - netoIn;\r\n      const opterecenje = (razlikaOut \/ netoIn) * 100;\r\n\r\n      elBruto.textContent = formatMoney(brutoOut, currency);\r\n      elRazlika.textContent = formatMoney(razlikaOut, currency);\r\n      elOpt.textContent = formatPct(opterecenje);\r\n    }\r\n\r\n    elNeto.addEventListener('input', render);\r\n    elRate.addEventListener('input', render);\r\n    elMode.addEventListener('change', render);\r\n\r\n    elCurrency.addEventListener('change', () => {\r\n      syncCurrencyUI();\r\n      render();\r\n      elNeto.focus();\r\n    });\r\n\r\n    document.getElementById('uod_btnExample').addEventListener('click', () => {\r\n      elNeto.value = (elCurrency.value === 'EUR') ? '4000' : '500000';\r\n      render();\r\n      elNeto.focus();\r\n    });\r\n\r\n    document.getElementById('uod_btnClear').addEventListener('click', () => {\r\n      elNeto.value = '';\r\n      render();\r\n      elNeto.focus();\r\n    });\r\n\r\n    syncCurrencyUI();\r\n    render();\r\n  <\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our services \u2022 Calculator Service contract calculator Enter the net amount and select the calculation mode. The total cost (gross) is calculated using the coefficients from your table. Input currency RSDEUR select EUR\/RSD exchange rate RSD Calculation mode Tax + Pension + Health insuranceTax + PensionTax only 1.768033946 Net (RSD) RSD Example Clear Total cost&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-41328","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/anex.creative-brackets.com\/en\/wp-json\/wp\/v2\/pages\/41328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anex.creative-brackets.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/anex.creative-brackets.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/anex.creative-brackets.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/anex.creative-brackets.com\/en\/wp-json\/wp\/v2\/comments?post=41328"}],"version-history":[{"count":5,"href":"https:\/\/anex.creative-brackets.com\/en\/wp-json\/wp\/v2\/pages\/41328\/revisions"}],"predecessor-version":[{"id":41333,"href":"https:\/\/anex.creative-brackets.com\/en\/wp-json\/wp\/v2\/pages\/41328\/revisions\/41333"}],"wp:attachment":[{"href":"https:\/\/anex.creative-brackets.com\/en\/wp-json\/wp\/v2\/media?parent=41328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}