{% extends "pos/base.html" %}
{% load static %}

{% block title %}Payment Mismatch Report{% endblock %}

{% block stylesheets %}
<style>
  .mm-page { padding: 12px; }
  .mm-header {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 8px;
    padding: 10px 14px; margin-bottom: 10px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  }
  .mm-header h5 { margin: 0; font-weight: 700; color: #1e293b; font-size: 1rem; }
  .filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .filter-row input, .filter-row .btn {
    height: 32px; font-size: 0.82rem; border-radius: 5px;
  }
  .filter-row input { border: 1px solid #cbd5e1; padding: 0 8px; }

  .summary-row {
    display: flex; gap: 10px; margin-bottom: 10px;
  }
  .s-card {
    padding: 8px 16px; border-radius: 6px; text-align: center;
    min-width: 120px;
  }
  .s-card .s-val { font-size: 1.2rem; font-weight: 800; }
  .s-card .s-lbl { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #000; }
  .s-count { background: #dbeafe; border: 1px solid #93c5fd; }
  .s-count .s-val { color: #1d4ed8; }
  .s-diff { background: #fee2e2; border: 1px solid #fca5a5; }
  .s-diff .s-val { color: #dc2626; }

  .mm-table { width: 100%; border-collapse: separate; border-spacing: 0; }
  .mm-table thead th {
    background: #f1f5f9; border-bottom: 2px solid #94a3b8;
    color: #000; font-weight: 700; font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.3px;
    padding: 8px 6px; white-space: nowrap;
  }
  .mm-table tbody td {
    padding: 6px; border-bottom: 1px solid #f0f2f5;
    font-size: 0.84rem; color: #1e293b; vertical-align: middle;
  }
  .mm-table tbody tr:hover td { background: #f5f8ff; }

  .badge-sale { background: #dcfce7; color: #166534; padding: 2px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 600; }
  .badge-return { background: #fef3c7; color: #92400e; padding: 2px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 600; }

  .diff-positive { color: #dc2626; font-weight: 700; }
  .diff-negative { color: #2563eb; font-weight: 700; }

  .amt-col { text-align: right; font-weight: 600; }

  .action-btn {
    padding: 2px 8px; font-size: 0.75rem; border-radius: 4px;
    border: none; cursor: pointer; font-weight: 600;
  }
  .btn-edit { background: #dbeafe; color: #1d4ed8; }
  .btn-edit:hover { background: #bfdbfe; }
  .btn-del { background: #fee2e2; color: #dc2626; }
  .btn-del:hover { background: #fecaca; }

  .empty-state {
    text-align: center; padding: 40px 20px; color: #64748b;
  }
  .empty-state i { font-size: 2rem; margin-bottom: 8px; display: block; color: #16a34a; }

  @media (max-width: 576px) {
    .mm-header { flex-direction: column; align-items: stretch; }
    .summary-row { flex-direction: column; }
    .mm-table { font-size: 0.78rem; }
  }
</style>
{% endblock %}

{% block content %}
<div class="mm-page">

  <div class="mm-header">
    <h5><i class="fas fa-exclamation-triangle mr-1" style="color:#dc2626;"></i> Payment Mismatch — Cash Invoices</h5>
    <form method="get" class="filter-row">
      <input type="date" name="date_from" value="{{ date_from }}">
      <span style="font-size:0.8rem; color:#64748b;">to</span>
      <input type="date" name="date_to" value="{{ date_to }}">
      <button type="submit" class="btn btn-sm btn-primary">
        <i class="fas fa-search"></i> Find
      </button>
    </form>
  </div>

  <div class="summary-row">
    <div class="s-card s-count">
      <div class="s-val">{{ total_count }}</div>
      <div class="s-lbl">Mismatched Invoices</div>
    </div>
    <div class="s-card s-diff">
      <div class="s-val">{{ total_diff }}</div>
      <div class="s-lbl">Total Difference</div>
    </div>
  </div>

  {% if mismatched %}
  <div class="table-responsive">
    <table class="mm-table">
      <thead>
        <tr>
          <th>#</th>
          <th>Invoice</th>
          <th>Type</th>
          <th>Date</th>
          <th>Party</th>
          <th class="text-right">Invoice Amt</th>
          <th class="text-right">Bank Rcvd</th>
          <th class="text-right">Difference</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for inv in mismatched %}
        <tr>
          <td>{{ forloop.counter }}</td>
          <td><strong>{{ inv.invoice_no }}</strong></td>
          <td>
            {% if inv.txn_label == "Sale" %}
              <span class="badge-sale">SALE</span>
            {% else %}
              <span class="badge-return">RETURN</span>
            {% endif %}
          </td>
          <td>{{ inv.date }}</td>
          <td>{{ inv.party }}</td>
          <td class="amt-col">{{ inv.pay_amount|floatformat:0 }}</td>
          <td class="amt-col">{{ inv.bank_total|floatformat:0 }}</td>
          <td class="amt-col {% if inv.difference > 0 %}diff-positive{% else %}diff-negative{% endif %}">
            {{ inv.difference|floatformat:0 }}
          </td>
          <td style="white-space:nowrap;">
          {% if inv.edit_url == "sale" %}
                        <a href="{% url 'sales:sales_edit' inv.invoice_no %}"
                           class="action-btn btn-edit" title="Edit">
                          <i class="fas fa-pen"></i> Edit
                        </a>
                      {% else %}
                        <a href="{% url 'sales:sales_edit' inv.invoice_no %}"
                           class="action-btn btn-edit" title="Edit">
                          <i class="fas fa-pen"></i> Edit
                        </a>
                      {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% else %}
  <div class="empty-state">
    <i class="fas fa-check-circle"></i>
    <strong>All Clear!</strong><br>
    No mismatched invoices found for {{ date_from }} to {{ date_to }}.
  </div>
  {% endif %}

</div>
{% endblock %}

{% block javascripts %}
<script>
  // Confirm before delete
  $(document).on('click', '.btn-del-invoice', function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    var inv  = $(this).data('inv');
    Swal.fire({
      title: 'Delete Invoice #' + inv + '?',
      text: 'This will reverse stock, bank payments and customer balance.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#dc2626',
      confirmButtonText: 'Yes, Delete'
    }).then(function(result) {
      if (result.isConfirmed) {
        window.location.href = href;
      }
    });
  });
</script>
{% endblock %}