{# templates/sales/returns.html #}
{% extends "pos/base.html" %}
{% load static %}
{% block title %}Sales Returns{% endblock %}

{% block stylesheets %}
<style>
  .text-end { text-align: end; }
  .amount-negative { color: #c1272d; font-weight: 600; }
  .filter-row .form-control, .filter-row .custom-select { min-width: 180px; }
  .btn-group-sm .btn { margin-right: 4px; }
  .badge-total { background:#01478f; color:#ffffff; font-size:1rem; }
 
  /* receipt modal polish (same as sales.html) */
  #receiptModal .btn-group-toggle .btn { min-width: 140px; }
  .rm-template-item { transition: box-shadow .15s ease; }
  .rm-template-item:hover { box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.08); }

  #receiptModal .btn-group.btn-group-toggle{
    flex-wrap: wrap; justify-content: center; width: 100%;
  }
  #receiptModal .btn-group.btn-group-toggle .btn{
    margin: .25rem; min-width: 130px;
  }
  @media (max-width: 575.98px){
    #receiptModal .btn-group.btn-group-toggle .btn{
      flex: 1 1 calc(50% - .5rem);
    }
  }
  @media (min-width: 576px){
    #receiptModal .btn-group.btn-group-toggle .btn{
      flex: 0 0 auto;
    }
  }
</style>
{% endblock %}

{% block heading %}Sales Returns{% endblock %}

{% block content %}

<!-- Filter Bar -->
<form method="get" class="mb-3">
  <div class="card">
    <div class="card-body py-2">
      <div class="row align-items-end filter-row">
        <div class="col-md-2 col-6 mb-2">
          <label class="mb-1">Filter by</label>
          <select name="filter" id="filterType" class="custom-select custom-select-sm">
            <option value="date" {% if picked_filter == "date" or not picked_filter %}selected{% endif %}>Date</option>
            <option value="invoice" {% if picked_filter == "invoice" %}selected{% endif %}>Invoice #</option>
            <option value="customer" {% if picked_filter == "customer" %}selected{% endif %}>Customer</option>
          </select>
        </div>

        <div class="col-md-2 col-6 mb-2 filter-box filter-invoice" style="display:none;">
          <label class="mb-1">Invoice #</label>
          <input type="text" class="form-control form-control-sm" name="invoice" value="{{ invoice_q|default:'' }}" placeholder="e.g. 1254">
        </div>

        <div class="col-md-3 col-12 mb-2 filter-box filter-customer" style="display:none;">
          <label class="mb-1">Customer</label>
          <input type="text" class="form-control form-control-sm" name="customer" value="{{ customer_q|default:'' }}" placeholder="Customer name">
        </div>

        <div class="col-md-2 col-6 mb-2 filter-box filter-date" style="display:none;">
          <label class="mb-1">From</label>
          <input type="date" class="form-control form-control-sm" name="date_from" value="{{ date_from_q|default:'' }}">
        </div>
        <div class="col-md-2 col-6 mb-2 filter-box filter-date" style="display:none;">
          <label class="mb-1">To</label>
          <input type="date" class="form-control form-control-sm" name="date_to" value="{{ date_to_q|default:'' }}">
        </div>

        <div class="col-md-3 col-12 mb-2 text-right">
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="fas fa-search"></i> Filter
          </button>
          <a href="{% url 'sales:sales_return_list' %}" class="btn btn-light btn-sm">
            <i class="fas fa-undo"></i> Reset
          </a>
        </div>
      </div>
    </div>
  </div>
</form>

<!-- Create New Return + Quick Convert From Sale -->
<div class="row ml-0 mb-3">
  <div class="col-md-auto mb-2">
    <a href="{% url 'sales:sales_return_add' %}">
      <button type="button" class="btn btn-success font-weight-bold">
        <i class="fas fa-plus mr-2"></i> Create new Return
      </button>
    </a>
  </div>

  <div class="col-md-auto mb-2">
    <form id="convertToReturnForm" class="form-inline">
      <label for="convertToReturnInvoice" class="mr-2 small mb-0">
        Convert Sale # to Return
      </label>
      <input type="number"
             min="1"
             id="convertToReturnInvoice"
             class="form-control form-control-sm mr-2"
             placeholder="Invoice #">
      <button type="submit" class="btn btn-outline-info btn-sm">
        Open
      </button>
    </form>
  </div>
</div>

<!-- Table -->
<div class="card shadow mb-4">
  <div class="card-header py-3 d-flex align-items-center justify-content-between">
    <h6 class="m-0 font-weight-bold text-primary">Returns</h6>
    <div>
      <a href="{% url 'sales:sales_list' %}" class="btn btn-outline-secondary btn-sm">Sales</a>
      <a href="{% url 'sales:estimates_list' %}" class="btn btn-outline-secondary btn-sm">Estimates</a>
    </div>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
        <thead class="thead-light">
          <tr>
            <th style="width:60px;">#</th>
            <th style="width:120px;">Invoice #</th>
            <th style="width:140px;">Date</th>
            <th>Customer</th>
            <th class="text-end" style="width:140px;">Total</th>
            <th class="text-end" style="width:140px;">Refund Now</th>
            <th class="text-center" style="width:260px;">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for s in sales %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ s.description }}</td>
            <td>{{ s.transaction_date }}</td>
            <td>{{ s.party_descp }}</td>
            <td class="text-end {% if s.total_amount < 0 %}amount-negative{% endif %}">
              {{ s.total_amount|floatformat:2 }}
            </td>
            <td class="text-end {% if s.amount_transaction < 0 %}amount-negative{% endif %}">
              {{ s.amount_transaction|floatformat:2 }}
            </td>
            <td class="text-center">
              <div class="btn-group btn-group-sm" role="group" aria-label="actions">
                <a href="{% url 'sales:sales_return_edit' s.description %}" class="btn btn-warning" title="Edit">
                  <i class="fas fa-edit"></i>
                </a>
                <a href="{% url 'sales:sales_return_delete' s.description %}"
                   class="btn btn-danger"
                   onclick="return confirm('Delete return #{{ s.description }}?');"
                   title="Delete">
                  <i class="fas fa-trash"></i>
                </a>
                <button type="button"
                        class="btn btn-dark btn-receipt"
                        data-invoice="{{ s.description }}"
                        title="Receipt">
                  <i class="fas fa-receipt"></i>
                </button>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="text-end mt-3">
      <span class="badge badge-total p-2">
        Grand&nbsp;Total:&nbsp;{{ grand_total|floatformat:2 }}
      </span>
    </div>
  </div>
</div>

<!-- Receipt Modal (same UX as sales.html) -->
<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 Return</h6>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
      </div>

      <div class="modal-body">

        <!-- carrier for invoice no -->
        <input type="hidden" id="rm_invoice_no" value="">

        <!-- 1) Actions row (single-select) -->
        <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>

        <!-- 2) Templates grid (built-in + dynamic) -->
        <div id="rm_tpl_grid" class="container-fluid">
          <div class="row">
            <div class="col-12 col-sm-6 col-md-4 mb-2">
              <button type="button" class="btn btn-light border w-100 text-left rm-template-item" data-template-id="a1">
                <div class="d-flex align-items-center">
                  <i class="far fa-file-pdf mr-2 text-secondary"></i><span>1. A1</span>
                </div>
              </button>
            </div>
            <div class="col-12 col-sm-6 col-md-4 mb-2">
              <button type="button" class="btn btn-light border w-100 text-left rm-template-item" data-template-id="a2">
                <div class="d-flex align-items-center">
                  <i class="far fa-file-pdf mr-2 text-secondary"></i><span>2. A1</span>
                </div>
              </button>
            </div>
            <div class="col-12 col-sm-6 col-md-4 mb-2">
              <button type="button" class="btn btn-light border w-100 text-left rm-template-item" data-template-id="a3">
                <div class="d-flex align-items-center">
                  <i class="far fa-file-pdf mr-2 text-secondary"></i><span>3. A1</span>
                </div>
              </button>
            </div>
            <div class="col-12 col-sm-6 col-md-4 mb-2">
              <button type="button" class="btn btn-light border w-100 text-left rm-template-item" data-template-id="b1">
                <div class="d-flex align-items-center">
                  <i class="far fa-file-pdf mr-2 text-secondary"></i><span>1. A5</span>
                </div>
              </button>
            </div>
            <div class="col-12 col-sm-6 col-md-4 mb-2">
              <button type="button" class="btn btn-light border w-100 text-left rm-template-item" data-template-id="b2">
                <div class="d-flex align-items-center">
                  <i class="far fa-file-pdf mr-2 text-secondary"></i><span>2. A5</span>
                </div>
              </button>
            </div>
            <div class="col-12 col-sm-6 col-md-4 mb-2">
              <button type="button" class="btn btn-light border w-100 text-left rm-template-item" data-template-id="b3">
                <div class="d-flex align-items-center">
                  <i class="far fa-file-pdf mr-2 text-secondary"></i><span>3. A5</span>
                </div>
              </button>
            </div>
            
            <div class="col-12 col-sm-6 col-md-4 mb-2">
              <button type="button" class="btn btn-light border w-100 text-left rm-template-item" data-template-id="t1">
                <div class="d-flex align-items-center">
                  <i class="far fa-file-pdf mr-2 text-secondary"></i><span>80 mm (Thermal)</span>
                </div>
              </button>
            </div>

        </div>

      </div>

      <div class="modal-footer">
        <small class="text-muted mr-auto">Choose an action above, then click a template.</small>
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
      </div>

    </div>
  </div>
</div>

{% endblock %}

{% block javascripts %}

<script>
  (function(){
    // DataTable
    $(function(){ $('#dataTable').DataTable({ "order": [[2,'desc']], "pageLength": 25 }); });

    // Filter UI show/hide
    function applyFilterUI(){
      var t = $('#filterType').val();
      $('.filter-box').hide();
      if (t === 'invoice') { $('.filter-invoice').show(); }
      else if (t === 'customer') { $('.filter-customer').show(); }
      else { $('.filter-date').show(); }
    }
    $('#filterType').on('change', applyFilterUI);
    applyFilterUI();

    // ----- Receipt Modal (same behavior as sales.html) -----
    // Open modal with invoice #
    $(document).on('click', '.btn-receipt', function(){
      const inv = $(this).data('invoice') || '';
      $('#rm_invoice_no').val(inv);

      // reset to 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');
    });

    // Get selected action
    function getSelectedAction(){
      return $('#rm_action_group input[name="rm_action"]:checked').val() || 'pdf';
    }

    function buildViewUrl(tplId, invNo) {
      const tpl = String(tplId).toLowerCase();
      const encInv = encodeURIComponent(invNo);
      return `/invoices/invoice-templates/${tplId}/${encInv}/return/`;
    }

    // Click a template to execute chosen action
    $(document).on('click', '.rm-template-item', async function(){
      const invNo = $('#rm_invoice_no').val();
      const tplId = $(this).data('template-id');
      const action = getSelectedAction();
      if (!invNo || !tplId || !action) return;

      await runReceiptAction(tplId, invNo, action);
      $('#receiptModal').modal('hide');
    });

    // Runner (PDF / Print / Share / Download)
    async function runReceiptAction(tplId, invNo, action){
      const baseUrl = buildViewUrl(tplId, invNo);

      if (action === 'pdf') {
        window.open(baseUrl, '_blank'); return;
      }
      if (action === 'print') {
        window.open(baseUrl + '?autoprint=1&close=afterprint', '_blank'); return;
      }
      if (action === 'download') {
        window.open(baseUrl + '?download=1', '_blank'); return;
      }
      if (action === 'share') {
        try {
          const pdfUrl = baseUrl + '?pdf=1';
          const resp = await fetch(pdfUrl, { credentials: 'same-origin', cache: 'no-store' });
          if (!resp.ok) throw new Error('PDF fetch failed');
          const blob = await resp.blob();
          const fileName = `return-${invNo}.pdf`;
          const file = new File([blob], fileName, { type: 'application/pdf' });

          const isSecure = window.isSecureContext || /^https:$/i.test(location.protocol) || /^(localhost|127\.0\.0\.1)$/i.test(location.hostname);

          if (isSecure && navigator.canShare && navigator.canShare({ files: [file] })) {
            await navigator.share({ files: [file], title: `Return #${invNo}`, text: 'Please find attached return.' });
          } else {
            const blobUrl = URL.createObjectURL(file);
            const w = window.open(blobUrl, '_blank');
            if (!w) window.open(baseUrl + '?download=1', '_blank');
          }
        } catch (err) {
          window.open(baseUrl + '?download=1', '_blank');
        }
      }
    }

    // --- Quick "Convert Sale → Return" opener ---
    $('#convertToReturnForm').on('submit', function(e){
      e.preventDefault();

      var inv = $.trim($('#convertToReturnInvoice').val());
      if (!inv) {
        $('#convertToReturnInvoice').focus();
        return;
      }

      // Base URL from Django reverse: /sales/convert-to-return/0/
      var url = "{% url 'sales:sales_convert_to_return' 0 %}";
      // Replace /0/ with /<invoice>/
      url = url.replace('/0/', '/' + encodeURIComponent(inv) + '/');

      // Open convert-to-return page in new tab
      window.open(url, '_blank');
    });



    
  })();
</script>
{% endblock %}