{% extends "base.html" %}

{% block content %}

<div class="container-fluid py-3">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div>
      <h3 class="fw-bold text-dark mb-0"><i class="bi bi-upc-scan text-primary me-2"></i>{{ l('Label printing', 'লেবেল প্রিন্ট') }}</h3>
      <small class="text-muted">{{ l('Create clear barcode labels for thermal printers.', 'থার্মাল প্রিন্টারের জন্য ছোট, পরিষ্কার বারকোড লেবেল তৈরি করুন।') }}</small>
    </div>
  </div>

  <div class="card border-0 shadow-sm rounded-4 p-4">
    <form method="GET" action="/barcode-pdf" target="_blank" id="barcode-form">
      <input type="hidden" name="mode" id="barcode-mode" value="download">

      <div class="row g-3 align-items-end mb-4">
        <div class="col-md-3">
          <label class="form-label fw-semibold text-dark small">{{ l('Copies per product', 'প্রতি পণ্যের কপি') }}</label>
          <input
            class="form-control"
            type="number"
            name="copies"
            value="1"
            min="1"
            max="50"
          >
        </div>

        <div class="col-md-3">
          <label class="form-label fw-semibold text-dark small">{{ l('Label size', 'লেবেল সাইজ') }}</label>
          <select class="form-select" name="label_size">
            <option value="80x35">80 × 35 mm ({{ l('Recommended', 'অনুমোদিত') }})</option>
            <option value="58x30">58 × 30 mm ({{ l('Small', 'ছোট') }})</option>
          </select>
        </div>

        <div class="col-md-6 d-flex flex-wrap gap-2">
          <button
            type="button"
            class="btn btn-outline-secondary fw-semibold px-3"
            id="select-all">
            <i class="bi bi-check-all me-1"></i>{{ l('Select All', 'সব সিলেক্ট করুন') }}
          </button>

          <button
            type="submit"
            onclick="document.getElementById('barcode-mode').value='download'"
            class="btn btn-primary fw-bold px-3 shadow-sm">
            <i class="bi bi-file-earmark-pdf me-1"></i>{{ l('Generate Barcode PDF', 'পিডিএফ ডাউনলোড') }}
          </button>

          <button
            type="submit"
            onclick="document.getElementById('barcode-mode').value='inline'"
            class="btn btn-success fw-bold px-3 shadow-sm">
            <i class="bi bi-printer me-1"></i>{{ l('Print Barcode', 'বারকোড প্রিন্ট করুন') }}
          </button>
        </div>
      </div>

      <div class="table-responsive border rounded-3">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th style="width: 40px;" class="ps-3">
                <input type="checkbox" id="check-all-header" class="form-check-input">
              </th>
              <th>{{ l('Code', 'কোড') }}</th>
              <th>{{ l('Name', 'পণ্যের নাম') }}</th>
              <th>{{ l('Barcode', 'বারকোড') }}</th>
              <th class="text-end pe-3">{{ l('Sell Price', 'বিক্রি মূল্য') }}</th>
            </tr>
          </thead>

          <tbody>
          {% for p in products %}
            <tr>
              <td class="ps-3">
                <input
                  type="checkbox"
                  name="ids"
                  value="{{ p.id }}"
                  class="prod-check form-check-input">
              </td>
              <td class="font-monospace text-muted">{{ p.product_code or '-' }}</td>
              <td class="fw-semibold text-dark">{{ p.name }}</td>
              <td class="font-monospace text-primary fw-bold">{{ p.barcode or p.product_code or '-' }}</td>
              <td class="text-end pe-3 fw-bold text-dark">৳ {{ "%.2f"|format(p.sell_price or 0) }}</td>
            </tr>
          {% else %}
            <tr>
              <td colspan="5" class="text-center text-muted py-4">
                <i class="bi bi-inbox fs-2 d-block mb-1 opacity-50"></i>
                {{ l('No active products found.', 'কোনো সক্রিয় পণ্য পাওয়া যায়নি।') }}
              </td>
            </tr>
          {% endfor %}
          </tbody>
        </table>
      </div>

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

<script>
function toggleAll(checked) {
  document
    .querySelectorAll(".prod-check")
    .forEach(function(cb) {
      cb.checked = checked;
    });
}

document
  .getElementById("select-all")
  .addEventListener("click", function() {
    const headerCheck = document.getElementById("check-all-header");
    const newChecked = !headerCheck.checked;
    headerCheck.checked = newChecked;
    toggleAll(newChecked);
  });

document
  .getElementById("check-all-header")
  .addEventListener("change", function(e) {
    toggleAll(e.target.checked);
  });
</script>

{% endblock %}