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

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

    <!-- HEADER -->
    <div class="header-section">
      <div class="header-left">
        <div class="logo-wrapper">
          <img src="/images/logo-kopkb.jpeg" alt="KoPKB Logo" class="kopkb-logo" />
          <div>
            <h4 class="fw-bold mb-1">KOPERASI PERMODALAN KELANTAN BERHAD</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 class="header-right">
        <div class="title-box">
          <h5>PENYATA AHLI</h5>
        </div>
        <h4 class="text-muted mt-2">2025</h4>
      </div>
    </div>

    <!-- <hr class="mt-3" /> -->

    <hr style="border: none; border-top: 1.5px solid #000; margin: 15px 0;">

    <!-- MEMBER INFO -->
    <div v-if="data.user.no_anggota" class="form-section two-column">
      <div class="form-group">
        <label class="form-label fw-semibold">Tarikh :</label>
        <span>26-02-2026</span>
      </div>

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

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

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

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

    <!-- 2-COLUMN TABLE -->
    <table class="boxed-table mt-4">
      <tbody>
        <tr>
          <td>Saham</td>
          <td>-{{ formatNumber(data.user.saham) }}</td>
          <td>Pembiayaan Kecemasan</td>
          <td>{{ formatNumber(data.user.tergempar) }}</td>

        </tr>
        <tr>
          <td>Yuran</td>
          <td>-{{ formatNumber(data.user.yuran) }}</td>
          <td>Pembiayaan Pengguna</td>
          <td>{{ formatNumber(data.user.barangan) }}</td>

        </tr>
        <tr>
          <td>Pelaburan T1</td>
          <td>-{{ formatNumber(data.user.pelaburan) }}</td>
          <td>Pembiayaan Peribadi</td>
          <td>{{ formatNumber(data.user.peribadi) }}</td>
        </tr>
        <tr>
          <td>Pelaburan T2</td>
          <td>0.00</td>
          <td>Pembiayaan Berjamin Yuran</td>
          <td>{{ formatNumber(data.user.berjamin_yuran) }}</td>

        </tr>
        <tr>
          <td></td>
          <td></td>
          <td>Pembiayaan Takaful / Cukai Jalan</td>
          <td>{{ formatNumber(data.user.roadtax) }}</td>

        </tr>
        <tr>
          <td></td>
          <td></td>
          <td>Pembiayaan Pelaburan / Pelbagai</td>
          <td>{{ formatNumber(data.user.pelbagai) }}</td>
        </tr>
      </tbody>
    </table>

    <p class="mt-4">Sukacita dapat tuan/puan untuk mengesahkan baki tersebut dengan memasukkan No K/P anggota dan
      menekan butang SAHKAN
      untuk tujuan audit tahunan koperasi sebelum <b>12-03-2026</b>.</p>

    <p class="mt-4">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
      terhadap baki yang dipaparkan.</p>

    <p>Sekian, dimaklumkan.</p>

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

    <hr style="border: none; border-top: 1.5px solid #000; margin: 15px 0;">

    <!-- PERSETUJUAN AHLI -->
    <div class="text-center mt-4 mb-3">
      <div style="font-weight:700; font-size:18px;">
        PERSETUJUAN AHLI
      </div>
      <hr style="width:200px; margin:8px auto;">
    </div>

    <div style="margin-top:10px; line-height:1.8;">

      <div style="margin-bottom:8px;">
        <label style="cursor:pointer;">
          <input type="radio" name="persetujuan" value="Bersetuju" v-model="persetujuan"
            :disabled="data.user.status_penyata === 'DISAHKAN'" />
          <span style="margin-left:6px;">
            Saya <strong>MENGESAHKAN</strong> bahawa baki yang dipaparkan adalah BENAR dan TEPAT.
          </span>
        </label>
      </div>

      <div>
        <label style="cursor:pointer;">
          <input type="radio" name="persetujuan" value="Tidak Bersetuju" v-model="persetujuan"
            :disabled="data.user.status_penyata === 'DISAHKAN'" />
          <span style="margin-left:6px;">
            Saya <strong>TIDAK BERSETUJU</strong> dengan baki yang dipaparkan.
          </span>
        </label>
      </div>

      <div>
        <p>Jika tidak bersetuju, sila nyatakan jumlah yang betul di bawah:</p>
      </div>

    </div>

    <p class="text-center">
      <strong>
        <span v-if="data.user.status_penyata === 'DISAHKAN'" class="badge-disahkan">
          TELAH DISAHKAN
        </span>

        <span v-else-if="data.user.status_penyata === 'Tidak Bersetuju'" class="badge-tidak-setuju">
          Tidak Setuju
        </span>

        <span v-else>
          {{ persetujuan || 'Belum membuat pilihan' }}
        </span>
      </strong>
    </p>


    <!-- EDITABLE TABLE IF TIDAK BERSETUJU -->
    <table class="table table-sm no-lines text-center align-middle mt-2">
      <tbody>
        <tr>
          <td>Saham</td>
          <td>-<input type="number" class="keyin-input" v-model="data.user.saham" /></td>
          <td>Pembiayaan Kecemasan</td>
          <td><input type="number" class="keyin-input" v-model="data.user.tergempar" /></td>

        </tr>
        <tr>
          <td>Yuran</td>
          <td>-<input type="number" class="keyin-input" v-model="data.user.yuran" /></td>
          <td>Pembiayaan Pengguna</td>
          <td><input type="number" class="keyin-input" v-model="data.user.barangan" /></td>
        </tr>
        <tr>
          <td>Pelaburan T1</td>
          <td>-<input type="number" class="keyin-input" v-model="data.user.pelaburan" /></td>
          <td>Pembiayaan Peribadi</td>
          <td><input type="number" class="keyin-input" v-model="data.user.peribadi" /></td>
        </tr>
        <tr>
          <td>Pelaburan T2</td>
          <td>-<input type="number" class="keyin-input" v-model="data.user.pelaburanT2" /></td>
          <td>Pembiayaan Berjamin Yuran</td>
          <td><input type="number" class="keyin-input" v-model="data.user.berjamin_yuran" /></td>
        </tr>
        <tr>
          <td>Pembiayaan Takaful / Cukai Jalan</td>
          <td><input type="number" class="keyin-input" v-model="data.user.roadtax" /></td>
          <td>Pembiayaan Pelaburan / Pelbagai</td>
          <td><input type="text" class="keyin-input" v-model="data.user.pelbagai" /></td>
        </tr>
      </tbody>
    </table>

    <!-- TANDATANGAN & TARIKH -->
    <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>

    <!-- BUTTONS -->
    <br>
    <div class="text-right mt-5 mb-3 no-print">
      <button class="btn btn-primary btn-effect" style="width:100px;" @click="SahkanPenyata"
        :disabled="data.user.status_penyata === 'DISAHKAN'">
        {{ data.user.status_penyata === 'DISAHKAN' ? 'Disahkan' : 'Sahkan' }}
      </button>

      <button class="btn btn-danger ms-2" @click="cetakPDF">Cetak PDF</button>
    </div>

    <hr style="border: none; border-top: 1.5px solid #000; margin: 15px 0;">

    <!-- NOTA PENTING -->
    <div class="mt-5">
      <p class="fw-bold mb-1">Nota Penting:</p>
      <ul class="mb-0">
        <li>Pengesahan ini adalah bagi tujuan Audit Tahunan KoPKB.</li>
        <li>Anggota hendaklah membuat pengesahan dalam tempoh 14 hari.</li>
        <li>Kegagalan memberi maklum balas dalam tempoh tersebut akan dianggap sebagai persetujuan terhadap baki yang
          dipaparkan.</li>
        <li>Semua rekod pengesahan adalah tertakluk kepada semakan juruaudit luar.</li>
      </ul>
    </div>

  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "PenyataView",
  data() {
    return {
      tarikh: new Date().toISOString().substring(0, 10),
      persetujuan: "",
      nokp: "",
      data: { user: {} },
      loading: false
    };
  },
  mounted() {
    const noAnggota = this.$route.params.no_anggota;
    if (noAnggota) this.getPenyata(noAnggota);
  },
  methods: {
    async getPenyata(id) {
      this.loading = true;
      try {
        const res = await axios.get(`/api/v1/penyata/${id}`);
        this.data = res.data;
      } catch (err) {
        console.error(err);
        alert("Gagal ambil data penyata");
      } finally {
        this.loading = false;
      }
    },
    cetakPDF() {
      const noAnggota = this.$route.params.no_anggota;
      if (noAnggota) window.open(`/api/v1/penyata/${noAnggota}/pdf`, '_blank');
    },
    async SahkanPenyata() {
      const noAnggota = this.$route.params.no_anggota;
      if (!this.persetujuan) { alert("Sila pilih Bersetuju atau Tidak Bersetuju"); return; }
      if (!this.nokp) { alert("Sila isi No Kad Pengenalan"); return; }
      if (!confirm("Adakah anda pasti untuk mengesahkan penyata ini?")) return;
      try {
        await axios.post(`/api/v1/penyata/${noAnggota}/sahkan`, {
          persetujuan: this.persetujuan,
          nokp: this.nokp,
          tarikh: this.tarikh
        });
        alert("Penyata berjaya DISAHKAN");
        this.cetakPDF();
        this.$router.push({ name: 'lamanUtama' });
      } catch (err) {
        console.error(err);
        alert("Gagal sahkan penyata");
      }
    },
    formatNumber(value) {
      return Number(value || 0).toLocaleString('en-US', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })
    }
  }
};
</script>

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

.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;
}

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

.form-section.two-column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
  row-gap: 15px;
  margin-bottom: 20px;
  max-width: 780px;
  margin: 0 auto;
}

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

.boxed-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
}

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

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

.keyin-input,
.keyin-line {
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  padding: 2px 4px;
  font-size: 12px;
  text-align: right;
  width: 90%;
}

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

.signature-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 15px;
  width: 100%;
  max-width: 780px;
  margin: 20px auto 0;
}

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

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

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

.badge-disahkan {
  background: #28a745;
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* .badge-tidak-setuju{
  background: #a72828;
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 600;
  letter-spacing: 0.3px;
} */

@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;
  }

  .signature-section {
    grid-template-columns: 1fr;
  }
}

@media print {
  .no-print {
    display: none !important;
  }

  body {
    font-size: 12px;
    line-height: 1.3;
  }

  table,
  .penyata-wrapper {
    page-break-inside: avoid;
  }
}
</style>