<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Selamat Datang Di Bank Negara Indonesia 46</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- ===== HEADER ===== -->
  <header>
    <div class="logo-box">
      <img src="bni.png" alt="" />
    </div>
    <div class="header-title">
      <h1>Selamat Datang<br>Di Bank Negara Indonesia 46</h1>
    </div>
  </header>

  <!-- ===== MAIN ===== -->
  <main>

    <!-- Sidebar -->
    <aside class="sidebar">

      <!-- Menu -->
      <div class="menu-section">
        <h2>MENU</h2>
        <nav>
          <nav>
			<a href="berita.html" class="menu-btn">Berita</a>
			<a href="produkkami.html" class="menu-btn">Produk kami</a>
			<a href="ebanking.html" class="menu-btn">E-Banking</a>
		</nav>
        </nav>
      </div>

      <!-- Kalkulator -->
      <div class="calculator-section">
        <h2>KALKULATOR</h2>
        <p>Hitung Kurs Rupiah -> Dolar</p>
        <a href="kalkulator.html" class="calc-btn">Hitung Kurs</a>
      </div>


    </aside>

    <!-- Konten Utama -->
    <div class="kalkulator-container">
 
    <h2 class="kalkulator-heading">Kalkulator Konversi Mata Uang</h2>
    <p class="kalkulator-sub"><strong>Dollar &rarr; Rupiah &nbsp;|&nbsp; Rupiah &rarr; Dollar</strong></p>
 
    <div class="kalkulator-form">
 
      <div class="kalk-row">
        <label class="kalk-label">Pilihan</label>
        <div class="kalk-input-box radio-box">
          <label class="radio-option">
            <input type="radio" name="pilihan" value="dolar_ke_rupiah" checked />
            Dollar &rarr; Rupiah
          </label>
          <label class="radio-option">
            <input type="radio" name="pilihan" value="rupiah_ke_dolar" />
            Rupiah &rarr; Dollar
          </label>
        </div>
      </div>
 
      <div class="kalk-row">
        <label class="kalk-label">Input 1</label>
        <input type="number" id="inputNilai" class="kalk-input-box" placeholder="Masukkan nominal..." min="0" />
      </div>
 
      <div class="kalk-row">
        <label class="kalk-label">Hasil</label>
        <div class="kalk-input-box hasil-box" id="hasilOutput"></div>
      </div>
 
      <p class="kurs-info" id="kursInfo">Memuat kurs terkini...</p>
 
      <div class="kalk-submit">
        <button class="hitung-btn" onclick="hitungKurs()">Hitung</button>
      </div>
 
    </div>
 
  </div>
 
  <script>
    let kursUSD = null;
 
    // Ambil kurs dari API terbuka (exchangerate-api)
    async function fetchKurs() {
      try {
        const res = await fetch('https://api.exchangerate-api.com/v4/latest/USD');
        const data = await res.json();
        kursUSD = data.rates.IDR;
        document.getElementById('kursInfo').textContent =
          `Kurs saat ini: 1 USD = Rp ${kursUSD.toLocaleString('id-ID')}`;
      } catch (e) {
        // Fallback jika API gagal
        kursUSD = 16300;
        document.getElementById('kursInfo').textContent =
          `Kurs fallback: 1 USD = Rp ${kursUSD.toLocaleString('id-ID')} (tidak terhubung ke internet)`;
      }
    }
 
    function hitungKurs() {
      const nilai = parseFloat(document.getElementById('inputNilai').value);
      const pilihan = document.querySelector('input[name="pilihan"]:checked').value;
      const hasilEl = document.getElementById('hasilOutput');
 
      if (isNaN(nilai) || nilai < 0) {
        hasilEl.textContent = 'Masukkan nominal yang valid.';
        return;
      }
 
      if (!kursUSD) {
        hasilEl.textContent = 'Kurs belum tersedia, coba lagi.';
        return;
      }
 
      if (pilihan === 'dolar_ke_rupiah') {
        const hasil = nilai * kursUSD;
        hasilEl.textContent = `Rp ${hasil.toLocaleString('id-ID', { minimumFractionDigits: 2 })}`;
      } else {
        const hasil = nilai / kursUSD;
        hasilEl.textContent = `$ ${hasil.toLocaleString('en-US', { minimumFractionDigits: 4 })}`;
      }
    }
 
    // Jalankan saat halaman dimuat
    fetchKurs();
  </script>

  </main>

  <!-- ===== FOOTER ===== -->
  <footer>
    <div class="footer-left">
      <strong>Kantor Pusat</strong>
      Gedung Grha BNI<br>
      Jl. Jenderal Sudirman Kav. 1<br>
      Jakarta Pusat 10220<br>
      Indonesia.<br>
      <strong>Telepon:</strong>
      +62-21-2511946
    </div>
    <div class="footer-right">
      <p>BNI berizin dan diawasi oleh Otoritas Jasa Keuangan (OJK) dan Bank Indonesia (BI).</p>
      <br>
      <p>
        BNI merupakan peserta penjaminan Lembaga Penjamin Simpanan (LPS). Maksimum nilai simpanan
        yang dijamin per Nasabah adalah Rp 2 miliar.
      </p>
    </div>
  </footer>

</body>
</html>