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

{% block title %}Forward Pickup & Delivery — SFX API Hub{% endblock %}

{% block content %}
<div class="page-header">
  <h1 class="page-title">📦 Forward Pickup & Delivery Hub</h1>
  <p class="page-desc">Test seller pickups, warehouse fulfillment, AWB generation, order tracking, cancellations, and POD retrieval for Shadowfax Forward Logistics.</p>
</div>

<!-- Global Config Card -->
<div class="card" style="margin-bottom: 1.5rem;">
  <div class="card-title">
    <span>🌐 API Configuration & Environment Setup</span>
    <span class="badge badge-forward">Forward Logistics API</span>
  </div>
  <div style="display: grid; grid-template-columns: 1fr 2fr 1fr auto; gap: 1rem; align-items: end;">
    <div class="form-group" style="margin: 0;">
      <label class="form-label">Target Environment</label>
      <input type="hidden" id="cfg_env" value="production">
      <div style="padding: 0.7rem 0.95rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 0.6rem; color: #38bdf8; font-weight: 600; font-size: 0.92rem;">
        Production (dale.shadowfax.in)
      </div>
    </div>
    <div class="form-group" style="margin: 0;">
      <label class="form-label">Shadowfax Authorization API Token</label>
      <input type="text" id="cfg_token" class="form-control" value="7328f980a6eca01fedf37a63e39e44893481f856">
    </div>
    <div class="form-group" style="margin: 0;">
      <label class="form-label">Execution Mode</label>
      <select id="cfg_mock" class="form-select">
        <option value="false" selected>Live Upstream Call</option>
        <option value="true">Simulation Mode</option>
      </select>
    </div>
  </div>
</div>

<div class="grid-2">
  <!-- Left Column: Interactive Forms -->
  <div>
    <!-- Feature 1: Serviceability Check -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">1. Pincode Serviceability Check</div>
      <form id="form_serviceability" onsubmit="executeAction(event, 'serviceability')">
        <div class="form-group">
          <label class="form-label">Pincodes (Comma Separated)</label>
          <input type="text" name="pincodes" class="form-control" value="560077,110009">
        </div>
        <div class="form-group">
          <label class="form-label">Service Type</label>
          <select name="service" class="form-select">
            <option value="express" selected>Express Delivery</option>
            <option value="surface">Surface Delivery</option>
          </select>
        </div>
        <button type="submit" class="btn btn-primary">Check Serviceability</button>
      </form>
    </div>

    <!-- Feature 2: Generate AWB -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">2. Pre-allocate AWB Numbers</div>
      <form id="form_generate_awb" onsubmit="executeAction(event, 'generate_awb')">
        <div class="grid-2" style="gap: 0.75rem;">
          <div class="form-group">
            <label class="form-label">Client Code</label>
            <input type="text" name="client_code" class="form-control" value="ACME_RETAIL">
          </div>
          <div class="form-group">
            <label class="form-label">Count</label>
            <input type="number" name="count" class="form-control" value="1" min="1" max="100">
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Generate AWB</button>
      </form>
    </div>

    <!-- Feature 3: Create Marketplace Order -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">3. Create Marketplace Order (Seller Pickup)</div>
      <form id="form_create_mkt" onsubmit="executeRawAction(event, 'create_marketplace_order', 'payload_mkt')">
        <div class="form-group">
          <label class="form-label">Order Payload (JSON)</label>
          <textarea id="payload_mkt" name="payload" class="form-control" rows="12">{
  "order_type": "marketplace",
  "order_details": {
    "client_order_id": "ORD-MKT-2026-101",
    "actual_weight": 750.0,
    "product_value": 1499.0,
    "payment_mode": "COD",
    "cod_amount": 1499.0
  },
  "customer_details": {
    "name": "Ananya Sharma",
    "phone": "9876543210",
    "address_line_1": "Flat 402, Sunshine Apartments",
    "pincode": "560038",
    "city": "Bengaluru",
    "state": "Karnataka"
  },
  "pickup_details": {
    "name": "StyleHub Retail Store",
    "phone": "9123456789",
    "address_line_1": "Plot 12, Industrial Area Phase 2",
    "pincode": "560077",
    "city": "Bengaluru",
    "state": "Karnataka"
  },
  "rts_details": {
    "name": "StyleHub Returns Center",
    "phone": "9123456789",
    "address_line_1": "Plot 12, Industrial Area Phase 2",
    "pincode": "560077",
    "city": "Bengaluru",
    "state": "Karnataka"
  },
  "product_details": [
    {
      "sku_name": "Wireless Noise Cancelling Earbuds",
      "sku_code": "SKU-EAR-001",
      "price": 1499.0,
      "quantity": 1
    }
  ]
}</textarea>
        </div>
        <button type="submit" class="btn btn-primary">Create Marketplace Order</button>
      </form>
    </div>

    <!-- Feature 4: Create Warehouse Order -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">4. Create Warehouse Order (Hub Dispatch)</div>
      <form id="form_create_wh" onsubmit="executeRawAction(event, 'create_warehouse_order', 'payload_wh')">
        <div class="form-group">
          <label class="form-label">Warehouse Order Payload (JSON)</label>
          <textarea id="payload_wh" name="payload" class="form-control" rows="10">{
  "order_type": "warehouse",
  "order_details": {
    "client_order_id": "ORD-WH-2026-505",
    "actual_weight": 1200.0,
    "product_value": 3500.0,
    "payment_mode": "Prepaid",
    "cod_amount": 0.0
  },
  "customer_details": {
    "name": "Vikram Mehta",
    "phone": "9988776655",
    "address_line_1": "House 14, Civil Lines",
    "pincode": "110054",
    "city": "New Delhi",
    "state": "Delhi"
  },
  "rto_details": {
    "name": "Central Warehouse North",
    "phone": "9811002233",
    "address_line_1": "Warehouse Complex Hub 3",
    "pincode": "110042",
    "city": "New Delhi",
    "state": "Delhi"
  },
  "product_details": [
    {
      "sku_name": "Mechanical Keyboard RGB",
      "sku_code": "SKU-KB-102",
      "price": 3500.0,
      "quantity": 1
    }
  ]
}</textarea>
        </div>
        <button type="submit" class="btn btn-primary">Create Warehouse Order</button>
      </form>
    </div>
  </div>

  <!-- Right Column: Tracking, Utilities & Response Inspector -->
  <div>
    <!-- Response Inspector Card -->
    <div class="card" style="margin-bottom: 1.5rem; border-color: var(--accent-cyan);">
      <div class="card-title">
        <span>⚡ Live API Response & Inspector</span>
        <span id="res_status_badge" class="badge badge-success">Awaiting Request</span>
      </div>
      <div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; display: flex; justify-content: space-between;">
        <span id="res_time">Execution Time: - ms</span>
        <span id="res_code">HTTP Status: -</span>
      </div>
      <div id="response_inspector" class="json-viewer">// Select an action on the left to execute API call and inspect response payload...</div>
    </div>

    <!-- Feature 5: Track Single Order -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">5. Track Single Order V4</div>
      <form id="form_track_single" onsubmit="executeAction(event, 'track_single')">
        <div class="form-group">
          <label class="form-label">AWB Number</label>
          <input type="text" name="awb_number" class="form-control" value="SFX9928374102">
        </div>
        <button type="submit" class="btn btn-primary">Track Order</button>
      </form>
    </div>

    <!-- Feature 6: Bulk Track Orders -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">6. Track Bulk Orders V4</div>
      <form id="form_track_bulk" onsubmit="executeAction(event, 'track_bulk')">
        <div class="form-group">
          <label class="form-label">AWB Numbers (Comma Separated)</label>
          <input type="text" name="awb_numbers" class="form-control" value="SFX9928374102,SFX8817263541">
        </div>
        <button type="submit" class="btn btn-primary">Bulk Track</button>
      </form>
    </div>

    <!-- Feature 7: Cancel Order -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">7. Cancel Order</div>
      <form id="form_cancel" onsubmit="executeAction(event, 'cancel_order')">
        <div class="grid-2" style="gap: 0.75rem;">
          <div class="form-group">
            <label class="form-label">Client Order ID</label>
            <input type="text" name="client_order_id" class="form-control" value="ORD-MKT-2026-101">
          </div>
          <div class="form-group">
            <label class="form-label">AWB Number</label>
            <input type="text" name="awb_number" class="form-control" value="SFX9928374102">
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Cancellation Reason</label>
          <input type="text" name="reason" class="form-control" value="Customer requested cancellation">
        </div>
        <button type="submit" class="btn btn-danger">Cancel Order</button>
      </form>
    </div>

    <!-- Feature 8: Dynamic QR Code -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">8. Generate Dynamic UPI QR Code V2</div>
      <form id="form_generate_qr" onsubmit="executeAction(event, 'generate_qr')">
        <div class="grid-2" style="gap: 0.75rem;">
          <div class="form-group">
            <label class="form-label">AWB Number</label>
            <input type="text" name="awb_number" class="form-control" value="SFX9928374102">
          </div>
          <div class="form-group">
            <label class="form-label">COD Amount (INR)</label>
            <input type="number" step="0.01" name="cod_amount" class="form-control" value="1499.00">
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Generate QR Code</button>
      </form>
    </div>

    <!-- Feature 9: Proof of Delivery (POD) -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">9. Get POD Details</div>
      <form id="form_pod" onsubmit="executeAction(event, 'get_pod')">
        <div class="form-group">
          <label class="form-label">AWB Number</label>
          <input type="text" name="awb_number" class="form-control" value="SFX9928374102">
        </div>
        <button type="submit" class="btn btn-secondary">Fetch POD Signature/Photos</button>
      </form>
    </div>

    <!-- Feature 10: Print Shadowfax Shipping Label -->
    <div class="card" style="margin-bottom: 1.5rem; border-color: var(--accent-green);">
      <div class="card-title">
        <span>10. Print Shipping Label (4" × 6" Standard)</span>
        <span class="badge badge-success">Thermal Ready</span>
      </div>
      <form method="GET" action="{% url 'print_label_view' %}" target="_blank">
        <div class="grid-2" style="gap: 0.75rem;">
          <div class="form-group">
            <label class="form-label">AWB Number</label>
            <input type="text" name="awb_number" class="form-control" value="SFX9928374102">
          </div>
          <div class="form-group">
            <label class="form-label">Order ID</label>
            <input type="text" name="client_order_id" class="form-control" value="ORD-MKT-2026-101">
          </div>
        </div>
        <button type="submit" class="btn btn-primary" style="width: 100%;">
          🏷️ Open Label Generator & Print
        </button>
      </form>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_scripts %}
<script>


function executeAction(e, actionType) {
  e.preventDefault();
  const form = e.target;
  const formData = new FormData(form);
  formData.append('action_type', actionType);
  formData.append('environment', document.getElementById('cfg_env').value);
  formData.append('api_token', document.getElementById('cfg_token').value);
  formData.append('use_mock', document.getElementById('cfg_mock').value);

  sendApiRequest(formData);
}

function executeRawAction(e, actionType, textareaId) {
  e.preventDefault();
  const formData = new FormData();
  formData.append('action_type', actionType);
  formData.append('payload', document.getElementById(textareaId).value);
  formData.append('environment', document.getElementById('cfg_env').value);
  formData.append('api_token', document.getElementById('cfg_token').value);
  formData.append('use_mock', document.getElementById('cfg_mock').value);

  sendApiRequest(formData);
}

function sendApiRequest(formData) {
  const inspector = document.getElementById('response_inspector');
  inspector.textContent = "// Executing API request...";

  fetch("{% url 'forward_view' %}", {
    method: 'POST',
    body: formData,
    headers: {
      'X-CSRFToken': '{{ csrf_token }}'
    }
  })
  .then(resp => resp.json())
  .then(data => {
    document.getElementById('res_time').textContent = `Execution Time: ${data.execution_time_ms || 0} ms`;
    document.getElementById('res_code').textContent = `HTTP Status: ${data.status_code || 200}`;
    const badge = document.getElementById('res_status_badge');
    badge.textContent = data.status || 'SUCCESS';
    badge.className = data.status === 'SUCCESS' ? 'badge badge-success' : 'badge badge-error';

    try {
      const formatted = typeof data.response === 'string' ? JSON.stringify(JSON.parse(data.response), null, 2) : JSON.stringify(data.response, null, 2);
      inspector.textContent = formatted;
    } catch(err) {
      inspector.textContent = data.response;
    }
  })
  .catch(err => {
    inspector.textContent = `Client Network Error: ${err}`;
  });
}
</script>
{% endblock %}