---
// Unified DOT intake form — shows relevant sections based on services ordered.
// Handles: MCS-150, UCR, D&A, BOC-3, USDOT, MC Authority, Audit Prep, bundles.
---

<div class="pw-step" data-slug="dot-intake">
  <h2>DOT Filing Information</h2>
  <p class="pw-help">
    Provide your carrier information. We will prepare and submit your filings on your behalf.
  </p>
  <div class="pw-security-notice">
    <svg style="width:16px;height:16px;flex-shrink:0;margin-top:2px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
    <span>All personal information is transmitted over 256-bit SSL encryption and stored encrypted at rest. We never share your data with third parties.</span>
  </div>

  <div class="pw-form-grid">

    <!-- ═══ SECTION: Company Info (always shown) ═══ -->
    <h3>Company Information</h3>
    <div class="pw-row">
      <label class="pw-field"><span>Legal Entity Name <em>*</em></span>
        <input type="text" id="dot-legal-name" required placeholder="As registered with FMCSA" /></label>
    </div>
    <div class="pw-row">
      <label class="pw-field"><span>DBA / Trade Name</span>
        <input type="text" id="dot-dba" placeholder="If different from legal name" /></label>
    </div>
    <div class="pw-row-3">
      <label class="pw-field"><span>USDOT Number <em>*</em></span>
        <input type="text" id="dot-dot" required placeholder="e.g. 1234567" /></label>
      <label class="pw-field"><span>MC/MX/FF Number</span>
        <input type="text" id="dot-mc" placeholder="e.g. MC-123456" /></label>
      <label class="pw-field"><span>EIN (Tax ID)</span>
        <input type="text" id="dot-ein" placeholder="XX-XXXXXXX" maxlength="12" /></label>
    </div>

    <h3>Principal Business Address</h3>
    <div class="pw-row">
      <label class="pw-field"><span>Street Address <em>*</em></span>
        <input type="text" id="dot-street" required placeholder="123 Main St" /></label>
    </div>
    <div class="pw-row-3">
      <label class="pw-field"><span>City <em>*</em></span>
        <input type="text" id="dot-city" required /></label>
      <label class="pw-field"><span>State <em>*</em></span>
        <select id="dot-state" required>
          <option value="">--</option>
          <option value="AL">AL</option><option value="AK">AK</option><option value="AZ">AZ</option><option value="AR">AR</option><option value="CA">CA</option><option value="CO">CO</option><option value="CT">CT</option><option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option><option value="HI">HI</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN">IN</option><option value="IA">IA</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option><option value="ME">ME</option><option value="MD">MD</option><option value="MA">MA</option><option value="MI">MI</option><option value="MN">MN</option><option value="MS">MS</option><option value="MO">MO</option><option value="MT">MT</option><option value="NE">NE</option><option value="NV">NV</option><option value="NH">NH</option><option value="NJ">NJ</option><option value="NM">NM</option><option value="NY">NY</option><option value="NC">NC</option><option value="ND">ND</option><option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option><option value="RI">RI</option><option value="SC">SC</option><option value="SD">SD</option><option value="TN">TN</option><option value="TX">TX</option><option value="UT">UT</option><option value="VT">VT</option><option value="VA">VA</option><option value="WA">WA</option><option value="WV">WV</option><option value="WI">WI</option><option value="WY">WY</option><option value="DC">DC</option>
        </select></label>
      <label class="pw-field"><span>ZIP <em>*</em></span>
        <input type="text" id="dot-zip" required maxlength="10" placeholder="12345" /></label>
    </div>
    <div class="pw-row-2">
      <label class="pw-field"><span>Phone <em>*</em></span>
        <input type="tel" id="dot-phone" required placeholder="(555) 123-4567" /></label>
      <label class="pw-field"><span>Email <em>*</em></span>
        <input type="email" id="dot-email" required placeholder="you@company.com" /></label>
    </div>

    <!-- ═══ SECTION: Entity & Operations (MCS-150, USDOT, MC Auth, bundles) ═══ -->
    <div id="dot-sec-operations" hidden>
      <h3>Entity & Operations</h3>
      <div class="pw-row-2">
        <label class="pw-field"><span>Entity Type <em>*</em></span>
          <select id="dot-entity-type" required>
            <option value="">Select...</option>
            <option value="sole_proprietorship">Sole Proprietorship</option>
            <option value="partnership">Partnership</option>
            <option value="corporation">Corporation</option>
            <option value="llc">LLC</option>
            <option value="other">Other</option>
          </select></label>
        <label class="pw-field"><span>Carrier Operation <em>*</em></span>
          <select id="dot-carrier-op" required>
            <option value="">Select...</option>
            <option value="authorized_for_hire">Authorized For-Hire</option>
            <option value="exempt_for_hire">Exempt For-Hire</option>
            <option value="private_property">Private (Property)</option>
            <option value="private_passengers">Private (Passengers)</option>
          </select></label>
      </div>
      <div class="pw-row-2">
        <label class="pw-field"><span>Interstate / Intrastate <em>*</em></span>
          <select id="dot-interstate" required>
            <option value="">Select...</option>
            <option value="interstate">Interstate (across state lines)</option>
            <option value="intrastate_hazmat">Intrastate — Hazmat</option>
            <option value="intrastate_non_hazmat">Intrastate — Non-hazmat</option>
          </select></label>
        <label class="pw-field"><span>Hazmat? <em>*</em></span>
          <select id="dot-hazmat" required>
            <option value="">Select...</option>
            <option value="no">No</option>
            <option value="yes">Yes</option>
          </select></label>
      </div>
    </div>

    <!-- ═══ SECTION: Fleet (MCS-150, UCR, bundles) ═══ -->
    <div id="dot-sec-fleet" hidden>
      <h3>Fleet Information</h3>
      <div class="pw-row-3">
        <label class="pw-field"><span>Power Units (trucks) <em>*</em></span>
          <input type="number" id="dot-power-units" required min="0" placeholder="e.g. 5" /></label>
        <label class="pw-field"><span>Drivers <em>*</em></span>
          <input type="number" id="dot-drivers" required min="0" placeholder="e.g. 6" /></label>
        <label class="pw-field"><span>Annual Miles</span>
          <input type="number" id="dot-miles" min="0" placeholder="e.g. 250000" /></label>
      </div>
    </div>

    <!-- ═══ SECTION: UCR Fleet Bracket (UCR only) ═══ -->
    <div id="dot-sec-ucr" hidden>
      <h3>UCR Registration</h3>
      <p class="pw-field-help">UCR fees are based on the number of qualifying commercial motor vehicles (over 10,001 lbs GVWR, 10+ passengers, or placardable hazmat).</p>
      <div class="pw-row-2">
        <label class="pw-field"><span>Fleet Size Bracket <em>*</em></span>
          <select id="dot-ucr-bracket">
            <option value="">Select...</option>
            <option value="0-2">0–2 vehicles ($76 gov fee)</option>
            <option value="3-5">3–5 vehicles ($227 gov fee)</option>
            <option value="6-20">6–20 vehicles ($452 gov fee)</option>
            <option value="21-100">21–100 vehicles ($1,576 gov fee)</option>
            <option value="101-1000">101–1,000 vehicles ($7,511 gov fee)</option>
            <option value="1001+">1,001+ vehicles ($73,346 gov fee)</option>
          </select></label>
        <label class="pw-field"><span>Base State <em>*</em></span>
          <input type="text" id="dot-ucr-state" readonly placeholder="From address above" /></label>
      </div>
    </div>

    <!-- ═══ SECTION: Cargo Types (MCS-150, bundles) ═══ -->
    <div id="dot-sec-cargo" hidden>
      <h3>Cargo Types (check all that apply)</h3>
      <div class="pw-cargo-grid">
        <label><input type="checkbox" data-cargo="general" /> General Freight</label>
        <label><input type="checkbox" data-cargo="household" /> Household Goods</label>
        <label><input type="checkbox" data-cargo="metal" /> Metal/Sheets/Coils</label>
        <label><input type="checkbox" data-cargo="motor_vehicles" /> Motor Vehicles</label>
        <label><input type="checkbox" data-cargo="drivetow" /> Drive/Tow Away</label>
        <label><input type="checkbox" data-cargo="logs" /> Logs/Poles/Lumber</label>
        <label><input type="checkbox" data-cargo="building_materials" /> Building Materials</label>
        <label><input type="checkbox" data-cargo="mobile_homes" /> Mobile Homes</label>
        <label><input type="checkbox" data-cargo="machinery" /> Machinery/Large Objects</label>
        <label><input type="checkbox" data-cargo="fresh_produce" /> Fresh Produce</label>
        <label><input type="checkbox" data-cargo="liquids" /> Liquids/Gases</label>
        <label><input type="checkbox" data-cargo="intermodal" /> Intermodal Containers</label>
        <label><input type="checkbox" data-cargo="passengers" /> Passengers</label>
        <label><input type="checkbox" data-cargo="oilfield" /> Oilfield Equipment</label>
        <label><input type="checkbox" data-cargo="livestock" /> Livestock</label>
        <label><input type="checkbox" data-cargo="grain" /> Grain/Feed/Hay</label>
        <label><input type="checkbox" data-cargo="coal" /> Coal/Coke</label>
        <label><input type="checkbox" data-cargo="meat" /> Meat</label>
        <label><input type="checkbox" data-cargo="garbage" /> Garbage/Refuse</label>
        <label><input type="checkbox" data-cargo="chemicals" /> Chemicals</label>
        <label><input type="checkbox" data-cargo="refrigerated" /> Refrigerated Food</label>
        <label><input type="checkbox" data-cargo="beverages" /> Beverages</label>
        <label><input type="checkbox" data-cargo="construction" /> Construction</label>
        <label><input type="checkbox" data-cargo="other" /> Other</label>
      </div>
    </div>

    <!-- ═══ SECTION: D&A Program (D&A, bundles) ═══ -->
    <div id="dot-sec-da" hidden>
      <h3>Drug & Alcohol Compliance Program</h3>
      <p class="pw-field-help">Required for all carriers with CDL drivers. We will enroll you in a DOT-compliant consortium and set up your program.</p>
      <div class="pw-row-3">
        <label class="pw-field"><span>CDL Drivers <em>*</em></span>
          <input type="number" id="dot-cdl-drivers" min="0" placeholder="Number of CDL holders" /></label>
        <label class="pw-field"><span>Owner-Operators <em>*</em></span>
          <input type="number" id="dot-owner-ops" min="0" value="0" /></label>
        <label class="pw-field"><span>DER Name</span>
          <input type="text" id="dot-der-name" placeholder="Designated Employer Rep (optional)" /></label>
      </div>
      <div class="pw-row">
        <label class="pw-field"><span>Current D&A Program Provider</span>
          <input type="text" id="dot-current-da" placeholder="Leave blank if none / first time" /></label>
      </div>
    </div>

    <!-- ═══ SECTION: BOC-3 (BOC-3, bundles) ═══ -->
    <div id="dot-sec-boc3" hidden>
      <h3>BOC-3 Process Agent</h3>
      <p class="pw-field-help">We will designate a blanket process agent covering all 48 contiguous states + DC.</p>
      <div class="pw-row-2">
        <label class="pw-field"><span>Docket Type</span>
          <select id="dot-docket-type">
            <option value="">Select if applicable...</option>
            <option value="MC">MC (Motor Carrier)</option>
            <option value="FF">FF (Freight Forwarder)</option>
            <option value="MX">MX (Mexican Carrier)</option>
          </select></label>
        <label class="pw-field"><span>Docket Number</span>
          <input type="text" id="dot-docket-num" placeholder="e.g. 123456" /></label>
      </div>
    </div>

    <!-- ═══ SECTION: Authorized Signer (always shown) ═══ -->
    <h3>Authorized Signer</h3>
    <div class="pw-row-2">
      <label class="pw-field"><span>Full Name <em>*</em></span>
        <input type="text" id="dot-signer-name" required placeholder="Owner or officer" /></label>
      <label class="pw-field"><span>Title <em>*</em></span>
        <input type="text" id="dot-signer-title" required placeholder="e.g. Owner, President" /></label>
    </div>

    <!-- ═══ SECTION: Photo ID (MCS-150, MC Auth) ═══ -->
    <div id="dot-sec-photo-id" hidden>
      <h3>Government-Issued Photo ID</h3>
      <p class="pw-field-help">Required for FMCSA filings. Driver's license, passport, or state ID.</p>
      <div class="pw-upload-area">
        <input type="file" id="dot-photo-id" accept="image/*,.pdf" capture="environment" style="display:none" />
        <div id="dot-id-preview" hidden style="display:flex;align-items:center;gap:12px;justify-content:center">
          <img id="dot-id-img" style="max-width:200px;max-height:150px;border-radius:6px;border:1px solid #d1d5db" />
          <button type="button" id="dot-id-remove" style="background:#fee2e2;color:#991b1b;border:none;padding:4px 12px;border-radius:4px;font-size:12px;cursor:pointer">Remove</button>
        </div>
        <div id="dot-id-upload-options">
          <div style="display:flex;flex-wrap:wrap;gap:8px;justify-content:center">
            <button type="button" id="dot-id-btn" style="display:flex;align-items:center;gap:8px;padding:10px 20px;background:#fff;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;color:#374151;font-size:13px;font-weight:500">
              <svg style="width:20px;height:20px;color:#64748b" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/></svg>
              Upload File
            </button>
            <button type="button" id="dot-id-scan-btn" style="display:flex;align-items:center;gap:8px;padding:10px 20px;background:#fff;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;color:#374151;font-size:13px;font-weight:500">
              <svg style="width:20px;height:20px;color:#64748b" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z"/></svg>
              Camera / Scanner
            </button>
          </div>
          <input type="file" id="dot-photo-id-scan" accept="image/*" capture="environment" style="display:none" />
          <div style="text-align:center;margin:12px 0 0">
            <div style="display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:8px">
              <div style="flex:1;height:1px;background:#d1d5db"></div>
              <span style="font-size:11px;color:#94a3b8;white-space:nowrap">or use your phone</span>
              <div style="flex:1;height:1px;background:#d1d5db"></div>
            </div>
            <button type="button" id="dot-id-qr-btn" style="display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:#f8fafc;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-size:12px;color:#374151">
              <svg style="width:16px;height:16px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z"/><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z"/></svg>
              Scan QR code to upload from phone
            </button>
          </div>
          <div id="dot-id-qr-container" hidden style="text-align:center;margin:16px 0 0;padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px">
            <canvas id="dot-id-qr-canvas" style="margin:0 auto;display:block"></canvas>
            <p style="font-size:12px;color:#64748b;margin:10px 0 0">Scan this QR code with your phone's camera to open this form on your mobile device and take a photo of your ID.</p>
          </div>
        </div>
      </div>
      <div class="pw-security-notice" style="margin-top:8px">
        <svg style="width:14px;height:14px;flex-shrink:0;margin-top:2px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
        <span style="font-size:11px">Your ID is encrypted in transit and at rest. Used only for FMCSA identity verification and automatically deleted after filing.</span>
      </div>
    </div>
  </div>

  <div id="pw-dot-errors" class="pw-err" hidden></div>
</div>

<style>
  .pw-step h2 { margin: 0 0 0.5rem; color: #1a2744; }
  .pw-step h3 { color: #1a2744; margin: 1.25rem 0 0.5rem; font-size: 0.95rem; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.3rem; }
  .pw-help { color: #64748b; font-size: 0.9rem; margin-bottom: 1rem; }
  .pw-form-grid { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem 1.25rem; }
  .pw-row, .pw-row-2, .pw-row-3 { margin-bottom: 0.75rem; }
  .pw-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .pw-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
  .pw-field { display: flex; flex-direction: column; gap: 0.2rem; }
  .pw-field span { font-size: 0.8rem; font-weight: 600; color: #374151; }
  .pw-field em { color: #dc2626; font-style: normal; }
  .pw-field input, .pw-field select { padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; }
  .pw-field input:focus, .pw-field select:focus { outline: none; border-color: #f97316; box-shadow: 0 0 0 2px rgba(249,115,22,0.2); }
  .pw-field-help { font-size: 0.8rem; color: #64748b; margin: 0 0 0.5rem; }
  .pw-cargo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.3rem 1rem; font-size: 0.85rem; color: #374151; }
  .pw-cargo-grid label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
  .pw-security-notice { display: flex; gap: 8px; align-items: flex-start; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 14px; margin-bottom: 1rem; font-size: 12px; color: #1e40af; line-height: 1.5; }
  .pw-upload-area { border: 2px dashed #d1d5db; border-radius: 8px; padding: 1rem; text-align: center; }
  .pw-err { color: #b91c1c; margin-top: 0.75rem; font-size: 0.9rem; background: #fee2e2; padding: 0.5rem 0.75rem; border-radius: 6px; }
  @media (max-width: 640px) { .pw-row-2, .pw-row-3 { grid-template-columns: 1fr; } .pw-cargo-grid { grid-template-columns: 1fr 1fr; } }
</style>

<script is:inline>
  // Guard: only run on pages that have the DOT intake step
  if (!document.querySelector('[data-slug="dot-intake"], [data-step="dot-intake"]')) {
    // Not a DOT intake page — skip all initialization
  } else {

  // Determine which sections to show based on services in the batch
  const DOT_SECTIONS = {
    "mcs150-update": ["dot-sec-operations","dot-sec-fleet","dot-sec-cargo","dot-sec-photo-id"],
    "ucr-registration": ["dot-sec-fleet","dot-sec-ucr"],
    "dot-drug-alcohol": ["dot-sec-da"],
    "boc3-filing": ["dot-sec-boc3"],
    "dot-registration": ["dot-sec-operations"],
    "mc-authority": ["dot-sec-operations","dot-sec-photo-id"],
    "dot-audit-prep": ["dot-sec-operations","dot-sec-fleet","dot-sec-da"],
    "dot-full-compliance": ["dot-sec-operations","dot-sec-fleet","dot-sec-cargo","dot-sec-ucr","dot-sec-da","dot-sec-boc3","dot-sec-photo-id"],
  };

  function showRelevantSections() {
    const PW = (window).PWIntake;
    const state = PW?.get?.() || {};
    // Get service slug from wizard element or state
    const wizardEl = document.querySelector(".pw-wizard[data-service]");
    const pageSlug = wizardEl?.getAttribute("data-service") || "";
    const slugs = state.batch_slugs || [pageSlug || state.service_slug || ""];

    // Collect all sections to show
    const show = new Set();
    for (const slug of slugs) {
      for (const sec of (DOT_SECTIONS[slug] || [])) {
        show.add(sec);
      }
    }
    // Default: always show operations + fleet if nothing specific
    if (show.size === 0) {
      show.add("dot-sec-operations");
      show.add("dot-sec-fleet");
    }

    // Show/hide sections
    for (const id of Object.keys(DOT_SECTIONS).flatMap(k => DOT_SECTIONS[k])) {
      const el = document.getElementById(id);
      if (el) el.hidden = !show.has(id);
    }

    // Auto-fill UCR base state from address
    const stateEl = document.getElementById("dot-state");
    const ucrState = document.getElementById("dot-ucr-state");
    if (stateEl && ucrState) {
      ucrState.value = stateEl.value;
      stateEl.addEventListener("change", () => { ucrState.value = stateEl.value; });
    }
  }

  // Show sections — retry until wizard element is found
  function initSections() {
    const wizardEl = document.querySelector(".pw-wizard[data-service]");
    if (!wizardEl) { setTimeout(initSections, 100); return; }
    showRelevantSections();
  }
  initSections();
  window.addEventListener("pw:step-shown", (evt) => {
    if (evt.detail.step !== "dot-intake") return;
    showRelevantSections();

    // Hydrate from existing intake data
    const s = (window).PWIntake.get();
    const d = s.intake_data || {};
    const map = {
      "dot-legal-name": d.legal_name || "", "dot-dba": d.dba_name || "",
      "dot-dot": d.dot_number || "", "dot-mc": d.mc_number || "", "dot-ein": d.ein || "",
      "dot-street": d.address_street || "", "dot-city": d.address_city || "",
      "dot-state": d.address_state || "", "dot-zip": d.address_zip || "",
      "dot-phone": d.phone || "", "dot-email": d.email || s.email || "",
      "dot-entity-type": d.entity_type || "", "dot-carrier-op": d.carrier_operation || "",
      "dot-interstate": d.interstate_intrastate || "", "dot-hazmat": d.hazmat || "",
      "dot-power-units": d.power_units || "", "dot-drivers": d.drivers || "",
      "dot-miles": d.annual_miles || "", "dot-signer-name": d.signer_name || "",
      "dot-signer-title": d.signer_title || "", "dot-cdl-drivers": d.cdl_drivers || "",
      "dot-owner-ops": d.owner_operators || "0", "dot-der-name": d.der_name || "",
      "dot-current-da": d.current_da_provider || "", "dot-ucr-bracket": d.fleet_size_bracket || "",
    };
    for (const [id, val] of Object.entries(map)) {
      const el = document.getElementById(id);
      if (el && val) el.value = val;
    }
  });

  // Save all data on step-next
  window.addEventListener("pw:step-next", (evt) => {
    const PW = (window).PWIntake;
    if (PW.steps[PW.get().step_index] !== "dot-intake") return;
    const errDiv = document.getElementById("pw-dot-errors");
    errDiv.hidden = true;

    // Validate required fields (only visible ones)
    const required = ["dot-legal-name","dot-dot","dot-street","dot-city","dot-state","dot-zip","dot-phone","dot-email","dot-signer-name","dot-signer-title"];
    const missing = [];
    for (const id of required) {
      const el = document.getElementById(id);
      if (!el || !el.value.trim()) missing.push(el?.parentElement?.querySelector("span")?.textContent || id);
    }
    // Validate visible-section-specific required fields
    const visibleRequired = {
      "dot-sec-operations": ["dot-entity-type","dot-carrier-op","dot-interstate","dot-hazmat"],
      "dot-sec-fleet": ["dot-power-units","dot-drivers"],
    };
    for (const [secId, fields] of Object.entries(visibleRequired)) {
      const sec = document.getElementById(secId);
      if (sec && !sec.hidden) {
        for (const id of fields) {
          const el = document.getElementById(id);
          if (!el || !el.value.trim()) missing.push(el?.parentElement?.querySelector("span")?.textContent || id);
        }
      }
    }
    if (missing.length) { evt.preventDefault(); errDiv.hidden = false; errDiv.textContent = "Please fill in: " + missing.join(", "); return; }

    // Collect cargo types
    const cargoTypes = [];
    document.querySelectorAll("[data-cargo]").forEach(function(cb) {
      if (cb.checked) cargoTypes.push(cb.dataset.cargo);
    });

    const val = (id) => (document.getElementById(id))?.value?.trim() || "";
    const state = PW.get();
    PW.set({ ...state, intake_data: { ...state.intake_data,
      legal_name: val("dot-legal-name"), dba_name: val("dot-dba"),
      dot_number: val("dot-dot"), mc_number: val("dot-mc"), ein: val("dot-ein"),
      address_street: val("dot-street"), address_city: val("dot-city"),
      address_state: val("dot-state"), address_zip: val("dot-zip"),
      phone: val("dot-phone"), email: val("dot-email"),
      entity_type: val("dot-entity-type"), carrier_operation: val("dot-carrier-op"),
      interstate_intrastate: val("dot-interstate"), hazmat: val("dot-hazmat"),
      power_units: val("dot-power-units"), drivers: val("dot-drivers"),
      annual_miles: val("dot-miles"), cargo_types: cargoTypes,
      signer_name: val("dot-signer-name"), signer_title: val("dot-signer-title"),
      fleet_size_bracket: val("dot-ucr-bracket"), base_state: val("dot-ucr-state"),
      cdl_drivers: val("dot-cdl-drivers"), owner_operators: val("dot-owner-ops"),
      der_name: val("dot-der-name"), current_da_provider: val("dot-current-da"),
      docket_type: val("dot-docket-type"), docket_number: val("dot-docket-num"),
      photo_id_uploaded: !!(window).__dotPhotoId,
    }});
  });

  // Photo ID upload (elements may not exist if section is hidden)
  const idBtn = document.getElementById("dot-id-btn");
  const idInput = document.getElementById("dot-photo-id");
  const idPreview = document.getElementById("dot-id-preview");
  const idImg = document.getElementById("dot-id-img");
  const idRemove = document.getElementById("dot-id-remove");
  const idQrBtn = document.getElementById("dot-id-qr-btn");
  const idQrContainer = document.getElementById("dot-id-qr-container");
  const idUploadOpts = document.getElementById("dot-id-upload-options");

  // Upload button — opens file picker
  idBtn?.addEventListener("click", function() { if (idInput) idInput.click(); });

  // Scanner/camera button — uses capture attribute to trigger camera or scanner
  var idScanBtn = document.getElementById("dot-id-scan-btn");
  var idScanInput = document.getElementById("dot-photo-id-scan");
  idScanBtn?.addEventListener("click", function() { if (idScanInput) idScanInput.click(); });
  idScanInput?.addEventListener("change", function() {
    var file = idScanInput.files?.[0];
    if (!file) return;
    // Copy to main input handler
    window.__dotPhotoId = file;
    if (file.type.startsWith("image/") && idImg) {
      var reader = new FileReader();
      reader.onload = function(e) { idImg.src = e.target?.result; };
      reader.readAsDataURL(file);
    }
    if (idPreview) idPreview.hidden = false;
    if (idUploadOpts) idUploadOpts.style.display = "none";
  });

  // QR code button — show QR with current page URL for phone upload
  idQrBtn?.addEventListener("click", function() {
    if (!idQrContainer) return;
    var showing = !idQrContainer.hidden;
    idQrContainer.hidden = showing;
    if (!showing) {
      // Generate QR code using canvas
      var canvas = document.getElementById("dot-id-qr-canvas");
      if (canvas && !canvas.dataset.rendered) {
        var url = window.location.href;
        // Use a simple QR code API (Google Charts - no library needed)
        var img = new Image();
        img.crossOrigin = "anonymous";
        img.onload = function() {
          canvas.width = 200;
          canvas.height = 200;
          var ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, 200, 200);
          canvas.dataset.rendered = "1";
        };
        img.src = "https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=" + encodeURIComponent(url);
      }
    }
  });

  idInput?.addEventListener("change", function() {
    var file = idInput.files?.[0];
    if (!file) return;
    window.__dotPhotoId = file;
    if (file.type.startsWith("image/")) {
      const reader = new FileReader();
      reader.onload = (e) => { idImg.src = e.target?.result; };
      reader.readAsDataURL(file);
    }
    if (idPreview) idPreview.hidden = false;
    if (idUploadOpts) idUploadOpts.style.display = "none";
  });
  idRemove?.addEventListener("click", () => {
    (window).__dotPhotoId = null;
    if (idInput) idInput.value = "";
    if (idScanInput) idScanInput.value = "";
    if (idPreview) idPreview.hidden = true;
    if (idUploadOpts) idUploadOpts.style.display = "";
  });

  } // end guard
</script>