{% extends 'shipping/base.html' %}
{% load static %}

{% block title %}Print Shadowfax Shipping Label (4" × 6" Standard Format){% endblock %}

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>

<style>
/* CSS Styles for Web Dashboard View */
.label-page-container {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 992px) {
  .label-page-container {
    grid-template-columns: 1fr;
  }
}

/* 4" x 6" Shipping Label Spec Container */
.thermal-label-wrapper {
  background: #ffffff;
  color: #000000;
  width: 400px; /* 4 inches approx in screen pixels for preview */
  min-height: 600px; /* 6 inches ratio */
  padding: 14px;
  border: 2px solid #000000;
  border-radius: 4px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
}

.label-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #000000;
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.brand-title {
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.brand-subtitle {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: #333;
}

.payment-badge {
  font-size: 0.85rem;
  font-weight: 800;
  border: 2px solid #000000;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
}

.payment-cod {
  background-color: #000000;
  color: #ffffff;
}

.payment-prepaid {
  background-color: #ffffff;
  color: #000000;
}

.barcode-section {
  text-align: center;
  border-bottom: 2px solid #000000;
  padding: 6px 0;
  margin-bottom: 8px;
}

.barcode-svg {
  width: 100%;
  height: 55px;
  max-height: 60px;
}

.awb-display {
  font-family: 'Fira Code', monospace, monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.order-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 600;
  margin-top: 2px;
}

.address-box {
  border: 1px solid #000000;
  border-radius: 3px;
  padding: 8px;
  margin-bottom: 8px;
  font-size: 0.72rem;
  line-height: 1.35;
}

.address-title {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 2px;
  margin-bottom: 4px;
}

.to-box {
  border: 2px solid #000000;
  background-color: #fafafa;
}

.person-name {
  font-size: 0.85rem;
  font-weight: 800;
}

.person-phone {
  font-weight: 700;
}

.pincode-highlight {
  display: inline-block;
  background-color: #000000;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 3px;
  margin-top: 4px;
}

.manifest-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.68rem;
  margin-bottom: 8px;
}

.manifest-table th, .manifest-table td {
  border: 1px solid #000000;
  padding: 4px 6px;
  text-align: left;
}

.manifest-table th {
  background-color: #eee;
  font-weight: 700;
  text-transform: uppercase;
}

.footer-qr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2px solid #000000;
  padding-top: 6px;
  margin-top: 4px;
}

.qr-box {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-notes {
  font-size: 0.62rem;
  max-width: 280px;
  line-height: 1.25;
}

/* HIGH-PRECISION THERMAL PRINT STYLES */
@media print {
  body * {
    visibility: hidden;
  }
  
  .navbar, .page-header, .form-column, .no-print {
    display: none !important;
  }
  
  #printable_shipping_label, #printable_shipping_label * {
    visibility: visible;
  }
  
  #printable_shipping_label {
    position: absolute;
    left: 0;
    top: 0;
    width: 4in !important;
    height: 6in !important;
    min-height: 6in !important;
    padding: 0.15in !important;
    box-shadow: none !important;
    border: 2px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
    page-break-after: always;
  }

  @page {
    size: 4in 6in;
    margin: 0;
  }
}
</style>
{% endblock %}

{% block content %}
<div class="page-header no-print">
  <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
    <div>
      <h1 class="page-title">🏷️ Standard Shadowfax Shipping Label Printer</h1>
      <p class="page-desc">Generate, preview, and print standardized 4" × 6" thermal shipping labels for Shadowfax Logistics (Forward & Reverse).</p>
    </div>
    <div style="display: flex; gap: 0.5rem;">
      <button onclick="window.print()" class="btn btn-primary" style="font-size: 1rem; padding: 0.6rem 1.2rem;">
        🖨️ Print Label (4" × 6" Thermal Ready)
      </button>
      <a href="{% url 'forward_view' %}" class="btn btn-secondary">Back to Dashboard</a>
    </div>
  </div>
</div>

<div class="label-page-container">
  <!-- Left Column: Interactive Form Controls -->
  <div class="form-column no-print">
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">
        <span>⚙️ Label Configuration & Address Fields</span>
        <span class="badge badge-forward">4" × 6" Standard Spec</span>
      </div>

      <form id="labelForm" method="POST" action="{% url 'print_label_view' %}">
        {% csrf_token %}
        
        <!-- Identifiers -->
        <div class="grid-2" style="gap: 0.75rem;">
          <div class="form-group">
            <label class="form-label">AWB Tracking Number</label>
            <input type="text" id="input_awb" name="awb_number" class="form-control" value="{{ awb_number }}" oninput="updateLabelPreview()">
          </div>
          <div class="form-group">
            <label class="form-label">Client Order ID</label>
            <input type="text" id="input_order_id" name="client_order_id" class="form-control" value="{{ client_order_id }}" oninput="updateLabelPreview()">
          </div>
        </div>

        <div class="grid-2" style="gap: 0.75rem;">
          <div class="form-group">
            <label class="form-label">Payment Mode</label>
            <select id="input_payment_mode" name="payment_mode" class="form-select" onchange="updateLabelPreview()">
              <option value="COD" {% if payment_mode == 'COD' %}selected{% endif %}>COD (Cash on Delivery)</option>
              <option value="PREPAID" {% if payment_mode == 'PREPAID' %}selected{% endif %}>PREPAID</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">COD Amount (INR)</label>
            <input type="number" step="0.01" id="input_cod_amount" name="cod_amount" class="form-control" value="{{ cod_amount }}" oninput="updateLabelPreview()">
          </div>
        </div>

        <!-- SHIP FROM ADDRESS -->
        <div style="margin-top: 1rem; border-top: 1px solid var(--border-color); padding-top: 1rem;">
          <h4 style="font-size: 0.9rem; margin-bottom: 0.75rem; color: var(--accent-cyan);">📦 FROM Address (Origin / Seller / Return Center)</h4>
          <div class="grid-2" style="gap: 0.75rem;">
            <div class="form-group">
              <label class="form-label">Seller / Hub Name</label>
              <input type="text" id="input_from_name" name="from_name" class="form-control" value="{{ from_name }}" oninput="updateLabelPreview()">
            </div>
            <div class="form-group">
              <label class="form-label">Contact Phone</label>
              <input type="text" id="input_from_phone" name="from_phone" class="form-control" value="{{ from_phone }}" oninput="updateLabelPreview()">
            </div>
          </div>
          <div class="form-group">
            <label class="form-label">Address Line 1</label>
            <input type="text" id="input_from_addr1" name="from_address1" class="form-control" value="{{ from_address1 }}" oninput="updateLabelPreview()">
          </div>
          <div class="grid-3" style="gap: 0.5rem;">
            <div class="form-group">
              <label class="form-label">City</label>
              <input type="text" id="input_from_city" name="from_city" class="form-control" value="{{ from_city }}" oninput="updateLabelPreview()">
            </div>
            <div class="form-group">
              <label class="form-label">State</label>
              <input type="text" id="input_from_state" name="from_state" class="form-control" value="{{ from_state }}" oninput="updateLabelPreview()">
            </div>
            <div class="form-group">
              <label class="form-label">Pincode</label>
              <input type="text" id="input_from_pin" name="from_pincode" class="form-control" value="{{ from_pincode }}" oninput="updateLabelPreview()">
            </div>
          </div>
        </div>

        <!-- SHIP TO ADDRESS -->
        <div style="margin-top: 1rem; border-top: 1px solid var(--border-color); padding-top: 1rem;">
          <h4 style="font-size: 0.9rem; margin-bottom: 0.75rem; color: var(--accent-green);">🏠 TO Address (Customer Destination)</h4>
          <div class="grid-2" style="gap: 0.75rem;">
            <div class="form-group">
              <label class="form-label">Customer Name</label>
              <input type="text" id="input_to_name" name="to_name" class="form-control" value="{{ to_name }}" oninput="updateLabelPreview()">
            </div>
            <div class="form-group">
              <label class="form-label">Customer Mobile</label>
              <input type="text" id="input_to_phone" name="to_phone" class="form-control" value="{{ to_phone }}" oninput="updateLabelPreview()">
            </div>
          </div>
          <div class="form-group">
            <label class="form-label">Destination Address</label>
            <input type="text" id="input_to_addr1" name="to_address1" class="form-control" value="{{ to_address1 }}" oninput="updateLabelPreview()">
          </div>
          <div class="grid-3" style="gap: 0.5rem;">
            <div class="form-group">
              <label class="form-label">City</label>
              <input type="text" id="input_to_city" name="to_city" class="form-control" value="{{ to_city }}" oninput="updateLabelPreview()">
            </div>
            <div class="form-group">
              <label class="form-label">State</label>
              <input type="text" id="input_to_state" name="to_state" class="form-control" value="{{ to_state }}" oninput="updateLabelPreview()">
            </div>
            <div class="form-group">
              <label class="form-label">Destination Pincode</label>
              <input type="text" id="input_to_pin" name="to_pincode" class="form-control" value="{{ to_pincode }}" oninput="updateLabelPreview()">
            </div>
          </div>
        </div>

        <!-- Package Manifest -->
        <div style="margin-top: 1rem; border-top: 1px solid var(--border-color); padding-top: 1rem;">
          <h4 style="font-size: 0.9rem; margin-bottom: 0.75rem; color: var(--text-muted);">📦 Package & SKU Manifest</h4>
          <div class="grid-2" style="gap: 0.75rem;">
            <div class="form-group">
              <label class="form-label">Item / Product Title</label>
              <input type="text" id="input_item_name" name="item_name" class="form-control" value="{{ item_name }}" oninput="updateLabelPreview()">
            </div>
            <div class="form-group">
              <label class="form-label">Weight</label>
              <input type="text" id="input_weight" name="actual_weight" class="form-control" value="{{ actual_weight }}" oninput="updateLabelPreview()">
            </div>
          </div>
        </div>

        <div style="margin-top: 1.5rem; display: flex; gap: 0.75rem;">
          <button type="button" onclick="window.print()" class="btn btn-primary" style="flex: 1;">
            🖨️ Print Shipping Label
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- Right Column: Live 4" x 6" Thermal Shipping Label Preview -->
  <div>
    <div style="text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem;" class="no-print">
      🔍 Live Thermal Printer Preview (4" × 6" Standard Layout)
    </div>

    <!-- Exact 4" x 6" Shipping Label Canvas/Card -->
    <div id="printable_shipping_label" class="thermal-label-wrapper">
      
      <!-- Top Header Row -->
      <div class="label-header">
        <div>
          <div class="brand-title">SHADOWFAX</div>
          <div class="brand-subtitle">EXPRESS LOGISTICS & COURIER</div>
        </div>
        <div id="lbl_payment_badge" class="payment-badge {% if payment_mode == 'COD' %}payment-cod{% else %}payment-prepaid{% endif %}">
          {% if payment_mode == 'COD' %}COD: ₹<span id="lbl_cod_amount">{{ cod_amount }}</span>{% else %}PREPAID{% endif %}
        </div>
      </div>

      <!-- Barcode & AWB Display -->
      <div class="barcode-section">
        <svg id="barcode_svg" class="barcode-svg"></svg>
        <div class="awb-display" id="lbl_awb">{{ awb_number }}</div>
        <div class="order-meta-row">
          <span>ORDER ID: <strong id="lbl_order_id">{{ client_order_id }}</strong></span>
          <span>DATE: {{ date }}</span>
          <span>WT: <strong id="lbl_weight">{{ actual_weight }}</strong></span>
        </div>
      </div>

      <!-- SHIP TO (CUSTOMER) ADDRESS BOX -->
      <div class="address-box to-box">
        <div class="address-title">SHIP TO (DESTINATION ADDRESS)</div>
        <div class="person-name" id="lbl_to_name">{{ to_name }}</div>
        <div>PH: <span class="person-phone" id="lbl_to_phone">{{ to_phone }}</span></div>
        <div id="lbl_to_address">{{ to_address1 }}{% if to_address2 %}, {{ to_address2 }}{% endif %}</div>
        <div>
          <span id="lbl_to_city_state">{{ to_city }}, {{ to_state }}</span>
        </div>
        <div>
          DEST PIN: <div class="pincode-highlight" id="lbl_to_pincode">{{ to_pincode }}</div>
        </div>
      </div>

      <!-- SHIP FROM (SELLER / ORIGIN) ADDRESS BOX -->
      <div class="address-box">
        <div class="address-title">SHIP FROM (ORIGIN / RETURN SELLER)</div>
        <div style="font-weight: 700;" id="lbl_from_name">{{ from_name }}</div>
        <div>PH: <span id="lbl_from_phone">{{ from_phone }}</span></div>
        <div id="lbl_from_address">{{ from_address1 }}{% if from_address2 %}, {{ from_address2 }}{% endif %}</div>
        <div>
          <span id="lbl_from_city_state">{{ from_city }}, {{ from_state }}</span> - PIN: <strong id="lbl_from_pincode">{{ from_pincode }}</strong>
        </div>
      </div>

      <!-- MANIFEST TABLE -->
      <table class="manifest-table">
        <thead>
          <tr>
            <th>Item Description</th>
            <th style="width: 40px; text-align: center;">Qty</th>
            <th style="width: 70px; text-align: right;">Val (INR)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td id="lbl_item_name">{{ item_name }} ({{ sku_code }})</td>
            <td style="text-align: center;" id="lbl_qty">{{ quantity }}</td>
            <td style="text-align: right;" id="lbl_val">{{ product_value }}</td>
          </tr>
        </tbody>
      </table>

      <!-- FOOTER & DYNAMIC UPI QR CODE -->
      <div class="footer-qr-row">
        <div class="footer-notes">
          <strong>HANDLING INSTRUCTIONS:</strong><br>
          Handle with care. Do not fold barcode. In case of non-delivery, return to origin seller address.
        </div>
        <div style="text-align: center;">
          <div id="qrcode_canvas" class="qr-box"></div>
          <div style="font-size: 0.55rem; font-weight: 700; margin-top: 2px;">SCAN TO PAY UPI</div>
        </div>
      </div>

    </div>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
let qrCodeObj = null;

document.addEventListener('DOMContentLoaded', function() {
  initBarcode();
  initQRCode();

  {% if auto_print %}
  setTimeout(function() {
    window.print();
  }, 600);
  {% endif %}
});

function initBarcode() {
  const awb = document.getElementById('input_awb').value || 'SFX9928374102';
  try {
    JsBarcode("#barcode_svg", awb, {
      format: "CODE128",
      displayValue: false,
      margin: 0,
      height: 50,
      lineColor: "#000000"
    });
  } catch(e) {
    console.error("Barcode generation error:", e);
  }
}

function initQRCode() {
  const qrContainer = document.getElementById('qrcode_canvas');
  qrContainer.innerHTML = '';
  const qrString = "{{ qr_code_string|escapejs }}";

  try {
    if (window.QRCode) {
      qrCodeObj = new QRCode(qrContainer, {
        text: qrString,
        width: 68,
        height: 68,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.M
      });
    } else {
      qrContainer.innerHTML = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=68x68&data=${encodeURIComponent(qrString)}" style="width:68px;height:68px;">`;
    }
  } catch(e) {
    qrContainer.innerHTML = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=68x68&data=${encodeURIComponent(qrString)}" style="width:68px;height:68px;">`;
  }
}

function updateLabelPreview() {
  const awb = document.getElementById('input_awb').value;
  const orderId = document.getElementById('input_order_id').value;
  const paymentMode = document.getElementById('input_payment_mode').value;
  const codAmount = document.getElementById('input_cod_amount').value;
  const weight = document.getElementById('input_weight').value;

  const fromName = document.getElementById('input_from_name').value;
  const fromPhone = document.getElementById('input_from_phone').value;
  const fromAddr1 = document.getElementById('input_from_addr1').value;
  const fromCity = document.getElementById('input_from_city').value;
  const fromState = document.getElementById('input_from_state').value;
  const fromPin = document.getElementById('input_from_pin').value;

  const toName = document.getElementById('input_to_name').value;
  const toPhone = document.getElementById('input_to_phone').value;
  const toAddr1 = document.getElementById('input_to_addr1').value;
  const toCity = document.getElementById('input_to_city').value;
  const toState = document.getElementById('input_to_state').value;
  const toPin = document.getElementById('input_to_pin').value;

  const itemName = document.getElementById('input_item_name').value;

  // Update text fields on printable label
  document.getElementById('lbl_awb').textContent = awb;
  document.getElementById('lbl_order_id').textContent = orderId;
  document.getElementById('lbl_weight').textContent = weight;

  const badge = document.getElementById('lbl_payment_badge');
  if (paymentMode === 'COD') {
    badge.className = 'payment-badge payment-cod';
    badge.innerHTML = `COD: ₹<span id="lbl_cod_amount">${codAmount}</span>`;
  } else {
    badge.className = 'payment-badge payment-prepaid';
    badge.textContent = 'PREPAID';
  }

  document.getElementById('lbl_from_name').textContent = fromName;
  document.getElementById('lbl_from_phone').textContent = fromPhone;
  document.getElementById('lbl_from_address').textContent = fromAddr1;
  document.getElementById('lbl_from_city_state').textContent = `${fromCity}, ${fromState}`;
  document.getElementById('lbl_from_pincode').textContent = fromPin;

  document.getElementById('lbl_to_name').textContent = toName;
  document.getElementById('lbl_to_phone').textContent = toPhone;
  document.getElementById('lbl_to_address').textContent = toAddr1;
  document.getElementById('lbl_to_city_state').textContent = `${toCity}, ${toState}`;
  document.getElementById('lbl_to_pincode').textContent = toPin;

  document.getElementById('lbl_item_name').textContent = itemName;

  // Re-generate Barcode
  initBarcode();
}
</script>
{% endblock %}