<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold text-gray-800">Coupons</h1>
  <button onclick="document.getElementById('createModal').classList.remove('hidden')" class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700"><i class="fas fa-plus mr-1"></i> Add Coupon</button>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
  <table class="w-full text-sm">
    <thead class="bg-gray-50">
      <tr class="text-left text-gray-500">
        <th class="px-6 py-4 font-medium">Code</th>
        <th class="px-6 py-4 font-medium">Type</th>
        <th class="px-6 py-4 font-medium text-right">Value</th>
        <th class="px-6 py-4 font-medium text-right">Min Order</th>
        <th class="px-6 py-4 font-medium text-center">Used</th>
        <th class="px-6 py-4 font-medium">Expires</th>
        <th class="px-6 py-4 font-medium text-center">Status</th>
        <th class="px-6 py-4 font-medium text-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      <% if (typeof coupons !== 'undefined' && coupons && coupons.length) { %>
        <% coupons.forEach(function(coupon) { %>
          <tr class="border-t hover:bg-gray-50">
            <td class="px-6 py-4 font-medium text-gray-800"><%= coupon.code %></td>
            <td class="px-6 py-4"><span class="px-2 py-0.5 rounded-full text-xs font-medium <%= coupon.type === 'percentage' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700' %>"><%= coupon.type %></span></td>
            <td class="px-6 py-4 text-right font-medium"><%= coupon.type === 'percentage' ? coupon.value + '%' : '₹' + parseFloat(coupon.value).toFixed(2) %></td>
            <td class="px-6 py-4 text-right"><%= coupon.minOrderAmount ? '₹' + parseFloat(coupon.minOrderAmount).toFixed(2) : '-' %></td>
            <td class="px-6 py-4 text-center"><%= coupon.usedCount %>/<%= coupon.maxUses || '∞' %></td>
            <td class="px-6 py-4 text-gray-500"><%= coupon.expiresAt ? new Date(coupon.expiresAt).toLocaleDateString('en-IN') : 'Never' %></td>
            <td class="px-6 py-4 text-center">
              <button onclick="toggleCoupon(<%= coupon.id %>)" class="px-2 py-0.5 rounded-full text-xs font-medium <%= coupon.isActive ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' %>"><%= coupon.isActive ? 'Active' : 'Inactive' %></button>
            </td>
            <td class="px-6 py-4 text-right">
              <form action="/admin/coupons/<%= coupon.id %>/delete" method="POST" class="inline" onsubmit="return confirm('Delete this coupon?')">
                <button type="submit" class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
              </form>
            </td>
          </tr>
        <% }) %>
      <% } else { %>
        <tr><td colspan="8" class="px-6 py-12 text-center text-gray-400">No coupons found.</td></tr>
      <% } %>
    </tbody>
  </table>
</div>

<!-- Create Modal -->
<div id="createModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
  <div class="bg-white rounded-xl shadow-lg p-6 w-full max-w-lg mx-4 max-h-screen overflow-y-auto">
    <div class="flex justify-between items-center mb-4">
      <h3 class="text-lg font-semibold">Add Coupon</h3>
      <button onclick="document.getElementById('createModal').classList.add('hidden')" class="text-gray-500 hover:text-gray-700">&times;</button>
    </div>
    <form action="/admin/coupons/create" method="POST">
      <div class="space-y-4">
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Code *</label><input type="text" name="code" required class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="e.g. SAVE20"></div>
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Type *</label>
          <select name="type" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
            <option value="percentage">Percentage (%)</option>
            <option value="fixed">Fixed (₹)</option>
          </select>
        </div>
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Value *</label><input type="number" step="0.01" name="value" required class="w-full px-4 py-2 border border-gray-300 rounded-lg"></div>
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Min Order Amount</label><input type="number" step="0.01" name="minOrderAmount" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></div>
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Max Discount Amount</label><input type="number" step="0.01" name="maxDiscountAmount" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></div>
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Max Uses</label><input type="number" name="maxUses" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="Leave empty for unlimited"></div>
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Expiry Date</label><input type="date" name="expiresAt" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></div>
        <div><label class="flex items-center gap-2"><input type="checkbox" name="isActive" checked class="rounded"><span class="text-sm text-gray-700">Active</span></label></div>
        <div><label class="block text-sm font-medium text-gray-700 mb-1">Description</label><textarea name="description" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-lg"></textarea></div>
      </div>
      <div class="flex justify-end gap-3 mt-6">
        <button type="button" onclick="document.getElementById('createModal').classList.add('hidden')" class="px-4 py-2 border border-gray-300 rounded-lg text-sm">Cancel</button>
        <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm">Create</button>
      </div>
    </form>
  </div>
</div>

<script>
async function toggleCoupon(id) {
  const res = await fetch('/admin/coupons/' + id + '/toggle', { method: 'POST' });
  const data = await res.json();
  if (data.success) location.reload();
}
</script>
