{% extends "shopyo_base/module_base.html" %}
{% set active_page = 'inventory' %}
{% block pagehead %}<title>Count #{{ count.id }}</title>{% endblock %}
{% block sidebar %}{% include 'inventory/blocks/sidebar.html' %}{% endblock %}
{% block module_content %}
<div class="max-w-6xl mx-auto space-y-6">
  <div class="card">
    <div class="card-body">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
          <a href="{{ url_for('shopyo_ecommerce.inventory.dashboard') }}" class="w-8 h-8 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-500 flex items-center justify-center hover:bg-slate-200 dark:hover:bg-slate-700 transition-all border border-slate-200 dark:border-slate-700" title="Back">
            <i class="fas fa-arrow-left text-xs"></i>
          </a>
          <div>
            <h3 class="text-xl font-black text-slate-900 dark:text-white uppercase tracking-tight">Inventory Count #{{ count.id }}</h3>
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">
              {{ count.created_at.strftime('%Y-%m-%d %H:%M') if count.created_at else '' }}
            </p>
          </div>
        </div>
        {% if count.status == 'draft' %}
        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-300">Draft</span>
        {% elif count.status == 'completed' %}
        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-sky-100 dark:bg-sky-900/30 text-sky-600 dark:text-sky-400">Completed</span>
        {% else %}
        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400">Reviewed</span>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body !p-0">
      {% if count.status == 'draft' %}
      <form method="POST">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
        <table class="table">
          <thead>
            <tr><th>Product</th><th>Barcode</th><th>Expected</th><th>Actual</th><th>Variance</th></tr>
          </thead>
          <tbody>
            {% for item in count.items %}
            <tr class="hover:bg-slate-50/80 dark:hover:bg-slate-800/50 transition-all">
              <td class="text-xs font-bold">{{ item.product.name }}</td>
              <td class="text-xs font-mono">{{ item.product.barcode }}</td>
              <td class="text-xs">{{ item.expected_qty }}</td>
              <td><input type="number" name="qty_{{ item.id }}" value="{{ item.actual_qty or item.expected_qty }}" class="bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl py-2 px-3 text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" style="width:100px;"></td>
              <td class="text-xs font-bold {{ 'text-emerald-600 dark:text-emerald-400' if item.variance > 0 else 'text-red-600 dark:text-red-400' if item.variance < 0 else 'text-slate-400' }}">{{ item.variance }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        <div class="p-4 border-t border-slate-200 dark:border-slate-700">
          <button type="submit" class="bg-emerald-500 text-white font-bold py-2.5 px-5 rounded-xl hover:bg-emerald-600 transition-all shadow-lg shadow-emerald-500/20 text-xs uppercase tracking-widest inline-flex items-center gap-1.5">
            <i class="fas fa-check-circle"></i>Complete Count
          </button>
        </div>
      </form>
      {% else %}
      <table class="table">
        <thead>
          <tr><th>Product</th><th>Barcode</th><th>Expected</th><th>Actual</th><th>Variance</th></tr>
        </thead>
        <tbody>
          {% for item in count.items %}
          <tr class="hover:bg-slate-50/80 dark:hover:bg-slate-800/50 transition-all">
            <td class="text-xs font-bold">{{ item.product.name }}</td>
            <td class="text-xs font-mono">{{ item.product.barcode }}</td>
            <td class="text-xs">{{ item.expected_qty }}</td>
            <td class="text-xs">{{ item.actual_qty }}</td>
            <td class="text-xs font-bold {{ 'text-emerald-600 dark:text-emerald-400' if item.variance > 0 else 'text-red-600 dark:text-red-400' if item.variance < 0 else 'text-slate-400' }}">{{ item.variance }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}