{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %}
<div class="row q-col-gutter-md">
  <!-- ============================ Sidebar ============================ -->
  <div class="col-12 col-md-3 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <div class="text-subtitle1" v-text="restaurant.name"></div>
        <div class="text-caption text-grey-6">Menu builder</div>
      </q-card-section>
      <q-separator></q-separator>
      <q-list>
        <q-item clickable :to="`/restaurant/${restaurant.slug}/orders`">
          <q-item-section avatar><q-icon name="receipt_long"></q-icon></q-item-section>
          <q-item-section>Orders</q-item-section>
        </q-item>
        <q-item clickable :to="`/restaurant/${restaurant.slug}/kds`">
          <q-item-section avatar><q-icon name="kitchen"></q-icon></q-item-section>
          <q-item-section>Kitchen display</q-item-section>
        </q-item>
        <q-item clickable :to="`/restaurant/${restaurant.slug}/settings`">
          <q-item-section avatar><q-icon name="settings"></q-icon></q-item-section>
          <q-item-section>Settings</q-item-section>
        </q-item>
      </q-list>
    </q-card>
  </div>

  <!-- ============================ Tree pane ============================ -->
  <div class="col-12 col-md-4 q-gutter-y-md">
    <q-card>
      <q-card-section class="row items-center justify-between">
        <span class="text-h6">Menu tree</span>
        <q-btn
          unelevated
          dense
          color="primary"
          icon="add"
          label="Top-level"
          @click="openNodeDialog(null, null)"
        ></q-btn>
      </q-card-section>
      <q-separator></q-separator>
      <q-card-section v-if="tree.length === 0" class="text-grey-6 text-italic">
        No nodes yet. Click "Top-level" to add a root category.
      </q-card-section>
      <q-card-section v-else>
        <q-tree
          :nodes="tree"
          node-key="id"
          label-key="name"
          children-key="children"
          v-model:selected="selectedNodeId"
          v-model:expanded="expandedNodeIds"
          default-expand-all
        >
          <template v-slot:default-header="prop">
            <div class="row items-center full-width no-wrap">
              <div class="col">
                <span v-text="prop.node.name"></span>
                <q-badge
                  v-if="(prop.node.items || []).length"
                  color="primary"
                  class="q-ml-sm"
                  :label="prop.node.items.length"
                ></q-badge>
                <q-badge
                  v-if="(prop.node.children || []).length"
                  color="grey"
                  outline
                  class="q-ml-xs"
                  :label="`+${prop.node.children.length}`"
                  title="child nodes"
                ></q-badge>
              </div>
              <div class="col-auto" @click.stop>
                <q-btn
                  flat
                  dense
                  size="sm"
                  icon="add"
                  :disable="prop.node.depth >= maxDepth"
                  title="Add child"
                  @click="openNodeDialog(null, prop.node)"
                ></q-btn>
                <q-btn
                  flat
                  dense
                  size="sm"
                  icon="edit"
                  title="Edit"
                  @click="openNodeDialog(prop.node, null)"
                ></q-btn>
                <q-btn
                  flat
                  dense
                  size="sm"
                  icon="drive_file_move"
                  title="Move"
                  @click="openMoveDialog(prop.node)"
                ></q-btn>
                <q-btn
                  flat
                  dense
                  size="sm"
                  icon="delete"
                  color="negative"
                  title="Delete"
                  @click="deleteNode(prop.node)"
                ></q-btn>
              </div>
            </div>
          </template>
        </q-tree>
      </q-card-section>
    </q-card>
  </div>

  <!-- ============================ Items pane ============================ -->
  <div class="col-12 col-md-5 q-gutter-y-md">
    <q-card>
      <q-card-section class="row items-center justify-between">
        <div>
          <span class="text-h6">Items</span>
          <q-badge v-if="selectedNode" color="primary" class="q-ml-sm">
            <span v-text="selectedNode.name"></span>
          </q-badge>
          <q-badge v-else color="grey" class="q-ml-sm" label="all"></q-badge>
        </div>
        <q-btn
          unelevated
          color="primary"
          icon="add"
          label="New item"
          :disable="!selectedNode"
          @click="openItemDialog(null)"
        ></q-btn>
      </q-card-section>

      <q-separator></q-separator>

      <q-card-section v-if="filteredItems.length === 0" class="text-grey-6 text-italic">
        <span v-if="selectedNode">
          No items at this node. Use "New item" to add one — items can
          live on any node, not just leaves.
        </span>
        <span v-else>Select a node on the left to see its items.</span>
      </q-card-section>

      <q-list separator v-else>
        <q-item v-for="item in filteredItems" :key="item.id">
          <q-item-section avatar v-if="item.images && item.images.length">
            <q-avatar><img :src="item.images[0]" /></q-avatar>
          </q-item-section>
          <q-item-section>
            <q-item-label>
              <span v-text="item.name"></span>
              <q-badge
                v-if="!item.is_available"
                color="grey"
                class="q-ml-sm"
                label="Unavailable"
              ></q-badge>
              <q-badge
                v-if="item.stock !== null && item.stock !== undefined && item.stock <= 0"
                color="negative"
                class="q-ml-sm"
                label="Sold out"
              ></q-badge>
              <q-badge
                v-if="item.nostr_event_id"
                color="purple"
                class="q-ml-sm"
                label="Published"
                title="Live on Nostr"
              ></q-badge>
            </q-item-label>
            <q-item-label caption>
              <span v-text="formatPrice(item.price, item.currency)"></span>
              <span
                v-if="item.dietary && item.dietary.length"
                class="q-ml-md text-grey-6"
              >
                <q-icon name="eco" size="xs"></q-icon>
                <span v-text="item.dietary.join(', ')"></span>
              </span>
              <span
                v-if="item.allergens && item.allergens.length"
                class="q-ml-md text-amber-9"
              >
                <q-icon name="warning" size="xs"></q-icon>
                <span v-text="item.allergens.join(', ')"></span>
              </span>
            </q-item-label>
            <q-item-label caption v-if="item.description" v-text="item.description"></q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-btn-group flat>
              <q-btn flat dense icon="tune" title="Modifiers" @click="openModifiersDialog(item)"></q-btn>
              <q-btn flat dense icon="edit" @click="openItemDialog(item)"></q-btn>
              <q-btn flat dense icon="delete" @click="deleteItem(item)"></q-btn>
            </q-btn-group>
          </q-item-section>
        </q-item>
      </q-list>
    </q-card>
  </div>
</div>

<!-- ===================== Node dialog (create / edit) ===================== -->
<q-dialog v-model="nodeDialog.show" persistent>
  <q-card class="q-pa-md" style="width: 500px; max-width: 95vw">
    <h6 class="q-my-none">
      <span v-if="nodeDialog.editing">Edit node</span>
      <span v-else>New node</span>
    </h6>
    <q-form @submit="saveNode" class="q-gutter-md q-mt-sm">
      <q-input
        filled
        dense
        v-model.trim="nodeDialog.data.name"
        label="Name"
        :rules="[v => !!v || 'Required']"
        autofocus
      ></q-input>
      <q-input
        filled
        dense
        v-model="nodeDialog.data.description"
        label="Description"
        type="textarea"
        rows="2"
      ></q-input>
      <q-input
        filled
        dense
        v-model.trim="nodeDialog.data.image_url"
        label="Image URL"
      ></q-input>
      <q-input
        filled
        dense
        type="number"
        v-model.number="nodeDialog.data.sort_order"
        label="Sort order"
      ></q-input>
      <div v-if="!nodeDialog.editing && nodeDialog.parentName" class="text-caption text-grey-6">
        Adding under: <strong v-text="nodeDialog.parentName"></strong>
      </div>
      <div class="row justify-end q-gutter-sm">
        <q-btn flat label="Cancel" @click="nodeDialog.show = false"></q-btn>
        <q-btn unelevated color="primary" type="submit" label="Save"></q-btn>
      </div>
    </q-form>
  </q-card>
</q-dialog>

<!-- ===================== Move dialog ===================== -->
<q-dialog v-model="moveDialog.show" persistent>
  <q-card class="q-pa-md" style="width: 500px; max-width: 95vw">
    <h6 class="q-my-none">
      Move <span v-text="moveDialog.nodeName"></span>
    </h6>
    <q-form @submit="confirmMove" class="q-gutter-md q-mt-sm">
      <q-select
        filled
        dense
        v-model="moveDialog.newParentId"
        :options="moveTargetOptions"
        emit-value
        map-options
        label="New parent"
        hint="Pick a parent node, or leave blank to make this a top-level node."
        clearable
      ></q-select>
      <div class="row justify-end q-gutter-sm">
        <q-btn flat label="Cancel" @click="moveDialog.show = false"></q-btn>
        <q-btn unelevated color="primary" type="submit" label="Move"></q-btn>
      </div>
    </q-form>
  </q-card>
</q-dialog>

<!-- ===================== Item dialog ===================== -->
<q-dialog v-model="itemDialog.show" persistent>
  <q-card class="q-pa-md" style="width: 600px; max-width: 95vw">
    <h6 class="q-my-none">
      <span v-if="itemDialog.data.id">Edit item</span>
      <span v-else>New item</span>
    </h6>
    <q-form @submit="saveItem" class="q-gutter-md q-mt-sm">
      <q-select
        filled
        dense
        v-model="itemDialog.data.node_id"
        :options="allNodeOptions"
        emit-value
        map-options
        label="Menu node"
        :rules="[v => !!v || 'Required']"
      ></q-select>
      <q-input
        filled
        dense
        v-model.trim="itemDialog.data.name"
        label="Name"
        :rules="[v => !!v || 'Required']"
      ></q-input>
      <q-input
        filled
        dense
        v-model="itemDialog.data.description"
        label="Description"
        type="textarea"
        rows="2"
      ></q-input>
      <div class="row q-col-gutter-sm">
        <q-input
          class="col"
          filled
          dense
          type="number"
          v-model.number="itemDialog.data.price"
          label="Price"
        ></q-input>
        <q-select
          class="col"
          filled
          dense
          v-model="itemDialog.data.currency"
          :options="['sat','USD','EUR','GTQ','BRL','GBP']"
          label="Currency"
        ></q-select>
      </div>
      <q-input
        filled
        dense
        v-model.trim="itemDialog.imagesText"
        label="Image URLs (comma-separated)"
      ></q-input>
      <q-input
        filled
        dense
        v-model.trim="itemDialog.dietaryText"
        label="Dietary tags (comma-separated, e.g. vegan, gluten_free)"
      ></q-input>
      <q-input
        filled
        dense
        v-model.trim="itemDialog.allergensText"
        label="Allergens (comma-separated)"
      ></q-input>
      <q-input
        filled
        dense
        v-model.trim="itemDialog.ingredientsText"
        label="Ingredients (comma-separated)"
      ></q-input>
      <div class="row q-col-gutter-sm">
        <q-input
          class="col"
          filled
          dense
          type="number"
          v-model.number="itemDialog.data.stock"
          label="Stock (blank = unlimited)"
        ></q-input>
        <q-input
          class="col"
          filled
          dense
          type="number"
          v-model.number="itemDialog.data.calories"
          label="Calories"
        ></q-input>
      </div>
      <div class="row q-col-gutter-md">
        <q-toggle
          v-model="itemDialog.data.is_available"
          label="Available"
        ></q-toggle>
        <q-toggle
          v-model="itemDialog.data.is_featured"
          label="Featured"
        ></q-toggle>
      </div>
      <div class="row justify-end q-gutter-sm">
        <q-btn flat label="Cancel" @click="itemDialog.show = false"></q-btn>
        <q-btn unelevated color="primary" type="submit" label="Save"></q-btn>
      </div>
    </q-form>
  </q-card>
</q-dialog>

<!-- ===================== Modifiers dialog ===================== -->
<q-dialog v-model="modifiersDialog.show">
  <q-card class="q-pa-md" style="width: 700px; max-width: 95vw">
    <div class="row items-center justify-between">
      <h6 class="q-my-none">
        Modifiers — <span v-text="modifiersDialog.itemName"></span>
      </h6>
      <q-btn flat icon="close" v-close-popup></q-btn>
    </div>

    <q-card flat class="q-mt-md">
      <q-card-section>
        <div class="row items-center justify-between q-mb-sm">
          <span class="text-subtitle2">Groups</span>
          <q-btn dense flat icon="add" @click="addModifierGroup"></q-btn>
        </div>
        <q-expansion-item
          v-for="grp in modifiersDialog.groups"
          :key="grp.id"
          :label="grp.name"
          :caption="`${grp.kind} / ${grp.selection}`"
        >
          <q-card>
            <q-card-section>
              <q-list>
                <q-item v-for="mod in grp._modifiers || []" :key="mod.id">
                  <q-item-section>
                    <q-item-label v-text="mod.name"></q-item-label>
                    <q-item-label caption>
                      <span v-text="formatPrice(mod.price_delta, restaurant.currency)"></span>
                    </q-item-label>
                  </q-item-section>
                  <q-item-section side>
                    <q-btn flat dense icon="delete" @click="deleteModifier(grp, mod)"></q-btn>
                  </q-item-section>
                </q-item>
              </q-list>
              <q-btn
                flat
                dense
                icon="add"
                label="Add modifier"
                @click="addModifier(grp)"
              ></q-btn>
              <q-btn
                flat
                dense
                color="negative"
                icon="delete"
                label="Delete group"
                @click="deleteModifierGroup(grp)"
              ></q-btn>
            </q-card-section>
          </q-card>
        </q-expansion-item>
      </q-card-section>
    </q-card>
  </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/menu.js') }}"></script>
{% endblock %}