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

{% block title %}Reverse Pickup (QC) — SFX API Hub{% endblock %}

{% block content %}
<div class="page-header">
  <h1 class="page-title">🔄 Reverse Pickup & Doorstep Quality Check (QC) Hub</h1>
  <p class="page-desc">Test customer doorstep return pickups, Quality Check (QC) enforcement rules, brand/serial validation, reverse tracking, and warehouse return handovers.</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-reverse">Reverse 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: Reverse Serviceability Check -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">1. Reverse Pincode Serviceability Check</div>
      <form id="form_reverse_serviceability" onsubmit="executeAction(event, 'reverse_serviceability')">
        <div class="form-group">
          <label class="form-label">Customer Pickup Pincodes (Comma Separated)</label>
          <input type="text" name="pincodes" class="form-control" value="560077,110009">
        </div>
        <button type="submit" class="btn btn-primary">Check Reverse Serviceability</button>
      </form>
    </div>

    <!-- Feature 2: Generate Reverse AWB -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">2. Pre-allocate Reverse AWB Numbers</div>
      <form id="form_generate_reverse_awb" onsubmit="executeAction(event, 'generate_reverse_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 Reverse AWB</button>
      </form>
    </div>

    <!-- Feature 3: Create Reverse Pickup Request -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">3. Create Reverse Pickup Request (Doorstep QC)</div>
      <form id="form_create_reverse" onsubmit="executeRawAction(event, 'create_reverse_request', 'payload_reverse')">
        <div class="form-group">
          <label class="form-label">Reverse Request Payload with QC Rules (JSON)</label>
          <textarea id="payload_reverse" name="payload" class="form-control" rows="14">{
  "client_request_id": "REV-ORD-2026-8801",
  "awb_number": "SFX-REV-99182736",
  "actual_weight": 500.0,
  "product_value": 2999.0,
  "pickup_details": {
    "name": "Kavita Reddy",
    "phone": "9876501234",
    "address_line_1": "Apartment 102, Green Glen Layout",
    "address_line_2": "Bellandur",
    "pincode": "560103",
    "city": "Bengaluru",
    "state": "Karnataka"
  },
  "return_details": {
    "name": "Acme Central Returns Warehouse",
    "phone": "9811004455",
    "address_line_1": "Logistics Park Warehouse 4B",
    "pincode": "560077",
    "city": "Bengaluru",
    "state": "Karnataka"
  },
  "qc_details": {
    "qc_check": true,
    "brand_name": "SoundCore",
    "item_name": "Over-Ear Headphones Black",
    "serial_number": "SN-9988112233",
    "image_required": true
  }
}</textarea>
        </div>
        <button type="submit" class="btn btn-primary">Create Reverse Pickup Request</button>
      </form>
    </div>

    <!-- Feature 4: Update QC Flag -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">4. Update QC Flags & Serial Number</div>
      <form id="form_update_qc" onsubmit="executeAction(event, 'update_qc')">
        <div class="form-group">
          <label class="form-label">Client Request ID</label>
          <input type="text" name="client_request_id" class="form-control" value="REV-ORD-2026-8801">
        </div>
        <div class="grid-2" style="gap: 0.75rem;">
          <div class="form-group">
            <label class="form-label">Enforce Doorstep QC?</label>
            <select name="qc_check" class="form-select">
              <option value="true" selected>True (Mandatory QC)</option>
              <option value="false">False (Bypass QC)</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">Updated Serial / IMEI</label>
            <input type="text" name="serial_number" class="form-control" value="SN-9988112244">
          </div>
        </div>
        <button type="submit" class="btn btn-secondary">Update QC Flags</button>
      </form>
    </div>
  </div>

  <!-- Right Column: Reverse Tracking & Inspector -->
  <div>
    <!-- Response Inspector Card -->
    <div class="card" style="margin-bottom: 1.5rem; border-color: var(--accent-pink);">
      <div class="card-title">
        <span>⚡ Live Reverse 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 a reverse action on the left to test API call and inspect response payload...</div>
    </div>

    <!-- Feature 5: Track Single Reverse Pickup -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">5. Track Single Reverse Pickup V4</div>
      <form id="form_track_reverse_single" onsubmit="executeAction(event, 'track_reverse_single')">
        <div class="form-group">
          <label class="form-label">Client Request ID</label>
          <input type="text" name="client_request_id" class="form-control" value="REV-ORD-2026-8801">
        </div>
        <button type="submit" class="btn btn-primary">Track Reverse Request</button>
      </form>
    </div>

    <!-- Feature 6: Bulk Track Reverse Pickups -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">6. Bulk Track Reverse Pickups V4</div>
      <form id="form_track_reverse_bulk" onsubmit="executeAction(event, 'track_reverse_bulk')">
        <div class="form-group">
          <label class="form-label">Client Request IDs (Comma Separated)</label>
          <input type="text" name="client_request_ids" class="form-control" value="REV-ORD-2026-8801,REV-ORD-2026-8802">
        </div>
        <button type="submit" class="btn btn-primary">Bulk Track Reverse Requests</button>
      </form>
    </div>

    <!-- Feature 7: Cancel Reverse Request -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">7. Cancel Reverse Pickup Request</div>
      <form id="form_cancel_reverse" onsubmit="executeAction(event, 'cancel_reverse')">
        <div class="form-group">
          <label class="form-label">Client Request ID</label>
          <input type="text" name="client_request_id" class="form-control" value="REV-ORD-2026-8801">
        </div>
        <div class="form-group">
          <label class="form-label">Cancellation Reason</label>
          <input type="text" name="reason" class="form-control" value="Customer withdrew return request">
        </div>
        <button type="submit" class="btn btn-danger">Cancel Reverse Pickup</button>
      </form>
    </div>

    <!-- Feature 8: Proof of Pickup (POP) -->
    <div class="card" style="margin-bottom: 1.5rem;">
      <div class="card-title">8. Get Proof of Pickup (POP) & QC Photos</div>
      <form id="form_reverse_pod" onsubmit="executeAction(event, 'get_reverse_pod')">
        <div class="form-group">
          <label class="form-label">Client Request ID</label>
          <input type="text" name="client_request_id" class="form-control" value="REV-ORD-2026-8801">
        </div>
        <button type="submit" class="btn btn-secondary">Fetch POP & Doorstep QC Photos</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 Reverse API request...";

  fetch("{% url 'reverse_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 %}