E-Vote/resources/assets/js/components/demo/voter/home/penyata.vue

<template>
  <div class="penyata-wrapper container">

    <!-- ✅ HEADER SECTION (2 Columns) -->
    <div class="header-section">
      <!-- Left -->
      <div class="header-left">
        <div class="logo-wrapper">
          <img src="/images/logo-kopkb.jpeg" alt="KoPKB Logo" class="kopkb-logo" />
          <div>
            <div style="text-align: left;">
              <h4 class="fw-bold mb-1">
                <strong>Koperasi Permodalan Kelantan Berhad (KoPKB)</strong>
              </h4>
              <p style="font-size: 13px; line-height: 1.3; margin: 0;">
                Lot PT 448, Tingkat 1, Jalan Kuala Krai, Batu 3,
                Wakaf Che Yeh, 15150 Kota Bharu, Kelantan<br />
                Tel: 09-7414339 | Website: www.koppkb.com
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="header-right">
        <!-- ✅ Boxed Title -->
        <div class="title-box">
          <h5>PENYATA AHLI</h5>
        </div>
        <h4 class="text-muted mt-2" text-center> {{ new Date().getFullYear() }}</h4>
      </div>
    </div>

    <hr class="mt-3" />

    <!-- ✅ MEMBER INFO SECTION (2 Columns) -->
    <div class="form-section two-column ">
      <div class="form-group">
        <label class="form-label fw-semibold">Tarikh :</label>
        <input type="date" class="form-control form-control-sm" v-model="tarikh" />
      </div>

      <div class="form-group">
        <label class="form-label fw-semibold">No. Anggota:</label>
        {{ data.user.no_anggota }}
      </div>

      <div class="form-group">
        <label class="form-label fw-semibold">Nama:</label>
        {{ data.user.name }}
      </div>

      <div class="form-group">
        <label class="form-label fw-semibold">Pejabat / Syarikat:</label>
        {{ data.user.unit }}
      </div>
    </div>

    <!-- ✅ MAIN CONTENT -->
    <h5 class="mt-4"><strong>PENGESAHAN PENYATA BAKI AKAUN AHLI</strong></h5>
    <p>
      Adalah dimaklumkan kedudukan baki akaun tuan/puan pada <strong>{{ tarikh }}</strong> dengan Koperasi Permodalan
      Kelantan Berhad adalah seperti berikut:
    </p>

    <p style="text-align: justify;">
      Sukacita dapat tuan/puan mengesahkan baki tersebut dan menandatangani salinan penyata akaun berkembar
      untuk tujuan audit dan kembalikan salinan tersebut kepada koperasi sebelum <input type="date"
        class="form-control form-control-sm" v-model="tarikh" />
    </p>


    <!-- ✅ 2-COLUMN TABLE -->
    <div id="app" data-penyata='@json($penyata)'>


      <table class="boxed-table mt-4">
        <tbody>
          <tr>
            <td>Saham</td>
            <td>{{ data.user.saham }}</td>

            <td>Yuran</td>
            <td>{{ data.user.yuran }}</td>
          </tr>

          <tr>
            <td>Pelaburan T1</td>
            <td>{{ data.user.pelaburanT1 }}</td>

            <td>Pinjaman BAI</td>
            <td>{{ data.user.pinjamanBAI }}</td>
          </tr>

          <tr>
            <td>Pelaburan T2</td>
            <td>{{ data.user.pelaburanT2 }}</td>

            <td>Pinjaman BYS</td>
            <td>{{ data.user.pinjamanBYS }}</td>
          </tr>

          <tr>
            <td>Pinjaman AQH</td>
            <td>{{ data.user.pinjamanAQH }}</td>

            <td>Insurans / Cukai Jalan</td>
            <td>{{ data.user.insuransCukai }}</td>
          </tr>

          <tr>
            <td>Pinjaman BBA</td>
            <td>{{ data.user.pinjamanBBA }}</td>

            <td>Pinjaman Pelbagai</td>
            <td>{{ data.user.pinjamanPelbagai }}</td>
          </tr>
        </tbody>
      </table>

    </div>

    <!-- ✅ FOOTER SECTION -->
    <p class="mt-4"><em>
        Dimaklumkan juga bahawa sekiranya kami tidak menerima pengesahan tuan/puan ke atas penyata ini dalam tempoh
        <strong>14 hari</strong> daripada tarikh surat ini, maka ia dianggap tuan/puan bersetuju dan memperakui ia
        adalah
        benar.</em>
    </p>

    <p>Sekian, dimaklumkan.</p><br>
    <p class="italic-note">Surat ini dikeluarkan oleh komputer, tidak perlu ditandatangani.</p>

    <hr />

    <p style="text-align: center;">
    <h5><strong>PERSETUJUAN AHLI </strong></h5>
    </p> <br>
    <p style="text-align: justify;">
    <h5>
      Saya, <strong>{{ data.user.name }}</strong>,
      No Anggota: <strong>{{ data.user.no_anggota }}</strong> ,

      <strong>

        <label class="ms-2">
          <input type="radio" value="Bersetuju" v-model="persetujuan" />
          Bersetuju
        </label>

        <label class="ms-3">
          <input type="radio" value="Tidak Bersetuju" v-model="persetujuan" />
          Tidak Bersetuju
        </label></strong>

      . Anda <strong>{{ persetujuan || 'belum membuat pilihan' }}</strong>
      dengan yang tercatit dalam penyata baki seperti di atas. <br>
    </h5>

    <p style="text-align: justify;"></p>Jika Tidak Bersetuju, Sila kemukakan yang sepatutnya seperti :
    <br>
    <!-- ✅ 2-COLUMN TABLE -->
    <div id="app" data-penyata='@json($penyata)'></div>
    <table class="table table-sm no-lines text-center align-middle">
      <tbody>

        <tr>
          <td>Saham</td>
          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.saham" /></td>

          <td>Pinjaman AQH</td>
          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pinjamanAQH" /></td>
        </tr>

        <tr>
          <td>Yuran</td>
          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.yuran" /></td>

          <td>Pinjaman BBA</td>
          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pinjamanBBA" /></td>
        </tr>

        <tr>
          <td>Pelaburan T1</td>
          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pelaburanT1" /></td>

          <td>Pinjaman BAI</td>
          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pinjamanBAI" /></td>
        </tr>

        <tr>
          <td>Pelaburan T2</td>
          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pelaburanT2" /></td>

          <td>Pinjaman BYS</td>
          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pinjamanBYS" /></td>
        </tr>

        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>

          <td>Insurans / Cukai Jalan</td>
          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.insuransCukai" /></td>
        </tr>

        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>

          <td>Pinjaman Pelbagai</td>
          <td><input type="text" class="form-control-sm keyin-input" v-model="data.user.pinjamanPelbagai" /></td>
        </tr>

      </tbody>
    </table>




    <!-- ✅ Sah Button -->
    <div class="text-right mb-3 no-print">
     <button type="button" class="btn btn-primary btn-effect" style="width: 100px;" @click="SahkanPenyata">
  Sahkan
</button>
    </div>

    <!-- ✅ Tandatangan & Tarikh Section -->
    <div class="signature-section">
      <div class="sign-column">
        <label class="form-label">No Kad Pengenalan:</label>
        <input type="number" class="keyin-line" v-model="nokp" />
      </div>

      <div class="sig-column">
        <label class="form-label">Tarikh:</label>
        <input type="date" class="keyin-line" v-model="tarikh" />
      </div>
    </div>
    <br><br>

  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "PenyataView",

  data() {
    return {
      tarikh: new Date().toISOString().substring(0, 10),
      noAhli: "",
      nama: "",
      unit: "",
      noAhliPersetujuan: "",
      persetujuan: "",
      penyata: {
        saham: "",
        yuran: "",
        pelaburanT1: "",
        pelaburanT2: "",
        pinjamanAQH: "",
        pinjamanBBA: "",
        pinjamanBAI: "",
        pinjamanBYS: "",
        insuransCukai: "",
        pinjamanPelbagai: ""
      }
    };
  },

  mounted() {
    const id = this.$route.params.id;
    this.noAhli = id;
    this.noAhliPersetujuan = id;
    this.getPenyata(id);
  },

  methods: {
    async getPenyata(id) {
      try {
        const res = await axios.get(`/api/penyata/${id}`);
        this.penyata = res.data;
      } catch (error) {
        console.error("Failed to fetch penyata:", error.response?.data || error);
      }
    },

    data() {
      return {
        penyata: window.penyataData
      };
    },


    SahkanPenyata() {
  if (confirm("Adakah anda pasti untuk mengesahkan penyata ini?")) {
    this.cetakPenyata();
    alert("Penyata berjaya disahkan.");

    // Delay sedikit supaya Vue Router push jalan dengan betul
    setTimeout(() => {
              this.$router.push({ name: 'lamanUtama' });
        }, 60);
      }
    },

    // pastikan ada method lain di sini jika perlu
    cetakPenyata() {
      console.log("Penyata dicetak");
    }
  }
}
</script>






<style scoped>
.penyata-wrapper {
  max-width: 800px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

/* ✅ Header */
.header-section {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
  gap: 20px;
}

.logo-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.kopkb-logo {
  width: 80px;
  height: auto;
}

.header-right {
  text-align: right;
}

/* ✅ Member Info (2 columns) */
/* Member Info - 2 columns */
.form-section.two-column {
  display: grid;
  /* width: 100%; */
  max-width: 780px;
  /* ⭐ SAME WIDTH AS TABLES */
  margin: 0 auto;
  /* ⭐ center align same as tables */
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
  row-gap: 15px;
  margin-bottom: 20px;
}


.form-section.two-column .form-group {
  min-width: 0;
  /* ⭐ prevents content from stretching columns */
}

.form-section.two-column input,
.form-section.two-column span {
  width: 100%;
  /* keep content inside column */
  display: block;
  word-break: break-word;
  /* wrap long text */
}


.form-control-sm {
  border: none;
  border-bottom: 1px solid #666;
  border-radius: 0;
  width: 100%;
  outline: none;
  padding: 4px;
}

/* ✅ Table */
.table,
table.boxed-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
}

table.boxed-table td {
  border: 1px inset #000;
  padding: 6px 8px;
  font-size: 13px;
  background-color: #fafafa;
  vertical-align: middle;
}

/* ✅ Responsive */
@media (max-width: 768px) {
  .header-section {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .header-right {
    text-align: center;
    margin-top: 10px;
  }

  .logo-wrapper {
    justify-content: center;
  }


}

.title-box {
  background-color: #000;
  /* black background */
  color: #fff;
  /* white text */
  padding: 8px 15px;
  display: inline-block;
  border-radius: 4px;
  text-align: center;
  border: 1px solid #000;
}

.title-box h4 {
  margin: 0;
  font-weight: bold;
  letter-spacing: 1px;
}



/* Remove all inner lines */
.no-lines {
  border-collapse: separate;
  border-spacing: 0 4px;
  /* small space between rows */
  width: 100%;
}

.no-lines td {
  border: none !important;
  /* no borders inside */
  padding: 4px 6px;
  font-size: 13px;
  vertical-align: middle;
  text-align: left;
}

/* Key-in style input fields */
.keyin-input {
  width: 90%;
  border: none;
  border-bottom: 1px solid #000;
  outline: none;
  background: transparent;
  font-size: 12px;
  padding: 2px 4px;
  text-align: right;
}

.keyin-input:focus {
  border-bottom: 1px solid #007bff;
}

.signature-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* equal 50/50 width */
  column-gap: 40px;
  row-gap: 15px;

  width: 100%;
  max-width: 780px;
  /* ⭐ same width as tables */
  margin: 20px auto 0 auto;
  /* ⭐ center align */
}

.signature-section .sign-column,
.signature-section .sig-column {
  min-width: 0;
  /* allows equal split */
}

.signature-section input {
  width: 90%;
  /* align input edges */
}


.keyin-line {
  border: none;
  border-bottom: 1px solid #000;
  /* underline style */
  background: transparent;
  outline: none;
  padding: 2px 0;
  font-size: 12px;
}

.keyin-line:focus {
  border-bottom: 1px solid #007bff;
}

@media (max-width: 768px) {
  .signature-section {
    grid-template-columns: 1fr;
    /* stack on small screens */
  }
}

/* ✅ PRINT SETTINGS */
@media print {
  body {
    /* Chrome/Safari */
    /* Firefox */
    background: #f0f0f0 !important;
  }

  /* A4 page size and margin */
  @page {
    size: A4 portrait;
    margin: 10mm;
    /* Reduce margin to fit more content */
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12px;
    line-height: 1.3;
  }

  /* Fit all content to one page */
  html,
  body {
    height: 100%;
    overflow: hidden;
    zoom: 0.8;
    /* Shrinks entire page content to fit */
  }

  .penyata-wrapper {
    background-color: #f5f5f5 !important;
    /* Your desired background */
    /* -webkit-print-color-adjust: exact;
    print-color-adjust: exact; */
    padding: 20px;
  }

  /* Hide buttons when printing */
  .no-print {
    display: none !important;
  }


  /* Prevent page breaks */
  .penyata-wrapper,
  .container,
  table {
    page-break-inside: avoid;
  }

  @media print {
    #penyata {
      position: absolute;
      top: 10px;
      right: 10px;
      text-align: right !important;
    }
  }

  /* Keep spacing compact */
  p,
  label,
  input,
  td {
    margin: 0;
    padding: 2px 4px;
  }
}

.italic-note {
  font-style: italic;
}

.keyin-line {
  border: none;
  border-bottom: 1px dashed black;
  width: 140px;
  padding: 2px 4px;
}

.btn-effect {
  transition: 0.3s ease;
}

.btn-effect:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(8, 8, 8, 0.818);
}
</style>