{% extends "shopyo_base/module_base.html" %}
{% set active_page = 'pos' %}
{% block pagehead %}<title>Returns</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">Return / Refund</h3>
        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Look up a transaction and process a refund</p>
      </div>

      <form method="POST" class="flex items-end gap-3 mb-8 p-6 rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/20">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
        <div class="flex-1 space-y-1">
          <label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-1">Receipt #</label>
          <input type="number" name="receipt_id" class="w-full bg-white 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="Enter receipt number..." required>
        </div>
        <button type="submit" class="px-5 py-2.5 rounded-xl bg-primary text-white font-bold text-xs hover:bg-primary-dark transition-all shadow-lg shadow-primary/20 shrink-0 uppercase tracking-widest">
          <i class="fas fa-search mr-1.5"></i>Look Up
        </button>
      </form>

      {% if tx %}
      <div class="rounded-2xl border border-slate-200 dark:border-slate-700 overflow-hidden">
        <div class="p-6 border-b border-slate-100 dark:border-slate-800">
          <div class="flex items-center justify-between">
            <h4 class="text-sm font-black text-slate-900 dark:text-white">Transaction #{{ tx.id }}</h4>
            <span class="inline-flex items-center gap-1 px-3 py-1 rounded-lg bg-amber-100 dark:bg-amber-500/20 text-amber-600 dark:text-amber-400 text-[10px] font-bold uppercase tracking-widest">
              <i class="fas fa-rotate-left text-xs"></i>Refundable
            </span>
          </div>
        </div>
        <div class="p-6 space-y-4">
          <div class="grid grid-cols-3 gap-4">
            <div>
              <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Date</p>
              <p class="text-xs font-bold text-slate-900 dark:text-white">{{ tx.time.strftime('%Y-%m-%d %H:%M') if tx.time else '-' }}</p>
            </div>
            <div>
              <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Amount</p>
              <p class="text-xs font-bold text-slate-900 dark:text-white">{{ currency_symbol }}{{ '%.2f'|format(tx.total_amount|float) }}</p>
            </div>
            <div>
              <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Payment</p>
              <p class="text-xs font-bold text-slate-900 dark:text-white">{{ tx.method_of_payment }}</p>
            </div>
          </div>
          <div class="border-t border-slate-100 dark:border-slate-800 pt-4">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-3">Items</p>
            <div class="space-y-2">
              {% for item in tx.items %}
              <div class="flex items-center justify-between p-3 rounded-xl bg-slate-50 dark:bg-slate-800/20">
                <div class="flex items-center gap-3">
                  <span class="w-8 h-8 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-500 flex items-center justify-center text-[10px] font-black">{{ item.quantity }}x</span>
                  <div>
                    <p class="text-xs font-bold text-slate-900 dark:text-white">{{ item.product_barcode }}</p>
                    <p class="text-[10px] text-slate-400">@ {{ currency_symbol }}{{ '%.2f'|format(item.unit_price|float) }} ea</p>
                  </div>
                </div>
                <p class="text-xs font-bold text-slate-900 dark:text-white">{{ currency_symbol }}{{ '%.2f'|format(item.quantity * item.unit_price|float) }}</p>
              </div>
              {% endfor %}
            </div>
          </div>
          <form action="{{ url_for('shopyo_ecommerce.pos.process_return', tx_id=tx.id) }}" method="POST" class="pt-2">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
            <button class="w-full py-3 rounded-xl bg-red-500 text-white font-bold text-xs hover:bg-red-600 transition-all shadow-lg shadow-red-500/20 uppercase tracking-widest" onclick="return confirm('Process refund of {{ currency_symbol }}{{ '%.2f'|format(tx.total_amount|float) }}?')">
              <i class="fas fa-rotate-left mr-1.5"></i>Process Full Refund
            </button>
          </form>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}