{% extends "public.html" %} {% block page %}
<div class="row q-mb-md">
  <div class="col-12 q-gutter-y-md">
    <q-toolbar class="row">
      <div class="col">
        <q-toolbar-title> {{ stall.name }} </q-toolbar-title>
      </div>
      <div class="col q-mx-md">
        <q-input
          class="float-left full-width q-ml-md"
          standout
          square
          dense
          outlined
          clearable
          v-model.trim="searchText"
          label="Search for products"
        >
          <template v-slot:append>
            <q-icon v-if="!searchText" name="search" />
          </template>
        </q-input>
      </div>
      <q-btn dense round flat icon="shopping_cart">
        {% raw %}
        <q-badge v-if="cart.size" color="red" class="text-bold" floating>
          {{ cart.size }}
        </q-badge>
        {% endraw %}
        <q-menu auto-close v-if="cart.size">
          <q-list style="min-width: 100px">
            {% raw %}
            <q-item clickable :key="p.id" v-for="p in cartMenu">
              <q-item-section side>
                <span>{{p.quantity}} x </span>
              </q-item-section>
              <q-item-section avatar>
                <q-avatar color="primary">
                  <img
                    size="sm"
                    :src="products.find(f => f.id == p.id).image"
                  />
                </q-avatar>
              </q-item-section>

              <q-item-section>
                <q-item-label>{{ p.name }}</q-item-label>
              </q-item-section>

              <q-item-section side>
                <span> {{p.price}} sats</span>
              </q-item-section>
            </q-item>
            {% endraw %}
            <q-separator />
          </q-list>
          <div class="q-pa-md q-gutter-md">
            <q-btn
              color="primary"
              icon-right="checkout"
              label="Checkout"
              @click="checkoutDialog.show = true"
            />
          </div>
        </q-menu>
      </q-btn>
    </q-toolbar>
  </div>
</div>
<div class="row q-col-gutter-md">
  <div
    class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
    v-for="item in filterProducts"
    :key="item.id"
  >
    <q-card class="card--product">
      {% raw %}
      <q-img
        :src="item.image ? item.image : '/diagonalley/static/images/placeholder.png'"
        alt="Product Image"
        loading="lazy"
        spinner-color="white"
        fit="cover"
        height="300px"
      ></q-img>

      <q-card-section class="q-pb-xs q-pt-md">
        <q-btn
          round
          :disabled="item.quantity < 1"
          color="primary"
          icon="shopping_cart"
          size="lg"
          style="
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(-50%, -50%);
          "
          @click="addToCart(item)"
          ><q-tooltip> Add to cart </q-tooltip></q-btn
        >

        <div class="row no-wrap items-center">
          <div class="col text-subtitle2 ellipsis-2-lines">
            {{ item.product }}
          </div>
        </div>

        <!-- <q-rating v-model="stars" color="orange" :max="5" readonly size="17px"></q-rating> -->
      </q-card-section>

      <q-card-section class="q-py-sm">
        <div>
          <div class="text-caption text-green-8 text-weight-bolder">
            {{ item.stall }}
          </div>
          <span class="text-h6">{{ item.price }} sats</span
          ><span class="q-ml-sm text-grey-6"
            >BTC {{ (item.price / 1e8).toFixed(8) }}</span
          >
          <span
            class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md"
            >{{item.quantity}} left</span
          >
        </div>
        <div v-if="item.categories" class="text-subtitle1">
          <q-chip v-for="cat in item.categories.split(',')" dense
            >{{cat}}</q-chip
          >
        </div>
        <div
          v-if="item.description"
          class="text-caption text-grey ellipsis-2-lines"
          style="min-height: 40px"
        >
          {{ item.description }}
        </div>
      </q-card-section>

      <q-separator></q-separator>

      <q-card-actions>
        <q-btn
          flat
          class="text-weight-bold text-capitalize"
          dense
          color="primary"
        >
          View details
        </q-btn>
      </q-card-actions>
      {% endraw %}
    </q-card>
  </div>
  <!-- CHECKOUT DIALOG -->
  <q-dialog v-model="checkoutDialog.show" position="top">
    <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
      <q-form @submit="placeOrder" class="q-gutter-md">
        <q-input
          filled
          dense
          v-model.trim="checkoutDialog.data.username"
          label="Name *optional"
        ></q-input>
        <q-input
          filled
          dense
          v-model.trim="checkoutDialog.data.address_1"
          label="Address (line 1)"
        ></q-input>
        <q-input
          filled
          dense
          v-model.trim="checkoutDialog.data.address_2"
          label="Address (line 2)"
        ></q-input>
        <q-input
          v-model="checkoutDialog.data.email"
          filled
          dense
          type="email"
          label="Email"
        />
        <div class="row q-mt-lg">
          <q-btn
            v-if="checkoutDialog.data.id"
            unelevated
            color="primary"
            type="submit"
            >Update Product</q-btn
          >

          <q-btn
            v-else
            unelevated
            color="primary"
            :disable="checkoutDialog.data.price == null
              || checkoutDialog.data.product == null
              || checkoutDialog.data.description == null
              || checkoutDialog.data.quantity == null"
            type="submit"
            >Create Product</q-btn
          >

          <q-btn
            v-close-popup
            flat
            @click="checkoutDialog = {show: false, data: {}}"
            color="grey"
            class="q-ml-auto"
            >Cancel</q-btn
          >
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</div>
{% endblock %} {% block scripts %}
<script>
  Vue.component(VueQrcode.name, VueQrcode)
  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        products: [],
        searchText: null,
        cart: {
          total: 0,
          size: 0,
          products: new Map()
        },
        cartMenu: [],
        checkoutDialog: {
          show: false,
          data: {}
        }
      }
    },
    computed: {
      filterProducts() {
        if (!this.searchText || this.searchText.length < 2) return this.products
        return this.products.filter(p => {
          return (
            p.product.includes(this.searchText) ||
            p.description.includes(this.searchText) ||
            p.categories.includes(this.searchText)
          )
        })
      }
    },
    methods: {
      addToCart(item) {
        let prod = this.cart.products
        if (prod.has(item.id)) {
          let qty = prod.get(item.id).quantity
          prod.set(item.id, {
            ...prod.get(item.id),
            quantity: qty + 1
          })
        } else {
          prod.set(item.id, {
            name: item.product,
            quantity: 1,
            price: item.price
          })
        }
        this.cart.products = prod
        this.updateCart(item.price)
      },
      removeFromCart() {},
      updateCart(price) {
        this.cart.total += price
        this.cart.size++
        this.cartMenu = Array.from(this.cart.products, item => {
          return {id: item[0], ...item[1]}
        })
        console.log(this.cartMenu)
      },
      placeOrder() {
        // productid: str = Query(...)
        // stall: str = Query(...)
        // product: str = Query(...)
        // quantity: int = Query(..., ge=1)
        // shippingzone: int = Query(...)
        // address: str = Query(...)
        // email: str = Query(...)
        // invoiceid: str = Query(...)
        return
      }
    },
    created() {
      this.products = JSON.parse('{{ products | tojson }}')
      let stall_ids = new Set()
      this.products.map(p => stall_ids.add(p.stall))

      console.log(stall_ids)
    }
  })
</script>
<style scoped>
  .card--product {
  }
</style>
{% endblock %}

<!-- <pre id="json"></pre>

<script>
  document.getElementById('json').innerHTML = JSON.stringify(
    '{{ stall }}',
    null,
    2
  )
</script> -->