{% extends "shopyo_base/module_base.html" %}
{% set active_page = 'pos' %}
{% block pagehead %}<title>Quick Keys</title>{% endblock %}
{% block sidebar %}{% include 'pos/blocks/sidebar.html' %}{% endblock %}
{% block module_content %}
<div class="max-w-4xl mx-auto space-y-6">
  <div class="card">
    <div class="card-body">
      <div class="mb-8">
        <h3 class="text-xl font-black text-slate-900 dark:text-white uppercase tracking-tight">Quick Keys</h3>
        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Assign products to numbered grid positions for one-tap add at POS</p>
      </div>

      <div class="card !border-0 !shadow-none !bg-transparent !p-0 mb-8">
        <div class="card-body !p-0">
          <div class="p-6 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
            <div>
              <h4 class="text-sm font-black text-slate-900 dark:text-white uppercase tracking-tight">Configured Keys</h4>
              <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{{ keys|length }} total</p>
            </div>
          </div>
          <table class="table">
            <thead>
              <tr><th>Position</th><th>Product</th><th>Label</th><th class="w-24"></th></tr>
            </thead>
            <tbody>
              {% for key in keys %}
              <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/50 transition-all">
                <td class="text-xs font-bold">
                  <span class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-500 font-black text-xs">{{ key.position }}</span>
                </td>
                <td class="text-xs font-medium">{{ key.product.name if key.product else '-' }}</td>
                <td class="text-xs text-slate-400">{{ key.label or '-' }}</td>
                <td>
                  <form action="{{ url_for('shopyo_ecommerce.pos.quick_key_delete', key_id=key.id) }}" method="POST" class="opacity-0 group-hover:opacity-100 transition-opacity">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                    <button class="w-8 h-8 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-500 flex items-center justify-center hover:bg-red-500 hover:text-white transition-all border border-slate-200 dark:border-slate-700" title="Remove">
                      <i class="fas fa-trash-alt text-xs"></i>
                    </button>
                  </form>
                </td>
              </tr>
              {% else %}
              <tr><td colspan="4" class="text-[10px] text-slate-400 text-center py-8">No quick keys configured</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>

      <div class="border-t border-slate-100 dark:border-slate-800 pt-8">
        <h4 class="text-sm font-black text-slate-900 dark:text-white uppercase tracking-tight mb-6">Add Quick Key</h4>
        <form method="POST" action="{{ url_for('shopyo_ecommerce.pos.quick_key_add') }}" class="space-y-4">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="space-y-1">
              <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Position</label>
              <input type="number" name="position" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" min="1" max="30" required placeholder="1-30">
            </div>
            <div class="space-y-1">
              <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Product</label>
              <select name="product_id" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" required>
                <option value="">-- Select --</option>
                {% for p in products %}
                <option value="{{ p.id }}">{{ p.name }} ({{ p.barcode }})</option>
                {% endfor %}
              </select>
            </div>
            <div class="space-y-1">
              <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Label</label>
              <input type="text" name="label" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" placeholder="Optional short label">
            </div>
          </div>
          <button type="submit" class="w-full md:w-auto bg-primary text-white font-bold py-2.5 px-6 rounded-xl hover:bg-primary-dark transition-all shadow-lg shadow-primary/20 text-xs uppercase tracking-widest">
            <i class="fas fa-plus-circle mr-1.5"></i>Add Quick Key
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}