<template>
  <div class="payment-step">
    <v-card-text class="pa-0 text-center">
      <div class="mb-0">
        <v-img
          src="https://iconlogovector.com/uploads/images/2024/03/lg-65ffda68a47ee-QRIS.webp"
          height="80"
          class="mb-1"
          contain
        />
      </div>

      <!-- <h2 class="text-h4 mb-6 font-weight-bold">PINDAI KODE QR</h2> -->

      <div class="qr-container mb-6">
        <v-card
          class="qr-code mx-auto d-flex align-center justify-center"
          width="280"
          height="280"
          elevation="0"
        >
          <img ref="qrCodeImage" alt="QR Code" width="280" height="280" />
        </v-card>
      </div>

      <div class="payment-details">
        <v-row dense class="mb-1">
          <v-col cols="5" class="text-left">
            <strong>NAMA PASIEN:</strong>
          </v-col>
          <v-col cols="7" class="text-left">
            {{ paymentStore.patientInfo.name }}
          </v-col>
        </v-row>

        <v-row dense class="mb-1">
          <v-col cols="5" class="text-left">
            <strong>NOMINAL:</strong>
          </v-col>
          <v-col cols="7" class="text-left">
            {{ paymentStore.patientInfo.amount }}
          </v-col>
        </v-row>

        <v-row dense class="mb-1">
          <v-col cols="5" class="text-left">
            <strong>NOMOR TAGIHAN:</strong>
          </v-col>
          <v-col cols="7" class="text-left">
            {{ paymentStore.qrData.display_nobill }}
          </v-col>
        </v-row>

        <v-row dense class="mb-4">
          <v-col cols="5" class="text-left">
            <strong>BERLAKU SAMPAI:</strong>
          </v-col>
          <v-col cols="7" class="text-left text-red"> N/A </v-col>
        </v-row>
      </div>

      <div class="d-flex gap-4 justify-center">
        <!-- <v-btn color="grey" variant="outlined" @click="paymentStore.prevStep">
          Kembali
        </v-btn> -->
        <v-btn color="primary" variant="flat" @click="paymentStore.nextStep">
          Simulasi Pembayaran
        </v-btn>
      </div>
    </v-card-text>
  </div>
</template>

<script setup>
import { usePaymentStore } from "~/stores/payment";
import QRCode from 'qrcode';
import { ref, onMounted, watch } from 'vue';

const paymentStore = usePaymentStore();
const qrCodeImage = ref(null);

const generateQRCode = async () => {
    const qrValue = paymentStore.qrData.qrvalue;
    if (qrValue) {
        try {
            const dataUrl = await QRCode.toDataURL(qrValue);
            if (qrCodeImage.value) {
                qrCodeImage.value.src = dataUrl;
            }
        } catch (error) {
            console.error('Failed to generate QR Code:', error);
        }
    }
};

onMounted(() => {
    generateQRCode();
});

watch(() => paymentStore.qrData, () => {
    generateQRCode();
});
</script>

<style scoped>
.payment-content {
  padding-top: 40px !important; /* Sesuaikan jarak atas */
  padding-bottom: 40px !important; /* Sesuaikan jarak bawah */
}
.payment-step {
  background: rgb(233, 233, 233);
}
.qr-container {
  padding: 20px;
  background: white;
  border-radius: 16px;
  display: inline-block;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.qr-code {
  position: relative;
  background: white;
  padding: 20px;
}
.qr-label {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 10px;
  font-weight: bold;
}
.payment-details {
  max-width: 350px;
  margin: 0 auto;
}
@media (orientation: landscape) and (min-width: 768px) {
  .qr-code {
    width: 240px !important;
    height: 240px !important;
  }
}
</style>