{# templates/sales/pos_list.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}POS Invoices{% endblock %}

{% block stylesheets %}
<style>
.pos-list-container {
  padding: 15px;
}
.pos-list-header {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.pos-list-header h5 {
  margin: 0 0 15px 0;
  font-weight: 700;
  color: #01478f;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.filter-row .form-group {
  margin-bottom: 0;
}
.filter-row label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.filter-row .form-control {
  height: 40px;
  border-radius: 6px;
}
.filter-row .btn {
  height: 40px;
}

.pos-table-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
}
.pos-table {
  width: 100%;
  margin: 0;
}
.pos-table thead th {
  background: #f1f5f9;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #555;
  padding: 12px 15px;
  border-bottom: 2px solid #ddd;
}
.pos-table tbody td {
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
.pos-table tbody tr:hover {
  background: #f8f9fa;
}
.pos-table .inv-no {
  font-weight: 700;
  color: #01478f;
}
.pos-table .amount {
  font-weight: 600;
  text-align: right;
}
.pos-table .badge-cash {
  background: #28a745;
  color: #fff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
}
.pos-table .badge-credit {
  background: #ffc107;
  color: #333;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
}
.pos-table .action-btns .btn {
  padding: 5px 10px;
  font-size: 0.8rem;
}
.grand-total-bar {
  background: #01478f;
  color: #fff;
  padding: 15px 20px;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.no-data {
  text-align: center;
  padding: 40px;
  color: #aaa;
}
.no-data i {
  font-size: 48px;
  margin-bottom: 10px;
  display: block;
}
</style>
{% endblock %}

{% block heading %}POS Invoices{% endblock %}

{% block content %}
<div class="pos-list-container">
  
  <!-- Header with Filters -->
  <div class="pos-list-header">
    <h5><i class="fas fa-receipt mr-2"></i>POS Invoices</h5>
    
    <form method="get" class="filter-row">
      <div class="form-group">
        <label>From Date</label>
        <input type="date" name="date_from" class="form-control" value="{{ date_from }}">
      </div>
      <div class="form-group">
        <label>To Date</label>
        <input type="date" name="date_to" class="form-control" value="{{ date_to }}">
      </div>
      <div class="form-group">
        <label>Search</label>
        <input type="text" name="search" class="form-control" placeholder="Invoice # or Customer" value="{{ search }}">
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary">
          <i class="fas fa-search"></i> Filter
        </button>
        <a href="{% url 'sales:pos_list' %}" class="btn btn-outline-secondary">Reset</a>
      </div>
      <div class="form-group ml-auto">
        <a href="{% url 'sales:pos_invoice' %}" class="btn btn-success">
          <i class="fas fa-plus"></i> New Invoice
        </a>
        <a href="{% url 'sales:sales_list' %}" class="btn btn-outline-primary">
          <i class="fas fa-home"></i> Sales
        </a>
      </div>
    </form>
  </div>
  
  <!-- Invoices Table -->
  <div class="pos-table-card">
    <table class="pos-table">
      <thead>
        <tr>
          <th style="width:60px;">#</th>
          <th style="width:120px;">Invoice #</th>
          <th style="width:120px;">Date</th>
          <th>Customer</th>
          <th style="width:100px;">Type</th>
          <th style="width:120px;" class="text-right">Total</th>
          <th style="width:120px;" class="text-right">Received</th>
          <th style="width:150px;" class="text-center">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for inv in invoices %}
        <tr>
          <td>{{ forloop.counter }}</td>
          <td class="inv-no">{{ inv.invoice_no }}</td>
          <td>{{ inv.date }}</td>
          <td>{{ inv.customer }}</td>
          <td>
            {% if inv.bill_type == "Cash" %}
              <span class="badge-cash">Cash</span>
            {% else %}
              <span class="badge-credit">Credit</span>
            {% endif %}
          </td>
          <td class="amount">{{ inv.total|floatformat:0 }}</td>
          <td class="amount">{{ inv.received|floatformat:0 }}</td>
          <td class="text-center action-btns">
            <a href="{% url 'sales:pos_invoice_edit' inv.invoice_no %}" class="btn btn-sm btn-warning" title="Edit">
              <i class="fas fa-edit"></i>
            </a>
            <button type="button" class="btn btn-sm btn-danger btn-delete" 
                    data-invoice="{{ inv.invoice_no }}" title="Delete">
              <i class="fas fa-trash"></i>
            </button>
            <button type="button" class="btn btn-sm btn-dark btn-print" 
                    data-invoice="{{ inv.invoice_no }}" title="Print">
              <i class="fas fa-print"></i>
            </button>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="8">
            <div class="no-data">
              <i class="fas fa-inbox"></i>
              <div>No invoices found</div>
              <small>Try adjusting filters or create a new invoice</small>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    
    {% if invoices %}
    <div class="grand-total-bar">
      <span>Total Invoices: {{ invoices|length }}</span>
      <span>Grand Total: Rs. {{ grand_total|floatformat:0 }}</span>
    </div>
    {% endif %}
  </div>
  
</div>
{% endblock %}


{% block javascripts %}
<script>
$(function(){
  const csrfToken = '{{ csrf_token }}';
  
  // Delete button
  $(document).on('click', '.btn-delete', function(){
    const invoiceNo = $(this).data('invoice');
    const $row = $(this).closest('tr');
    
    Swal.fire({
      title: 'Delete Invoice #' + invoiceNo + '?',
      text: 'This will permanently delete the invoice and restore stock.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#dc3545',
      confirmButtonText: 'Yes, Delete'
    }).then(function(result){
      if (!result.isConfirmed) return;
      
      $.ajax({
        url: '/sales/pos/delete/' + invoiceNo + '/',
        type: 'POST',
        headers: { 'X-CSRFToken': csrfToken },
        success: function(resp){
          if (resp.ok) {
            $row.fadeOut(300, function(){ $(this).remove(); });
            Swal.fire({
              icon: 'success',
              title: 'Deleted!',
              text: resp.message,
              timer: 2000,
              showConfirmButton: false
            });
          } else {
            Swal.fire('Error', resp.error || 'Failed to delete', 'error');
          }
        },
        error: function(){
          Swal.fire('Error', 'Server error', 'error');
        }
      });
    });
  });
  
  // Print button (placeholder - integrate with your invoice templates)
  $(document).on('click', '.btn-print', function(){
    const invoiceNo = $(this).data('invoice');
    // Open invoice template
    window.open('/invoices/invoice-templates/a1/' + invoiceNo + '/sale/', '_blank');
  });
});
</script>
{% endblock %}