<!doctype html>
<html lang="en" data-bs-theme="auto">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta
      name="author"
      content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
    />
    <meta name="generator" content="Astro v5.13.2" />
    <title>Smart Penjaja : Manual Pengguna - Pendaftaran Akaun</title>
    <link
      rel="canonical"
      href="https://getbootstrap.com/docs/5.3/examples/heroes/"
    />
    <script src="assets/js/color-modes.js"></script>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <meta name="theme-color" content="#712cf9" />
    <link href="css/heroes.css" rel="stylesheet" />
    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }
      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
      .b-example-divider {
        width: 100%;
        height: 3rem;
        background-color: #0000001a;
        border: solid rgba(0, 0, 0, 0.15);
        border-width: 1px 0;
        box-shadow:
          inset 0 0.5em 1.5em #0000001a,
          inset 0 0.125em 0.5em #00000026;
      }
      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }
      .bi {
        vertical-align: -0.125em;
        fill: currentColor;
      }
      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }
      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
      .btn-bd-primary {
        --bd-violet-bg: #712cf9;
        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--bd-violet-bg);
        --bs-btn-border-color: var(--bd-violet-bg);
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #6528e0;
        --bs-btn-hover-border-color: #6528e0;
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #5a23c8;
        --bs-btn-active-border-color: #5a23c8;
      }
      .bd-mode-toggle {
        z-index: 1500;
      }
      .bd-mode-toggle .bi {
        width: 1em;
        height: 1em;
      }
      .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
      }
    </style>
  </head>
  <body>
    <main>
      <h1 class="visually-hidden">Manual Pengguna Smart Penjaja</h1>
      <div class="px-4 py-5 my-5 text-center">
        <img
          class="d-block mx-auto mb-4"
          src="img/logo mbip dan microen.png"
          alt=""
          width="200"
          height="90"
        />
        <h1 class="display-5 fw-bold text-body-emphasis">Manual Pengguna</h1>
        <div class="col-lg-6 mx-auto">
          <p class="lead mb-4">
            Aplikasi Smart Penjaja MBIP
          </p>
          
          <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
            <a href="#penggunabaru" class="btn btn-primary btn-lg px-4 gap-3">
              Pengguna Baru
            </a>
            <a href="/manual_permohonan.php" class="btn btn-primary btn-lg px-4">
              Mohon Lesen Penjaja
            </a>
            <a href="/manual_pembayaran.php" class="btn btn-success btn-lg px-4">
              Pembayaran Wang Proses
            </a>
            <a href="/" class="btn btn-primary btn-lg px-4">
              Laman Utama
            </a>
          </div>
        </div>
      </div>
      <div class="b-example-divider"></div>
      <div class="container col-xxl-8 px-4 py-5">
        <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
          <div class="col-10 col-sm-8 col-lg-6">
            <img
              src="manual/03-proses lesen.jpg"
              class="d-block mx-lg-auto img-fluid img-enlarge"
              alt="Bootstrap Themes"
              width="500"
              height="300"
              loading="lazy"
            />
          </div>
          <div class="col-lg-6">
            <h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">
            Semakan Status Wang Proses
            </h1>
            <p class="lead mb-4">
            Sebelum proses kelulusan dibuat, pemohon perlu membayar wang proses sebanyak RM30.00. 
            </p>
            <p>No bil boleh disemak melalui dashboard pengguna.</p>
            <p>Untuk membayar secara atas talian, klik pada salah satu pautan yang ada.</p>
            <ul>
                <li><a href="https://pbtpay.kpkt.gov.my/" target="_blank">PBTPay</a></li>
                <li><a href="http://johor.ekhidmat.my" target="_blank">eKhidmat</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="b-example-divider"></div>
      <div class="px-4 pt-5 my-5 text-center border-bottom">
        <h1 class="display-4 fw-bold text-body-emphasis">
          <a id="penggunabaru">Pilihan Kaedah Pembayaran</a>
        </h1>
        <div class="col-lg-6 mx-auto">
          <p class="lead">
            Anda boleh memilih samada datang ke kaunter bayaran MBIP di Medini, atau secara atas talian.
          </p>
          <p>Terdapat 2 pilihan pembayaran atas talian, iaitu menerusi PBTPay dan eKhidmat.</p>
          <p>Status bayaran atas talian mengambil masa antara 30minit hingga 1 jam untuk dikemaskini.</p>
        </div>
        <div class="overflow-hidden" style="max-height: 30vh">
          <div class="container px-5">
            <img
              src="manual/03-proses lesen - link.png"
              class="img-fluid border rounded-3 shadow-lg mb-4 img-enlarge"
              alt="Example image"
              width="700"
              height="500"
              loading="lazy"
            />
          </div>
        </div>
      </div>
      <div class="b-example-divider"></div>
      <div class="container my-5">
        <div
          class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg"
        >
          <div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
            <h1 class="display-4 fw-bold lh-1 text-body-emphasis">
              PBTPay
            </h1>
            <p class="lead">
              Klik menu 'Semak' atak pada pautan 'klik di sini' untuk membuat semakan no bil.
            </p>
          </div>
          <div class="col-lg-4 offset-lg-1 p-0 overflow-hidden shadow-lg">
            <img
              class="rounded-lg-3 img-enlarge"
              src="manual/03-proses lesen - 01 - pbtpay 0.jpg"
              alt=""
              width="500"
            />
          </div>
        </div>
      </div>
      <div class="b-example-divider"></div>
      <div class="container col-xxl-8 px-4 py-5">
        <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
          <div class="col-10 col-sm-8 col-lg-6">
            <img
              src="manual/03-proses lesen - 01 - pbtpay 4.jpg"
              class="d-block mx-lg-auto img-fluid img-enlarge"
              alt="Bootstrap Themes"
              width="500"
              height="300"
              loading="lazy"
            />
          </div>
          <div class="col-lg-6">
            <h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">
            Bayar Bil Wang Proses
            </h1>
            <p class="lead mb-4">
            Isi ruang yang diperlukan.
            </p>
            <ol>
                <li>Klik pada tab 'Pelbagai'</li>
                <li>Pilih 'Majlis Bandaraya Iskandar Puteri' di ruang PBT</li>
                <li>Masukkan no bil di ruang No Akaun.No bil boleh diperolehi di aplikasi myLesen seperti dalam gambar.</li>
            </ol>
          </div>
        </div>
      </div>
      <div class="b-example-divider mb-0"></div>
    </main>
    <!-- Modal untuk enlarge image -->
    <div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
            <div class="modal-body p-0 text-center">
                <img src="" id="imageModalImg" class="img-fluid" alt="">
            </div>
            </div>
        </div>
    </div>

    <script
      src="assets/js/bootstrap.bundle.min.js"
      class="astro-vvvwv3sm"
    ></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
    $(function () {
        // Bagi hint yang image ni boleh diklik
        $('.img-enlarge').css('cursor', 'zoom-in');

        $('.img-enlarge').on('click', function () {
        var src = $(this).attr('src');
        var alt = $(this).attr('alt') || '';

        $('#imageModalImg')
            .attr('src', src)
            .attr('alt', alt);

        var modalEl = document.getElementById('imageModal');
        var modal = new bootstrap.Modal(modalEl);
        modal.show();
        });
    });
    </script>

  </body>
</html>
