{% extends "pos/base.html" %}
{% load static %}
{% block title %}Duplicate Sales Finder{% endblock %}

{% block stylesheets %}

<style>
  .filter-box .form-control,
  .filter-box .form-check-input { font-size: .85rem; }

  .badge-soft { background: #f1f5f9; color: #0f172a; }
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
  .small-muted { font-size: .8rem; color: #6b7280; }

  .chip {
    display:inline-block; padding:.15rem .5rem; border-radius: 999px;
    background:#eef2ff; color:#3730a3; font-size:.8rem; margin:0 .15rem .15rem 0;
  }
  .items-grid { font-size:.85rem; }
  .items-grid td { padding:.1rem .25rem; }

  details.group-card { border:1px solid #e5e7eb; border-radius: .5rem; padding: .5rem .75rem; margin-bottom: .75rem; }
  details.group-card[open] { background:#fafafa; }
  summary { cursor: pointer; }
</style>
{% endblock %}

{% block heading %}Duplicate Sales Finder{% endblock %}

{% block content %}

<!-- Filters -->
<form method="get" class="filter-box mb-3">
  <div class="row g-2 align-items-end">

    <div class="col-md-3">
      <label class="small mb-1">Category</label>
      <select name="category" class="form-control">
        <option value="both" {% if picked_category == "both" %}selected{% endif %}>Both (customer & counter)</option>
        <option value="customer_sale" {% if picked_category == "customer_sale" %}selected{% endif %}>Customer Sale</option>
        <option value="counter_sale" {% if picked_category == "counter_sale" %}selected{% endif %}>Counter Sale</option>
      </select>
    </div>

    <div class="col-md-4">
      <label class="small mb-1 d-block">Date Range</label>
      <div class="d-flex">
        <input type="date" name="date_from" value="{{ date_from_q }}" class="form-control me-1">
        <input type="date" name="date_to"   value="{{ date_to_q }}"   class="form-control">
      </div>
    </div>

    <div class="col-md-3">
      <label class="small mb-1 d-block">Amount Band (optional)</label>
      <div class="d-flex">
        <input type="number" step="0.01" name="min_total" value="{{ min_total_q }}" placeholder="Min" class="form-control me-1">
        <input type="number" step="0.01" name="max_total" value="{{ max_total_q }}" placeholder="Max" class="form-control">
      </div>
    </div>

    <div class="col-auto">
      <button type="submit" class="btn btn-primary btn-sm">
        <i class="fas fa-search me-1"></i>Search
      </button>
      <a href="{% url 'sales:sales_duplicates' %}" class="btn btn-secondary btn-sm">Reset</a>
    </div>
  </div>
</form>

<!-- Missing items warnings (if any) -->
{% if missing_items %}
  <div class="alert alert-warning py-2">
    <strong>Note:</strong> These invoices have no <span class="mono">sale_product</span> lines and were skipped:
    <span class="mono">{{ missing_items|join:", " }}</span>
  </div>
{% endif %}

<!-- Groups -->
<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">Confirmed Duplicate Groups</h6>
  </div>
  <div class="card-body">

    {% if not groups %}
      <div class="small-muted">No duplicate groups matched your filters.</div>
    {% endif %}

    {% for g in groups %}
      <details class="group-card">
        <summary class="d-flex align-items-center justify-content-between">
          <div>
            <span class="badge badge-soft me-1">{{ g.category_label }}</span>
            <strong class="mono">Total = {{ g.rounded_total|floatformat:2 }}</strong>
            <span class="small-muted ms-2">({{ g.invoice_count }} invoices)</span>
            {% if g.date_from and g.date_to %}
              <span class="small-muted ms-2">{{ g.date_from }} → {{ g.date_to }}</span>
            {% endif %}
          </div>
          <div class="small-muted">Signature: <span class="mono">{{ g.signature|slice:":12" }}…</span></div>
        </summary>

        <div class="mt-3">
          <!-- Items sample -->
          <div class="mb-2"><em>Items (product_code → qty):</em></div>
          <table class="items-grid table table-sm table-bordered w-auto">
            <thead><tr><th>Product</th><th class="text-end">Qty</th></tr></thead>
            <tbody>
              {% for pc, q in g.items_example %}
                <tr><td class="mono">{{ pc }}</td><td class="text-end mono">{{ q }}</td></tr>
              {% endfor %}
            </tbody>
          </table>

          <!-- Members table -->
          <div class="mt-3">
            <div class="mb-2"><em>Invoices in this group:</em></div>
            <div class="table-responsive">
              <table class="table table-bordered table-hover">
                <thead>
                  <tr>
                    <th style="width:18%">Invoice #</th>
                    <th style="width:18%">Date</th>
                    <th style="width:34%">Customer</th>
                    <th class="text-end" style="width:15%">Total</th>
                    <th class="text-center" style="width:15%">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {% for m in g.members %}
                    <tr>
                      <td class="mono">{{ m.invoice_no }}</td>
                      <td>{{ m.date }}</td>
                      <td>{{ m.customer }}</td>
                      <td class="text-end mono">{{ m.rounded_total|floatformat:2 }}</td>
                      <td class="text-center">
                        <a href="{% url 'sales:sales_edit' m.invoice_no %}" class="btn btn-warning btn-sm" title="Edit">
                          <i class="fas fa-edit"></i>
                        </a>
                        <button type="button"
                                class="btn btn-dark btn-sm btn-receipt"
                                data-invoice="{{ m.invoice_no }}"
                                title="Receipt">
                          <i class="fas fa-receipt"></i>
                        </button>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>

            {% if g.customers %}
              <div class="mt-2">
                <span class="small-muted">Customers sample:</span>
                {% for c in g.customers %}<span class="chip">{{ c }}</span>{% endfor %}
              </div>
            {% endif %}
          </div>
        </div>
      </details>
    {% endfor %}

  </div>
</div>

<!-- Reuse existing receipt modal behavior from sales list if present -->
<div class="modal fade" id="receiptModal" tabindex="-1" role="dialog" aria-labelledby="receiptModalLbl" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title" id="receiptModalLbl">Print / Share Invoice</h6>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="rm_invoice_no" value="">
        <div class="mb-3 text-center">
          <div class="btn-group btn-group-toggle" data-toggle="buttons" id="rm_action_group">
            <label class="btn btn-outline-primary active">
              <input type="radio" name="rm_action" value="pdf" autocomplete="off" checked> PDF
            </label>
            <label class="btn btn-outline-primary">
              <input type="radio" name="rm_action" value="print" autocomplete="off"> Direct Print
            </label>
            <label class="btn btn-outline-primary">
              <input type="radio" name="rm_action" value="share" autocomplete="off"> Share
            </label>
            <label class="btn btn-outline-primary">
              <input type="radio" name="rm_action" value="download" autocomplete="off"> Download PDF
            </label>
          </div>
        </div>
        <div class="small-muted">Choose an action above, then your standard invoice template page will open.</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block javascripts %}
<script>
  // Open modal with invoice #
  $(document).on('click', '.btn-receipt', function(){
    const inv = $(this).data('invoice') || '';
    $('#rm_invoice_no').val(inv);

    // default action = pdf
    $('#rm_action_group input[name="rm_action"][value="pdf"]').prop('checked', true);
    $('#rm_action_group .btn').removeClass('active');
    $('#rm_action_group .btn input[value="pdf"]').closest('.btn').addClass('active');

    $('#receiptModal').modal('show');
  });

  function getSelectedAction(){
    return $('#rm_action_group input[name="rm_action"]:checked').val() || 'pdf';
  }
  function buildViewUrl(tplId, invNo) {
    // Keep same route pattern you already use for receipts
    return `/invoices/invoice-templates/${tplId}/${encodeURIComponent(invNo)}/sale/`;
  }

  // If you want quick PDF on 'PDF' action without choosing template, set a default template ID here:
  const DEFAULT_TPL_ID = 'a1';  // change if needed

  $(document).on('click', '#rm_action_group input', function(){
    // no-op; action selected
  });

  // When modal shown, immediately trigger action using DEFAULT_TPL_ID
  $('#receiptModal').on('shown.bs.modal', function(){
    const invNo = $('#rm_invoice_no').val();
    const action = getSelectedAction();
    if (!invNo) return;
    const url = buildViewUrl(DEFAULT_TPL_ID, invNo);

    if (action === 'pdf')       window.open(url, '_blank');
    else if (action === 'print')   window.open(url + '?autoprint=1&close=afterprint', '_blank');
    else if (action === 'download')window.open(url + '?download=1', '_blank');
    else if (action === 'share')   window.open(url + '?pdf=1', '_blank');
  });
</script>
{% endblock %}