{% extends "shopyo_base/module_base.html" %}
{% set active_page = 'pos' %}
{% block pagehead %}<title>Shift Management</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">Shift Management</h3>
        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Open and close cash register shifts</p>
      </div>

      {% if active_shift %}
      <div class="p-6 rounded-2xl border bg-emerald-50 dark:bg-emerald-500/10 border-emerald-200 dark:border-emerald-500/20 mb-8">
        <div class="flex items-center gap-3 mb-4">
          <div class="w-10 h-10 rounded-xl bg-emerald-100 dark:bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 flex items-center justify-center">
            <i class="fas fa-cash-register text-sm"></i>
          </div>
          <div>
            <p class="text-xs font-black text-emerald-700 dark:text-emerald-300 uppercase tracking-widest">Shift #{{ active_shift.id }} — Open</p>
            <p class="text-[10px] font-bold text-emerald-500">Since {{ active_shift.opened_at.strftime('%Y-%m-%d %H:%M') }}</p>
          </div>
          <div class="ml-auto text-right">
            <p class="text-lg font-black text-emerald-700 dark:text-emerald-300">{{ currency_symbol }}{{ '%.2f'|format(active_shift.total_sales()) }}</p>
            <p class="text-[10px] font-bold text-emerald-500 uppercase tracking-widest">Sales this shift</p>
          </div>
        </div>
        <form action="{{ url_for('shopyo_ecommerce.pos.shift_close', shift_id=active_shift.id) }}" method="POST" class="flex items-end gap-3">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
          <div class="flex-1 space-y-1">
            <label class="text-[10px] font-bold text-emerald-600 dark:text-emerald-400 uppercase tracking-widest px-1">Actual cash in drawer</label>
            <input type="number" name="actual_cash" class="w-full bg-white dark:bg-slate-800 border border-emerald-200 dark:border-emerald-500/30 rounded-xl py-2.5 px-4 text-xs focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all outline-none" placeholder="0.00" step="0.01" required>
          </div>
          <button type="submit" class="px-5 py-2.5 rounded-xl bg-amber-500 text-white font-bold text-xs hover:bg-amber-600 transition-all shadow-lg shadow-amber-500/20 shrink-0 uppercase tracking-widest">
            <i class="fas fa-door-closed mr-1.5"></i>Close Shift
          </button>
        </form>
      </div>
      {% else %}
      <form action="{{ url_for('shopyo_ecommerce.pos.shift_open') }}" method="POST" class="flex items-end gap-3 mb-8 p-6 rounded-2xl border border-dashed 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">Starting cash</label>
          <input type="number" name="starting_cash" 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="0.00" step="0.01" value="0">
        </div>
        <button type="submit" class="px-5 py-2.5 rounded-xl bg-emerald-500 text-white font-bold text-xs hover:bg-emerald-600 transition-all shadow-lg shadow-emerald-500/20 shrink-0 uppercase tracking-widest">
          <i class="fas fa-play mr-1.5"></i>Open New Shift
        </button>
      </form>
      {% endif %}
    </div>
  </div>

  <!-- Past Shifts -->
  <div class="card">
    <div class="card-body !p-0">
      <div class="p-6 border-b border-slate-100 dark:border-slate-800">
        <h4 class="text-sm font-black text-slate-900 dark:text-white uppercase tracking-tight">Past Shifts</h4>
        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{{ shifts|length }} total</p>
      </div>
      <table class="table">
        <thead>
          <tr><th>#</th><th>Opened</th><th>Closed</th><th>Starting</th><th>Expected</th><th>Actual</th><th>Variance</th></tr>
        </thead>
        <tbody>
          {% for s in shifts %}
          <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/50 transition-all">
            <td class="text-xs font-bold">#{{ s.id }}</td>
            <td class="text-xs">{{ s.opened_at.strftime('%Y-%m-%d %H:%M') if s.opened_at else '-' }}</td>
            <td class="text-xs">{{ s.closed_at.strftime('%Y-%m-%d %H:%M') if s.closed_at else 'open' }}</td>
            <td class="text-xs">{{ currency_symbol }}{{ '%.2f'|format(s.starting_cash|float) }}</td>
            <td class="text-xs">{{ currency_symbol }}{{ '%.2f'|format(s.expected_cash|float) }}</td>
            <td class="text-xs">{{ currency_symbol }}{{ '%.2f'|format(s.actual_cash|float) if s.actual_cash else '-' }}</td>
            <td class="text-xs font-bold {{ 'text-red-500' if s.variance_cash and s.variance_cash|float < 0 else 'text-emerald-500' if s.variance_cash and s.variance_cash|float> 0 }}">
              {% if s.variance_cash %}
              <span class="inline-flex items-center gap-1">
                <i class="fas {{ 'fa-arrow-down' if s.variance_cash|float < 0 else 'fa-arrow-up' }} text-[8px]"></i>
                {{ currency_symbol }}{{ '%.2f'|format(s.variance_cash|float|abs) }}
              </span>
              {% else %}-{% endif %}
            </td>
          </tr>
          {% else %}<tr><td colspan="7" class="text-[10px] text-slate-400 text-center py-8">No shifts recorded</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}