

<template>

  <div class="row col-md-10 col-md-offset-1">
    <!-- Banner -->
    <div class="text-center mb-4">
      <img src="/images/banner-mat28-new.jpg" alt="Banner" class="img-fluid"
        style="width: 100%; max-height: 400px; object-fit: cover;">
    </div>

    <!-- Member Info -->
    <div class="col-md-4">
      <div class="p-2 mb-3 text-center"
        style="background-color: #007bff; color: white; font-weight: bold; font-size: 1.6rem; border-radius: 4px;">
        Maklumat Anggota
      </div>
      <hr />
      <ul class="list-group" style="font-weight: bold;">
        <li class="list-group-item">
          <span class="info-label">NAMA</span>
          <span class="info-separator">:</span>
          <span class="info-value">{{ data.user.name }}</span>
        </li>
        <li class="list-group-item">
          <span class="info-label">NO KAD PENGENALAN</span>
          <span class="info-separator">:</span>
          <span class="info-value">{{ data.user.no_kp }}</span>
        </li>
        <li class="list-group-item">
          <span class="info-label">NO ANGGOTA</span>
          <span class="info-separator">:</span>
          <span class="info-value">{{ data.user.no_anggota }}</span>
        </li>
        <li class="list-group-item">
          <span class="info-label">UNIT</span>
          <span class="info-separator">:</span>
          <span class="info-value">{{ data.user.unit }}</span>
        </li>
        <li class="list-group-item">
          <span class="info-label">SAHAM</span>
          <span class="info-separator">:</span>
          <span class="info-value">RM {{ data.user.saham | formatNumberWithCommas }}</span>
        </li>
        <li class="list-group-item">
          <span class="info-label">YURAN</span>
          <span class="info-separator">:</span>
          <span class="info-value">RM {{ data.user.yuran | formatNumberWithCommas }}</span>
        </li>
      </ul>

      <!-- Membership Card -->

      <div class="kad-keahlian">
        <!-- Vertical MEMBER CARD on left -->
        <div class="member-card-vertical">MEMBER CARD </div>

        <!-- Top-right logo -->
        <div class="kad-logo" style="text-align: right; margin: 0; padding: 0;">
          <img src="/images/logo_kad.png" alt="Logo"
            style="width: 124px; height: auto; filter: drop-shadow(3px 3px 4px black); margin-right: 0;">
        </div>

        <br><br>
        <div class="kad-content">
          <img src="images/KOPKB_Final.png" class="watermark" alt="Watermark">

          <div class="member-details">
            <div class="detail-item">
              <span class="detail-label">NAMA:</span>
              <span class="detail-value">{{ data.user.name }}</span>
            </div>

            <div class="detail-item">
              <span class="detail-label">NO KAD PENGENALAN:</span>
              <span class="detail-value">{{ data.user.no_kp }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">NO ANGGOTA:</span>
              <span class="detail-value">{{ data.user.no_anggota }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">UNIT:</span>
              <span class="detail-value">{{ data.user.unit }}</span>
            </div>

            <div class="detail-item">
              <svg id="barcode" class="detail-value">{{ data.user.no_kp }}</svg>

            </div>
          </div>

        </div>
        <!-- <div class="contact-info">
           <p><i class="bi bi-envelope"></i>admin@koppkb.com </p> <br>
          <p>09-7414331 <i class="bi bi-telephone"></i></p><br>
          <p>09-7414334 <i class="bi bi-printer-fill"></i></p><br>
          <p>www.koppkb.com <i class="bi bi-globe"></i></p>
        </div> -->
      </div>
    </div>

    <!-- Nominee Info Section -->
    <div class="col-md-8">
      <div class="p-2 mb-3 text-center"
        style="background-color: #007bff; color: white; font-weight: bold; font-size: 1.6rem; border-radius: 4px;">
        Maklumat Calon
      </div>
      <hr />
      <small>Tekan gambar untuk maklumat calon</small>

      <div class="panel panel-primary" v-for="position in data.positions" :key="position.id">
        <div class="panel-heading">{{ position.name }}</div>
        <div class="panel-body table-responsive">
          <table class="table table-hover">
            <thead>
              <tr>
                <th></th>
                <th>Bil.</th>
                <th>Nama</th>
                <th>No. Anggota</th>
                <th>Unit</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(nominee, i) in data.nominees" :key="nominee.id" v-if="nominee.position_id == position.id"
                @click="viewNomineeDetails(nominee)">
                <td>
                  <img :src="createBase64ImageUrl(nominee.photo)" class="thumbnail" style="height: 60px; width: 60px;">
                </td>
                <td>{{ nominee.no_calon }}</td>
                <td>{{ nominee.name }}</td>
                <td>{{ nominee.no_anggota }}</td>
                <td>{{ nominee.unit }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Nominee Modal -->
    <div v-if="showNomineeModal" class="modal-backdrop">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Maklumat Calon</h5>
            <button type="button" class="close" @click="closeNomineeModal">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="photo-section">
              <img :src="nomineeViewed.photo" class="thumbnail nominee-viewed-photo" />
            </div>
            <div class="detail-section">
              <p><b>Nama:</b> {{ nomineeViewed.name }}</p>
              <p><b>Unit:</b> {{ nomineeViewed.unit }}</p>
              <p><b>Umur:</b> {{ nomineeViewed.umur }}</p>
              <p><b>Jawatan Sekarang:</b> {{ nomineeViewed.jawatan_sekarang }}</p>
              <p><b>Taraf Pendidikan:</b></p>
              <ol>
                <li v-for="(item, index) in nomineeViewed.education" :key="index">{{ item }}</li>
              </ol>
              <p><b>Pengalaman Kerja:</b></p>
              <ol>
                <li v-for="(item, index) in nomineeViewed.experience" :key="index">{{ item }}</li>
              </ol>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-success" @click="closeNomineeModal">Tutup</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import JsBarcode from "jsbarcode";

export default {
  data() {
    return {
      // NOMINEE SECTION
      nomineeViewed: {},
      showNomineeModal: false,

      // BARCODE SECTION
      noKp: ""
    };
  },

  mounted() {
    if (this.data?.user?.no_kp) {
      this.noKp = this.data.user.no_kp; // set noKp
      this.generateBarcode();
    }
  },

  methods: {
    // -------------------------------
    // NOMINEE FUNCTIONS
    // -------------------------------
    viewNomineeDetails(nominee) {
      this.nomineeViewed = { ...nominee };
      this.nomineeViewed.photo = this.createBase64ImageUrl(nominee.photo);
      this.showNomineeModal = true;
    },

    closeNomineeModal() {
      this.showNomineeModal = false;
    },

    createBase64ImageUrl(photo) {
      return `data:image/jpeg;base64,${photo}`;
    },

    // -------------------------------
    // BARCODE FUNCTION
    // -------------------------------
    generateBarcode() {
      if (!this.noKp) return;

      JsBarcode("#barcode", this.noKp, {
        format: "CODE128",
        width: 1.3,
        height: 30,
        displayValue: false  // hides text below the barcode
      });
    }
  }
};
</script>


<style>
#view-nominee-modal .modal-dialog {
  max-width: 850px;
  /* Set a maximum width */
  width: 100%;
  /* Ensure full width on smaller screens */
}

#view-nominee-modal .nominee-viewed-photo {
  width: 100%;
  /* Ensure the photo fills the container */
  height: auto;
  /* Maintain aspect ratio */
}

#view-nominee-modal .content {
  display: flex;
  flex-wrap: wrap;
  /* Allow content to wrap on smaller screens */
}

#view-nominee-modal .photo-section {
  flex: 0 0 40%;
  /* Set a flexible width for the photo section */
  max-width: 300px;
  /* Set a maximum width */
  margin-right: 20px;
  /* Add space between photo and details */
}

#view-nominee-modal .detail-section {
  flex: 1;
  /* Take remaining space */
}

#view-nominee-modal span {
  display: block;
  padding: 5px 0;
}


@media (max-width: 576px) {
  #view-nominee-modal .modal-dialog {
    max-width: none;
    padding-left: 10px;
    padding-right: 20px;
    margin-bottom: 50px;
    margin-left: 0px;
  }



  #view-nominee-modal .photo-section {
    flex: 0 0 100%;
    /* Set photo section to full width */
    max-width: none;
    /* Remove max-width */
    margin-right: 0;
    /* Remove right margin */
    margin-bottom: 20px;
    /* Add space between photo and details */
  }

  #view-nominee-modal .detail-section {
    flex: 0 0 100%;
    /* Set detail section to full width */
  }
}

#table-nominee tbody tr {
  cursor: pointer;
}

@keyframes pulseBackground {
  0% {
    background-color: #FFFFBF;
  }

  /* Start color */
  50% {
    background-color: #ffffff;
  }

  /* Middle color (white) */
  100% {
    background-color: #FFFFBF;
  }

}

#table-nominee tbody tr:hover {
  animation: pulseBackground 3s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;

}

.info-label {
  display: inline-block;
  width: 100px;
}

.info-separator {
  display: inline-block;
  width: 5px;
}

.info-value {
  display: inline-block;
}

.small-text {
  font-size: 1.0rem;

}

.watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60mm;
  /* adjust size */
  opacity: 0.09;
  transform: translate(-50%, -50%);
  z-index: 5;
}


.kad-keahlian {
  width: 100%;
  /* responsive width */
  max-width: 400px;
  /* limit for desktop */
  aspect-ratio: 1.30 / 1;
  /* maintain card ratio */
  max-height: 200px;
  /* anda boleh cuba 220px atau 200px */
  overflow: hidden;
  /* pastikan isi tidak meletup keluar */

  padding: 18px;
  /* kurangkan padding supaya content muat */
  font-size: 0.8rem;
  border-radius: 12px;
  border: 3px solid #0d0d0e;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
  background: #F2F3F4;
  position: relative;
  overflow: hidden;
  font-family: Arial, sans-serif;
  padding: 20px;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 0.8rem;
  /* responsive text */
  color: whitesmoke;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  background-image: url('/images/kad_bg.png');
  background-size: 60%;
  background-size: cover;
  background-position: center;
}

@media (max-height: 600px) {
  .kad-keahlian {
    max-height: 200px;
    padding: 12px;
    font-size: 0.75rem;
  }

}

.kad-logo {
  position: absolute;
  /* place inside kad-anggota */
  top: 10px;
  /* distance from top */
  right: 10px;
  /* distance from right */
}

.member-card-vertical {
  position: absolute;
  top: 20px;
  left: 0;
  writing-mode: vertical-rl;
  /* makes text vertical from top to bottom */
  text-orientation: mixed;
  /* normal letters upright */
  font-weight: bold;
  font-size:1.5rem;
  letter-spacing: 2px;
  /* space between letters */
  padding: 5px;
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.kad-keahlian::before {
  content: "";
  position: absolute;
  /* ❗ fixed */
  background-size: 100%;
  opacity: 0.08;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.kad-keahlian:hover {
  transform: scale(1.03);
}


/* .kad-title {
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
  text-shadow: 3px 3px 4px rgb(244, 241, 241);
  position: relative;
  z-index: 5;
} */

.member-details {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 1.1rem;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 40px;
}




.kad-content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
  position: relative;
  z-index: 5;
  /* optional: rounded corners */
}

.kad-details {
  font-size: 0.75rem;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  gap: 4px;
}


.kad-details .row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}


.detail-item {
  position: relative;
  top: 5px;
  right: 5px;
  text-align: left;
}

#barcode {
  transform: scaleX(1.5);
  transform-origin: left;
  max-width: 100%;
}


.detail-label {

  text-align: left;
  /* display: inline-block; */
}

.detail-value {
  text-align: right;
}

.no-anggota {
  position: absolute;
  top: 5px;
  right: 8px;
  text-align: right;
  z-index: 10;
  /* keeps text above watermark */
}

.contact-info {
  text-align: right;
  /* aligns everything inside to right */
  font-size: 9px;
  /* small text for card */
  line-height: 1.2;
  color: rgb(12, 12, 12);
}

.contact-info i {
  margin-right: 3px;
  /* spacing between icon & text */
  font-size: 8px;
  /* icon size */
  font-weight: normal;
}
</style>