<?php
  include_once('settings/index.php');
  // error_reporting(0);
  $token = $_GET['code'];
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <?php if ($env !='prod'):?>
      <!-- no crawling -->
      <meta name="robots" content="none" /> 
    <?php else: ?>
      <meta name="keywords" content="1ticks,ticketing,ticketing tools,event ticketing,free ticketing system,event promotion,MacauTicket,kktix,juven,澳門售票,售票網,廣星,售票平台,舉辦活動,免費舉辦活動,活動推廣,活動行銷,宣傳活動">
      <meta name="robots" content="index,follow">
    <?php endif;?>

    <title>確認訂單</title>
    <link rel="shortcut icon" href="<?=$host_url.$base_uri;?>static/favicon.ico" type="image/x-icon">
    <meta property="og:title" content="確認訂單" />
    <meta name="twitter:title" content="確認訂單" />
    
    <meta name="apple-mobile-web-app-capable" content="no">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="1TICKS">
    <link rel="apple-touch-icon" href="<?=$host_url.$base_uri;?>static/apple-icons-150.png">
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="1TICKS" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@1TICKS" />

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="<?=$base_uri;?>css/component-styles.css" rel="stylesheet">
  <link href="<?=$base_uri;?>css/vuetify@2.x.min.css" rel="stylesheet">
  <link href="<?=$base_uri;?>css/quill.core.css" rel="stylesheet">
  <script async defer src="https://js.stripe.com/v3/"></script>

  <?php include_once('tracking.php');?>
  <style>
    [v-cloak] {
      display:none;
    }
    img {
      max-width: 100%;
    }
    .swal-modal {
      font-family: 'Verdana', 'Geneva', sans-serif !important;
    }
    .v-btn__content {
      white-space: normal;
      word-break: break-word;
      width: 100%;
    }
  </style>
</head>

<body>
<noscript>
  <strong>We're sorry but 1TICKS doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
  <v-app>
    <loading-widget :loading="loading_widget.loading"></loading-widget>
    <v-fade-transition>
      <app-toolbar v-if="event" :is_whitelabel="_get(event,'is_white_label',false)" :settings="_get(event,'settings',{})"></app-toolbar>
    </v-fade-transition>
    <v-main>
      <div class="page-wrapper">
        <v-container class="pa-0" fluid v-cloak>
          <section>
            <v-row no-gutters v-if="is_count_down && transaction">
              <v-col cols="12" lg="8" offset-lg="2">
                <event-count-down ref="count_down" :countdown="countdown" :sys_request_time="sys_request_time" :sys_expiry_time="sys_expiry_time" @timesup="backToEvent"></event-count-down>
              </v-col>
            </v-row>
            <event-payment ref="event_form" :goback="goBack" :transaction="transaction" @refresh="getTransaction"></event-payment>
          </section>
        </v-container>
      </div>
    </v-main>
    <app-footer :is_whitelabel="_get(event,'is_white_label',false)" :settings="_get(event,'settings',{})" class="pb-5"></app-footer>

    <!-- snackbar -->
    <v-snackbar v-cloak
      bottom
      right
      class="d-flex"
      style="height: auto; user-select: none;"
      :style="(snackbar.zindex?'z-index:'+snackbar.zindex+';':'')+($vuetify.breakpoint.smAndDown?'padding-bottom:48px;':'')" 
      :timeout="snackbar.timeout"
      :color="snackbar.color"
      v-model="snackbar.show"
      v-touch="{
        move: () => (snackbar.show = false),
      }"
    >
      <v-icon v-if="snackbar.icon" :dark="snackbar.dark" style="cursor:pointer" @click="snackbar.show = false">{{snackbar.icon}}</v-icon>
      <span class="font-weight-bold px-2">{{ snackbar.text }}</span>
      <template v-slot:action="{ attrs }">
        <v-btn v-bind="attrs" v-if="snackbar.timeout<=0" dark @click.native="snackbar.show = false" icon> 
          <v-icon large>mdi-close</v-icon>
        </v-btn>
      </template>
    </v-snackbar> 
  </v-app>
</div>
<!-- vue script -->
<script src="<?=$base_uri;?>script/vue@2.x.min.js"></script>
<script src="<?=$base_uri;?>script/vuetify@2.x.min.js"></script>
<script src="<?=$base_uri;?>script/vue-i18n@8.21.1.min.js"></script>
<script src="<?=$base_uri;?>script/axios@0.19.2.min.js"></script>
<script src="<?=$base_uri;?>script/sweetalert@2.1.2.min.js"></script>
<!-- <script type="text/babel" data-presets="es2015, es2016, es2017, stage-3"> -->
<script>
"use strict";
(function() {
  <?php include("components/loadingWidget.vue");?>
  <?php include("components/appToolbar.vue");?>
  <?php include("components/appFooter.vue");?>
  <?php include("components/searchWidget.vue"); ?>
  <?php include("components/cMarquee.vue"); ?>
  <?php include("components/checkout/eventCountDown.vue"); ?>
  <?php include("components/payment/eventPayment.vue"); ?>

  <?php include_once('includes/tracker.js');?>

  var MessengerExtensions = MessengerExtensions || false;
  const i18n = new VueI18n({
    locale: 'zh_TW',
    messages: {
      zh_TW: <?php include_once('includes/lang/zh_TW.json');?>,
      zh_CN: <?php include_once('includes/lang/zh_CN.json');?>,
      en: <?php include_once('includes/lang/en.json');?>,
    }
  })
  Vue.prototype.is_mobile = /android|webos|iphone|ipad|ipod|blackberry|mobile|opera mini/i.test(navigator.userAgent.toLowerCase());
  Vue.prototype.is_iOS = /iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase());
  Vue.prototype.is_safari = /apple/i.test(navigator.vendor.toLowerCase());
  Vue.prototype.in_wechat = /micromessenger/i.test(navigator.userAgent.toLowerCase());
  Vue.prototype.in_alipay = /alipay/i.test(navigator.userAgent.toLowerCase());
  Vue.prototype.in_instagram = /instagram/i.test(navigator.userAgent.toLowerCase());

  var methods = { <?php include("./includes/methods.js");?> };
  var app = new Vue({
    el: '#app',
    i18n,
    vuetify: new Vuetify(<?php include("./includes/themes.js");?>),
    data: ()=>({
      // general
      loading: false,
      loading_widget: {
        loading: false,
      },
      snackbar: {
        show: false,
        timeout: -1,
        text: '',
        color: '',
      },
      // api
      base_uri: "<?=$base_uri;?>",
      session_path: "<?=$session_path;?>",
      // tracked
      tracked: {},
      // data
      transaction: null,
      sys_request_time: null,
      sys_expiry_time: null,
      is_count_down: true, // default true
      countdown: null,
      code: "<?=$token;?>",
      event: null,
    }),
    computed: {
    },
    watch: {
    },
    mounted () {
      window.app = this;
      this.initWhiteLabel();
			this.getTransaction();
    },
    provide () {
      return {
        ...Object.assign(...Object.keys(methods).map(m=>({[m]:methods[m]}))),
        base_uri: this.base_uri,
        session_path: this.session_path,
      }
    },
    methods: {
      ...methods,
      // methods
      initWhiteLabel() {
        this.event = {
          id: localStorage.getItem("eventId"),
          is_white_label: true,
          fields: {
            default: {
              title: localStorage.getItem("brandEventName"),
            }
          },
          settings: {
            white_label_logo: localStorage.getItem("brandLogo"),
            white_label_name: localStorage.getItem("brandName"),
            white_label_color: localStorage.getItem("brandColor"),
            white_label_mode: localStorage.getItem("brandDark"),
          },
          organizer: {
            fields: {
              default: {
                title: localStorage.getItem("brandMerchantName"),
              }
            }
          }
        };
        if (this.event.is_white_label && this.event.settings.white_label_color) {
          this.$vuetify.theme.themes.light.primary = this.event.settings.white_label_color;
          this.$vuetify.theme.themes.dark.primary = this.event.settings.white_label_color;
        }
        if (localStorage.getItem("brandEventName")) {
          document.title = document.title + ' - ' + localStorage.getItem("brandEventName");
        }
      },
			backToEvent () {
        var current_params = new URLSearchParams(window.location.search);
        location.assign(this.session_path+"event/"+(this.transaction.fields.event_url_string || this.transaction.event_id)+"?"+current_params.toString());
			},
			goBack () {
        var current_params = new URLSearchParams(window.location.search);
        location.assign(this.session_path+"checkout/"+(this.transaction.token)+"?"+current_params.toString());
			},
			getTransaction() {
        axios.get("<?=$apiEndpoint;?>"+`event_transactions/${this.code}`, {
          headers: {
            'Content-Type': 'application/json',
          }
        }).then(res => {
					this.sys_request_time = res.data.request_at;
					this.sys_expiry_time = res.data.data.expire_at;
					if (res.data.result === 'success') {
						this.sys_expiry_time = res.data.data.expire_at;
						this.transaction = res.data.data;
						this.countdown = (new Date(this.sys_expiry_time)*1 - new Date(this.sys_request_time)*1)/1000;
						if (this.transaction.status === 'waiting_payment') {
							swal(this.$t('error.UpdateTransaction.404'),'','warning').then(()=>{
								this.backToEvent();
							});
						}
					}
				}).catch(err => {
					console.log(err)
					this.handleError(err);
				})
			},
    }
  });
})();
</script>
</body>
</html>
