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

{% block title %}Multi-Carrier Pincode & Route Checker — Shadowfax vs Delhivery vs Ekart{% endblock %}

{% block extra_head %}
<style>
  .mode-tab-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
  }
  .mode-tab-btn {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.6rem 1.4rem;
    border-radius: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .mode-tab-btn:hover {
    color: #fff;
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.4);
  }
  .mode-tab-btn.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.3), rgba(99, 102, 241, 0.3));
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 15px -3px rgba(14, 165, 233, 0.3);
  }
  .carrier-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .carrier-card:hover {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 12px 28px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  }
  .carrier-card.recommended {
    border-color: rgba(16, 185, 129, 0.7);
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.1) 0%, rgba(15, 23, 42, 0.85) 100%);
    box-shadow: 0 10px 30px -5px rgba(16, 185, 129, 0.2);
  }
  .carrier-card.recommended::before {
    content: "⭐ LOWEST ESTIMATED CHARGE";
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.85rem;
    border-bottom-left-radius: 0.7rem;
  }
  .feature-box {
    background: rgba(10, 15, 29, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-top: 0.85rem;
  }
  .feature-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .type-tag {
    display: inline-block;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #bae6fd;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    margin-right: 0.35rem;
    margin-bottom: 0.35rem;
  }
  .price-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
  }
  .price-amount {
    font-size: 1.6rem;
    font-weight: 900;
    color: #34d399;
    letter-spacing: -0.02em;
  }
  .preset-chip {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 0.35rem 0.8rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .preset-chip:hover {
    color: #fff;
    background: rgba(56, 189, 248, 0.2);
    border-color: rgba(56, 189, 248, 0.5);
    transform: translateY(-1px);
  }
  .verdict-banner {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(99, 102, 241, 0.15));
    border: 1px solid rgba(6, 182, 212, 0.4);
    border-radius: 1rem;
    padding: 1.4rem 1.8rem;
    margin-bottom: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s ease-in-out infinite;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>
{% 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">⚖️ Multi-Carrier Route & Serviceability Checker</h1>
      <p class="page-desc">Enter any pincode to instantly check <strong>City & Pincode, First-Mile (Pickup Hub) availability, Last-Mile (Delivery) availability, Delivery types, and Estimated charge</strong> across all three carriers.</p>
    </div>
    <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
      <span class="badge badge-forward">Shadowfax SFX v1/v3</span>
      <span class="badge" style="background: rgba(245, 158, 11, 0.18); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.35);">Delhivery 18.7K Database</span>
      <span class="badge badge-webhook">Ekart Elite v3</span>
    </div>
  </div>
</div>

<!-- Mode Tab Switcher -->
<div class="mode-tab-bar">
  <button type="button" class="mode-tab-btn active" id="tabRouteMode" onclick="switchMode('route')">
    <span>🛣️</span> From (Seller) → To (Customer) Route Evaluation
  </button>
  <button type="button" class="mode-tab-btn" id="tabSingleMode" onclick="switchMode('single')">
    <span>📍</span> Single Pincode Logistics Capabilities
  </button>
  <button type="button" class="mode-tab-btn" id="tabPickupMode" onclick="switchMode('pickup')">
    <span>📅</span> Schedule Courier Pickup
  </button>
</div>

<!-- ========================================== -->
<!-- FORM 1: ROUTE CHECKER MODE FORM (ORIGIN-DROP) [PRIMARY] -->
<!-- ========================================== -->
<div class="card" id="cardRouteMode" style="margin-bottom: 1.75rem;">
  <div class="card-title">
    <span>🛣️ Check Route Capabilities Across All 3 Carriers</span>
    <span style="font-size: 0.8rem; font-weight: normal; color: var(--text-muted);">First-Mile (Seller Pickup) + Last-Mile (Customer Delivery) Live API Evaluation</span>
  </div>

  <form id="routeForm" onsubmit="handleRouteSubmit(event)">
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; margin-bottom: 1.2rem;">
      <!-- Pickup Pincode (First Mile / Seller) -->
      <div class="form-group" style="margin: 0;">
        <label class="form-label" style="display: flex; justify-content: space-between;">
          <span>🛫 From Pincode (Seller Pickup)</span>
          <span id="routePickupHint" style="color: var(--accent-cyan); font-weight: 600; text-transform: none;"></span>
        </label>
        <input type="text" id="route_pickup" class="form-control" placeholder="e.g. 641301" value="641301" maxlength="6" oninput="updateRouteLocationHints()" style="font-size: 1.05rem; font-weight: 700; letter-spacing: 0.05em;" required>
      </div>

      <!-- Drop Pincode (Last Mile / Customer) -->
      <div class="form-group" style="margin: 0;">
        <label class="form-label" style="display: flex; justify-content: space-between;">
          <span>🛬 To Pincode (Customer Delivery)</span>
          <span id="routeDropHint" style="color: var(--accent-cyan); font-weight: 600; text-transform: none;"></span>
        </label>
        <input type="text" id="route_drop" class="form-control" placeholder="e.g. 600059" value="600059" maxlength="6" oninput="updateRouteLocationHints()" style="font-size: 1.05rem; font-weight: 700; letter-spacing: 0.05em;" required>
      </div>

      <!-- Weight -->
      <div class="form-group" style="margin: 0;">
        <label class="form-label">⚖️ Parcel Weight (Grams) <span style="color: #fb7185;">*</span></label>
        <input type="number" id="route_weight" class="form-control" placeholder="e.g. 154, 500, 1000" step="any" min="0.01" required>
      </div>

      <!-- Payment Type -->
      <div class="form-group" style="margin: 0;">
        <label class="form-label">💳 Payment Method</label>
        <select id="route_payment" class="form-select">
          <option value="Prepaid" selected>Prepaid (Standard)</option>
          <option value="COD">COD (Cash on Delivery)</option>
        </select>
      </div>

      <!-- Execution Mode -->
      <div class="form-group" style="margin: 0;">
        <label class="form-label">⚙️ Execution Mode</label>
        <select id="route_mode_toggle" class="form-select">
          <option value="false" selected>Live Upstream Carrier APIs</option>
          <option value="true">Offline Sandbox Simulation</option>
        </select>
      </div>
    </div>

    <!-- Quick Route Chips -->
    <div style="margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;">
      <span style="font-size: 0.8rem; color: var(--text-muted); font-weight: 600;">⚡ Quick Route Presets:</span>
      <button type="button" class="preset-chip" onclick="applyRoutePreset('641301', '600059', 'Prepaid', 1000)">Mettupalayam (641301) → Tambaram (600059)</button>
      <button type="button" class="preset-chip" onclick="applyRoutePreset('641001', '600059', 'Prepaid', 1000)">Coimbatore (641001) → Tambaram (600059)</button>
      <button type="button" class="preset-chip" onclick="applyRoutePreset('560077', '110009', 'Prepaid', 1000)">Bengaluru (560077) → Delhi (110009)</button>
      <button type="button" class="preset-chip" onclick="applyRoutePreset('600001', '400001', 'COD', 1000)">Chennai (600001) → Mumbai (400001)</button>
      <button type="button" class="preset-chip" onclick="applyRoutePreset('560077', '641301', 'Prepaid', 1000)">Bengaluru (560077) → Mettupalayam (641301)</button>
    </div>

    <div style="display: flex; justify-content: flex-end; margin-top: 1rem;">
      <button type="submit" id="btnRouteSubmit" class="btn btn-primary" style="padding: 0.85rem 2.2rem; font-size: 1rem;">
        <span id="btnRouteIcon">🔍</span>
        <span id="btnRouteText">Evaluate Route (Seller Pickup ➔ Customer Delivery)</span>
      </button>
    </div>
  </form>
</div>

<!-- ========================================== -->
<!-- FORM 2: SINGLE PINCODE MODE FORM [ALTERNATE] -->
<!-- ========================================== -->
<div class="card" id="cardSingleMode" style="display: none; margin-bottom: 1.75rem;">
  <div class="card-title">
    <span>📍 Check Pincode Logistics Capabilities Across All 3 Carriers</span>
    <span style="font-size: 0.8rem; font-weight: normal; color: var(--text-muted);">Real-time Live API Evaluation</span>
  </div>

  <form id="singlePincodeForm" onsubmit="handleSinglePincodeSubmit(event)">
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; margin-bottom: 1.2rem;">
      <!-- Pincode Input -->
      <div class="form-group" style="margin: 0;">
        <label class="form-label" style="display: flex; justify-content: space-between;">
          <span>📮 Pincode (6 Digits)</span>
          <span id="singleLocationHint" style="color: var(--accent-cyan); font-weight: 600; text-transform: none;"></span>
        </label>
        <input type="text" id="single_pincode" class="form-control" placeholder="e.g. 560077" value="560077" maxlength="6" oninput="updateSingleLocationHint()" style="font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em;">
      </div>

      <!-- Weight Input -->
      <div class="form-group" style="margin: 0;">
        <label class="form-label">⚖️ Package Weight (Grams) <span style="color: #fb7185;">*</span></label>
        <input type="number" id="single_weight" class="form-control" placeholder="e.g. 154, 500, 1000" step="any" min="0.01" required>
      </div>

      <!-- Offline Simulation Toggle -->
      <div class="form-group" style="margin: 0;">
        <label class="form-label">⚙️ Execution Mode</label>
        <select id="single_mode_toggle" class="form-select">
          <option value="false" selected>Live Upstream Carrier APIs</option>
          <option value="true">Offline Sandbox Simulation</option>
        </select>
      </div>
    </div>

    <!-- Quick Preset Pincode Chips -->
    <div style="margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;">
      <span style="font-size: 0.8rem; color: var(--text-muted); font-weight: 600;">⚡ Quick Presets:</span>
      <button type="button" class="preset-chip" onclick="applySinglePreset('560077')">Bengaluru (560077)</button>
      <button type="button" class="preset-chip" onclick="applySinglePreset('600001')">Chennai (600001)</button>
      <button type="button" class="preset-chip" onclick="applySinglePreset('110001')">New Delhi (110001)</button>
      <button type="button" class="preset-chip" onclick="applySinglePreset('400001')">Mumbai (400001)</button>
      <button type="button" class="preset-chip" onclick="applySinglePreset('500001')">Hyderabad (500001)</button>
      <button type="button" class="preset-chip" onclick="applySinglePreset('700001')">Kolkata (700001)</button>
    </div>

    <div style="display: flex; justify-content: flex-end; margin-top: 1rem;">
      <button type="submit" id="btnSingleSubmit" class="btn btn-primary" style="padding: 0.85rem 2.2rem; font-size: 1rem;">
        <span id="btnSingleIcon">🔍</span>
        <span id="btnSingleText">Check Pincode Across All 3 Carriers</span>
      </button>
    </div>
  </form>
</div>

<!-- ========================================== -->
<!-- FORM 3: SCHEDULE PICKUP MODE FORM           -->
<!-- ========================================== -->
<div class="card" id="cardPickupMode" style="display: none; margin-bottom: 1.75rem;">
  <div class="card-title">
    <span>📅 Schedule & Verify Courier Pickups Across Carriers</span>
    <span style="font-size: 0.8rem; font-weight: normal; color: var(--text-muted);">Check Active Pickup Schedule with Date & Time for Given Tracking, or Schedule a New Pickup Window</span>
  </div>

  <!-- SECTION 3A: LIVE TRACKING PICKUP SCHEDULE LOOKUP -->
  <div style="background: rgba(30, 41, 59, 0.65); border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 0.85rem; padding: 1.25rem; margin-bottom: 1.75rem;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.85rem;">
      <div style="font-weight: 700; color: #fff; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem;">
        <span>🔍</span> Check Pickup Schedule by Tracking / AWB
      </div>
      <span class="badge" style="background: rgba(14, 165, 233, 0.15); color: #38bdf8; border: 1px solid rgba(14, 165, 233, 0.3);">Real-Time Carrier API Verification</span>
    </div>
    
    <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
      <input type="text" id="check_schedule_tracking" class="form-control" placeholder="Enter Waybill / Tracking ID (e.g. 69873010000232)" value="69873010000232" style="flex: 1; min-width: 260px; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em;">
      <button type="button" id="btnCheckSchedule" class="btn btn-primary" onclick="handleCheckScheduleSubmit()" style="padding: 0.75rem 2rem; font-weight: 700;">
        <span id="btnCheckScheduleIcon">🔎</span>
        <span id="btnCheckScheduleText">Check Pickup Schedule</span>
      </button>
    </div>

    <!-- Live Pickup Schedule Result Card Container -->
    <div id="checkScheduleResultContainer" style="display: none; margin-top: 1.25rem;"></div>
  </div>

  <div style="border-top: 1px dashed var(--border-color); margin-bottom: 1.5rem; padding-top: 0.75rem; font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;">
    <span>⚡ Or Schedule / Reschedule New Pickup Window</span>
  </div>

  <form id="pickupScheduleForm" onsubmit="handlePickupSubmit(event)">
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin-bottom: 1.2rem;">
      <!-- Carrier Selector -->
      <div class="form-group" style="margin: 0;">
        <label class="form-label">🚚 Assigned Carrier</label>
        <select id="pickup_carrier" class="form-select" onchange="onPickupCarrierChange()" style="font-size: 1rem; font-weight: 700;">
          <option value="DELHIVERY" selected>Delhivery Logistics</option>
          <option value="EKART">Ekart Logistics</option>
          <option value="SHADOWFAX">Shadowfax Logistics</option>
        </select>
      </div>

      <!-- Pickup Date -->
      <div class="form-group" style="margin: 0;">
        <label class="form-label">
          <span>📅 Pickup Date</span>
          <span id="pickupDateNotice" style="color: var(--accent-cyan); font-weight: 600; text-transform: none; margin-left: 0.5rem;"></span>
        </label>
        <input type="date" id="pickup_date" class="form-control" style="font-size: 1rem; font-weight: 700;" required>
      </div>

      <!-- Time Slot (Dynamically Enabled/Disabled) -->
      <div class="form-group" style="margin: 0;">
        <label class="form-label">
          <span>⏰ Arrival Slot</span>
          <span id="pickupSlotBadge" style="color: var(--accent-cyan); font-weight: 600; text-transform: none; margin-left: 0.5rem;"></span>
        </label>
        <select id="pickup_time" class="form-select" style="font-size: 1rem; font-weight: 600;">
          <option value="10:00:00">Morning (10:00 AM – 1:00 PM)</option>
          <option value="14:00:00" selected>Afternoon (2:00 PM – 5:00 PM)</option>
          <option value="17:00:00">Evening (5:00 PM – 7:00 PM)</option>
        </select>
        <small id="slotNotice" style="color: var(--text-muted); font-size: 0.78rem; display: block; margin-top: 0.35rem;"></small>
      </div>

      <!-- Package Count -->
      <div class="form-group" style="margin: 0;">
        <label class="form-label">📦 Package Count</label>
        <input type="number" id="pickup_count" class="form-control" value="1" min="1" max="100" style="font-size: 1rem; font-weight: 700;">
      </div>
    </div>

    <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem;">
      <div class="form-group" style="margin: 0;">
        <label class="form-label">🏭 Registered Warehouse / Seller Facility Name</label>
        <input type="text" id="pickup_location" class="form-control" placeholder="e.g. StyleHub Warehouse Phase 2" value="vignesh store">
      </div>
      <div class="form-group" style="margin: 0;">
        <label class="form-label">🏷️ Waybill / Tracking ID (Optional)</label>
        <input type="text" id="pickup_tracking" class="form-control" placeholder="e.g. 142839182390">
      </div>
    </div>

    <!-- Carrier Capability Live Banner -->
    <div id="carrierCapabilityBanner" style="padding: 0.85rem 1.2rem; border-radius: 0.75rem; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.3); margin-bottom: 1.2rem; font-size: 0.88rem; color: #bae6fd;">
      <!-- Populated dynamically -->
    </div>

    <div style="display: flex; justify-content: flex-end;">
      <button type="submit" id="btnPickupSubmit" class="btn btn-primary" style="padding: 0.85rem 2.2rem; font-size: 1rem;">
        <span>📅</span>
        <span id="btnPickupText">Schedule Courier Pickup</span>
      </button>
    </div>
  </form>
</div>


<!-- ========================================== -->
<!-- UNIFIED RESULTS SECTION                    -->
<!-- ========================================== -->
<div id="resultsWrapper" style="display: none;">
  <!-- Verdict Banner -->
  <div class="verdict-banner" id="verdictBanner">
    <div>
      <div style="font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-cyan); font-weight: 700; margin-bottom: 0.25rem;">
        Carrier Capability & Rate Summary
      </div>
      <div id="verdictTitle" style="font-size: 1.35rem; font-weight: 800; color: #fff;">
        Evaluating carriers...
      </div>
      <div id="verdictDesc" style="color: var(--text-muted); font-size: 0.95rem; margin-top: 0.25rem;">
        Serviceability determined across all carriers.
      </div>
    </div>
    <div id="verdictBadgeContainer"></div>
  </div>

  <!-- Side-by-Side 3 Carrier Cards Grid -->
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">

    <!-- 1. Shadowfax Card -->
    <div class="carrier-card" id="card_SHADOWFAX">
      <div>
        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 0.85rem; margin-bottom: 1rem;">
          <div>
            <div style="font-size: 1.2rem; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 0.5rem;">
              <span>📦</span> Shadowfax Logistics
            </div>
            <span style="font-size: 0.78rem; color: var(--text-muted);">API Integrated / Express & Hyperlocal</span>
          </div>
          <div id="badge_SHADOWFAX"></div>
        </div>

        <!-- City & Pincode Badge -->
        <div style="margin-bottom: 0.85rem;">
          <span style="font-size: 0.82rem; color: var(--text-muted);">Location:</span>
          <strong id="loc_SHADOWFAX" style="color: #fff; font-size: 0.95rem; margin-left: 0.35rem;">-</strong>
        </div>

        <!-- First Mile Feature Box -->
        <div class="feature-box">
          <div class="feature-header">
            <span style="color: var(--accent-cyan);">🛫 First-Mile (Pickup Hub)</span>
            <span id="fm_status_SHADOWFAX"></span>
          </div>
          <div style="font-size: 0.85rem; color: #94a3b8;" id="fm_msg_SHADOWFAX">-</div>
        </div>

        <!-- Last Mile Feature Box -->
        <div class="feature-box">
          <div class="feature-header">
            <span style="color: var(--accent-purple);">🛬 Last-Mile (Delivery)</span>
            <span id="lm_status_SHADOWFAX"></span>
          </div>
          <div style="font-size: 0.85rem; color: #94a3b8;" id="lm_msg_SHADOWFAX">-</div>
        </div>

        <!-- Delivery Types -->
        <div style="margin-top: 1rem;">
          <div style="font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0.45rem;">
            Delivery Types Available:
          </div>
          <div id="types_SHADOWFAX" style="display: flex; flex-wrap: wrap;">-</div>
        </div>
      </div>

      <!-- Estimated Charge Footer -->
      <div style="margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; align-items: center;">
        <span style="font-size: 0.85rem; color: var(--text-muted); font-weight: 600;">Estimated Charge:</span>
        <div class="price-badge">
          <span style="font-size: 0.9rem; color: #34d399; font-weight: 700;">₹</span>
          <span class="price-amount" id="charge_SHADOWFAX">-</span>
        </div>
      </div>
    </div>

    <!-- 2. Delhivery Card -->
    <div class="carrier-card" id="card_DELHIVERY">
      <div>
        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 0.85rem; margin-bottom: 1rem;">
          <div>
            <div style="font-size: 1.2rem; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 0.5rem;">
              <span>🚚</span> Delhivery Logistics
            </div>
            <span style="font-size: 0.78rem; color: var(--text-muted);">18,699 Pincodes / Surface & Express</span>
          </div>
          <div id="badge_DELHIVERY"></div>
        </div>

        <!-- City & Pincode Badge -->
        <div style="margin-bottom: 0.85rem;">
          <span style="font-size: 0.82rem; color: var(--text-muted);">Location:</span>
          <strong id="loc_DELHIVERY" style="color: #fff; font-size: 0.95rem; margin-left: 0.35rem;">-</strong>
        </div>

        <!-- First Mile Feature Box -->
        <div class="feature-box">
          <div class="feature-header">
            <span style="color: var(--accent-cyan);">🛫 First-Mile (Pickup Hub)</span>
            <span id="fm_status_DELHIVERY"></span>
          </div>
          <div style="font-size: 0.85rem; color: #94a3b8;" id="fm_msg_DELHIVERY">-</div>
        </div>

        <!-- Last Mile Feature Box -->
        <div class="feature-box">
          <div class="feature-header">
            <span style="color: var(--accent-purple);">🛬 Last-Mile (Delivery)</span>
            <span id="lm_status_DELHIVERY"></span>
          </div>
          <div style="font-size: 0.85rem; color: #94a3b8;" id="lm_msg_DELHIVERY">-</div>
        </div>

        <!-- Delivery Types -->
        <div style="margin-top: 1rem;">
          <div style="font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0.45rem;">
            Delivery Types Available:
          </div>
          <div id="types_DELHIVERY" style="display: flex; flex-wrap: wrap;">-</div>
        </div>
      </div>

      <!-- Estimated Charge Footer -->
      <div style="margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; align-items: center;">
        <span style="font-size: 0.85rem; color: var(--text-muted); font-weight: 600;">Estimated Charge:</span>
        <div class="price-badge">
          <span style="font-size: 0.9rem; color: #34d399; font-weight: 700;">₹</span>
          <span class="price-amount" id="charge_DELHIVERY">-</span>
        </div>
      </div>
    </div>

    <!-- 3. Ekart Card -->
    <div class="carrier-card" id="card_EKART">
      <div>
        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 0.85rem; margin-bottom: 1rem;">
          <div>
            <div style="font-size: 1.2rem; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 0.5rem;">
              <span>⚡</span> Ekart Logistics
            </div>
            <span style="font-size: 0.78rem; color: var(--text-muted);">Elite API v3.8.10 / Pan-India Network</span>
          </div>
          <div id="badge_EKART"></div>
        </div>

        <!-- City & Pincode Badge -->
        <div style="margin-bottom: 0.85rem;">
          <span style="font-size: 0.82rem; color: var(--text-muted);">Location:</span>
          <strong id="loc_EKART" style="color: #fff; font-size: 0.95rem; margin-left: 0.35rem;">-</strong>
        </div>

        <!-- First Mile Feature Box -->
        <div class="feature-box">
          <div class="feature-header">
            <span style="color: var(--accent-cyan);">🛫 First-Mile (Pickup Hub)</span>
            <span id="fm_status_EKART"></span>
          </div>
          <div style="font-size: 0.85rem; color: #94a3b8;" id="fm_msg_EKART">-</div>
        </div>

        <!-- Last Mile Feature Box -->
        <div class="feature-box">
          <div class="feature-header">
            <span style="color: var(--accent-purple);">🛬 Last-Mile (Delivery)</span>
            <span id="lm_status_EKART"></span>
          </div>
          <div style="font-size: 0.85rem; color: #94a3b8;" id="lm_msg_EKART">-</div>
        </div>

        <!-- Delivery Types -->
        <div style="margin-top: 1rem;">
          <div style="font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0.45rem;">
            Delivery Types Available:
          </div>
          <div id="types_EKART" style="display: flex; flex-wrap: wrap;">-</div>
        </div>
      </div>

      <!-- Estimated Charge Footer -->
      <div style="margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; align-items: center;">
        <span style="font-size: 0.85rem; color: var(--text-muted); font-weight: 600;">Estimated Charge:</span>
        <div class="price-badge">
          <span style="font-size: 0.9rem; color: #34d399; font-weight: 700;">₹</span>
          <span class="price-amount" id="charge_EKART">-</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Detailed Side-by-Side Capabilities Comparison Table -->
  <div class="card" style="margin-bottom: 1.75rem;">
    <div class="card-title">
      <span>📊 Side-by-Side Capabilities & Rate Comparison Table</span>
    </div>
    <div style="overflow-x: auto;">
      <table class="data-table">
        <thead>
          <tr>
            <th>Carrier Partner</th>
            <th>City & Pincode</th>
            <th>First-Mile (Pickup)</th>
            <th>Last-Mile (Delivery)</th>
            <th>Delivery Types Available</th>
            <th>Estimated Charge</th>
            <th>Service Status</th>
          </tr>
        </thead>
        <tbody id="tableBody"></tbody>
      </table>
    </div>
  </div>

  <!-- Collapsible Raw JSON Response Drawer -->
  <div class="card">
    <div class="card-title">
      <span id="rawJsonTitle">🔍 Raw API Response</span>
      <button type="button" class="btn btn-secondary" style="padding: 0.35rem 0.85rem; font-size: 0.8rem;" onclick="copyJson()">
        📋 Copy JSON
      </button>
    </div>
    <pre class="json-viewer" id="rawJsonResponse">// Response will appear here</pre>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
  // Pincode prefix city guide for instant input hints
  const PIN_HINTS = {
    '600': 'Chennai, TN', '601': 'Chennai, TN', '602': 'Thiruvallur, TN', '603': 'Chengalpattu, TN',
    '641': 'Coimbatore, TN', '625': 'Madurai, TN', '620': 'Tiruchirappalli, TN', '636': 'Salem, TN',
    '560': 'Bengaluru, KA', '561': 'Bengaluru Rural, KA', '562': 'Bengaluru Rural, KA', '570': 'Mysuru, KA',
    '110': 'Delhi, DL', '400': 'Mumbai, MH', '411': 'Pune, MH', '500': 'Hyderabad, TS', '700': 'Kolkata, WB',
    '380': 'Ahmedabad, GJ', '302': 'Jaipur, RJ', '226': 'Lucknow, UP', '682': 'Kochi, KL'
  };

  let activeMode = 'route';
  let latestResponseData = null;

  function switchMode(mode) {
    activeMode = mode;
    const tabSingle = document.getElementById('tabSingleMode');
    const tabRoute = document.getElementById('tabRouteMode');
    const tabPickup = document.getElementById('tabPickupMode');
    const cardSingle = document.getElementById('cardSingleMode');
    const cardRoute = document.getElementById('cardRouteMode');
    const cardPickup = document.getElementById('cardPickupMode');
    const resultsWrapper = document.getElementById('resultsWrapper');

    tabSingle.classList.remove('active');
    tabRoute.classList.remove('active');
    if (tabPickup) tabPickup.classList.remove('active');

    cardSingle.style.display = 'none';
    cardRoute.style.display = 'none';
    if (cardPickup) cardPickup.style.display = 'none';

    if (mode === 'single') {
      tabSingle.classList.add('active');
      cardSingle.style.display = 'block';
    } else if (mode === 'pickup') {
      if (tabPickup) tabPickup.classList.add('active');
      if (cardPickup) cardPickup.style.display = 'block';
      resultsWrapper.style.display = 'none';
      initPickupForm();
    } else {
      tabRoute.classList.add('active');
      cardRoute.style.display = 'block';
    }
  }

  function initPickupForm() {
    const tomorrow = new Date(Date.now() + 86400000);
    const tomorrowStr = tomorrow.toISOString().split('T')[0];
    const dateInput = document.getElementById('pickup_date');
    if (!dateInput.value) {
      dateInput.value = tomorrowStr;
      dateInput.min = new Date().toISOString().split('T')[0];
    }
    onPickupCarrierChange();
  }

  function onPickupCarrierChange() {
    const carrier = document.getElementById('pickup_carrier').value;
    const timeSelect = document.getElementById('pickup_time');
    const slotNotice = document.getElementById('slotNotice');
    const slotBadge = document.getElementById('pickupSlotBadge');
    const dateNotice = document.getElementById('pickupDateNotice');
    const banner = document.getElementById('carrierCapabilityBanner');

    if (carrier === 'DELHIVERY') {
      timeSelect.disabled = false;
      timeSelect.style.opacity = '1';
      slotBadge.textContent = '🟢 Custom Time Slot Enabled';
      slotBadge.style.color = '#34d399';
      dateNotice.textContent = '(Flexible Date)';
      slotNotice.textContent = 'Delhivery allocates a dedicated courier vehicle for your selected arrival slot.';
      banner.innerHTML = '<strong>✅ Delhivery Logistics:</strong> Full Date and Time Slot selection is active. Orders will be scheduled with Delhivery First-Mile API (<code>/fm/request/create/</code>).';
    } else if (carrier === 'EKART') {
      timeSelect.disabled = true;
      timeSelect.style.opacity = '0.55';
      slotBadge.textContent = '🔒 Standard Hub Sweep';
      slotBadge.style.color = '#fbbf24';
      dateNotice.textContent = '(Dispatch Date Enabled)';
      slotNotice.textContent = 'Ekart operates daily routine hub sweeps (Morning 10 AM – 1 PM / Evening 4 PM – 7 PM).';
      banner.innerHTML = '<strong>ℹ️ Ekart Logistics:</strong> Preferred dispatch date is supported (<code>/data/shipment/dispatch-date</code>). Pickup time is managed per standard Ekart daily sweep windows.';
    } else {
      timeSelect.disabled = true;
      timeSelect.style.opacity = '0.55';
      slotBadge.textContent = '🔒 Automated Cutoff';
      slotBadge.style.color = '#a78bfa';
      dateNotice.textContent = '(Automated SLA)';
      slotNotice.textContent = 'Shadowfax automatically dispatches sweep riders based on registered merchant SLA cutoff.';
      banner.innerHTML = '<strong>ℹ️ Shadowfax Logistics:</strong> Warehouse sweeps are scheduled automatically based on registered daily SLA cutoffs.';
    }
  }

  async function handleCheckScheduleSubmit() {
    const trkInput = document.getElementById('check_schedule_tracking');
    const trk = trkInput ? trkInput.value.trim() : '';
    if (!trk) {
      alert('Please enter a valid tracking ID / waybill number.');
      if (trkInput) trkInput.focus();
      return;
    }

    const btn = document.getElementById('btnCheckSchedule');
    const btnText = document.getElementById('btnCheckScheduleText');
    const btnIcon = document.getElementById('btnCheckScheduleIcon');
    const container = document.getElementById('checkScheduleResultContainer');

    if (btn) btn.disabled = true;
    if (btnIcon) btnIcon.innerHTML = '<span class="spinner"></span>';
    if (btnText) btnText.textContent = 'Verifying Schedule...';

    try {
      const res = await fetch(`/api/v1/carrier/pickup-schedule/?tracking_id=${encodeURIComponent(trk)}`);
      const data = await res.json();

      if (container) {
        container.style.display = 'block';
        if (data.status === 'success') {
          const isDlh = (data.carrier || '').includes('DELHI');
          const badgeBg = isDlh ? 'rgba(14, 165, 233, 0.18)' : 'rgba(234, 179, 8, 0.18)';
          const badgeBorder = isDlh ? 'rgba(14, 165, 233, 0.35)' : 'rgba(234, 179, 8, 0.35)';
          const badgeColor = isDlh ? '#38bdf8' : '#facc15';

          container.innerHTML = `
            <div style="background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(56, 189, 248, 0.4); border-radius: 0.75rem; padding: 1.25rem;">
              <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.75rem; margin-bottom: 1rem;">
                <div>
                  <span style="font-size: 1.15rem; font-weight: 800; color: #fff;">🚚 ${data.carrier_display || data.carrier}</span>
                  <span class="badge" style="margin-left: 0.75rem; background: ${badgeBg}; border: 1px solid ${badgeBorder}; color: ${badgeColor};">
                    ${data.pickup_status === 'CONFIRMED' ? '✅ Confirmed Pickup' : (data.pickup_status === 'IN_TRANSIT' ? '🚀 In Transit' : '📅 Scheduled')}
                  </span>
                </div>
                ${data.pickup_id ? `<span style="font-family: monospace; font-size: 0.95rem; font-weight: 700; color: #4ade80; background: rgba(34, 197, 94, 0.15); padding: 0.3rem 0.75rem; border-radius: 0.5rem; border: 1px solid rgba(34, 197, 94, 0.3);">PR #${data.pickup_id}</span>` : ''}
              </div>

              <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem;">
                <div style="background: rgba(30, 41, 59, 0.6); padding: 0.75rem 1rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.06);">
                  <div style="font-size: 0.75rem; color: #94a3b8; text-transform: uppercase;">📅 Scheduled Pickup Date</div>
                  <div style="font-size: 1.1rem; font-weight: 800; color: #fff; margin-top: 0.2rem;">${data.pickup_date || 'N/A'}</div>
                </div>
                <div style="background: rgba(30, 41, 59, 0.6); padding: 0.75rem 1rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.06);">
                  <div style="font-size: 0.75rem; color: #94a3b8; text-transform: uppercase;">⏰ Arrival Time Window</div>
                  <div style="font-size: 1rem; font-weight: 800; color: #38bdf8; margin-top: 0.2rem;">${data.pickup_slot || data.pickup_time || 'Standard Sweep'}</div>
                </div>
                <div style="background: rgba(30, 41, 59, 0.6); padding: 0.75rem 1rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.06);">
                  <div style="font-size: 0.75rem; color: #94a3b8; text-transform: uppercase;">🏭 Pickup Warehouse</div>
                  <div style="font-size: 1rem; font-weight: 800; color: #fff; margin-top: 0.2rem;">${data.pickup_location || 'Registered Store'}</div>
                </div>
                <div style="background: rgba(30, 41, 59, 0.6); padding: 0.75rem 1rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.06);">
                  <div style="font-size: 0.75rem; color: #94a3b8; text-transform: uppercase;">📦 Shipment Status</div>
                  <div style="font-size: 1rem; font-weight: 800; color: #facc15; margin-top: 0.2rem;">${data.shipment_status || 'Manifested'}</div>
                </div>
              </div>

              <div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: #cbd5e1; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 0.75rem; flex-wrap: wrap; gap: 0.5rem;">
                <span><strong>Consignment:</strong> Order #${data.order_id || 'N/A'} (AWB: ${data.tracking_id})</span>
                ${data.destination && data.destination.city ? `<span><strong>Destination:</strong> ${data.destination.city} (${data.destination.pincode || ''})</span>` : ''}
              </div>
            </div>
          `;
        } else {
          container.innerHTML = `
            <div style="background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35); border-radius: 0.75rem; padding: 1rem; color: #fca5a5;">
              <strong>⚠️ Schedule Lookup:</strong> ${data.message || 'No pickup schedule found.'}
            </div>
          `;
        }
      }

      const resultsWrapper = document.getElementById('resultsWrapper');
      if (resultsWrapper) resultsWrapper.style.display = 'block';
      const rawJson = document.getElementById('rawJsonResponse');
      if (rawJson) rawJson.textContent = JSON.stringify(data, null, 2);
      const rawTitle = document.getElementById('rawJsonTitle');
      if (rawTitle) rawTitle.textContent = `🔍 Pickup Schedule Response (AWB: ${trk})`;
    } catch (err) {
      if (container) {
        container.style.display = 'block';
        container.innerHTML = `<div style="color: #f87171; padding: 1rem;">Failed to connect to pickup service: ${err.message}</div>`;
      }
    } finally {
      if (btn) btn.disabled = false;
      if (btnIcon) btnIcon.textContent = '🔎';
      if (btnText) btnText.textContent = 'Check Pickup Schedule';
    }
  }

  async function handlePickupSubmit(e) {
    e.preventDefault();
    const btn = document.getElementById('btnPickupSubmit');
    const btnText = document.getElementById('btnPickupText');
    btn.disabled = true;
    btnText.textContent = 'Scheduling Pickup with Carrier...';

    const carrier = document.getElementById('pickup_carrier').value;
    const pickupDate = document.getElementById('pickup_date').value;
    const pickupTime = document.getElementById('pickup_time').value;
    const pickupCount = document.getElementById('pickup_count').value;
    const pickupLocation = document.getElementById('pickup_location').value;
    const pickupTracking = document.getElementById('pickup_tracking').value;

    const payload = {
      carrier: carrier,
      pickup_date: pickupDate,
      pickup_time: pickupTime,
      pickup_location: pickupLocation,
      expected_package_count: parseInt(pickupCount, 10) || 1,
      tracking_ids: pickupTracking ? [pickupTracking] : []
    };

    try {
      const res = await fetch('/api/v1/carrier/schedule-pickup/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await res.json();
      
      const resultsWrapper = document.getElementById('resultsWrapper');
      resultsWrapper.style.display = 'block';

      document.getElementById('verdictBanner').style.display = 'flex';
      document.getElementById('verdictTitle').textContent = data.status === 'success' ? '✅ Pickup Scheduled Successfully' : '⚠️ Pickup Request Response';
      document.getElementById('verdictDesc').textContent = data.message || JSON.stringify(data);
      
      // Update raw JSON
      document.getElementById('rawJsonResponse').textContent = JSON.stringify(data, null, 2);
      document.getElementById('rawJsonTitle').textContent = `🔍 Schedule Pickup Response (${carrier})`;
      
      // Scroll to response
      resultsWrapper.scrollIntoView({ behavior: 'smooth' });
    } catch (err) {
      alert('Failed to schedule pickup: ' + err.message);
    } finally {
      btn.disabled = false;
      btnText.textContent = 'Schedule Courier Pickup';
    }
  }


  function updateSingleLocationHint() {
    const pin = document.getElementById('single_pincode').value.trim();
    const hintEl = document.getElementById('singleLocationHint');
    if (pin.length >= 3 && PIN_HINTS[pin.substring(0, 3)]) {
      hintEl.textContent = PIN_HINTS[pin.substring(0, 3)];
    } else {
      hintEl.textContent = '';
    }
  }

  function updateRouteLocationHints() {
    const pPin = document.getElementById('route_pickup').value.trim();
    const dPin = document.getElementById('route_drop').value.trim();
    const pHint = document.getElementById('routePickupHint');
    const dHint = document.getElementById('routeDropHint');

    pHint.textContent = (pPin.length >= 3 && PIN_HINTS[pPin.substring(0, 3)]) ? PIN_HINTS[pPin.substring(0, 3)] : '';
    dHint.textContent = (dPin.length >= 3 && PIN_HINTS[dPin.substring(0, 3)]) ? PIN_HINTS[dPin.substring(0, 3)] : '';
  }

  function applySinglePreset(pin) {
    document.getElementById('single_pincode').value = pin;
    updateSingleLocationHint();
    document.getElementById('singlePincodeForm').dispatchEvent(new Event('submit', { cancelable: true }));
  }

  function applyRoutePreset(origin, dest, payment, weight) {
    document.getElementById('route_pickup').value = origin;
    document.getElementById('route_drop').value = dest;
    if (payment) document.getElementById('route_payment').value = payment;
    if (weight) document.getElementById('route_weight').value = weight;
    updateRouteLocationHints();
    document.getElementById('routeForm').dispatchEvent(new Event('submit', { cancelable: true }));
  }

  // Handle Single Pincode Submit
  async function handleSinglePincodeSubmit(e) {
    if (e) e.preventDefault();

    const pin = document.getElementById('single_pincode').value.trim();
    const weightInput = document.getElementById('single_weight').value.trim();
    const isMock = document.getElementById('single_mode_toggle').value === 'true';

    if (!pin || pin.length !== 6) {
      alert('Please enter a valid 6-digit Indian pincode.');
      return;
    }

    if (!weightInput || isNaN(weightInput) || parseFloat(weightInput) <= 0) {
      alert('Package weight (in grams) is required. Please enter the package weight.');
      document.getElementById('single_weight').focus();
      return;
    }
    const weight = parseFloat(weightInput);

    const btn = document.getElementById('btnSingleSubmit');
    const btnIcon = document.getElementById('btnSingleIcon');
    const btnText = document.getElementById('btnSingleText');

    btn.disabled = true;
    btnIcon.innerHTML = '<span class="spinner"></span>';
    btnText.textContent = 'Evaluating All 3 Carriers...';

    try {
      const response = await fetch(`/api/v1/carrier/check-pincode/?pincode=${pin}&weight=${weight}&use_mock=${isMock}`);
      const data = await response.json();
      latestResponseData = data;
      document.getElementById('rawJsonTitle').textContent = `🔍 Raw API Response (/api/v1/carrier/check-pincode/?pincode=${pin}&weight=${weight})`;
      renderSinglePincodeResults(data);
    } catch (err) {
      alert('Failed to connect to carrier service: ' + err.message);
    } finally {
      btn.disabled = false;
      btnIcon.textContent = '🔍';
      btnText.textContent = 'Check Pincode Across All 3 Carriers';
    }
  }

  // Handle Route Submit
  async function handleRouteSubmit(e) {
    if (e) e.preventDefault();

    const pickupPin = document.getElementById('route_pickup').value.trim();
    const dropPin = document.getElementById('route_drop').value.trim();
    const payment = document.getElementById('route_payment').value;
    const weightInput = document.getElementById('route_weight').value.trim();

    if (!pickupPin || pickupPin.length !== 6) {
      alert('Please enter a valid 6-digit origin pickup pincode.');
      return;
    }
    if (!dropPin || dropPin.length !== 6) {
      alert('Please enter a valid 6-digit destination drop pincode.');
      return;
    }

    if (!weightInput || isNaN(weightInput) || parseFloat(weightInput) <= 0) {
      alert('Package weight (in grams) is required. Please enter the package weight.');
      document.getElementById('route_weight').focus();
      return;
    }
    const weight = parseFloat(weightInput);

    const btn = document.getElementById('btnRouteSubmit');
    const btnIcon = document.getElementById('btnRouteIcon');
    const btnText = document.getElementById('btnRouteText');

    btn.disabled = true;
    btnIcon.innerHTML = '<span class="spinner"></span>';
    btnText.textContent = 'Evaluating Route...';

    const isMock = document.getElementById('route_mode_toggle') ? (document.getElementById('route_mode_toggle').value === 'true') : false;

    const payload = {
      pickup_pincode: pickupPin,
      drop_pincode: dropPin,
      payment_type: payment,
      weight: weight,
      use_mock: isMock
    };

    try {
      const response = await fetch('/api/v1/carrier/check-availability/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const data = await response.json();
      latestResponseData = data;
      document.getElementById('rawJsonTitle').textContent = `🔍 Raw API Response (/api/v1/carrier/check-availability/)`;
      renderRouteResults(data);
    } catch (err) {
      alert('Failed to connect to route service: ' + err.message);
    } finally {
      btn.disabled = false;
      btnIcon.textContent = '⚡';
      btnText.textContent = 'Evaluate Complete Route Across Carriers';
    }
  }

  // Render Single Pincode Results
  function renderSinglePincodeResults(data) {
    document.getElementById('resultsWrapper').style.display = 'block';
    document.getElementById('rawJsonResponse').textContent = JSON.stringify(data, null, 2);

    const carriers = data.carriers || {};
    const best = data.best_carrier || {};

    // 1. Verdict Banner
    const verdictTitle = document.getElementById('verdictTitle');
    const verdictDesc = document.getElementById('verdictDesc');
    const verdictBadgeContainer = document.getElementById('verdictBadgeContainer');

    if (best && best.selected) {
      verdictTitle.innerHTML = `Optimal Carrier: <span style="color: var(--accent-emerald);">${best.carrier}</span> (₹${best.charge})`;
      verdictDesc.textContent = `${data.city || ''}, ${data.state || ''} (${data.pincode}) — ${best.reason || 'Selected as lowest charge carrier.'}`;
      verdictBadgeContainer.innerHTML = `<span class="badge badge-success" style="font-size: 0.9rem; padding: 0.5rem 1rem;">Serviceable Pincode</span>`;
    } else {
      verdictTitle.innerHTML = `<span style="color: var(--accent-rose);">Pincode Unserviceable</span>`;
      verdictDesc.textContent = best.reason || 'No carrier can service this pincode.';
      verdictBadgeContainer.innerHTML = `<span class="badge badge-error" style="font-size: 0.9rem; padding: 0.5rem 1rem;">Unserviceable</span>`;
    }

    // 2. Render Cards & Table
    const carrierKeys = ['SHADOWFAX', 'DELHIVERY', 'EKART'];
    const tableBody = document.getElementById('tableBody');
    tableBody.innerHTML = '';

    carrierKeys.forEach(key => {
      const c = carriers[key] || {};
      const cardEl = document.getElementById(`card_${key}`);
      if (!cardEl) return;

      const isBest = (best && best.selected && best.carrier === key);
      if (isBest) {
        cardEl.classList.add('recommended');
      } else {
        cardEl.classList.remove('recommended');
      }

      const overallServiceable = Boolean(c.serviceable);
      const badgeEl = document.getElementById(`badge_${key}`);
      badgeEl.innerHTML = overallServiceable 
        ? `<span class="badge badge-success">✓ Serviceable</span>` 
        : `<span class="badge badge-error">✕ Unserviceable</span>`;

      // City & Pincode
      document.getElementById(`loc_${key}`).textContent = `${c.city || data.city || 'Unknown'}, ${c.state || data.state || 'India'} (${c.pincode || data.pincode})`;

      // First Mile
      const fmStatusEl = document.getElementById(`fm_status_${key}`);
      const fmMsgEl = document.getElementById(`fm_msg_${key}`);
      const fmOk = Boolean(c.first_mile_available);
      fmStatusEl.innerHTML = fmOk 
        ? `<span style="color: #34d399;">● Pickup Active</span>` 
        : `<span style="color: #fb7185;">● Pickup Blocked</span>`;
      fmMsgEl.textContent = c.first_mile_details || (fmOk ? 'First-mile hub sweep serviceable' : 'Origin not serviceable');

      // Last Mile
      const lmStatusEl = document.getElementById(`lm_status_${key}`);
      const lmMsgEl = document.getElementById(`lm_msg_${key}`);
      const lmOk = Boolean(c.last_mile_available);
      lmStatusEl.innerHTML = lmOk 
        ? `<span style="color: #34d399;">● Delivery Active</span>` 
        : `<span style="color: #fb7185;">● Delivery Blocked</span>`;
      lmMsgEl.textContent = c.last_mile_details || (lmOk ? 'Last-mile doorstep delivery serviceable' : 'Destination not serviceable');

      // Delivery Types
      const typesEl = document.getElementById(`types_${key}`);
      typesEl.innerHTML = '';
      const types = c.delivery_types || [];
      if (types.length > 0) {
        types.forEach(t => {
          const span = document.createElement('span');
          span.className = 'type-tag';
          span.textContent = t;
          typesEl.appendChild(span);
        });
      } else {
        typesEl.innerHTML = '<span style="color: var(--text-muted); font-size: 0.8rem;">No delivery services available</span>';
      }

      // Estimated Charge
      const chargeEl = document.getElementById(`charge_${key}`);
      if (overallServiceable && c.estimated_charge !== null && c.estimated_charge !== undefined) {
        chargeEl.textContent = `${c.estimated_charge}`;
      } else {
        chargeEl.textContent = 'N/A';
        chargeEl.style.color = 'var(--text-muted)';
      }

      // Table Row
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td style="font-weight: 700; color: #fff;">
          ${key === 'SHADOWFAX' ? '📦 Shadowfax' : (key === 'DELHIVERY' ? '🚚 Delhivery' : '⚡ Ekart')}
          ${isBest ? ' <span class="badge badge-success" style="font-size: 0.65rem;">Best Choice</span>' : ''}
        </td>
        <td style="font-weight: 600; color: #e2e8f0;">
          ${c.city || data.city || '-'}, ${c.state || data.state || '-'} (${c.pincode || data.pincode})
        </td>
        <td>
          ${fmOk ? '<span style="color: #34d399; font-weight: 700;">✓ Active</span>' : '<span style="color: #fb7185; font-weight: 700;">✕ Blocked</span>'}
          <span style="color: var(--text-muted); font-size: 0.8rem; display: block;">${fmOk ? 'Pickup Sweep' : 'Unavailable'}</span>
        </td>
        <td>
          ${lmOk ? '<span style="color: #34d399; font-weight: 700;">✓ Active</span>' : '<span style="color: #fb7185; font-weight: 700;">✕ Blocked</span>'}
          <span style="color: var(--text-muted); font-size: 0.8rem; display: block;">${lmOk ? 'Doorstep Delivery' : 'Unavailable'}</span>
        </td>
        <td>
          <div style="display: flex; flex-wrap: wrap; max-width: 320px;">
            ${types.map(t => `<span class="type-tag">${t}</span>`).join('') || '<span style="color: var(--text-muted);">None</span>'}
          </div>
        </td>
        <td style="font-weight: 800; color: ${overallServiceable ? '#34d399' : 'var(--text-muted)'}; font-size: 1.1rem;">
          ${overallServiceable && c.estimated_charge ? `₹${c.estimated_charge}` : '—'}
        </td>
        <td>
          ${overallServiceable 
            ? '<span class="badge badge-success">Serviceable</span>' 
            : '<span class="badge badge-error">Unserviceable</span>'}
        </td>
      `;
      tableBody.appendChild(tr);
    });

    document.getElementById('verdictBanner').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  }

  // Render Route Results
  function renderRouteResults(data) {
    document.getElementById('resultsWrapper').style.display = 'block';
    document.getElementById('rawJsonResponse').textContent = JSON.stringify(data, null, 2);

    const carriers = data.carriers || {};
    const best = data.best_carrier || {};

    const verdictTitle = document.getElementById('verdictTitle');
    const verdictDesc = document.getElementById('verdictDesc');
    const verdictBadgeContainer = document.getElementById('verdictBadgeContainer');

    if (best && best.selected) {
      verdictTitle.innerHTML = `Optimal Route Carrier: <span style="color: var(--accent-emerald);">${best.carrier}</span> (₹${best.cost})`;
      verdictDesc.textContent = `${data.pickup_pincode} → ${data.drop_pincode} (${data.payment_type || 'Prepaid'}) — ${best.reason || 'Selected as best carrier for route.'}`;
      verdictBadgeContainer.innerHTML = `<span class="badge badge-success" style="font-size: 0.9rem; padding: 0.5rem 1rem;">Route Serviceable</span>`;
    } else {
      verdictTitle.innerHTML = `<span style="color: var(--accent-rose);">Route Unserviceable</span>`;
      verdictDesc.textContent = best.reason || 'No carrier can service this route.';
      verdictBadgeContainer.innerHTML = `<span class="badge badge-error" style="font-size: 0.9rem; padding: 0.5rem 1rem;">Unserviceable</span>`;
    }

    const carrierKeys = ['SHADOWFAX', 'DELHIVERY', 'EKART'];
    const tableBody = document.getElementById('tableBody');
    tableBody.innerHTML = '';

    carrierKeys.forEach(key => {
      const c = carriers[key] || {};
      const cardEl = document.getElementById(`card_${key}`);
      if (!cardEl) return;

      const isBest = (best && best.selected && best.carrier === key);
      if (isBest) cardEl.classList.add('recommended');
      else cardEl.classList.remove('recommended');

      const overallServiceable = Boolean(c.serviceable);
      document.getElementById(`badge_${key}`).innerHTML = overallServiceable 
        ? `<span class="badge badge-success">✓ Serviceable</span>` 
        : `<span class="badge badge-error">✕ Unserviceable</span>`;

      const fm = c.first_mile || {};
      const lm = c.last_mile || {};

      document.getElementById(`loc_${key}`).textContent = `${fm.city || '-'} (${data.pickup_pincode}) ➔ ${lm.city || '-'} (${data.drop_pincode})`;

      const fmOk = Boolean(fm.serviceable);
      document.getElementById(`fm_status_${key}`).innerHTML = fmOk 
        ? `<span style="color: #34d399;">● Pickup Active</span>` 
        : `<span style="color: #fb7185;">● Pickup Blocked</span>`;
      document.getElementById(`fm_msg_${key}`).textContent = fm.message || (fmOk ? 'First-mile serviceable' : 'Origin unserviceable');

      const lmOk = Boolean(lm.serviceable);
      document.getElementById(`lm_status_${key}`).innerHTML = lmOk 
        ? `<span style="color: #34d399;">● Delivery Active</span>` 
        : `<span style="color: #fb7185;">● Delivery Blocked</span>`;
      document.getElementById(`lm_msg_${key}`).textContent = lm.message || (lmOk ? 'Last-mile serviceable' : 'Destination unserviceable');

      // Types
      const typesEl = document.getElementById(`types_${key}`);
      typesEl.innerHTML = '';
      const types = c.delivery_types || ['Prepaid', c.cod_available ? 'COD' : 'Prepaid Only'];
      types.forEach(t => {
        const span = document.createElement('span');
        span.className = 'type-tag';
        span.textContent = t;
        typesEl.appendChild(span);
      });

      // Charge
      const cost = c.estimated_charge || c.estimated_cost;
      const chargeEl = document.getElementById(`charge_${key}`);
      if (overallServiceable && cost !== null && cost !== undefined) {
        chargeEl.textContent = `${cost}`;
      } else {
        chargeEl.textContent = 'N/A';
      }

      // Table Row
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td style="font-weight: 700; color: #fff;">
          ${key === 'SHADOWFAX' ? '📦 Shadowfax' : (key === 'DELHIVERY' ? '🚚 Delhivery' : '⚡ Ekart')}
          ${isBest ? ' <span class="badge badge-success" style="font-size: 0.65rem;">Best Choice</span>' : ''}
        </td>
        <td style="font-weight: 600; color: #e2e8f0;">
          ${fm.city || '-'} (${data.pickup_pincode}) → ${lm.city || '-'} (${data.drop_pincode})
        </td>
        <td>
          ${fmOk ? '<span style="color: #34d399; font-weight: 700;">✓ Ready</span>' : '<span style="color: #fb7185; font-weight: 700;">✕ Blocked</span>'}
          <span style="color: var(--text-muted); font-size: 0.8rem; display: block;">${fm.city || '-'}</span>
        </td>
        <td>
          ${lmOk ? '<span style="color: #34d399; font-weight: 700;">✓ Ready</span>' : '<span style="color: #fb7185; font-weight: 700;">✕ Blocked</span>'}
          <span style="color: var(--text-muted); font-size: 0.8rem; display: block;">${lm.city || '-'}</span>
        </td>
        <td>
          <div style="display: flex; flex-wrap: wrap; max-width: 320px;">
            ${types.map(t => `<span class="type-tag">${t}</span>`).join('')}
          </div>
        </td>
        <td style="font-weight: 800; color: ${overallServiceable ? '#34d399' : 'var(--text-muted)'}; font-size: 1.1rem;">
          ${overallServiceable && cost ? `₹${cost}` : '—'}
        </td>
        <td>
          ${overallServiceable ? '<span class="badge badge-success">Serviceable</span>' : '<span class="badge badge-error">Unserviceable</span>'}
        </td>
      `;
      tableBody.appendChild(tr);
    });

    document.getElementById('verdictBanner').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  }

  function copyJson() {
    if (!latestResponseData) return;
    navigator.clipboard.writeText(JSON.stringify(latestResponseData, null, 2))
      .then(() => alert('JSON response copied to clipboard!'))
      .catch(() => alert('Failed to copy.'));
  }

  // Initialize input hints and auto-run on initial page load if weight is present
  window.addEventListener('DOMContentLoaded', () => {
    updateRouteLocationHints();
    updateSingleLocationHint();
    const routeWeightVal = document.getElementById('route_weight').value.trim();
    if (routeWeightVal && !isNaN(routeWeightVal) && parseFloat(routeWeightVal) > 0) {
      handleRouteSubmit(null);
    }
  });
</script>
{% endblock %}