{% extends "public.html" %} {% block page %}
<div class="q-pa-sm theCard">
  <q-card class="my-card">
    <div class="column">
      <center>
        <div class="col theHeading">{{ charge.description }}</div>
      </center>
      <div class="col">
        <div
          class="col"
          color="white"
          style="background-color: grey; height: 30px; padding: 5px"
          v-if="timetoComplete < 1"
        >
          <center>Time elapsed</center>
        </div>
        <div
          class="col"
          color="white"
          style="background-color: grey; height: 30px; padding: 5px"
          v-else-if="charge_paid == 'True'"
        >
          <center>Charge paid</center>
        </div>
        <div v-else>
          <q-linear-progress size="30px" :value="newProgress" color="grey">
            <q-item-section>
              <q-item style="padding: 3px">
                <q-spinner color="white" size="0.8em"></q-spinner
                ><span style="font-size: 15px; color: white"
                  ><span class="q-pr-xl q-pl-md"> Awaiting payment...</span>
                  <span class="q-pl-xl" style="color: white">
                    {% raw %} {{ newTimeLeft }} {% endraw %}</span
                  ></span
                >
              </q-item>
            </q-item-section>
          </q-linear-progress>
        </div>
      </div>
      <div class="col" style="margin: 2px 15px; max-height: 100px">
        <center>
          <q-btn flat dense outline @click="copyText('{{ charge.id }}')"
            >Charge ID: {{ charge.id }}</q-btn
          >
        </center>
        <span
          ><small
            >{% raw %} Total to pay: {{ charge_amount }}sats<br />
            Amount paid: {{ charge_balance }}</small
          ><br />
          Amount due: {{ charge_amount - charge_balance }}sats {% endraw %}
        </span>
      </div>
      <q-separator></q-separator>
      <div class="col">
        <div class="row">
          <div class="col">
            <q-btn
              flat
              disable
              v-if="'{{ charge.lnbitswallet }}' == 'None' || charge_time_elapsed == 'True'"
              style="color: primary; width: 100%"
              label="lightning⚡"
            >
              <q-tooltip>
                bitcoin onchain payment method not available
              </q-tooltip>
            </q-btn>
            <q-btn
              flat
              v-else
              @click="payLN"
              style="color: primary; width: 100%"
              label="lightning⚡"
            >
              <q-tooltip> pay with lightning </q-tooltip>
            </q-btn>
          </div>
          <div class="col">
            <q-btn
              flat
              disable
              v-if="'{{ charge.onchainwallet }}' == 'None' || charge_time_elapsed == 'True'"
              style="color: primary; width: 100%"
              label="onchain⛓️"
            >
              <q-tooltip>
                bitcoin lightning payment method not available
              </q-tooltip>
            </q-btn>
            <q-btn
              flat
              v-else
              @click="payON"
              style="color: primary; width: 100%"
              label="onchain⛓️"
            >
              <q-tooltip> pay onchain </q-tooltip>
            </q-btn>
          </div>
        </div>
        <q-separator></q-separator>
      </div>
    </div>
    <q-card class="q-pa-lg" v-if="lnbtc">
      <q-card-section class="q-pa-none">
        <div class="text-center q-pt-md">
          <div v-if="timetoComplete < 1 && charge_paid == 'False'">
            <q-icon
              name="block"
              style="color: #ccc; font-size: 21.4em"
            ></q-icon>
          </div>
          <div v-else-if="charge_paid == 'True'">
            <q-icon
              name="check"
              style="color: green; font-size: 21.4em"
            ></q-icon>
            <q-btn
              outline
              v-if="'{{ charge.webhook }}' != 'None'"
              type="a"
              href="{{ charge.completelink }}"
              label="{{ charge.completelinktext }}"
            ></q-btn>
          </div>
          <div v-else>
            <center>
              <span class="text-subtitle2"
                >Pay this <br />
                lightning-network invoice</span
              >
            </center>
            <a href="lightning://{{ charge.payment_request }}">
              <q-responsive :ratio="1" class="q-mx-md">
                <qrcode
                  :value="'{{ charge.payment_request }}'"
                  :options="{width: 800}"
                  class="rounded-borders"
                ></qrcode>
              </q-responsive>
            </a>
            <div class="row q-mt-lg">
              <q-btn
                outline
                color="grey"
                @click="copyText('{{ charge.payment_request }}')"
                >Copy invoice</q-btn
              >
            </div>
          </div>
        </div>
      </q-card-section>
    </q-card>
    <q-card class="q-pa-lg" v-if="onbtc">
      <q-card-section class="q-pa-none">
        <div class="text-center q-pt-md">
          <div v-if="timetoComplete < 1 && charge_paid == 'False'">
            <q-icon
              name="block"
              style="color: #ccc; font-size: 21.4em"
            ></q-icon>
          </div>
          <div v-else-if="charge_paid == 'True'">
            <q-icon
              name="check"
              style="color: green; font-size: 21.4em"
            ></q-icon>
            <q-btn
              outline
              v-if="'{{ charge.webhook }}' != None"
              type="a"
              href="{{ charge.completelink }}"
              label="{{ charge.completelinktext }}"
            ></q-btn>
          </div>
          <div v-else>
            <center>
              <span class="text-subtitle2"
                >Send {{ charge.amount }}sats<br />
                to this onchain address</span
              >
            </center>
            <a href="bitcoin://{{ charge.onchainaddress }}">
              <q-responsive :ratio="1" class="q-mx-md">
                <qrcode
                  :value="'{{ charge.onchainaddress }}'"
                  :options="{width: 800}"
                  class="rounded-borders"
                ></qrcode>
              </q-responsive>
            </a>
            <div class="row q-mt-lg">
              <q-btn
                outline
                color="grey"
                @click="copyText('{{ charge.onchainaddress }}')"
                >Copy address</q-btn
              >
            </div>
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-card>
</div>

{% endblock %} {% block scripts %}
<script src="{{ url_for('static', filename='vendor/vue-qrcode@1.0.2/vue-qrcode.min.js') }}"></script>
<style>
  .theCard {
    width: 360px;
    margin: 10px auto;
  }
  .theHeading {
    margin: 15px;
    font-size: 25px;
  }
</style>
<script>
  Vue.component(VueQrcode.name, VueQrcode)

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data() {
      return {
        newProgress: 0.4,
        counter: 1,
        newTimeLeft: '',
        timetoComplete: 100,
        lnbtc: true,
        onbtc: false,
        charge_time_elapsed: '{{charge.time_elapsed}}',
        charge_amount: '{{charge.amount}}',
        charge_balance: '{{charge.balance}}',
        charge_paid: '{{charge.paid}}'
      }
    },
    methods: {
      checkBalance: function () {
        var self = this
        LNbits.api
          .request(
            'GET',
            '/satspay/api/v1/charges/balance/{{ charge.id }}',
            'filla'
          )
          .then(function (response) {
            self.charge_time_elapsed = response.data.time_elapsed
            self.charge_amount = response.data.amount
            self.charge_balance = response.data.balance
            if (self.charge_balance >= self.charge_amount) {
              self.charge_paid = 'True'
            }
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      payLN: function () {
        this.lnbtc = true
        this.onbtc = false
      },
      payON: function () {
        this.lnbtc = false
        this.onbtc = true
      },
      getTheTime: function () {
        var timeToComplete =
          parseInt('{{ charge.time }}') * 60 -
          (Date.now() / 1000 - parseInt('{{ charge.timestamp }}'))
        this.timetoComplete = timeToComplete
        var timeLeft = Quasar.utils.date.formatDate(
          new Date((timeToComplete - 3600) * 1000),
          'HH:mm:ss'
        )
        this.newTimeLeft = timeLeft
      },
      getThePercentage: function () {
        var timeToComplete =
          parseInt('{{ charge.time }}') * 60 -
          (Date.now() / 1000 - parseInt('{{ charge.timestamp }}'))
        this.newProgress =
          1 - timeToComplete / (parseInt('{{ charge.time }}') * 60)
      },

      timerCount: function () {
        self = this
        var refreshIntervalId = setInterval(function () {
          if (self.charge_paid == 'True' || self.timetoComplete < 1) {
            clearInterval(refreshIntervalId)
          }
          self.getTheTime()
          self.getThePercentage()
          self.counter++
          if (self.counter % 10 === 0) {
            self.checkBalance()
          }
        }, 1000)
      }
    },
    created: function () {
      if ('{{ charge.lnbitswallet }}' == 'None') {
        this.lnbtc = false
        this.onbtc = true
      }
      this.getTheTime()
      this.getThePercentage()
      var timerCount = this.timerCount
      if ('{{ charge.paid }}' == 'False') {
        timerCount()
      }
    }
  })
</script>
{% endblock %}
