{% extends "pos/base.html" %}
{% load static %}
{% block title %}Purchase Invoices{% endblock %}

{% block stylesheets %}

<style>
  /* Alternating row colors */
  #dataTable tbody tr:nth-child(odd) {
    background: #ffffff;
  }
  #dataTable tbody tr:nth-child(even) {
    background: #f8fafc; /* light gray */
  }

  /* Hover row highlight */
  #dataTable tbody tr:hover {
    background: #eaf4ff !important; /* light blue */
    cursor: pointer;
  }

  /* Optional: smoother feel */
  #dataTable tbody tr {
    transition: background-color 0.15s ease-in-out;
  }
</style>

{% endblock %}

{% block heading %}Purchase Invoices{% endblock %}

{% block content %}
<form method="get" class="filter-box mb-3">
  <div class="row align-items-end">
    <!-- Invoice # filter -->
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Invoice #</label>
      <input type="text" name="invoice" value="{{ invoice_q }}" class="form-control" placeholder="Invoice #">
    </div>
    <div class="col-auto mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="filter" value="invoice"
               id="fInvoice"  {% if picked_filter == "invoice" %}checked{% endif %}>
        <label class="form-check-label small" for="fInvoice">Use</label>
      </div>
    </div>
    <!-- Challan # filter -->
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Challan #</label>
      <input type="text" name="challan" value="{{ challan_q }}" class="form-control" placeholder="Challan #">
    </div>
    <div class="col-auto mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="filter" value="challan"
               id="fChallan" {% if picked_filter == "challan" %}checked{% endif %}>
        <label class="form-check-label small" for="fChallan">Use</label>
      </div>
    </div>
    <!-- Vendor filter -->
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Vendor</label>
      <input type="text" name="vendor" value="{{ vendor_q }}" class="form-control" placeholder="Vendor name">
    </div>
    <div class="col-auto mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="filter" value="vendor"
               id="fVendor" {% if picked_filter == "vendor" %}checked{% endif %}>
        <label class="form-check-label small" for="fVendor">Use</label>
      </div>
    </div>
    <!-- Date filter -->
    <div class="col-md-4 mb-2">
      <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-auto mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="filter" value="date"
               id="fDate" {% if picked_filter == "date" %}checked{% endif %}>
        <label class="form-check-label small" for="fDate">Use</label>
      </div>
    </div>
    <!-- Actions --> 
    <div class="col-auto mb-2">
      <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-search me-1"></i>Search</button>
      <a href="{% url 'purchases:purchases_list' %}" class="btn btn-secondary btn-sm">Reset</a>
    </div>
  </div>
</form>

<div class="mb-3">
  <a href="{% url 'purchases:purchase_add' %}?bill_type=vendor_purchase" class="btn btn-success">
    <i class="fas fa-plus me-1"></i> New Purchase
  </a>
  <a href="{% url 'purchases:purchase_holds_list' %}" class="btn btn-outline-warning">
    <i class="fas fa-pause-circle me-1"></i> Held Purchases
  </a>
</div>

<div class="card shadow mb-4">
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
        <thead>
          <tr>
            <th>#</th>
            <th>Invoice #</th>
            <th>Challan #</th>
            <th>Date</th>
            <th>Vendor</th>
            <th class="text-end">Total</th>
            <th class="text-end">Paid</th>
            <th class="text-center">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for p in purchases %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ p.description }}</td>
            <td>{{ p.builty_no }}</td>
            <td>{{ p.transaction_date }}</td>
            <td>{{ p.party_descp }}</td>
            <td class="text-end">{{ p.total_amount|floatformat:2 }}</td>
            <td class="text-end">{{ p.amount_transaction|floatformat:2 }}</td>
            <td class="text-center">
              <a href="{% url 'purchases:purchase_edit' p.description %}?bill_type={% if p.bill_type == 2 %}vendor_purchase{% else %}customer_purchase{% endif %}" class="btn btn-warning btn-sm"><i class="fas fa-edit"></i></a>

                <a href="{% url 'purchases:purchase_delete' p.description %}?bill_type={% if p.bill_type == 2 %}vendor_purchase{% else %}customer_purchase{% endif %}"
                   class="btn btn-danger btn-sm"
                   onclick="return confirm('Delete invoice #{{ p.description }}?');">
                   <i class="fas fa-trash"></i>
                 </a>
                <a href="{% url 'purchases:purchase_invoice_pdf' p.description %}?bill_type={% if p.bill_type == 2 %}vendor_purchase{% else %}customer_purchase{% endif %}" 
                   class="btn btn-info btn-sm">
                  <i class="fas fa-eye"></i>
                </a>
                <button type="button" class="btn btn-success btn-sm btn-convert-to-sale"
                        data-purchase-id="{{ p.description }}"
                        data-bill-type="{% if p.bill_type == 2 %}vendor_purchase{% else %}customer_purchase{% endif %}"
                        title="Convert to Sale">
                  <i class="fas fa-exchange-alt"></i>
                </button>
                <button type="button" class="btn btn-secondary btn-sm btn-grn"
                        data-purchase-id="{{ p.description }}"
                        data-bill-type="{% if p.bill_type == 2 %}vendor_purchase{% else %}customer_purchase{% endif %}"
                        title="Print GRN">
                  <i class="fas fa-file-invoice"></i>
                </button>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="text-end mt-3">
      <span class="badge bg-primary p-2"  style="color: #fff; font-weight: bold;">
        Grand Total: {{ grand_total|floatformat:2 }}
      </span>
    </div>
  </div>
</div>

<!-- Convert to Sale: Percentage Modal -->
<div class="modal fade" id="convertToSaleModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fas fa-exchange-alt me-2"></i>Convert to Sale</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <p class="mb-2">Purchase Invoice <strong>#<span id="ctsInvoiceNo"></span></strong> ko Sale mn convert kren ge.</p>
        <label class="small mb-1">Enter Percentage (Profit Margin %)</label>
        <input type="number" step="0.01" id="ctsPercentage" class="form-control" placeholder="e.g. 20" value="0">
        <small class="text-muted d-block mt-1">Sale Rate = Purchase Rate × (1 + %/100)</small>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-success btn-sm" id="ctsConvertBtn"><i class="fas fa-check me-1"></i> Convert</button>
      </div>
    </div>
  </div>
</div>

<!-- GRN: choose type -->
<div class="modal fade" id="grnModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fas fa-file-invoice me-2"></i>Print GRN — Invoice <span id="grnInvoiceNo"></span></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <p class="mb-2">Select the GRN type to print:</p>
        <div class="d-grid gap-2">
          <button type="button" class="btn btn-outline-primary" id="grnItemWiseBtn">
            <i class="fas fa-list me-1"></i> Items Wise
          </button>
          <button type="button" class="btn btn-outline-primary" id="grnSimpleBtn">
            <i class="fas fa-file me-1"></i> Bill Wise (Simple)
          </button>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
<script>
  $(function(){
    $('#dataTable').DataTable({ order:[[3,'desc']] });
  });

  // ── Convert Purchase to Sale ──
  let ctsPurchaseId = null;
  let ctsBillType   = 'vendor_purchase';
  const CTS_URL_TEMPLATE = "{% url 'purchases:purchase_convert_to_sale' 999999999 %}";

  $(document).on('click', '.btn-convert-to-sale', function () {
    ctsPurchaseId = $(this).data('purchase-id');
    ctsBillType   = $(this).data('bill-type');
    $('#ctsInvoiceNo').text(ctsPurchaseId);
    $('#ctsPercentage').val(0);
    $('#convertToSaleModal').modal('show');
  });

  $('#ctsConvertBtn').on('click', function () {
    if (!ctsPurchaseId) return;
    const pct = parseFloat($('#ctsPercentage').val()) || 0;
    const url = CTS_URL_TEMPLATE.replace('999999999', ctsPurchaseId)
              + "?bill_type=" + encodeURIComponent(ctsBillType)
              + "&percentage=" + encodeURIComponent(pct);
    window.open(url, '_blank');   // new tab — purchase list nahi loses
    $('#convertToSaleModal').modal('hide');
  });

  // ── GRN: choose Items Wise / Bill Wise ──
  let grnPurchaseId = null;
  let grnBillType   = 'vendor_purchase';
  const GRN_ITEM_WISE_TEMPLATE = "{% url 'purchases:purchase_grn_item_wise' 999999999 %}";
  const GRN_SIMPLE_TEMPLATE    = "{% url 'purchases:purchase_grn_simple' 999999999 %}";

  $(document).on('click', '.btn-grn', function () {
    grnPurchaseId = $(this).data('purchase-id');
    grnBillType   = $(this).data('bill-type');
    $('#grnInvoiceNo').text('#' + grnPurchaseId);
    $('#grnModal').modal('show');
  });

  $('#grnItemWiseBtn').on('click', function () {
    if (!grnPurchaseId) return;
    const url = GRN_ITEM_WISE_TEMPLATE.replace('999999999', grnPurchaseId)
              + "?bill_type=" + encodeURIComponent(grnBillType);
    window.open(url, '_blank');
    $('#grnModal').modal('hide');
  });

  $('#grnSimpleBtn').on('click', function () {
    if (!grnPurchaseId) return;
    const url = GRN_SIMPLE_TEMPLATE.replace('999999999', grnPurchaseId)
              + "?bill_type=" + encodeURIComponent(grnBillType);
    window.open(url, '_blank');
    $('#grnModal').modal('hide');
  });
</script>
{% endblock %}