<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-xs">Payments</div>
      <div class="q-pa-md q-gutter-sm">
        <q-breadcrumbs>
          <q-breadcrumbs-el icon="home" to="/welcome" />
          <q-breadcrumbs-el label="Payments" to="/pay" />
          <q-breadcrumbs-el label="Payment History" />
        </q-breadcrumbs>
      </div>
      <div class="row">
        <div class="col-12 col-md-12 col-sm-12 col-xs-12">
          <q-card class="my-card">
            <q-card-section class="hide">
              <div class="col-10 col-md-10 q-ma-md">
                <q-banner
                  inline-actions
                  rounded
                  class="bg-orange-1 text-orange-8"
                >You have no payment.</q-banner>
              </div>
            </q-card-section>
            <q-card-selection class="showw">
              <div class="row flex flex-center q-ma-md">
                <div
                  class="col-5 col-md-5 col-xs-12 q-pa-lg q-ma-md bg-grey-3 self-start rounded-borders borders"
                >
                  <div class="text-bold q-py-sm content-start">Payment History</div>

                  <q-input
                    color="primary"
                    v-model="inputValue"
                    label="Valid From - Valid To"
                    mask="####-##-## - ####-##-##"
                    class="text-body1"
                    bg-color="bg-white"
                  >
                    <template v-slot:append>
                      <q-icon name="far fa-calendar" class="cursor-pointer">
                        <q-popup-proxy
                          v-model="showScroller2"
                          anchor="top right"
                          self="bottom middle"
                        >
                          <q-scroller
                            v-model="value"
                            view="date-range"
                            vertical-bar
                            style="width: 300px;height:200px;"
                            :style="scrollerPopupStyle240"
                            @close="() => { showScroller2 = false }"
                          />
                        </q-popup-proxy>
                      </q-icon>
                    </template>
                  </q-input>
                  <div class="col-12 col-md-12 q-pt-sm">
                    <q-btn color="primary" size="md">Show</q-btn>
                  </div>
                </div>
                <div
                  class="col-5 col-md-5 col-xs-12 q-pa-lg q-ma-md bg-grey-3 rounded-borders borders"
                >
                  <div class="text-bold q-py-sm">Payment Method</div>
                  <q-form @submit="onSubmit">
                    <q-select
                      v-model="model"
                      :options="options"
                      label="Method"
                      bg-color="bg-white"
                    />
                    <div class="text-subtitle1 text-grey-8 q-pa-md q-my-sm">
                      <div>Frequency</div>
                      <div>
                        Threshold Level
                        <q-icon name="help" size="sm">
                          <q-tooltip
                            content-class="bg-black"
                            content-style="font-size: 16px"
                            :offset="[10, 10]"
                          >Here I am!</q-tooltip>
                        </q-icon>
                      </div>
                    </div>

                    <div class="col-12 col-md-12 q-pt-sm">
                      <q-btn color="primary" size="md">Update</q-btn>
                    </div>
                  </q-form>
                </div>
              </div>
            </q-card-selection>

            <q-card-section>
              <div class="row q-ma-md">
                <div class="text-h5 q-pb-xs">Payment Details</div>
              </div>
              <q-markup-table>
                <thead>
                  <tr class="bg-grey-3">
                    <th class="text-left">PAYMENT DESCRIPTION</th>
                    <th class="text-right">AMOUNT</th>
                    <th class="text-right">STATUS</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="text-left">MOH Gropu Earning</td>
                    <td class="text-right">US $ 150.00</td>
                    <td class="text-right">
                      <q-badge class="q-pa-xs q-ma-xs" outline color="grey">25-04-2020</q-badge>
                      <q-badge class="q-pa-xs" color="primary">Paid</q-badge>
                    </td>
                  </tr>
                  <tr>
                    <td class="text-left">USMLE Gropu Earning</td>
                    <td class="text-right">US $ 100.00</td>
                    <td class="text-right">
                      <q-badge class="q-pa-xs" color="warning">Panding</q-badge>
                    </td>
                  </tr>
                  <tr>
                    <td class="text-left">HAAD Gropu Earning</td>
                    <td class="text-right">US $ 230.00</td>
                    <td class="text-right">
                      <q-badge class="q-pa-xs" color="secondary">Eligible</q-badge>
                    </td>
                  </tr>
                </tbody>
              </q-markup-table>
            </q-card-section>
          </q-card>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { date } from "quasar";
export default {
  data() {
    return {
      third: false,
      fourth: true,
      showScroller2: false,
      value: "",
      inputValue: "",
      level: ["", "Easy", "Medium", "Hard"],
      model: null,
      options: ["Westren Union", "Bank", "PayPal", "Payneer", "Other"],
      simple: [
        {
          label: "Dental Guide",
          children: [
            {
              label: "Asim Khan"
            },
            {
              label: "Zahid Mamon"
            },
            {
              label: "Jhon Doe"
            }
          ]
        },
        {
          label: "Clinical Surgery",
          children: [
            {
              label: "Hammad Ahmed"
            },
            {
              label: "Nouman Khan"
            },
            {
              label: "Kate vinsallet"
            }
          ]
        }
      ],
      selected: [],
      ticked: [],
      expanded: []
    };
  },
  computed: {
    todaysDate() {
      let timeStamp = Date.now();
      timeStamp = date.addToDate(timeStamp, { days: 7, month: 1 });
      return date.formatDate(timeStamp, "YYYY-MM-DD, HH:MM");
    }
  },
  scrollerPopupStyle240() {
    if (this.$q.screen.lt.sm) {
      return {
        width: "90vw",
        height: "70vh"
      };
    } else {
      return {
        maxHeight: "200px",
        height: "200px",
        width: "250px"
      };
    }
  },
  methods: {},
  watch: {
    value(val) {
      const type = Object.prototype.toString.call(this.value);
      if (type === "[object Array]") {
        this.inputValue = `${val[0]} - ${val[1]}`;
      }
    },

    inputValue(val) {
      const parts = val.split(" - ");
      if (parts[0] !== this.value[0] || parts[1] !== this.value[1]) {
        this.value[0] = parts[0];
        this.value[1] = parts[1];
      }
    }
  }
};
</script>

<style lang="css" scoped>
.hide {
  display: none;
}

.show {
  display: inline;
}
.borders {
  border: 1px solid #d1d1d1;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
  .hide {
    display: inline;
  }

  .show {
    display: none;
  }
}

@media only screen and (min-width: 899px) and (max-width: 1280px) {
}
</style>
