IHS & OSHC Calculator

Memuat kalkulator...

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>UK Visa IHS Cost Calculator</title>
  <style>
    :root {
      --bg: #101418;
      --panel: #171b20;
      --panel-2: #1d2228;
      --panel-soft: #20262d;
      --text: #f3f4f6;
      --muted: #a9b2bd;
      --line: #343b45;
      --line-strong: #46505c;
      --blue: #1d70b8;
      --blue-light: #2f8dda;
      --gov-blue: #3478bd;
      --green: #00a36c;
      --warning-bg: #2b2416;
      --warning-line: #7d5d18;
      --warning-text: #ffe3a3;
      --danger: #ff6b6b;
      --shadow: 0 24px 70px rgba(0, 0, 0, .35);
      --radius: 22px;
    }

* { box-sizing: border-box; }

body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(52, 120, 189, .28), transparent 32%),
        linear-gradient(135deg, #0e1115, var(--bg));
      min-height: 100vh;
    }

.container {
      width: min(1210px, 92%);
      margin: auto;
      padding: 30px 0 64px;
    }

.hero {
      border-radius: 30px;
      overflow: hidden;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      margin-bottom: 22px;
      background: linear-gradient(135deg, #11161b 0%, #151b22 55%, #1b2733 100%);
    }

.gov-header {
      min-height: 104px;
      padding: 24px 30px;
      background: linear-gradient(135deg, var(--gov-blue), #2667a4);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      position: relative;
      overflow: hidden;
    }

.gov-header::after {
      content: "";
      position: absolute;
      right: -80px;
      top: -120px;
      width: 290px;
      height: 290px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .10);
    }

.gov-logo {
      display: flex;
      align-items: center;
      gap: 16px;
      font-weight: 900;
      letter-spacing: 8px;
      font-size: clamp(36px, 5vw, 64px);
      line-height: 1;
      white-space: nowrap;
      position: relative;
      z-index: 1;
    }

.crown {
      width: 62px;
      height: 54px;
      flex: 0 0 auto;
    }

.dot {
      color: #9adbc9;
      letter-spacing: 0;
      margin: 0 -4px 0 -6px;
    }

.hero-body {
      padding: 30px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 26px;
      align-items: stretch;
    }

.hero h1 {
      margin: 0;
      font-size: clamp(30px, 4vw, 54px);
      line-height: 1.08;
      letter-spacing: -1px;
    }

.hero p {
      color: var(--muted);
      max-width: 850px;
      line-height: 1.65;
      margin: 14px 0 0;
      font-size: 15px;
    }

.rate-card {
      background: rgba(255, 255, 255, .96);
      color: #111827;
      border-radius: 22px;
      padding: 20px;
      align-self: center;
      box-shadow: 0 18px 42px rgba(0, 0, 0, .25);
    }

.rate-label {
      color: var(--blue);
      font-weight: 900;
      font-size: 12px;
      letter-spacing: .6px;
      text-transform: uppercase;
    }

.rate-total {
      margin-top: 8px;
      font-size: clamp(22px, 2.4vw, 29px);
      line-height: 1.12;
      font-weight: 900;
      letter-spacing: -1px;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

.rate-small {
      margin-top: 5px;
      color: #6b7280;
      font-size: 13px;
      font-weight: 700;
    }

.rate-row {
      margin-top: 14px;
      display: grid;
      grid-template-columns: 1fr 134px;
      align-items: center;
      gap: 12px;
      color: #6b7280;
      font-size: 12px;
      line-height: 1.4;
    }

.main-grid {
      display: grid;
      grid-template-columns: 392px minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }

.box {
      background: rgba(23, 27, 32, .96);
      border: 1px solid var(--line);
      border-radius: 26px;
      padding: 24px;
      box-shadow: var(--shadow);
    }

.form-box {
      position: sticky;
      top: 20px;
    }

h2 {
      margin: 0 0 16px;
      font-size: 23px;
      letter-spacing: -.2px;
    }

label {
      display: block;
      margin: 15px 0 8px;
      font-size: 13px;
      font-weight: 900;
      color: #d7dde5;
    }

input,
    select {
      width: 100%;
      min-height: 50px;
      padding: 13px 14px;
      border-radius: 14px;
      border: 1px solid var(--line-strong);
      outline: none;
      font-size: 15px;
      background: #14181d;
      color: var(--text);
    }

input[type="number"] { appearance: textfield; }
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.rate-card input {
      background: #f8fafc;
      color: #111827;
      border: 1px solid #cbd5e1;
      min-height: 42px;
      font-size: 13px;
      padding: 10px;
      border-radius: 12px;
    }

input:focus,
    select:focus {
      border-color: var(--blue-light);
      box-shadow: 0 0 0 4px rgba(47, 141, 218, .16);
    }

.row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

.checkbox-grid {
      margin-top: 16px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

.check-row {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #d7dde5;
      font-weight: 800;
      font-size: 14px;
      line-height: 1.35;
    }

.check-row input {
      width: 22px;
      height: 22px;
      min-height: 22px;
      accent-color: var(--blue-light);
      flex: 0 0 auto;
    }

button {
      width: 100%;
      border: 0;
      border-radius: 15px;
      padding: 14px 16px;
      margin-top: 16px;
      font-size: 15px;
      font-weight: 900;
      color: white;
      background: linear-gradient(135deg, var(--blue-light), var(--blue));
      cursor: pointer;
      box-shadow: 0 16px 34px rgba(29, 112, 184, .32);
      transition: .18s ease;
    }

button:hover { transform: translateY(-1px); }

.button-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 10px;
    }

.button-grid button {
      margin-top: 0;
      padding: 12px 10px;
      font-size: 14px;
      background: #232b34;
      color: #dbeafe;
      border: 1px solid #344456;
      box-shadow: none;
    }

.button-grid button:hover { background: #2b3541; }

.clear-btn {
      margin-top: 10px;
      background: #2b2416;
      color: #ffe3a3;
      border: 1px solid #7d5d18;
      box-shadow: none;
    }

.clear-btn:hover { background: #342b1a; }

.summary {
      margin-top: 18px;
      display: grid;
      gap: 10px;
    }

.summary-item {
      background: var(--panel-soft);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 12px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

.summary-item b { color: var(--text); }

.notice,
    .formula-box,
    .error-box {
      border-radius: 16px;
      padding: 14px;
      margin-top: 16px;
      font-size: 13px;
      line-height: 1.55;
    }

.formula-box {
      background: #162230;
      border: 1px solid #234a71;
      color: #d8ebff;
    }

.notice {
      background: var(--warning-bg);
      border: 1px solid var(--warning-line);
      color: var(--warning-text);
    }

.error-box {
      display: none;
      background: #321b1d;
      border: 1px solid #743035;
      color: #ffb4b4;
      font-weight: 800;
    }

.toolbar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

.toolbar p {
      margin: 4px 0 0;
      color: var(--muted);
      line-height: 1.5;
      font-size: 14px;
    }

.badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      background: #123222;
      color: #aff7d3;
      border: 1px solid #1f7a51;
      padding: 8px 13px;
      border-radius: 999px;
      font-weight: 900;
      font-size: 13px;
    }

.total-card {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
      margin-bottom: 18px;
      width: 100%;
    }

.metric {
      background: var(--panel-2);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 18px;
      min-width: 0;
      overflow: hidden;
    }

.metric-label {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .6px;
      font-weight: 900;
    }

.metric-value {
      margin-top: 7px;
      font-size: clamp(19px, 2vw, 26px);
      line-height: 1.16;
      font-weight: 900;
      letter-spacing: -.6px;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

.table-wrap {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #15191e;
    }

table {
      width: 100%;
      border-collapse: collapse;
      min-width: 820px;
      font-size: 14px;
    }

th,
    td {
      padding: 15px 14px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: middle;
    }

th {
      background: #20262d;
      color: #f5f7fa;
      font-weight: 900;
      white-space: nowrap;
    }

td { color: #e6eaf0; }

td.num,
    th.num { text-align: right; }

tbody tr:hover td { background: rgba(255, 255, 255, .025); }

.total-row td {
      background: #20262d;
      font-weight: 900;
      font-size: 16px;
    }

.zero-note {
      color: #b8c2ce;
      font-size: 13px;
      line-height: 1.5;
      margin-top: 13px;
      padding: 13px 14px;
      border-radius: 14px;
      background: #14191f;
      border: 1px dashed var(--line-strong);
    }

.disclaimer {
      margin-top: 20px;
      padding: 16px;
      border-radius: 18px;
      background: #14191f;
      border: 1px dashed var(--line-strong);
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
    }

.muted { color: var(--muted); }
    .positive { color: #aff7d3; }
    .danger { color: var(--danger); }

@media (max-width: 980px) {
      .hero-body,
      .main-grid { grid-template-columns: 1fr; }
      .form-box { position: static; }
    }

@media (max-width: 620px) {
      .container { width: min(94%, 1210px); padding-top: 18px; }
      .gov-header { padding: 22px; min-height: 86px; }
      .gov-logo { font-size: 35px; letter-spacing: 4px; gap: 10px; }
      .crown { width: 42px; height: 40px; }
      .hero-body,
      .box { padding: 20px; }
      .row,
      .rate-row,
      .button-grid { grid-template-columns: 1fr; }
      table { min-width: 760px; }
    }

/* Responsive fixes: keep content inside screen without changing formulas */
    html, body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }

.container,
    .hero,
    .box,
    .rate-card,
    .metric,
    .summary-item,
    .formula-box,
    .notice,
    .disclaimer,
    .table-wrap {
      max-width: 100%;
      min-width: 0;
    }

h1, h2, p, label, .gov-logo, .metric-value, .rate-total, .rate-small, .summary-item, .formula-box, .notice, .disclaimer, td, th {
      overflow-wrap: anywhere;
      word-break: normal;
    }

.table-wrap {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

@media (max-width: 1120px) {
      .container {
        width: min(94%, 1210px);
      }

.main-grid {
        grid-template-columns: 360px minmax(0, 1fr);
      }
    }

@media (max-width: 860px) {
      .container {
        width: min(94%, 1210px);
        padding: 18px 0 44px;
      }

.hero {
        border-radius: 24px;
      }

.hero-body,
      .main-grid {
        grid-template-columns: 1fr;
      }

.hero-body {
        padding: 22px;
        gap: 18px;
      }

.form-box {
        position: static;
      }

.total-card {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      }

table {
        min-width: 0;
      }
    }

@media (max-width: 700px) {
      .gov-header {
        min-height: auto;
        padding: 18px;
      }

.gov-logo {
        width: 100%;
        font-size: clamp(28px, 12vw, 44px);
        letter-spacing: clamp(2px, 1.4vw, 5px);
        gap: 10px;
      }

.crown {
        width: 42px;
        height: 40px;
      }

.row,
      .rate-row,
      .button-grid {
        grid-template-columns: 1fr;
      }

.box {
        padding: 18px;
        border-radius: 22px;
      }

.toolbar {
        display: grid;
        grid-template-columns: 1fr;
      }

.badge {
        width: fit-content;
      }

.table-wrap {
        border-radius: 16px;
        overflow-x: hidden;
      }

table,
      thead,
      tbody,
      tr,
      th,
      td {
        display: block;
        width: 100%;
        min-width: 0;
      }

thead {
        display: none;
      }

tbody tr {
        margin: 0;
        padding: 12px;
        border-bottom: 1px solid var(--line);
        background: #15191e;
      }

tbody tr:last-child {
        border-bottom: 0;
      }

td,
      td.num {
        display: grid;
        grid-template-columns: minmax(120px, 42%) minmax(0, 1fr);
        gap: 10px;
        text-align: right;
        padding: 9px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
      }

td:last-child {
        border-bottom: 0;
      }

td::before {
        text-align: left;
        color: var(--muted);
        font-weight: 900;
      }

td:nth-child(1)::before { content: 'Applicant Type'; }
      td:nth-child(2)::before { content: 'Count'; }
      td:nth-child(3)::before { content: 'Duration Years'; }
      td:nth-child(4)::before { content: 'Yearly Rate'; }
      td:nth-child(5)::before { content: 'Subtotal'; }
      td:nth-child(6)::before { content: 'Subtotal IDR'; }

.total-row td {
        display: grid;
        grid-template-columns: minmax(120px, 42%) minmax(0, 1fr);
        font-size: 15px;
      }

.total-row td[colspan]::before { content: 'Total'; }
    }

@media (max-width: 420px) {
      .container {
        width: 94%;
      }

.hero-body,
      .box {
        padding: 16px;
      }

.hero h1 {
        font-size: clamp(28px, 11vw, 40px);
      }

.rate-card {
        padding: 16px;
      }

.metric {
        padding: 15px;
      }

td,
      td.num {
        grid-template-columns: 1fr;
        text-align: left;
      }
    }

/* Stable footer/body inside iframe */
    body { min-height: auto; }
    .container { padding-bottom: clamp(28px, 5vw, 52px); }
    main.box { margin-bottom: 0; }
    .disclaimer { margin-bottom: 0; }
</style>
</head>
<body>
  <div class="container">
    <section class="hero">
      <div class="gov-header" aria-label="GOV.UK header">
        <div class="gov-logo">
          <svg class="crown" viewBox="0 0 120 100" fill="none" aria-hidden="true">
            <path d="M16 76h88v12H16V76Z" fill="white"/>
            <path d="M26 70h68l8-38-23 20-19-31-19 31-23-20 8 38Z" fill="white"/>
            <circle cx="18" cy="29" r="7" fill="white"/>
            <circle cx="60" cy="13" r="7" fill="white"/>
            <circle cx="102" cy="29" r="7" fill="white"/>
            <path d="M38 66h44v7H38v-7Z" fill="#3478bd" opacity=".5"/>
          </svg>
          <span>GOV<span class="dot">•</span>UK</span>
        </div>
      </div>

<div class="hero-body">
        <div>
          <h1>UK Visa IHS Cost Calculator</h1>
          <p>
            Kalkulator simulasi biaya Immigration Health Surcharge untuk Student Visa dan Graduate Visa.
            Perhitungan bulan mengikuti rule custom berbasis perpindahan bulan kalender, bukan hitungan hari.
            Contoh: 30 Januari ke 1 Februari dihitung 1 bulan penuh. Rule biaya: 0–6 bulan = £0,
            7–12 bulan = 1 tahun. Durasi 1.5, 2.5, dan kelipatan 0.5 hanya menjadi keterangan durasi; subtotal hanya dikalikan setiap tahun penuh.
          </p>
        </div>

<div class="rate-card">
          <div class="rate-label">Total estimasi ke IDR</div>
          <div class="rate-total" id="heroIdrTotal">Rp -</div>
          <div class="rate-small" id="heroGbpTotal">£ -</div>
          <div class="rate-row">
            <div>
              Rate GBP → IDR<br />
              <small>Dapat disesuaikan manual</small>
            </div>
            <input type="number" id="gbpIdrRate" value="24133.2" min="1" step="0.1" oninput="calculate(false)" />
          </div>
        </div>
      </div>
    </section>

<section class="main-grid">
      <aside class="box form-box">
        <h2>Input Visa</h2>

<label for="visaType">Visa Type <span class="danger">*</span></label>
        <select id="visaType" onchange="calculate(false)" required>
          <option value="" selected disabled>Select Visa Type</option>
          <option value="student">Student Visa</option>
          <option value="graduate">Graduate Visa</option>
        </select>

<div class="row">
          <div>
            <label for="startDate">Visa start date</label>
            <input type="date" id="startDate" onchange="calculate(false)" />
          </div>
          <div>
            <label for="endDate">Visa end date</label>
            <input type="date" id="endDate" onchange="calculate(false)" />
          </div>
        </div>

<div class="row">
          <div>
            <label for="adultDeps">Adult dependants</label>
            <select id="adultDeps" onchange="calculate(false)"></select>
          </div>
          <div>
            <label for="minorDeps">Minor dependants</label>
            <select id="minorDeps" onchange="calculate(false)"></select>
          </div>
        </div>

<div class="checkbox-grid">
          <label class="check-row" for="excludeMain">
            <input type="checkbox" id="excludeMain" onchange="calculate(false)" />
            Exclude main applicant costs
          </label>
        </div>

<button onclick="calculate(true)">Calculate Costs</button>
        <button type="button" class="clear-btn" onclick="clearForm()">Clear Form</button>

<div class="button-grid">
          <button type="button" onclick="setVisaYears(1)">Set 1 Tahun</button>
          <button type="button" onclick="setVisaYears(2)">Set 2 Tahun</button>
          <button type="button" onclick="setVisaYears(3)">Set 3 Tahun</button>
          <button type="button" onclick="setVisaYears(4)">Set 4 Tahun</button>
        </div>

<div class="summary">
          <div class="summary-item"><b>Durasi hari:</b> <span id="durationText">-</span></div>
          <div class="summary-item"><b>Bulan dihitung:</b> <span id="monthsText">-</span></div>
          <div class="summary-item"><b>Durasi tahun:</b> <span id="yearsText">-</span></div>
          <div class="summary-item"><b>Tahun ditagihkan:</b> <span id="billableYearsText">-</span></div>
          <div class="summary-item"><b>Rule aktif:</b> <span id="ruleText">-</span></div>
        </div>

<div class="formula-box">
          <b>Formula ringkas:</b><br />
          Bulan dihitung dari perpindahan bulan kalender, bukan jumlah hari.<br />
          Contoh: 30 Jan → 1 Feb = 1 bulan penuh.<br />
          0–6 bulan = £0.<br />
          7–12 bulan = 1 tahun.<br />
          Durasi 0.5 / 1.5 / 2.5 dan seterusnya hanya keterangan durasi.<br />
          Subtotal hanya dikalikan tahun penuh: 0.5 = 0x, 1.5 = 1x, 2.5 = 2x.
        </div>
      </aside>

<main class="box">
        <div class="toolbar">
          <div>
            <h2>Hasil Perhitungan</h2>
            <p id="periodText">Pilih visa type lalu klik Calculate Costs.</p>
          </div>
          <span class="badge" id="statusBadge">Belum dihitung</span>
        </div>

<div class="total-card">
          <div class="metric">
            <div class="metric-label">Total GBP</div>
            <div class="metric-value" id="totalGbpText">£ -</div>
          </div>
          <div class="metric">
            <div class="metric-label">Total IDR</div>
            <div class="metric-value" id="totalIdrText">Rp -</div>
          </div>
          <div class="metric">
            <div class="metric-label">Kurs aktif</div>
            <div class="metric-value" id="activeRateText">Rp -</div>
          </div>
        </div>

<div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th>Applicant Type</th>
                <th class="num">Count</th>
                <th class="num">Duration Years</th>
                <th class="num">Yearly Rate</th>
                <th class="num">Subtotal</th>
                <th class="num">Subtotal IDR</th>
              </tr>
            </thead>
            <tbody id="resultBody">
              <tr>
                <td colspan="6" class="muted">Belum ada hasil. Visa Type wajib dipilih.</td>
              </tr>
            </tbody>
          </table>
        </div>

<div class="disclaimer">
          <b>Disclaimer:</b> Ini adalah kalkulator simulasi/edukasi berdasarkan rumus custom pada halaman ini, bukan kalkulator resmi GOV.UK.
          Kurs GBP ke IDR berdasarkan data pada 07 Juni 2026 pukul 20:24 WIB dan dapat berubah; ubah input kurs di kanan atas untuk menyesuaikan angka terbaru.
        </div>
      </main>
    </section>
  </div>

const ANNUAL_RATES = {
      student: {
        label: "Student Visa",
        main: 776,
        adult: 776,
        minor: 776
      },
      graduate: {
        label: "Graduate Visa",
        main: 1035,
        adult: 1035,
        minor: 776
      }
    };

const adultSelect = document.getElementById("adultDeps");
    const minorSelect = document.getElementById("minorDeps");

for (let i = 0; i <= 5; i++) {
      const adultOpt = document.createElement("option");
      adultOpt.value = String(i);
      adultOpt.textContent = String(i);
      adultSelect.appendChild(adultOpt);

const minorOpt = document.createElement("option");
      minorOpt.value = String(i);
      minorOpt.textContent = String(i);
      minorSelect.appendChild(minorOpt);
    }

adultSelect.value = "0";
    minorSelect.value = "0";

function parseInputDate(value) {
      const parts = value.split("-").map(Number);
      return new Date(Date.UTC(parts[0], parts[1] - 1, parts[2]));
    }

function addMonths(dateObj, monthsToAdd) {
      const year = dateObj.getUTCFullYear();
      const month = dateObj.getUTCMonth();
      const day = dateObj.getUTCDate();

const targetFirst = new Date(Date.UTC(year, month + monthsToAdd, 1));
      const targetYear = targetFirst.getUTCFullYear();
      const targetMonth = targetFirst.getUTCMonth();
      const lastDayTargetMonth = new Date(Date.UTC(targetYear, targetMonth + 1, 0)).getUTCDate();
      const safeDay = Math.min(day, lastDayTargetMonth);

return new Date(Date.UTC(targetYear, targetMonth, safeDay));
    }

function endDateForCoveredMonths(startDate, months) {
      const end = addMonths(startDate, months);
      end.setUTCDate(end.getUTCDate() - 1);
      return end;
    }

function getCoveredMonths(startValue, endValue) {
      const startDate = parseInputDate(startValue);
      const endDate = parseInputDate(endValue);

// Rule custom: bulan dihitung dari perpindahan bulan kalender, bukan jumlah hari.
      // Contoh: 30 Januari 2026 sampai 1 Februari 2026 = 1 bulan penuh.
      // Tanggal dalam bulan tidak menambah/mengurangi hitungan bulan.
      const monthDifference =
        (endDate.getUTCFullYear() - startDate.getUTCFullYear()) * 12 +
        (endDate.getUTCMonth() - startDate.getUTCMonth());

return Math.max(1, monthDifference);
    }

function countInclusiveDays(startValue, endValue) {
      const startDate = parseInputDate(startValue);
      const endDate = parseInputDate(endValue);
      const diffMs = endDate.getTime() - startDate.getTime();
      return Math.max(1, Math.round(diffMs / 86400000) + 1);
    }

function getDurationYears(coveredMonths) {
      // Durasi ditampilkan per kelipatan 0.5 tahun.
      // 1–6 bulan = 0.5 tahun, 7–12 bulan = 1 tahun,
      // 13–18 bulan = 1.5 tahun, dan seterusnya.
      return Math.ceil(coveredMonths / 6) * 0.5;
    }

function getBillableYears(durationYears) {
      // Rule terbaru: kelipatan 0.5 hanya keterangan durasi.
      // Subtotal hanya dihitung dari tahun penuh.
      // Contoh: 0.5 = 0 tahun ditagihkan, 1.5 = 1 tahun, 2.5 = 2 tahun.
      return Math.floor(durationYears);
    }

function getRuleText(durationYears, billableYears) {
      if (durationYears < 1) {
        return "Durasi " + formatYears(durationYears) + " tahun hanya keterangan: biaya £0 untuk semua applicant";
      }

if (durationYears % 1 === 0) {
        return "Durasi tahun penuh: subtotal dikalikan " + formatYears(billableYears) + " tahun";
      }

return "Durasi " + formatYears(durationYears) + " tahun hanya keterangan; subtotal tetap dikalikan " + formatYears(billableYears) + " tahun penuh";
    }

function formatGBP(number) {
      return new Intl.NumberFormat("en-GB", {
        style: "currency",
        currency: "GBP",
        minimumFractionDigits: number % 1 === 0 ? 0 : 2,
        maximumFractionDigits: 2
      }).format(number);
    }

function formatIDR(number) {
      return new Intl.NumberFormat("id-ID", {
        style: "currency",
        currency: "IDR",
        maximumFractionDigits: 0
      }).format(number);
    }

function formatYears(years) {
      return years % 1 === 0 ? String(years) : years.toFixed(1);
    }

function getFinishDateByYears(startValue, years) {
      const startDate = parseInputDate(startValue);
      const target = new Date(startDate.getTime());
      target.setUTCFullYear(target.getUTCFullYear() + years);
      target.setUTCDate(target.getUTCDate() - 1);
      return toInputDate(target);
    }

function setVisaYears(years) {
      const startInput = document.getElementById("startDate");
      const endInput = document.getElementById("endDate");

if (!startInput.value) {
        showError("Tanggal mulai wajib diisi terlebih dahulu.");
        return;
      }

endInput.value = getFinishDateByYears(startInput.value, years);
      calculate(false);
    }

function showError(message) {
      const box = document.getElementById("errorBox");
      box.textContent = message;
      box.style.display = "block";
    }

function clearError() {
      const box = document.getElementById("errorBox");
      box.textContent = "";
      box.style.display = "none";
    }

function resetOutput() {
      clearError();
      const gbpIdrRate = Number(document.getElementById("gbpIdrRate").value || 0);

document.getElementById("heroIdrTotal").textContent = "Rp -";
      document.getElementById("heroGbpTotal").textContent = "£ -";
      document.getElementById("durationText").textContent = "-";
      document.getElementById("monthsText").textContent = "-";
      document.getElementById("yearsText").textContent = "-";
      document.getElementById("billableYearsText").textContent = "-";
      document.getElementById("ruleText").textContent = "-";
      document.getElementById("periodText").textContent = "Pilih visa type lalu klik Calculate Costs.";
      document.getElementById("statusBadge").textContent = "Belum dihitung";
      document.getElementById("totalGbpText").textContent = "£ -";
      document.getElementById("totalIdrText").textContent = "Rp -";
      document.getElementById("activeRateText").textContent = gbpIdrRate > 0 ? formatIDR(gbpIdrRate) : "Rp -";
      document.getElementById("resultBody").innerHTML = `
        <tr>
          <td colspan="6" class="muted">Belum ada hasil. Visa Type wajib dipilih.</td>
        </tr>
      `;
    }

function clearForm() {
      document.getElementById("visaType").value = "";
      document.getElementById("startDate").value = "";
      document.getElementById("endDate").value = "";
      document.getElementById("adultDeps").value = "0";
      document.getElementById("minorDeps").value = "0";
      document.getElementById("excludeMain").checked = false;
      document.getElementById("gbpIdrRate").value = DEFAULT_GBP_IDR_RATE;
      resetOutput();
    }

function buildRows(visaType, adultDeps, minorDeps, durationYears, billableYears, excludeMain) {
      const rate = ANNUAL_RATES[visaType];
      const rows = [];

if (!excludeMain) {
        rows.push({ applicant: "Main Applicant", key: "main", count: 1, years: durationYears, billableYears: billableYears, yearlyRate: rate.main });
      }

if (adultDeps > 0) {
        rows.push({ applicant: "Adult Dependants", key: "adult", count: adultDeps, years: durationYears, billableYears: billableYears, yearlyRate: rate.adult });
      }

if (minorDeps > 0) {
        rows.push({ applicant: "Minor Dependants", key: "minor", count: minorDeps, years: durationYears, billableYears: billableYears, yearlyRate: rate.minor });
      }

return rows.map(row => ({
        ...row,
        subtotal: row.count * row.billableYears * row.yearlyRate
      }));
    }

function calculate(showRequiredAlert = true) {
      const visaType = document.getElementById("visaType").value;
      const startValue = document.getElementById("startDate").value;
      const endValue = document.getElementById("endDate").value;
      const adultDeps = Number(document.getElementById("adultDeps").value || 0);
      const minorDeps = Number(document.getElementById("minorDeps").value || 0);
      const excludeMain = document.getElementById("excludeMain").checked;
      const gbpIdrRate = Number(document.getElementById("gbpIdrRate").value || 0);

document.getElementById("activeRateText").textContent = gbpIdrRate > 0 ? formatIDR(gbpIdrRate) : "Rp -";

if (!visaType) {
        if (showRequiredAlert) {
          showError("Visa Type wajib dipilih sebelum Calculate Costs.");
        }
        document.getElementById("statusBadge").textContent = "Visa Type required";
        return;
      }

if (!startValue || !endValue) {
        showError("Visa start date dan visa end date wajib diisi.");
        return;
      }

if (parseInputDate(endValue) < parseInputDate(startValue)) {
        showError("Visa end date tidak boleh lebih awal dari visa start date.");
        return;
      }

clearError();

const durationDays = countInclusiveDays(startValue, endValue);
      const coveredMonths = getCoveredMonths(startValue, endValue);
      const durationYears = getDurationYears(coveredMonths);
      const billableYears = getBillableYears(durationYears);
      const ruleText = getRuleText(durationYears, billableYears);
      const rows = buildRows(visaType, adultDeps, minorDeps, durationYears, billableYears, excludeMain);
      const totalGbp = rows.reduce((sum, row) => sum + row.subtotal, 0);
      const totalIdr = totalGbp * gbpIdrRate;

document.getElementById("durationText").textContent = durationDays + " hari";
      document.getElementById("monthsText").textContent = coveredMonths + " bulan";
      document.getElementById("yearsText").textContent = formatYears(durationYears) + " tahun";
      document.getElementById("billableYearsText").textContent = formatYears(billableYears) + " tahun";
      document.getElementById("ruleText").textContent = ruleText;

document.getElementById("periodText").textContent =
        ANNUAL_RATES[visaType].label + " • " + startValue + " sampai " + endValue +
        " • Adult dependants: " + adultDeps + " • Minor dependants: " + minorDeps;

document.getElementById("statusBadge").textContent = billableYears === 0 ? "£0 band" : "Calculated";
      document.getElementById("totalGbpText").textContent = formatGBP(totalGbp);
      document.getElementById("totalIdrText").textContent = gbpIdrRate > 0 ? formatIDR(totalIdr) : "Rp -";
      document.getElementById("heroIdrTotal").textContent = gbpIdrRate > 0 ? formatIDR(totalIdr) : "Rp -";
      document.getElementById("heroGbpTotal").textContent = formatGBP(totalGbp) + " • " + ANNUAL_RATES[visaType].label;

const tbody = document.getElementById("resultBody");
      tbody.innerHTML = "";

if (rows.length === 0) {
        tbody.innerHTML = `
          <tr>
            <td colspan="6" class="muted">Main applicant dikecualikan dan dependants = 0, sehingga tidak ada applicant yang dihitung.</td>
          </tr>
          <tr class="total-row">
            <td colspan="4">Total</td>
            <td class="num">${formatGBP(0)}</td>
            <td class="num">${formatIDR(0)}</td>
          </tr>
        `;
        return;
      }

rows.forEach(row => {
        const tr = document.createElement("tr");
        tr.innerHTML = `
          <td><b>${row.applicant}</b></td>
          <td class="num">${row.count}</td>
          <td class="num" title="Subtotal memakai ${formatYears(row.billableYears)} tahun penuh">${formatYears(row.years)}</td>
          <td class="num">${formatGBP(row.yearlyRate)}</td>
          <td class="num">${formatGBP(row.subtotal)}</td>
          <td class="num">${gbpIdrRate > 0 ? formatIDR(row.subtotal * gbpIdrRate) : "Rp -"}</td>
        `;
        tbody.appendChild(tr);
      });

const totalTr = document.createElement("tr");
      totalTr.className = "total-row";
      totalTr.innerHTML = `
        <td colspan="4">Total</td>
        <td class="num">${formatGBP(totalGbp)}</td>
        <td class="num">${gbpIdrRate > 0 ? formatIDR(totalIdr) : "Rp -"}</td>
      `;
      tbody.appendChild(totalTr);
    }

resetOutput();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simulasi OSHC Australia</title>
  <style>
    :root {
      --bg: #eaf3ff;
      --white: #ffffff;
      --dark: #0f172a;
      --text: #1e293b;
      --muted: #64748b;
      --line: #dbeafe;
      --blue: #2563eb;
      --blue-dark: #1d4ed8;
      --green: #16a34a;
      --green-bg: #dcfce7;
      --orange-bg: #fff7ed;
      --orange-line: #fed7aa;
      --orange-text: #9a3412;
      --shadow: 0 18px 45px rgba(15, 23, 42, .13);
    }

* {
      box-sizing: border-box;
      font-family: Arial, Helvetica, sans-serif;
    }

body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .18), transparent 34%),
        linear-gradient(135deg, #f8fbff, var(--bg));
    }

.container {
      width: min(1180px, 92%);
      margin: auto;
      padding: 30px 0 60px;
    }

.hero {
      position: relative;
      overflow: hidden;
      color: white;
      border-radius: 28px;
      padding: 34px;
      margin-bottom: 24px;
      background: linear-gradient(135deg, #0f172a, #1d4ed8 62%, #2563eb);
      box-shadow: var(--shadow);
    }

.hero::after {
      content: "";
      position: absolute;
      right: -100px;
      top: -120px;
      width: 300px;
      height: 300px;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
    }

.hero-layout {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 370px;
      gap: 28px;
      align-items: stretch;
    }

.hero-content {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

.hero-badge {
      display: inline-block;
      margin-bottom: 14px;
      padding: 7px 12px;
      border-radius: 999px;
      font-size: 13px;
      background: rgba(255, 255, 255, .15);
      border: 1px solid rgba(255, 255, 255, .25);
    }

.hero h1 {
      margin: 0;
      font-size: clamp(32px, 4.4vw, 58px);
      line-height: 1.08;
      letter-spacing: -1px;
      overflow-wrap: anywhere;
    }

.hero p {
      max-width: 800px;
      margin: 14px 0 0;
      color: rgba(255,255,255,.86);
      line-height: 1.6;
      font-size: 16px;
    }

.idr-card {
      width: 100%;
      padding: 20px;
      border-radius: 22px;
      color: var(--dark);
      background: rgba(255,255,255,.96);
      box-shadow: 0 18px 40px rgba(15,23,42,.22);
      border: 1px solid rgba(255,255,255,.65);
      align-self: center;
    }

.idr-label {
      font-size: 12px;
      font-weight: 800;
      color: var(--blue-dark);
      text-transform: uppercase;
      letter-spacing: .5px;
    }

.idr-provider {
      margin-top: 5px;
      font-size: 13px;
      color: var(--muted);
      font-weight: 700;
    }

.idr-value {
      margin-top: 8px;
      font-size: 28px;
      line-height: 1.05;
      font-weight: 900;
      letter-spacing: -1px;
    }

.rate-row {
      margin-top: 12px;
      display: grid;
      grid-template-columns: 1fr 118px;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: var(--muted);
    }

.rate-row input {
      width: 100%;
      padding: 9px 10px;
      border-radius: 12px;
      border: 1px solid #cbd5e1;
      font-size: 13px;
    }

.main-grid {
      display: grid;
      grid-template-columns: 360px 1fr;
      gap: 22px;
      align-items: start;
    }

.box {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 22px;
      box-shadow: var(--shadow);
    }

.form-box {
      position: sticky;
      top: 20px;
    }

h2 {
      margin: 0 0 16px;
      font-size: 22px;
    }

label {
      display: block;
      margin: 14px 0 7px;
      font-size: 13px;
      font-weight: 800;
      color: #334155;
    }

input,
    select {
      width: 100%;
      padding: 13px 14px;
      border-radius: 14px;
      border: 1px solid #cbd5e1;
      font-size: 15px;
      outline: none;
      background: white;
      color: var(--text);
    }

input:focus,
    select:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgba(37, 99, 235, .14);
    }

.row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

button {
      width: 100%;
      border: 0;
      border-radius: 15px;
      padding: 14px 16px;
      margin-top: 16px;
      font-size: 15px;
      font-weight: 800;
      color: white;
      background: linear-gradient(135deg, var(--blue), var(--blue-dark));
      cursor: pointer;
      box-shadow: 0 12px 28px rgba(37, 99, 235, .28);
      transition: .18s ease;
    }

button:hover {
      transform: translateY(-1px);
    }

.button-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 10px;
      width: 100%;
    }

.button-grid button {
      margin-top: 0;
      width: 100%;
      min-width: 0;
      padding: 13px 10px;
      font-size: 14px;
      line-height: 1.25;
      white-space: normal;
      overflow-wrap: anywhere;
    }

.reset-btn {
      background: #e0ecff;
      color: var(--blue-dark);
      box-shadow: none;
    }

.summary {
      margin-top: 18px;
      display: grid;
      gap: 10px;
    }

.summary-item {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px;
      font-size: 14px;
      line-height: 1.45;
    }

.summary-item b {
      color: var(--dark);
    }

.category-note {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1e40af;
      padding: 14px;
      border-radius: 16px;
      margin-top: 12px;
      font-size: 13px;
      line-height: 1.5;
    }

.notice {
      background: var(--orange-bg);
      border: 1px solid var(--orange-line);
      color: var(--orange-text);
      padding: 14px;
      border-radius: 16px;
      margin-top: 16px;
      font-size: 13px;
      line-height: 1.5;
    }

.error-box {
      display: none;
      background: #fff1f2;
      border: 1px solid #fda4af;
      color: #9f1239;
      padding: 14px;
      border-radius: 16px;
      margin-top: 16px;
      font-size: 13px;
      line-height: 1.5;
      font-weight: 800;
    }

.toolbar {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }

.toolbar p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

.badge {
      display: inline-flex;
      align-items: center;
      background: var(--green-bg);
      color: #166534;
      border: 1px solid #86efac;
      padding: 8px 12px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 13px;
    }

.cards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

.card {
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 18px;
      position: relative;
      overflow: hidden;
      background: white;
    }

.card.best {
      border-color: #86efac;
      box-shadow: 0 12px 30px rgba(22, 163, 74, .12);
    }

.best-label {
      position: absolute;
      top: 14px;
      right: 14px;
      font-size: 12px;
      color: #166534;
      background: var(--green-bg);
      border: 1px solid #86efac;
      border-radius: 999px;
      padding: 6px 10px;
      font-weight: 800;
    }

.provider {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-right: 90px;
    }

.logo {
      width: 48px;
      height: 48px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      font-weight: 900;
      color: #1e3a8a;
      background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    }

.provider h3 {
      margin: 0;
      font-size: 19px;
    }

.provider p {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

.price {
      margin: 18px 0 8px;
      font-size: 34px;
      font-weight: 900;
      color: var(--dark);
      letter-spacing: -1px;
    }

.meta {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

ul {
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 8px;
    }

li {
      font-size: 13px;
      line-height: 1.4;
      color: #334155;
      display: flex;
      gap: 8px;
    }

li:before {
      content: "✓";
      color: var(--green);
      font-weight: 900;
    }

.official-link {
      display: block;
      margin-top: 16px;
      text-align: center;
      text-decoration: none;
      color: white;
      background: var(--dark);
      border-radius: 14px;
      padding: 12px;
      font-weight: 800;
      font-size: 14px;
    }

table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
      overflow: hidden;
      border-radius: 18px;
      background: white;
      font-size: 13px;
    }

th,
    td {
      padding: 13px;
      border-bottom: 1px solid #e2e8f0;
      text-align: left;
      vertical-align: top;
    }

th {
      background: #f8fafc;
      color: #334155;
    }

.disclaimer {
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      border-radius: 18px;
      padding: 16px;
      margin-top: 22px;
      color: #475569;
      font-size: 14px;
      line-height: 1.6;
    }

.source-warning {
      background: #fff7ed;
      border: 1px solid #fdba74;
      color: #9a3412;
      border-radius: 18px;
      padding: 16px;
      margin-top: 18px;
      font-size: 14px;
      line-height: 1.65;
    }

.source-warning b {
      color: #7c2d12;
    }

@media (max-width: 980px) {
      .hero-layout {
        grid-template-columns: 1fr;
      }

.main-grid {
        grid-template-columns: 1fr;
      }

.form-box {
        position: static;
      }

.cards {
        grid-template-columns: 1fr;
      }

.hero {
        padding: 26px;
      }
    }

@media (max-width: 520px) {
      .hero h1 {
        font-size: 34px;
      }

.rate-row,
      .button-grid {
        grid-template-columns: 1fr;
      }
    }

/* Responsive fixes: keep content inside screen without changing formulas */
    html, body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }

.container,
    .hero,
    .box,
    .idr-card,
    .card,
    .summary-item,
    .category-note,
    .notice,
    .disclaimer,
    .source-warning {
      max-width: 100%;
      min-width: 0;
    }

h1, h2, h3, p, label, .price, .idr-value, .idr-provider, .summary-item, .category-note, .notice, .disclaimer, .source-warning, td, th {
      overflow-wrap: anywhere;
      word-break: normal;
    }

main.box {
      min-width: 0;
      overflow: hidden;
    }

table {
      max-width: 100%;
      table-layout: fixed;
    }

@media (max-width: 1120px) {
      .container {
        width: min(94%, 1180px);
      }

.main-grid {
        grid-template-columns: 340px minmax(0, 1fr);
      }
    }

@media (max-width: 900px) {
      .container {
        width: min(94%, 1180px);
        padding: 18px 0 44px;
      }

.hero {
        padding: 26px;
      }

.hero-layout,
      .main-grid {
        grid-template-columns: 1fr;
      }

.form-box {
        position: static;
      }

.cards {
        grid-template-columns: 1fr;
      }
    }

@media (max-width: 700px) {
      .hero {
        padding: 22px;
        border-radius: 24px;
      }

.hero h1 {
        font-size: clamp(28px, 10vw, 42px);
      }

.row,
      .rate-row,
      .button-grid {
        grid-template-columns: 1fr;
      }

.box {
        padding: 18px;
        border-radius: 22px;
      }

.provider {
        padding-right: 0;
      }

.best-label {
        position: static;
        width: fit-content;
        margin-bottom: 12px;
      }

.price {
        font-size: clamp(26px, 8vw, 34px);
      }

.toolbar {
        display: grid;
        grid-template-columns: 1fr;
      }

.badge {
        width: fit-content;
      }

table,
      thead,
      tbody,
      tr,
      th,
      td {
        display: block;
        width: 100%;
      }

thead {
        display: none;
      }

tbody tr {
        padding: 12px;
        border-bottom: 1px solid #e2e8f0;
        background: white;
      }

tbody tr:last-child {
        border-bottom: 0;
      }

td {
        display: grid;
        grid-template-columns: minmax(105px, 40%) minmax(0, 1fr);
        gap: 10px;
        padding: 9px 0;
        border-bottom: 1px solid #e2e8f0;
        text-align: right;
      }

td:last-child {
        border-bottom: 0;
      }

td::before {
        text-align: left;
        color: var(--muted);
        font-weight: 800;
      }

td:nth-child(1)::before { content: 'Provider'; }
      td:nth-child(2)::before { content: 'Harga AUD'; }
      td:nth-child(3)::before { content: 'Hospital'; }
      td:nth-child(4)::before { content: 'GP'; }
      td:nth-child(5)::before { content: 'Catatan'; }
    }

@media (max-width: 420px) {
      .container {
        width: 94%;
      }

.hero,
      .box {
        padding: 16px;
      }

.idr-card {
        padding: 16px;
      }

.provider {
        align-items: flex-start;
      }

td {
        grid-template-columns: 1fr;
        text-align: left;
      }
    }

/* Stable footer/body inside iframe */
    body { min-height: auto; }
    .container { padding-bottom: clamp(28px, 5vw, 52px); }
    main.box { margin-bottom: 0; }
    .disclaimer, .source-warning { margin-bottom: 0; }
</style>
</head>

<body>
  <div class="container">
    <section class="hero">
      <div class="hero-layout">
        <div class="hero-content">
          <h1>Simulasi Perbandingan OSHC Australia</h1>
          <p>
            Simulasi ini memakai harga kategori 1-4 tahun dari screenshot: single, single parent family,
            couple, dan family. Untuk jumlah anak 1 sampai 10, harga dibuat sama karena masuk kategori family.
          </p>
        </div>

<div class="idr-card">
          <div class="idr-label">Harga termurah ke IDR</div>
          <div class="idr-provider" id="lowestProviderText">-</div>
          <div class="idr-value" id="lowestIdrText">Rp -</div>
          <div class="rate-row">
            <div>
              Rate AUD → IDR<br>
              <small>hanya untuk harga termurah</small>
            </div>
            <input type="number" id="audIdrRate" value="12736.7" min="1" step="0.1" oninput="autoCalculateIfReady()">
          </div>
        </div>
      </div>
    </section>

<section class="main-grid">
      <aside class="box form-box">
        <h2>Data Peserta</h2>

<div class="row">
          <div>
            <label for="adults">Jumlah Adult</label>
            <select id="adults" onchange="autoCalculateIfReady()">
              <option value="1" selected>1 Adult</option>
              <option value="2">2 Adults</option>
            </select>
          </div>

<div>
            <label for="children">Jumlah Child</label>
            <select id="children" onchange="autoCalculateIfReady()"></select>
          </div>
        </div>

<div class="row">
          <div>
            <label for="start">Tanggal Mulai</label>
            <input type="date" id="start" onchange="autoCalculateIfReady()">
          </div>

<div>
            <label for="finish">Tanggal Selesai</label>
            <input type="date" id="finish" onchange="autoCalculateIfReady()">
          </div>
        </div>

<button onclick="calculate()">Hitung Simulasi</button>
        <button class="reset-btn" onclick="clearForm()">Clear Form</button>

<div class="button-grid">
          <button class="reset-btn" onclick="resetOneYear()">Set 1 Tahun</button>
          <button class="reset-btn" onclick="resetTwoYears()">Set 2 Tahun</button>
          <button class="reset-btn" onclick="resetThreeYears()">Set 3 Tahun</button>
          <button class="reset-btn" onclick="resetFourYears()">Set 4 Tahun</button>
        </div>

<div class="summary">
          <div class="summary-item"><b>Durasi:</b> <span id="durationText">-</span></div>
          <div class="summary-item"><b>Kategori harga:</b> <span id="categoryText">-</span></div>
          <div class="summary-item"><b>Tabel rate aktif:</b> <span id="rateModeText">-</span></div>
          <div class="summary-item"><b>Harga termurah:</b> <span id="lowestText">-</span></div>
        </div>

<div class="category-note">
          <b>Kategori:</b><br>
          1 adult + 0 child = single<br>
          1 adult + 1–10 child = family / single parent family<br>
          2 adults + 0 child = couple<br>
          2 adults + 1–10 child = family<br>
        </div>

<div class="notice">
          <b>Warning:</b> Ini hanya simulasi berbasis snapshot HTML pada website resmi OSHC Australia. Tidak memakai API live dan tidak mewakili harga resmi terbaru. Klik "Cek Harga Resmi" untuk mendapatkan harga terupdate.
        </div>
      </aside>

<main class="box">
        <div class="toolbar">
          <div>
            <h2>Hasil Simulasi</h2>
            <p id="periodText">-</p>
          </div>
          <span class="badge" id="providerCount">0 Provider</span>
        </div>

<table>
          <thead>
            <tr>
              <th>Provider</th>
              <th>Harga AUD</th>
              <th>Hospital</th>
              <th>GP</th>
              <th>Catatan</th>
            </tr>
          </thead>
          <tbody id="tableBody"></tbody>
        </table>

<div class="disclaimer">
          <b>Disclaimer:</b> Website ini dibuat untuk simulasi/edukasi saja. Untuk durasi 1, 2, dan 3 tahun, harga memakai tabel sebelumnya.
          Untuk durasi 4 tahun, harga memakai tabel terbaru dari screenshot. Untuk durasi di luar titik 1, 2, 3, dan 4 tahun, harga dihitung
          prorata/interpolasi agar transisinya tidak melompat. Untuk transaksi atau pembelian, tetap cek langsung ke halaman resmi/provider OSHC.
        </div>

<div class="source-warning">
          <b>Keterangan data:</b> Data simulasi ini diambil dari tampilan web https://oshcaustralia.com.au pada 06 Juni 2026 pukul 14:24 WIB. Harga OSHC bersifat estimasi dan dapat berubah sewaktu-waktu mengikuti pembaruan harga provider, kurs, kebijakan website, dan periode polis.
        </div>
      </main>
    </section>
  </div>

const oneYearStart = "2026-07-01";
    const oneYearFinish = "2027-06-30";
    const twoYearStart = "2026-07-01";
    const twoYearFinish = "2028-06-30";
    const threeYearStart = "2026-07-01";
    const threeYearFinish = "2029-06-30";
    const fourYearStart = "2026-07-01";
    const fourYearFinish = "2030-06-30";

const providerInfo = {
      nib: {
        name: "NIB",
        logo: "N",
        hospital: "Public and Agreement only",
        gp: "100% of MBS",
        note: "Harga dari snapshot kategori terkait",
        features: ["Student visa compliance", "Health support line", "Telehealth support", "Emergency ambulance services"]
      },
      allianz: {
        name: "Allianz Care",
        logo: "A",
        hospital: "Public and Agreement only",
        gp: "100% of MBS",
        note: "Harga dari snapshot kategori terkait",
        features: ["Student visa compliance", "Direct purchase support", "Doctor services benefit", "Overseas student health cover"]
      },
      ahm: {
        name: "AHM OSHC",
        logo: "H",
        hospital: "All hospitals",
        gp: "100% of MBS",
        note: "Harga dari snapshot kategori terkait",
        features: ["Student visa compliance", "All hospitals", "Emergency support", "Virtual doctor access"]
      },
      bupa: {
        name: "Bupa",
        logo: "B",
        hospital: "Public and Agreement only",
        gp: "100% of MBS",
        note: "Harga dari snapshot kategori terkait",
        features: ["Student visa compliance", "Telehealth support", "Specialist benefit based on MBS", "Health support line"]
      },
      medibank: {
        name: "Medibank",
        logo: "M",
        hospital: "All hospitals",
        gp: "100% of MBS",
        note: "Harga dari snapshot kategori terkait",
        features: ["Student visa compliance", "All hospitals", "Health and emergency support", "Virtual doctor support"]
      }
    };

const priceTables = {
      oneYear: {
        single: [
          { id: "nib", price: 632.00 },
          { id: "allianz", price: 665.00 },
          { id: "ahm", price: 672.00 },
          { id: "bupa", price: 699.00 },
          { id: "medibank", price: 719.00 }
        ],
        singleFamily: [
          { id: "bupa", price: 5026.00 },
          { id: "allianz", price: 5266.00 },
          { id: "medibank", price: 6031.00 },
          { id: "ahm", price: 6686.00 },
          { id: "nib", price: 13895.20 }
        ],
        couple: [
          { id: "bupa", price: 5026.00 },
          { id: "allianz", price: 5266.00 },
          { id: "nib", price: 5335.00 },
          { id: "medibank", price: 6031.00 },
          { id: "ahm", price: 6686.00 }
        ],
        family: [
          { id: "allianz", price: 9937.00 },
          { id: "bupa", price: 12447.00 },
          { id: "ahm", price: 13544.00 },
          { id: "nib", price: 13895.20 },
          { id: "medibank", price: 14121.00 }
        ]
      },

twoYears: {
        single: [
          { id: "nib", price: 1273.00 },
          { id: "allianz", price: 1350.00 },
          { id: "ahm", price: 1365.00 },
          { id: "bupa", price: 1419.00 },
          { id: "medibank", price: 1457.00 }
        ],
        singleFamily: [
          { id: "bupa", price: 10261.00 },
          { id: "allianz", price: 10307.00 },
          { id: "medibank", price: 12303.00 },
          { id: "ahm", price: 13576.00 },
          { id: "nib", price: 31682.20 }
        ],
        couple: [
          { id: "bupa", price: 10261.00 },
          { id: "allianz", price: 10307.00 },
          { id: "nib", price: 10890.00 },
          { id: "medibank", price: 12303.00 },
          { id: "ahm", price: 13576.00 }
        ],
        family: [
          { id: "allianz", price: 22667.00 },
          { id: "bupa", price: 28602.00 },
          { id: "ahm", price: 31240.00 },
          { id: "nib", price: 31682.20 },
          { id: "medibank", price: 32546.00 }
        ]
      },

threeYears: {
        // 1 adult + 0 child, periode 3 tahun
        single: [
          { id: "nib", price: 2001.99 },
          { id: "allianz", price: 2126.00 },
          { id: "bupa", price: 2129.00 },
          { id: "ahm", price: 2163.00 },
          { id: "medibank", price: 2292.00 }
        ],

// 1 adult + 1-10 child, periode 3 tahun
        singleFamily: [
          { id: "bupa", price: 15391.00 },
          { id: "allianz", price: 15624.00 },
          { id: "medibank", price: 18531.00 },
          { id: "ahm", price: 20945.00 },
          { id: "nib", price: 48000.00 }
        ],

// 2 adults + 0 child, periode 3 tahun
        couple: [
          { id: "bupa", price: 15391.00 },
          { id: "allianz", price: 15624.00 },
          { id: "nib", price: 16610.01 },
          { id: "medibank", price: 18531.00 },
          { id: "ahm", price: 20945.00 }
        ],

// 2 adults + 1-10 child, periode 3 tahun
        family: [
          { id: "allianz", price: 35672.00 },
          { id: "bupa", price: 42903.00 },
          { id: "ahm", price: 47612.00 },
          { id: "nib", price: 48000.00 },
          { id: "medibank", price: 51054.00 }
        ]
      },

fourYears: {
        // 1 adult + 0 child, periode 4 tahun
        single: [
          { id: "nib", price: 3190.00 },
          { id: "allianz", price: 3202.00 },
          { id: "bupa", price: 3432.00 },
          { id: "ahm", price: 3508.00 },
          { id: "medibank", price: 3583.00 }
        ],

// 1 adult + 1-10 child, periode 4 tahun
        singleFamily: [
          { id: "bupa", price: 26131.00 },
          { id: "allianz", price: 26585.00 },
          { id: "medibank", price: 31254.00 },
          { id: "ahm", price: 36734.00 },
          { id: "nib", price: 73000.00 }
        ],

// 2 adults + 0 child, periode 4 tahun
        couple: [
          { id: "bupa", price: 26131.00 },
          { id: "allianz", price: 26585.00 },
          { id: "nib", price: 29260.00 },
          { id: "medibank", price: 31254.00 },
          { id: "ahm", price: 36734.00 }
        ],

// 2 adults + 1-10 child, periode 4 tahun
        family: [
          { id: "allianz", price: 54022.00 },
          { id: "bupa", price: 69348.00 },
          { id: "nib", price: 73000.00 },
          { id: "ahm", price: 76510.10 },
          { id: "medibank", price: 83450.00 }
        ]
      }
    };

const providerOrder = ["nib", "allianz", "ahm", "bupa", "medibank"];

const childrenSelect = document.getElementById("children");

for (let i = 0; i <= 10; i++) {
      const option = document.createElement("option");
      option.value = i;
      option.textContent = i === 1 ? "1 Child" : i + " Children";
      if (i === 0) option.selected = true;
      childrenSelect.appendChild(option);
    }

function formatAUD(number) {
      return new Intl.NumberFormat("en-AU", {
        style: "currency",
        currency: "AUD",
        minimumFractionDigits: 2
      }).format(number);
    }

function formatIDR(number) {
      return new Intl.NumberFormat("id-ID", {
        style: "currency",
        currency: "IDR",
        maximumFractionDigits: 0
      }).format(number);
    }

function countDays(start, finish) {
      const startDate = new Date(start + "T00:00:00");
      const finishDate = new Date(finish + "T00:00:00");
      const ms = finishDate - startDate;
      return Math.max(1, Math.round(ms / (1000 * 60 * 60 * 24)) + 1);
    }

function getCategory(adults, children) {
      if (adults === 1 && children === 0) {
        return { key: "single", label: "Single - 1 adult, 0 child" };
      }

if (adults === 1 && children >= 1) {
        return { key: "singleFamily", label: "Family - 1 adult + 1-10 child" };
      }

if (adults === 2 && children === 0) {
        return { key: "couple", label: "Couple - 2 adults, 0 child" };
      }

return { key: "family", label: "Family - 2 adults + 1-10 child" };
    }

function getBasePrice(tableName, categoryKey, providerId) {
      const row = priceTables[tableName][categoryKey].find(item => item.id === providerId);
      return row ? row.price : 0;
    }

function getRateMode(days, exactPolicyYears) {
      if (exactPolicyYears === 1) return "Rate 1 tahun";
      if (exactPolicyYears === 2) return "Rate 2 tahun";
      if (exactPolicyYears === 3) return "Rate 3 tahun";
      if (exactPolicyYears === 4) return "Rate 4 tahun";

if (days < oneYearDays) return "Prorata dari rate 1 tahun";
      if (days > fourYearDays) return "Prorata dari rate 4 tahun";
      if (days > threeYearDays) return "Interpolasi rate 3 tahun ke 4 tahun";
      if (days > twoYearDays) return "Interpolasi rate 2 tahun ke 3 tahun";
      return "Interpolasi rate 1 tahun ke 2 tahun";
    }

function calculatePrice(categoryKey, providerId, days, exactPolicyYears) {
      const priceOne = getBasePrice("oneYear", categoryKey, providerId);
      const priceTwo = getBasePrice("twoYears", categoryKey, providerId);
      const priceThree = getBasePrice("threeYears", categoryKey, providerId);
      const priceFour = getBasePrice("fourYears", categoryKey, providerId);

if (exactPolicyYears === 1) return priceOne;
      if (exactPolicyYears === 2) return priceTwo;
      if (exactPolicyYears === 3) return priceThree;
      if (exactPolicyYears === 4) return priceFour;

if (days < oneYearDays) {
        return priceOne * (days / oneYearDays);
      }

if (days > fourYearDays) {
        return priceFour * (days / fourYearDays);
      }

if (days > threeYearDays) {
        const progress = (days - threeYearDays) / (fourYearDays - threeYearDays);
        return priceThree + ((priceFour - priceThree) * progress);
      }

if (days > twoYearDays) {
        const progress = (days - twoYearDays) / (threeYearDays - twoYearDays);
        return priceTwo + ((priceThree - priceTwo) * progress);
      }

const progress = (days - oneYearDays) / (twoYearDays - oneYearDays);
      return priceOne + ((priceTwo - priceOne) * progress);
    }

function buildOfficialUrl(adults, children, start, finish) {
      const params = new URLSearchParams({
        adults: adults,
        children: children,
        start: start,
        finish: finish,
        source: "fp-quote-builder"
      });

return "https://oshcaustralia.com.au/en/quote?" + params.toString();
    }

function autoCalculateIfReady() {
      const start = document.getElementById("start").value;
      const finish = document.getElementById("finish").value;

if (start && finish) {
        calculate();
      }
    }

function showError(message) {
      const box = document.getElementById("errorBox");
      box.textContent = message;
      box.style.display = "block";
    }

function clearError() {
      const box = document.getElementById("errorBox");
      box.textContent = "";
      box.style.display = "none";
    }

function calculate() {
      const adults = Number(document.getElementById("adults").value);
      const children = Number(document.getElementById("children").value);
      const start = document.getElementById("start").value;
      const finish = document.getElementById("finish").value;
      const audIdrRate = Number(document.getElementById("audIdrRate").value || 0);

if (!start || !finish) {
        showError("Tanggal mulai dan tanggal selesai wajib diisi.");
        return;
      }

if (new Date(finish) <= new Date(start)) {
        showError("Tanggal selesai harus setelah tanggal mulai.");
        return;
      }

clearError();

const days = countDays(start, finish);
      const category = getCategory(adults, children);
      const exactPolicyYears = getExactPolicyYears(start, finish);
      const rateMode = getRateMode(days, exactPolicyYears);
      const officialUrl = buildOfficialUrl(adults, children, start, finish);

const result = providerOrder
        .map(providerId => ({
          ...providerInfo[providerId],
          id: providerId,
          price: calculatePrice(category.key, providerId, days, exactPolicyYears)
        }))
        .sort((a, b) => a.price - b.price);

const lowest = result[0];
      const lowestIdr = lowest.price * audIdrRate;

document.getElementById("durationText").textContent = days + " hari";
      document.getElementById("categoryText").textContent = category.label;
      document.getElementById("rateModeText").textContent = rateMode;
      document.getElementById("lowestText").textContent = formatAUD(lowest.price);
      document.getElementById("lowestProviderText").textContent = lowest.name + " • " + formatAUD(lowest.price);
      document.getElementById("lowestIdrText").textContent = audIdrRate > 0 ? formatIDR(lowestIdr) : "Rp -";
      document.getElementById("periodText").textContent =
        adults + " adult, " + children + " child • " + start + " sampai " + finish + " • " + category.label + " • " + rateMode;
      document.getElementById("providerCount").textContent = result.length + " Provider";

const cards = document.getElementById("cards");
      const tableBody = document.getElementById("tableBody");

cards.innerHTML = "";
      tableBody.innerHTML = "";

result.forEach((provider, index) => {
        const isBest = index === 0;

const card = document.createElement("div");
        card.className = isBest ? "card best" : "card";

card.innerHTML = `
          ${isBest ? '<div class="best-label">Termurah</div>' : ''}
          <div class="provider">
            <div class="logo">${provider.logo}</div>
            <div>
              <h3>${provider.name}</h3>
              <p>Estimasi OSHC premium</p>
            </div>
          </div>

<div class="price">${formatAUD(provider.price)}</div>

<div class="meta">
            ${adults} adult • ${children} child<br>
            ${start} sampai ${finish}<br>
            ${category.label}<br>
            ${rateMode}
          </div>

<ul>
            ${provider.features.map(feature => `<li>${feature}</li>`).join("")}
          </ul>

<a href="${officialUrl}" target="_blank" class="official-link">
            Cek Harga Resmi
          </a>
        `;

cards.appendChild(card);

tableBody.appendChild(tr);
      });
    }

function getFinishDateByYears(start, years) {
      const startDate = new Date(start + "T00:00:00");
      const finishDate = new Date(startDate);
      finishDate.setFullYear(finishDate.getFullYear() + years);
      finishDate.setDate(finishDate.getDate() - 1);
      return toInputDate(finishDate);
    }

function setPolicyYears(years) {
      const startInput = document.getElementById("start");
      const finishInput = document.getElementById("finish");

if (!startInput.value) {
        showError("Tanggal mulai wajib diisi terlebih dahulu.");
        return;
      }

finishInput.value = getFinishDateByYears(startInput.value, years);
      calculate();
    }

function resetOneYear() {
      setPolicyYears(1);
    }

function resetTwoYears() {
      setPolicyYears(2);
    }

function resetThreeYears() {
      setPolicyYears(3);
    }

function resetFourYears() {
      setPolicyYears(4);
    }

function resetOutputs() {
      clearError();
      document.getElementById("durationText").textContent = "-";
      document.getElementById("categoryText").textContent = "-";
      document.getElementById("rateModeText").textContent = "-";
      document.getElementById("lowestText").textContent = "-";
      document.getElementById("lowestProviderText").textContent = "-";
      document.getElementById("lowestIdrText").textContent = "Rp -";
      document.getElementById("periodText").textContent = "-";
      document.getElementById("providerCount").textContent = "0 Provider";
      document.getElementById("cards").innerHTML = "";
      document.getElementById("tableBody").innerHTML = "";
    }

function clearForm() {
      document.getElementById("adults").value = "1";
      document.getElementById("children").value = "0";
      document.getElementById("start").value = "";
      document.getElementById("finish").value = "";
      document.getElementById("audIdrRate").value = "12736.7";
      resetOutputs();
    }

clearForm();
  </script>
</body>
</html>