{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %}
<div class="row q-col-gutter-md">
  <div class="col-12 q-gutter-y-md">
    <q-card>
      <q-card-section class="row items-center justify-between">
        <div>
          <span class="text-h6">Orders</span>
          <span class="text-caption text-grey-6 q-ml-md" v-text="restaurant.name"></span>
        </div>
        <div class="row q-gutter-sm items-center">
          <q-select
            dense
            outlined
            v-model="statusFilter"
            :options="statusOptions"
            multiple
            emit-value
            map-options
            label="Status"
            style="min-width: 220px"
            @update:model-value="fetchOrders"
          ></q-select>
          <q-btn flat dense icon="refresh" @click="fetchOrders"></q-btn>
        </div>
      </q-card-section>

      <q-separator></q-separator>

      <q-table
        :rows="orders"
        :columns="columns"
        row-key="id"
        flat
        :pagination="{rowsPerPage: 25}"
      >
        <template v-slot:body-cell-status="props">
          <q-td :props="props">
            <q-badge :color="statusColor(props.row.status)" :label="props.row.status"></q-badge>
          </q-td>
        </template>
        <template v-slot:body-cell-total="props">
          <q-td :props="props">
            <span v-text="formatSat(props.row.total_msat)"></span>
          </q-td>
        </template>
        <template v-slot:body-cell-actions="props">
          <q-td :props="props">
            <q-btn flat dense icon="visibility" @click="viewOrder(props.row)"></q-btn>
            <q-btn
              flat
              dense
              icon="check"
              v-if="['paid','pending'].includes(props.row.status)"
              @click="transition(props.row, 'accepted')"
              title="Accept"
            ></q-btn>
            <q-btn
              flat
              dense
              icon="restaurant"
              v-if="props.row.status === 'accepted'"
              @click="transition(props.row, 'ready')"
              title="Ready"
            ></q-btn>
            <q-btn
              flat
              dense
              icon="done_all"
              v-if="props.row.status === 'ready'"
              @click="transition(props.row, 'completed')"
              title="Complete"
            ></q-btn>
            <q-btn
              flat
              dense
              icon="cancel"
              color="negative"
              v-if="!['completed','canceled','refunded'].includes(props.row.status)"
              @click="transition(props.row, 'canceled')"
              title="Cancel"
            ></q-btn>
          </q-td>
        </template>
      </q-table>
    </q-card>
  </div>
</div>

<!-- ===================== Order detail dialog ===================== -->
<q-dialog v-model="orderDialog.show">
  <q-card class="q-pa-md" style="width: 600px; max-width: 95vw">
    <div class="row items-center justify-between">
      <h6 class="q-my-none">
        Order <span class="text-grey-6" v-text="orderDialog.order && orderDialog.order.id.slice(0,8)"></span>
      </h6>
      <q-btn flat icon="close" v-close-popup></q-btn>
    </div>

    <q-card-section v-if="orderDialog.order">
      <div class="text-subtitle2 q-mb-sm">
        <q-badge :color="statusColor(orderDialog.order.status)" :label="orderDialog.order.status"></q-badge>
        <span class="q-ml-md" v-text="formatSat(orderDialog.order.total_msat)"></span>
      </div>
      <div class="text-caption text-grey-6 q-mb-md">
        <span v-if="orderDialog.order.customer_name">
          Customer: <span v-text="orderDialog.order.customer_name"></span>
        </span>
        <span v-if="orderDialog.order.customer_pubkey" class="q-ml-md">
          Pubkey: <span class="text-monospace" v-text="orderDialog.order.customer_pubkey.slice(0,16) + '...'"></span>
        </span>
      </div>
      <q-list separator>
        <q-item v-for="line in orderDialog.items" :key="line.id">
          <q-item-section>
            <q-item-label>
              <span v-text="line.quantity + 'x  '"></span>
              <span v-text="line.name"></span>
            </q-item-label>
            <q-item-label
              caption
              v-if="line.selected_modifiers && line.selected_modifiers.length"
            >
              <span
                v-for="(m, i) in line.selected_modifiers"
                :key="i"
              >
                <span v-if="i > 0">, </span>
                <span v-text="m.name"></span>
              </span>
            </q-item-label>
            <q-item-label caption v-if="line.note">
              Note: <span v-text="line.note"></span>
            </q-item-label>
          </q-item-section>
          <q-item-section side>
            <span v-text="formatSat(line.line_total_msat)"></span>
          </q-item-section>
        </q-item>
      </q-list>
      <div v-if="orderDialog.order.note" class="q-mt-md text-caption">
        <strong>Order note:</strong>
        <span v-text="orderDialog.order.note"></span>
      </div>
    </q-card-section>
  </q-card>
</q-dialog>

{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script>
  window.RESTAURANT_BOOTSTRAP = {{ restaurant | tojson | safe }}
</script>
<script src="{{ static_url_for('restaurant/static', path='js/api.js') }}"></script>
<script src="{{ static_url_for('restaurant/static', path='js/orders.js') }}"></script>
{% endblock %}