<!-- Resize & Center Form -->
<template>

   <form @submit.prevent="saveAndNext" class="ion-text-center">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-10 col-lg-8">

        <!-- Header with Logo + Title -->
        <div class="text-center mb-4">
          <div class="d-flex align-items-center justify-content-center mb-2">
            <img
              src="/images/KoPKB_Logo.png"
              alt="KoPKB Logo"
              class="kopkb-logo me-2"
              style="height: 50px;"
            />
            <h4 class="mb-0 fw-bold">
              Koperasi Permodalan Kelantan Berhad (KoPKB)
            </h4>
          </div>
          <h5 class="text-primary fw-semibold mt-2">
            AKUJANJI BELIAN KOMODITI
          </h5>
        </div>

        <!-- Main Form -->
        <form>
          <p><b>Aku Janji Belian Komoditi</b></p>

          <p style="text-align: justify;">
            Selaras dengan Surat Tawaran, saya dengan ini beraku janji untuk membeli komoditi yang dinyatakan di dalam Surat Tawaran Pembiayaan ("Komoditi") daripada Koperasi pada Harga Jualan yang tersebut dalam Surat Tawaran Pembiayaan ("Harga Jualan") bersama-sama dengan semua kos lain yang termasuk dengannya (termasuk tetapi tidak terhad kepada kos komoditi yang dinyatakan di dalam Surat Tawaran Pembiayaan) yang kedua-duanya akan dibayar mengikut terma-terma dan syarat-syarat Perjanjian Pembiayaan Tawarruq atau apa-apa kaedah lain yang dibenarkan oleh Koperasi.
          </p>

          <br />

          <p>Saya dengan ini membuat pilihan untuk:</p>
          <p>Sila tandakan (✓) jika berkenaan.</p>

          <!-- Option 1 -->
          <div class="form-check mb-3">
            <input type="checkbox" id="pilihan1" class="form-check-input" />
            <label for="pilihan1" class="form-check-label" style="text-align: justify;">
              Menerima penghantaran komoditi, atau menjual komoditi kepada mana-mana pihak ketiga atas kehendak saya, dengan segala kos berkaitan ditanggung oleh saya sendiri. Saya dengan ini melepaskan Koperasi daripada segala tanggungan dan beraku janji untuk menanggung kos koperasi terhadap apa-apa tindakan undang-undang termasuk menanggung rugi semua kos dan perbelanjaan atau kerosakan yang koperasi mungkin alami atau tanggung berikutan pilihan saya ini.
            </label>
          </div>

          <p class="text-center fw-bold">ATAU</p>

          <!-- Option 2 -->
          <div class="form-check mb-3">
            <input type="checkbox" id="pilihan2" class="form-check-input" />
            <label for="pilihan2" class="form-check-label" style="text-align: justify;">
              Meninggalkan komoditi itu kepada koperasi dan menyerahkan kuasa kepada koperasi sebagai wakil saya untuk menjual komoditi itu kepada pihak ketiga yang difikirkan sesuai oleh koperasi pada harga sama seperti jumlah pembiayaan dalam Surat Tawaran Pembiayaan dan dengan itu mengkreditkan hasil jualan komoditi (Jumlah Pembiayaan) ke dalam akaun saya, atau diserahkan secara tunai kepada saya.
            </label>
          </div>

          <p>Harga Jualan (Jumlah Pembiayaan): RM <input type="text" placeholder="" style="border: none; border-bottom: 1px solid #888; outline: none;"></p>
          <p>No. Akaun Bank:<input type="text" placeholder="" style="border: none; border-bottom: 1px solid #888; outline: none;"></p>
          <hr />

          <h5 class="mt-4"><strong>PERLANTIKAN WAKIL</strong></h5>

          <p style="text-align: justify;">
            Saya dengan ini secara muktamadnya melantik <b>Koperasi Permodalan Kelantan Berhad</b> setelah Surat Tawaran Pembiayaan dipersetujui sebagai wakil saya untuk menjual komoditi seperti yang  dinyatakan didalam Surat Tawaran kepada mana -mana pihak pembeli ketiga yang difikirkan sesuai oleh  Koperasi melalui platform Bursa Suq Al-Sila'(BSAS)   atau mana -mana platform yang difikirkan sesuai .
          </p>

           <p>Pengesahan  : </p>
           <p>[Tandatangan Pemohon] : _____________________________</p>
           <p>:Nama Pemohon :  ___________________________</p>
           <p> No Kad Pengenalan : _______________________</p>

          <!-- Button -->
          <div class="text-end mt-4">
            <router-link to="/" class="btn btn-dark me-2">Sebelum</router-link>
            <button type="submit" class="btn btn-primary px-4"  @click="saveAndNext">  Seterusnya</button>
       
    

          </div>
        </form>

      </div> <!-- /col -->
    </div> <!-- /row -->
  </div> <!-- /container -->
  </form>
</template>

<script>
export default {
  data() {
    return {
      komoditi: '',
      kuantiti: '',
      harga: ''
    };
  },
  //  saveAndNext() {
  //   // Save current page data to localStorage
  //   const data = {
  //     komoditi: this.komoditi,
  //     kuantiti: this.kuantiti,
  //     harga: this.harga
  //   };
  //   localStorage.setItem('formData', JSON.stringify(data));

  //   // Navigate to Kontrak Murabahah page
  //   this.$router.push({ name: 'KontrakMurabahah' }); // ✅ use named route
  // },


  methods: {
  saveAndNext() {
    const data = {
      komoditi: this.komoditi,
      kuantiti: this.kuantiti,
      harga: this.harga
    };
    localStorage.setItem('formData', JSON.stringify(data));

    console.log('Navigating to Kontrak Murabahah...'); // debug line

    this.$router.push({ name: 'KontrakMurabahah' });
  }
}
};

</script>

<style scoped>
.container {
  max-width: 900px;
}
.kopkb-logo {
  height: 50px;
}
</style>
