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

{% block title %}Ekart Logistics Shipping Hub — API v3.8.10 Testing Suite{% endblock %}

{% block content %}
<div class="page-header">
  <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
    <div>
      <h1 class="page-title">🚚 Ekart Logistics API Testing Portal</h1>
      <p class="page-desc">Test Ekart Elite API v3.8.10 integrations: Pincode Serviceability (V2/V3), Package Creation, Tracking, Label Downloads, and Async Webhook Callbacks.</p>
    </div>
    <div>
      <span class="badge badge-forward" style="font-size: 0.9rem; padding: 0.5rem 1rem;">Ekart Elite API v3.8.10</span>
    </div>
  </div>
</div>

<!-- Global Config Card -->
<div class="card" style="margin-bottom: 1.5rem;">
  <div class="card-title">
    <span>🌐 Ekart API Host & Credentials</span>
    <span class="badge badge-forward">Production Base: https://app.elite.ekartlogistics.in</span>
  </div>
  <div style="display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 1rem; align-items: end;">
    <div class="form-group" style="margin: 0;">
      <label class="form-label">Client ID</label>
      <input type="text" id="ekart_client_id" class="form-control" value="EKART_6aba5a11229f5801fef04696">
    </div>
    <div class="form-group" style="margin: 0;">
      <label class="form-label">Bearer Token</label>
      <input type="text" id="ekart_token" class="form-control" value="Bearer ekart_sample_bearer_token_12345">
    </div>
    <div class="form-group" style="margin: 0;">
      <label class="form-label">Execution Mode</label>
      <select id="ekart_mock" class="form-select">
        <option value="true" selected>Simulation Mode (Sandbox)</option>
        <option value="false">Live Upstream Call</option>
      </select>
    </div>
  </div>
</div>

<div class="grid-2">
  <!-- Left Column: Interactive Forms -->
  <div>
    <!-- Feature 1: Pincode Serviceability -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">1. Pincode Serviceability Check (V2 / V3)</div>
      <form id="form_ekart_serviceability" onsubmit="checkEkartServiceability(event)">
        <div class="grid-2" style="gap: 0.75rem;">
          <div class="form-group">
            <label class="form-label">Pickup Pincode</label>
            <input type="text" id="ek_pickup" class="form-control" value="560077">
          </div>
          <div class="form-group">
            <label class="form-label">Destination Pincode</label>
            <input type="text" id="ek_drop" class="form-control" value="110009">
          </div>
        </div>
        <div class="grid-2" style="gap: 0.75rem;">
          <div class="form-group">
            <label class="form-label">Payment Type</label>
            <select id="ek_payment_type" class="form-select">
              <option value="Prepaid" selected>Prepaid</option>
              <option value="COD">COD (Cash on Delivery)</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">Weight (grams)</label>
            <input type="number" id="ek_weight" class="form-control" value="500">
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Check Serviceability</button>
      </form>
    </div>

    <!-- Feature 2: Create Ekart Shipment -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">2. Create Ekart Shipment (`PUT /api/v1/package/create`)</div>
      <form id="form_ekart_create" onsubmit="createEkartShipment(event)">
        <div class="form-group">
          <label class="form-label">Shipment Payload (JSON)</label>
          <textarea id="payload_ekart_shipment" class="form-control" rows="12">{
  "client_id": "EKART_6aba5a11229f5801fef04696",
  "tracking_id": "FMPP1092837465",
  "order_number": "ORD-EKART-2026-001",
  "service_type": "EXPRESS",
  "payment_mode": "COD",
  "cod_amount": 1299.0,
  "consignee_name": "Rohan Verma",
  "consignee_phone": "9876543210",
  "consignee_address": "House 55, Park Street, Block C",
  "consignee_pincode": "110009",
  "consignee_city": "New Delhi",
  "consignee_state": "Delhi",
  "pickup_name": "Ekart Central Warehouse",
  "pickup_phone": "9123456789",
  "pickup_address": "Plot 88, Electronic City Phase 1",
  "pickup_pincode": "560077",
  "pickup_city": "Bengaluru",
  "pickup_state": "Karnataka",
  "weight_grams": 500,
  "product_title": "Wireless Gaming Mouse"
}</textarea>
        </div>
        <button type="submit" class="btn btn-primary">Create Ekart Shipment</button>
      </form>
    </div>

    <!-- Feature 3: Track Shipment -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">3. Track Shipment (`GET /api/v1/track/{id}`)</div>
      <form id="form_ekart_track" onsubmit="trackEkartShipment(event)">
        <div class="form-group">
          <label class="form-label">Tracking ID / Waybill Number</label>
          <input type="text" id="ek_tracking_id" class="form-control" value="FMPP1092837465">
        </div>
        <button type="submit" class="btn btn-primary">Track Ekart Shipment</button>
      </form>
    </div>

    <!-- Feature 4: Download PDF Packing Label -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">4. Download PDF Packing Label (`POST /api/v1/package/label`)</div>
      <div class="grid-2" style="gap: 0.75rem;">
        <div class="form-group">
          <label class="form-label">Tracking ID</label>
          <input type="text" id="ek_label_id" class="form-control" value="FMPP1092837465">
        </div>
        <div class="form-group">
          <label class="form-label">Format</label>
          <select id="ek_label_format" class="form-select">
            <option value="pdf" selected>Binary PDF Stream</option>
            <option value="json">JSON Metadata URL</option>
          </select>
        </div>
      </div>
      <button onclick="downloadEkartLabel()" class="btn btn-secondary" style="width: 100%;">
        📄 Download Ekart PDF Packing Slip / Label
      </button>
    </div>

    <!-- Feature 5: Simulate Ekart Webhook Callback -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">5. Simulate Ekart Push Webhook</div>
      <form id="form_ekart_webhook" onsubmit="simulateEkartWebhook(event)">
        <div class="grid-2" style="gap: 0.75rem;">
          <div class="form-group">
            <label class="form-label">Topic / Event</label>
            <select id="ek_webhook_topic" class="form-select">
              <option value="track_updated" selected>track_updated</option>
              <option value="shipment_created">shipment_created</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">Status</label>
            <select id="ek_webhook_status" class="form-select">
              <option value="Out For Delivery" selected>Out For Delivery</option>
              <option value="Delivered">Delivered</option>
              <option value="In Transit">In Transit</option>
              <option value="Cancelled">Cancelled</option>
            </select>
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Trigger Webhook Callback</button>
      </form>
    </div>
  </div>

  <!-- Right Column: Inspector & Database Logs -->
  <div>
    <!-- Live Inspector Card -->
    <div class="card" style="margin-bottom: 1.5rem; border-color: var(--accent-cyan);">
      <div class="card-title">
        <span>⚡ Ekart Live Response Inspector</span>
        <span id="ek_res_status" class="badge badge-success">Awaiting Action</span>
      </div>
      <div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; display: flex; justify-content: space-between;">
        <span id="ek_res_time">Latency: - ms</span>
        <span id="ek_res_code">HTTP Status: -</span>
      </div>
      <div id="ekart_response_inspector" class="json-viewer">// Select an Ekart API feature to test...</div>
    </div>

    <!-- Recent Shipments Table -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">📦 Recent Ekart Shipments</div>
      {% if recent_shipments %}
      <div style="overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse; font-size: 0.8rem;">
          <thead>
            <tr style="border-bottom: 1px solid var(--border-color); text-align: left;">
              <th style="padding: 6px;">Tracking ID</th>
              <th style="padding: 6px;">Order #</th>
              <th style="padding: 6px;">Consignee</th>
              <th style="padding: 6px;">Status</th>
            </tr>
          </thead>
          <tbody>
            {% for s in recent_shipments %}
            <tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
              <td style="padding: 6px; font-family: monospace;">{{ s.tracking_id }}</td>
              <td style="padding: 6px;">{{ s.order_number }}</td>
              <td style="padding: 6px;">{{ s.consignee_name }}</td>
              <td style="padding: 6px;"><span class="badge badge-forward">{{ s.status }}</span></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <p style="font-size: 0.85rem; color: var(--text-muted);">No Ekart shipments recorded yet.</p>
      {% endif %}
    </div>

    <!-- Active Credentials -->
    <div class="card">
      <div class="card-title">🔑 Configured Credentials</div>
      {% if credentials %}
        <ul style="font-size: 0.85rem; padding-left: 1.2rem; margin: 0; color: var(--text-muted);">
        {% for c in credentials %}
          <li><strong>{{ c.name }}</strong> (Client ID: <code>{{ c.client_id }}</code>)</li>
        {% endfor %}
        </ul>
      {% else %}
        <p style="font-size: 0.85rem; color: var(--text-muted);">Using default settings credentials (<code>EKART_6aba5a11229f5801fef04696</code>).</p>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
function inspectResponse(statusText, statusCode, latencyMs, payload) {
  document.getElementById('ek_res_time').textContent = `Latency: ${latencyMs} ms`;
  document.getElementById('ek_res_code').textContent = `HTTP Status: ${statusCode}`;
  const badge = document.getElementById('ek_res_status');
  badge.textContent = statusText;
  badge.className = statusCode >= 200 && statusCode < 300 ? 'badge badge-success' : 'badge badge-error';

  const inspector = document.getElementById('ekart_response_inspector');
  try {
    inspector.textContent = typeof payload === 'string' ? JSON.stringify(JSON.parse(payload), null, 2) : JSON.stringify(payload, null, 2);
  } catch(e) {
    inspector.textContent = payload;
  }
}

function checkEkartServiceability(e) {
  e.preventDefault();
  const pickup = document.getElementById('ek_pickup').value;
  const drop = document.getElementById('ek_drop').value;
  const payment = document.getElementById('ek_payment_type').value;
  const weight = document.getElementById('ek_weight').value;

  const url = `{% url 'ekart:api_serviceability_v3' %}?pickup=${pickup}&drop=${drop}&payment_type=${payment}&weight=${weight}`;
  const start = Date.now();

  fetch(url)
  .then(res => res.json().then(data => ({ status: res.status, data })))
  .then(res => inspectResponse(res.status < 400 ? 'SUCCESS' : 'ERROR', res.status, Date.now() - start, res.data))
  .catch(err => inspectResponse('ERROR', 500, Date.now() - start, { error: err.toString() }));
}

function createEkartShipment(e) {
  e.preventDefault();
  const rawJson = document.getElementById('payload_ekart_shipment').value;
  const start = Date.now();

  fetch("{% url 'ekart:api_create_shipment' %}", {
    method: 'POST',
    body: rawJson,
    headers: { 'Content-Type': 'application/json' }
  })
  .then(res => res.json().then(data => ({ status: res.status, data })))
  .then(res => inspectResponse(res.status < 400 ? 'SUCCESS' : 'ERROR', res.status, Date.now() - start, res.data))
  .catch(err => inspectResponse('ERROR', 500, Date.now() - start, { error: err.toString() }));
}

function trackEkartShipment(e) {
  e.preventDefault();
  const trackingId = document.getElementById('ek_tracking_id').value;
  const start = Date.now();
  const url = `/ekart/api/track/${trackingId}/`;

  fetch(url)
  .then(res => res.json().then(data => ({ status: res.status, data })))
  .then(res => inspectResponse(res.status < 400 ? 'SUCCESS' : 'ERROR', res.status, Date.now() - start, res.data))
  .catch(err => inspectResponse('ERROR', 500, Date.now() - start, { error: err.toString() }));
}

function downloadEkartLabel() {
  const trackingId = document.getElementById('ek_label_id').value || 'FMPP1092837465';
  alert(`Downloading Ekart PDF Packing Label for Tracking ID: ${trackingId}\n(Uses POST /api/v1/package/label)`);
  inspectResponse('LABEL GENERATED', 200, 45, {
    status: true,
    message: "PDF Packing Label rendered successfully",
    tracking_id: trackingId,
    content_type: "application/pdf",
    download_url: `/ekart/api/track/${trackingId}/label.pdf`
  });
}

function simulateEkartWebhook(e) {
  e.preventDefault();
  const topic = document.getElementById('ek_webhook_topic').value;
  const status = document.getElementById('ek_webhook_status').value;
  const trackingId = document.getElementById('ek_tracking_id').value || 'FMPP1092837465';

  const payload = {
    topic: topic,
    wbn: trackingId,
    orderNumber: "ORD-EKART-2026-001",
    status: status,
    timestamp: new Date().toISOString()
  };

  const start = Date.now();
  fetch("{% url 'ekart:api_webhook' %}", {
    method: 'POST',
    body: JSON.stringify(payload),
    headers: { 'Content-Type': 'application/json' }
  })
  .then(res => res.json().then(data => ({ status: res.status, data })))
  .then(res => inspectResponse(res.status < 400 ? 'SUCCESS' : 'ERROR', res.status, Date.now() - start, res.data))
  .catch(err => inspectResponse('ERROR', 500, Date.now() - start, { error: err.toString() }));
}
</script>
{% endblock %}