


<template>
  

     <form @submit.prevent="submitForm" class="ion-text-center">
  <div class="container">
    <div class="row justify-content-center">
      <div id="permohonan" 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: 40px;"
            />
            <h6 class="mb-0 fw-bold">
              Koperasi Permodalan Kelantan Berhad (KoPKB)
            </h6>
          </div>
          <h6 class="text-primary fw-semibold mt-2">
                KONTRAK JUALAN MURABAHAH
          </h6>
        </div>
 
        <p class="ion-text-center">Pihak -pihak yang terlibat di dalam Kontrak Jualan Murabahah ini adalah : </p>
        <ol class="ion-text-center" style="list-style-position: inside;">
             <li><b>KOPERASI PERMODALAN KELANTAN BERHAD (KoPKB) </b> selepas ini akan dinyatakan sebagai <strong>('Koperasi')</strong> dan ,</li>
             <li>Anggota yang bernama dan mempunyai No Kad Pengenalan sebagaimana yang dinyatakan dalam Bahagian 2 Jadual A,selepas ini dinyatakan sebagai <strong>('Pelanggan')</strong></li>

<br>        <p> Dengan ini, pihak - pihak yang dinyatakan di atas <b>BERSETUJU DAN MENGISYTIHARKAN</b> seperti berikut : </p>
           <ol class="ion-text-center" style="list-style-position: inside;">
            <li><h6 style="display: inline;"><strong>JUALAN KOMODITI</strong></h6></li> <br>
            <p style="text-align: justify;">Berdasarkan kepada Surat Tawaran bertarikh <input type="date" placeholder="<tarikh>" style="border: none; border-bottom: 1px solid #888; outline: none;"> dan Aku Janji yang dikeluarkan oleh Pelanggan kepada Koperasi , Koperasi dengan ini menjual dan Pelanggan dengan ini membeli komoditi (butiran yang mana adalah seperti yang dinyatakan pada Bahagian 3 Jadual A didalam Perjanjian ini) ('Komoditi') pada Harga Jualan yang dinyatakan pada Bahgaian 4 Jadual A didalam Perjanjian ini.
            ('Harga Jualan') yang merangkumi Harga Kos Koperasi seperti yang dinyatakan pada Bahagian 5 Jadual A di dalam Perjanjian ini dan margin keuntungan dengan pembayaran secara tangguh tertakluk kepada terma dan syarat di dalam Surat Tawaran. )</p>

  
               <li><h6 style="display: inline;"><strong>PEMINDAHAN HAK MILIK</strong></h6></li>
             <ol type="a" style="list-style-position: inside;">
                <li style="text-align: justify; text-justify: inter-word;">Setelah pemeteraian Kontrak Jualan Murabahah ini disempurnakan, liabiliti dan hak pemilikan bermanfaat terhadap komoditi hendaklah dengan segera diserahkan kepada Pelanggan. 
              </li>
               <li style="text-align: justify; text-justify: inter-word;">Koperasi hendaklah menyimpan sijil yang berkaitan dengan Komoditi (Lampiran1 ) dalam jagaannya sebagai pemegang amanah bagi kepentingan Pelanggan untuk tujuan penjualan komoditi seterusnya kepaga peniaga komoditi sepetimana yang dinyatakan di dalam Surat Perlantikan Wakil yang dikeluarkan oleh Pelanggan kepada Koperasi .Pelanggan mempunyai hak untuk memeriksa perakuan tersebut di premis Koperasi atau memohon Koperasi untuk memberikan satu salinan sijil tersebut kepada pelanggan melalui permohonan bertulis kepada Koperasi . 
              </li>
                 </ol>
           
               <li><h6 style="display: inline;"><strong>PEMBAYARAN HARGA JUALAN</strong></h6></li>              
               <p style="text-align: justify;"> Pembayaran Harga Jualan oleh Pelanggan kepada Koperasi hendaklah  sebagaimana yang dinyatakan di dalam Bahagian 6 Jadual A kepada Perjanjian ini. </P>
              
              
               <li><h6 style="display: inline;"><strong>TERMA DAN SYARAT</strong></h6></li> 
            <p style="text-align: justify;">Terma dan syarat yang dinyatakan  dalam Surat Tawaran , Aku Janji , Surat Perlantikan Wakil bersama -sama dokumen undang - undang yang berkaitan dengan ini mengikat diantara Pelanggan dan Koperasi . </P>
             
          
               <li><h6 style="display: inline;"><strong>PELANGGAN</strong></h6></li>
           <p style="text-align: justify;">
  Saya dengan ini bersetuju untuk membeli Komoditi seperti butiran yang dinyatakan pada Bahagian 3 dalam Jadual A di dalam Perjanjian ini dengan Harga Jualan yang dinyatakan pada Bahagian 4 Jadual A di dalam Perjanjian ini, secara pembayaran tertangguh yang dinyatakan pada Bahagian 6 Jadual A di dalam Perjanjian ini.
</p>
</ol>
</ol>

 <!-- ✅ Signature section -->
    <div class="row mt-5 text-start">
  <!-- Left column -->
  <div class="col-md-6">
    <strong>Anggota Pemohon / Pembeli</strong>
    <div class="d-flex justify-content-between align-items-center mt-2">
      <label style="width: 100px;">Tandatangan:</label>
      <span class="signature-line"></span>
    </div>
    <div class="d-flex justify-content-between align-items-center mt-2">
      <label style="width: 100px;">Nama:</label>
      <span class="signature-line"></span>
    </div>
    <div class="d-flex justify-content-between align-items-center mt-2">
      <label style="width: 100px;">Tarikh:</label>
      <span class="signature-line"></span>
    </div>
  </div>
<br>
        <!-- ✅ Force new page before KOPERASI -->
        <div class="page-break">
         <div class="col-md-6">
    <strong>KOPERASI</strong>
    <div class="d-flex justify-content-between align-items-center mt-2">
      <label style="width: 100px;">Tandatangan:</label>
      <span class="signature-line"></span>
    </div>
    <div class="d-flex justify-content-between align-items-center mt-2">
      <label style="width: 100px;">Nama:</label>
      <span class="signature-line"></span>
    </div>
    <div class="d-flex justify-content-between align-items-center mt-2">
      <label style="width: 100px;">Tarikh:</label>
      <span class="signature-line"></span>
    </div>
  </div>
</div>
        <hr>

        <!-- ✅ Table section -->
       <table class="print-table">
          <thead style="background-color:#f2f2f2;">
            <tr>
              <th>Bahagian</th>
              <th>Perkara</th>
              <th>Maklumat</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Tarikh Kontrak Jualan Murabahah</td>
              <td><input type="date" style="border: none; border-bottom: 1px solid #888; outline: none;"></td>
            </tr>
            <tr>
              <td>2</td>
              <td>Nama dan No. K/P Pelanggan</td>
              <td><input type="text" style="border: none; border-bottom: 1px solid #888; outline: none;"></td>
            </tr>
            <tr>
              <td>3</td>
              <td>Butiran komoditi</td>
              <td>Cert No: <input type="text" style="border: none; border-bottom: 1px solid #888; outline: none;"></td>
            </tr>
            <tr>
              <td>4</td>
              <td>Harga Jualan</td>
              <td>RM <input type="number" style="border: none; border-bottom: 1px solid #888; outline: none;"></td>
            </tr>
            <tr>
              <td>5</td>
              <td>Harga Kos Koperasi</td>
              <td>RM <input type="number" style="border: none; border-bottom: 1px solid #888; outline: none;"></td>
            </tr>
            <tr>
              <td>6</td>
              <td>Pembayaran Harga Jualan</td>
              <td>
                Ringgit Malaysia <input type="text" style="border: none; border-bottom: 1px solid #888; outline: none;">
                (RM <input type="number" style="border: none; border-bottom: 1px solid #888; outline: none;">)
                hanya perlu dibayar oleh Pelanggan kepada Koperasi sebanyak RM
                <input type="number" style="border: none; border-bottom: 1px solid #888; outline: none;">
                secara ansuran bulanan selama
                <input type="number" style="border: none; border-bottom: 1px solid #888; outline: none;"> bulan.
              </td>
            </tr>
          </tbody>
        </table>
    </div>
      </div> <!-- ✅ END of #permohonan -->

      <br>

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
      rel="stylesheet"
    />

      <!-- ✅ Buttons (excluded from print) -->
      <div class="button-container text-center mt-4">
       <button type="button" class="btn btn-primary px-4" @click="simpan">
          Simpan
        </button>

        <button type="button" class="btn btn-success px-4" @click="cetak" >
          <i class="bi bi-printer"></i> Cetak Permohonan
        </button>
      </div>

    </div>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: null,
      nama: '',
      ic: ''
    };
  },

  mounted() {
    const saved = localStorage.getItem('formData');
    if (saved) {
      this.formData = JSON.parse(saved);
      console.log('Loaded data:', this.formData);
    }
  },

  methods: { 
    cetak() {
      this.$nextTick(() => {
        const printContent = document.getElementById('permohonan');
        if (!printContent) {
          alert('Ralat: Elemen #permohonan tidak ditemui!');
          return;
        }
        const newWin = window.open('', '', 'width=1000,height=800');
        newWin.document.write(`
          <html>
            <head>
              <title>Cetak Permohonan</title>
              <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
              <style>
                 body { font-family: Arial, sans-serif; margin: 20px; font-size: 12px; color: #000; }
                table, th, td {
                  border: 1px solid #000; border-collapse: collapse; padding: 6px;
                }
                th { background-color: #f8f9fa; }
                .signature-line {
                  display: inline-block;
                  width: 200px;
                  border-bottom: 1px solid #000;
                  margin-left: 10px;
                }
                @media print {
                  button { display: none !important; }
                }
              </style>
            </head>
            <body>${printContent.outerHTML}</body>
          </html>
       `);

        newWin.document.close();

        newWin.onload = () => {
          newWin.focus();
          newWin.print();
          newWin.close();
        };
      });
    }
  }
};
</script>

<style> 
 .signature-line {
  display: inline-block;
  width: 200px;
  border-bottom: 1px solid #000;
  margin-left: 10px;
}

/* ✅ Table styling for normal view */
.print-table {
  width: 100%;              /* slightly smaller than 80% to fit footer margins */
  margin: 20px auto;       /* center the table */
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;         /* reduce font size slightly */
}

.print-table th,
.print-table td {
  border: 1px solid #000;
  padding: 6px 8px;
  vertical-align: top;
  word-wrap: break-word;
}

/* ✅ Header background */
.print-table th {
  background-color: #f2f2f2;
}

/* ✅ Print formatting */
@media print {
  body {
    margin: 15mm 10mm 15mm 10mm; /* adjust printable area */
  }

  .page-break {
    page-break-before: always;
  }
  .button-container,
  button {
    display: none !important;
  }

  .print-table {
    width: 90%;              /* make sure it fits page width */
    page-break-inside: auto; /* allow page to split table gracefully */
  }

  .print-table tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  /* Reduce font slightly to prevent overflow */
  .print-table td,
  .print-table th {
    font-size: 11px;
    padding: 5px;
     }
}
</style>

