<?php include __DIR__ . '/../includes/header.php'; ?>


<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--ivory:#FAFAF7;--white:#fff;--navy:#0F1628;--gold:#B8890A;--gold-light:#F5EDD3;--gold-ring:#D4A82A;
--muted:#7D8799;--border:#EDE9DF;--bf:#F4F1EB;
--profit:#0F7A5A;--profit-bg:#EDFAF4;--loss:#C94848;--loss-bg:#FDF0F0;--blue:#1D5FCC;
--error:#C94848;
}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--ivory);color:var(--navy);}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}

/* HERO */
.hero{background:var(--navy);padding:38px 22px 0;position:relative;overflow:hidden;}
.hgeo::before{content:'';position:absolute;top:-50px;right:-50px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(212,168,42,.12);pointer-events:none;}
.hi{position:relative;z-index:2;}
.bc{font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:14px;display:flex;align-items:center;gap:5px;animation:slideRight .5s ease both;}
.bc span{color:#CBD5E1}
h1{font-family:Georgia,serif;font-size:clamp(22px,4vw,36px);font-weight:700;color:#fff;line-height:1.15;margin-bottom:8px;animation:fadeUp .6s .1s ease both;}
h1 em{font-style:italic;color:var(--gold);}
.hacc{width:36px;height:3px;background:var(--gold);border-radius:2px;margin-bottom:12px;animation:fadeUp .6s .15s ease both;}
.hsub{font-size:13px;color:rgba(255,255,255,.5);font-weight:500;max-width:460px;line-height:1.7;margin-bottom:28px;animation:fadeUp .6s .2s ease both;}
.fb{display:flex;gap:1px;background:rgba(255,255,255,.06);border-top:1px solid rgba(255,255,255,.07);margin:0 -22px;animation:fadeUp .6s .25s ease both;}
.fp{flex:1;display:flex;align-items:center;gap:10px;padding:14px 16px;}
.fpi{width:30px;height:30px;border-radius:7px;background:rgba(212,168,42,.15);border:1px solid rgba(212,168,42,.2);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--gold);flex-shrink:0;}
.fpt{font-size:11px;font-weight:700;color:#fff;margin-bottom:2px;}
.fps{font-size:10px;color:rgba(255,255,255,.4);font-weight:500;}

/* LAYOUT */
.pw{padding:40px 28px 32px;max-width:1200px;margin:0 auto;background:transparent;}
.layout{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start;}

/* FORM CARD */
.fc{background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 8px 30px rgba(15,22,40,.06);margin-bottom:18px;animation:fadeUp .5s ease both;}
.ch{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--border);font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--navy);}
.ch i{color:var(--gold);font-size:11px;}
.cb{padding:22px;}

/* SECTION LABEL */
.fsl{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:14px;margin-top:22px;}
.fsl::after{content:'';flex:1;height:1px;background:var(--border);}
.fsl:first-of-type{margin-top:0;}
.fsl i{color:var(--gold);font-size:9px;}

/* FIELD */
.field{margin-bottom:14px;}
.field:last-child{margin-bottom:0;}
.fl{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--navy);margin-bottom:6px;}
.req{color:var(--error);font-size:12px;}
.fh{font-size:10px;color:var(--muted);font-weight:500;margin-left:auto;}

/* INPUTS */
.iw{position:relative;}
.inp{width:100%;padding:10px 13px;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:12px;font-weight:500;color:var(--navy);background:var(--white);outline:none;transition:border-color .2s,box-shadow .2s;}
.inp::placeholder{color:var(--muted);font-weight:400;}
.inp:focus{border-color:var(--gold-ring);box-shadow:0 0 0 3px rgba(212,168,42,.1);}
.inp.err2{border-color:var(--error);box-shadow:0 0 0 3px rgba(201,72,72,.08);}
.iico{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:11px;pointer-events:none;}
textarea.inp{resize:vertical;min-height:85px;line-height:1.6;padding-top:10px;}
.cc{display:flex;justify-content:flex-end;font-size:10px;font-weight:600;color:var(--muted);margin-top:4px;}

/* AUTOCOMPLETE */
.adrop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--white);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 16px rgba(15,22,40,.08);z-index:50;display:none;overflow:hidden;}
.adrop li{list-style:none;padding:9px 13px;font-size:12px;font-weight:500;cursor:pointer;transition:.15s;}
.adrop li:hover{background:var(--ivory);}

/* ERROR */
.em{display:none;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--error);margin-top:4px;}
.em.show{display:flex;}
.em i{font-size:9px;}

/* PHONE ROW */
.pr{display:flex;}
.cbtn{display:flex;align-items:center;gap:5px;background:var(--ivory);border:1px solid var(--border);border-right:none;border-radius:8px 0 0 8px;padding:0 10px;cursor:pointer;white-space:nowrap;font-size:11px;font-weight:700;color:var(--navy);min-width:90px;}
.cbtn img{width:18px;height:12px;object-fit:contain;border-radius:2px;}
.cbtn i{font-size:8px;color:var(--muted);margin-left:auto;}
.pr .inp{border-radius:0 8px 8px 0;}

/* COUNTRY DROP */
.cdrop{position:absolute;top:calc(100% + 4px);left:0;width:260px;background:var(--white);border:1px solid var(--border);border-radius:9px;box-shadow:0 8px 24px rgba(15,22,40,.12);z-index:100;display:none;overflow:hidden;}
.cds{padding:10px;border-bottom:1px solid var(--border);}
.cdsi{display:flex;align-items:center;gap:7px;background:var(--ivory);border:1px solid var(--border);border-radius:7px;padding:7px 10px;}
.cdsi input{flex:1;border:none;background:none;outline:none;font-size:11px;font-family:inherit;}
.cdl{display:flex;flex-wrap:wrap;gap:2px;padding:7px 10px;border-bottom:1px solid var(--bf);}
.cdl button{font-size:9px;font-weight:700;padding:2px 5px;border:none;background:none;cursor:pointer;color:var(--muted);border-radius:3px;}
.cdl button:hover,.cdl button.act{background:var(--gold-light);color:var(--gold);}
.cdlist{max-height:180px;overflow-y:auto;padding:6px;}
.cdgl{font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);padding:5px 7px;}
.cdi{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:11px;font-weight:600;transition:.15s;}
.cdi:hover{background:var(--ivory);}
.cdi img{width:18px;height:12px;object-fit:contain;border-radius:2px;}
.cdi .cp{color:var(--muted);font-size:10px;min-width:36px;}

/* CONTACT TABS */
.ctabs{display:flex;gap:5px;margin-bottom:14px;flex-wrap:wrap;}
.ct{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:5px 10px;border-radius:6px;border:1px solid var(--border);background:var(--white);color:var(--muted);cursor:pointer;transition:.2s;}
.ct:hover{border-color:var(--gold-ring);color:var(--gold);}
.ct.act{background:var(--gold-light);border-color:var(--gold-ring);color:var(--gold);}
.cpanel{display:none;}
.cpanel.act{display:block;}

/* UPLOAD */
.uz{display:flex;flex-wrap:wrap;gap:8px;}
.uth{width:76px;height:76px;border-radius:8px;border:1px solid var(--border);overflow:hidden;position:relative;background:var(--ivory);}
.uth img{width:100%;height:100%;object-fit:cover;}
.utho{position:absolute;inset:0;background:rgba(15,22,40,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:.2s;}
.uth:hover .utho{opacity:1;}
.utho button{background:none;border:none;color:#fff;cursor:pointer;font-size:13px;}
.ubtn{width:76px;height:76px;border-radius:8px;border:2px dashed var(--border);background:var(--ivory);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:.2s;color:var(--muted);font-size:9px;font-weight:600;}
.ubtn:hover{border-color:var(--gold-ring);background:var(--gold-light);color:var(--gold);}
.ubtn i{font-size:17px;}
.unote{font-size:10px;color:var(--muted);font-weight:500;margin-top:7px;}

/* SUBMIT ROW */
.sr{margin-top:20px;display:flex;align-items:center;gap:10px;}
.sbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;background:var(--navy);color:#fff;font-family:inherit;font-size:13px;font-weight:800;padding:12px 20px;border:none;border-radius:9px;cursor:pointer;transition:.2s;}
.sbtn:hover{background:#1e2b4a;}
.rbtn{padding:12px 16px;border:1px solid var(--border);background:var(--white);color:var(--muted);font-family:inherit;font-size:12px;font-weight:700;border-radius:9px;cursor:pointer;transition:.2s;}
.rbtn:hover{border-color:var(--error);color:var(--error);}

/* SIDEBAR */
.sb{display:flex;flex-direction:column;gap:14px;}
.sc{background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(15,22,40,.04);}
.sch{display:flex;align-items:center;gap:7px;padding:12px 15px;border-bottom:1px solid var(--border);font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--navy);}
.sch i{color:var(--gold);font-size:11px;}
.scb{padding:14px 15px;}
.ps{display:flex;flex-direction:column;gap:0;}
.psi{display:flex;gap:10px;align-items:flex-start;padding-bottom:16px;position:relative;}
.psi:last-child{padding-bottom:0;}
.psi::before{content:'';position:absolute;left:9px;top:20px;bottom:0;width:2px;background:var(--bf);}
.psi:last-child::before{display:none;}
.psd{width:20px;height:20px;border-radius:50%;background:var(--white);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--muted);flex-shrink:0;z-index:1;}
.psd.act{background:var(--gold-light);border-color:var(--gold-ring);color:var(--gold);}
.psl{font-size:12px;font-weight:700;color:var(--navy);margin-bottom:2px;}
.pss{font-size:10px;color:var(--muted);font-weight:500;}
.tl{display:flex;flex-direction:column;gap:10px;}
.ti{display:flex;gap:8px;align-items:flex-start;}
.tn{width:18px;height:18px;border-radius:50%;background:var(--gold-light);border:1px solid var(--gold-ring);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:var(--gold);flex-shrink:0;}
.tt{font-size:11px;color:var(--muted);font-weight:500;line-height:1.6;}
.supcta{background:linear-gradient(135deg,var(--navy),#1e3a6e);border-radius:12px;padding:18px 16px;text-align:center;position:relative;overflow:hidden;}
.supcta::before{content:'';position:absolute;top:-25px;right:-25px;width:80px;height:80px;border-radius:50%;background:rgba(212,168,42,.1);}
.sci{font-size:20px;margin-bottom:8px;}
.sct{font-family:Georgia,serif;font-size:14px;font-weight:700;color:#fff;margin-bottom:4px;}
.sct em{font-style:italic;color:var(--gold-ring);}
.scs{font-size:10px;color:rgba(255,255,255,.5);margin-bottom:12px;font-weight:500;}
.scb2{display:inline-flex;align-items:center;gap:5px;background:var(--gold);color:var(--navy);font-size:11px;font-weight:800;padding:7px 14px;border-radius:6px;border:none;cursor:pointer;}

/* MODAL */
.mo{display:none;position:fixed;inset:0;background:rgba(15,22,40,.5);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.mo.show{display:flex;}
.modal{background:var(--white);border-radius:14px;padding:32px 28px;max-width:340px;width:90%;text-align:center;box-shadow:0 16px 48px rgba(15,22,40,.16);animation:fadeUp .4s ease;}
.mi{font-size:40px;color:var(--profit);margin-bottom:12px;}
.mt{font-family:Georgia,serif;font-size:20px;font-weight:700;margin-bottom:8px;}
.mt em{font-style:italic;color:var(--gold);}
.ms{font-size:12px;color:var(--muted);font-weight:500;line-height:1.7;margin-bottom:20px;}
.mb{display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;font-family:inherit;font-size:12px;font-weight:700;padding:10px 22px;border:none;border-radius:8px;cursor:pointer;}
</style>

<!-- HERO -->
<div class="hero">
  <div class="hgeo"></div>
  <div class="hi">
    <div class="bc"><span>Home</span><span>/</span><span>Broker Inquiry</span><span>/</span><strong style="color:rgba(255,255,255,.6)">Update Request</strong></div>
    <h1>Broker Information <em>Update</em> Request</h1>
    <div class="hacc"></div>
    <p class="hsub">Submit corrections or updated regulatory information. Our team reviews every submission within 5 working days.</p>
  </div>
  <div class="fb">
    <div class="fp"><div class="fpi">👑</div><div><div class="fpt">Rich Interests</div><div class="fps">Interests continue to enrich</div></div></div>
    <div class="fp"><div class="fpi">⚡</div><div><div class="fpt">Quick Response</div><div class="fps">Pre-review in 5 working days</div></div></div>
    <div class="fp"><div class="fpi">⚖️</div><div><div class="fpt">Fair Identification</div><div class="fps">Collected and identified fairly</div></div></div>
    <div class="fp"><div class="fpi">🚀</div><div><div class="fpt">Fast Implementation</div><div class="fps">Feedback lands quickly</div></div></div>
  </div>
</div>

<!-- CONTENT -->
<div class="pw">
  <div class="layout">
    <div>
      <!-- Basic Info Card -->
      <div class="fc">
        <div class="ch"><i class="fas fa-id-card"></i> Basic Information</div>
        <div class="cb">
          <div class="fsl"><i class="fas fa-user"></i> Personal Details</div>

          <div class="field">
            <div class="fl"><span class="req">*</span> Last Name</div>
            <div class="iw"><input type="text" id="lastName" class="inp" placeholder="Enter your last name"></div>
            <div class="em" id="e1"><i class="fas fa-circle-exclamation"></i> This field is required</div>
          </div>

          <div class="field">
            <div class="fl"><span class="req">*</span> Company Name <span class="fh">Type to search</span></div>
            <div class="iw">
              <input type="text" id="co" class="inp" placeholder="Search for company name…" autocomplete="off">
              <i class="fas fa-magnifying-glass iico"></i>
              <ul class="adrop" id="adrop"></ul>
            </div>
            <div class="em" id="e2"><i class="fas fa-circle-exclamation"></i> This field is required</div>
          </div>

          <div class="field">
            <div class="fl"><span class="req">*</span> Email Address</div>
            <div class="iw"><input type="email" id="email" class="inp" placeholder="your@email.com"><i class="fas fa-envelope iico"></i></div>
            <div class="em" id="e3"><i class="fas fa-circle-exclamation"></i> Please enter a valid email address</div>
          </div>

          <div class="fsl" style="margin-top:20px"><i class="fas fa-address-book"></i> Contact Info <span style="font-size:10px;font-weight:400;color:var(--muted);letter-spacing:0;text-transform:none">(at least one)</span></div>

          <div class="ctabs">
            <button class="ct act" data-p="phone"><i class="fas fa-mobile-screen-button" style="color:#52A6EC"></i> Phone</button>
            <button class="ct" data-p="wechat"><i class="fab fa-weixin" style="color:#28C445"></i> WeChat</button>
            <button class="ct" data-p="whatsapp"><i class="fab fa-whatsapp" style="color:#28C445"></i> WhatsApp</button>
            <button class="ct" data-p="other"><i class="fas fa-ellipsis"></i> Other</button>
          </div>

          <div class="cpanel act" id="panel-phone">
            <div class="field">
              <div class="pr" style="position:relative">
                <button type="button" class="cbtn" id="cbtn"><img src="https://img.souhei.com.cn/flag/d7ed3e7b4fdbf486/IN.png_wiki-template-global" id="cf"><span id="cc">IN</span><span id="cp" style="color:var(--muted);font-size:10px">+91</span><i class="fas fa-chevron-down"></i></button>
                <div class="cdrop" id="cdrop">
                  <div class="cds"><div class="cdsi"><i class="fas fa-magnifying-glass" style="color:var(--muted);font-size:10px"></i><input type="text" id="cds" placeholder="Search country…"></div></div>
                  <div class="cdl" id="cdl"></div>
                  <div class="cdlist" id="cdlist"></div>
                </div>
                <input type="tel" id="phone" class="inp" placeholder="Mobile number" maxlength="20">
              </div>
              <div class="em" id="e4"><i class="fas fa-circle-exclamation"></i> Phone number format is invalid</div>
            </div>
          </div>
          <div class="cpanel" id="panel-wechat"><div class="field"><div class="iw"><input type="text" id="wechat" class="inp" placeholder="WeChat ID"><i class="fab fa-weixin iico" style="color:#28C445"></i></div></div></div>
          <div class="cpanel" id="panel-whatsapp"><div class="field"><div class="iw"><input type="text" id="wa" class="inp" placeholder="WhatsApp number or ID"><i class="fab fa-whatsapp iico" style="color:#28C445"></i></div></div></div>
          <div class="cpanel" id="panel-other"><div class="field"><div class="iw" style="margin-bottom:8px"><input type="text" id="oa" class="inp" placeholder="App name (e.g. Telegram)"></div><div class="iw"><input type="text" id="oi" class="inp" placeholder="Account / username"></div></div></div>
          <div class="em" id="e5"><i class="fas fa-circle-exclamation"></i> Fill in at least one contact method</div>
        </div>
      </div>

      <!-- Update Details Card -->
      <div class="fc" style="animation-delay:.12s">
        <div class="ch"><i class="fas fa-file-pen"></i> Update Details</div>
        <div class="cb">
          <div class="fsl"><i class="fas fa-pen-to-square"></i> Describe the Update</div>
          <div class="field">
            <div class="fl"><span class="req">*</span> Updated Content</div>
            <div class="iw"><textarea id="content" class="inp" placeholder="Describe the information you want to update or correct (0–500 characters)…" maxlength="500"></textarea></div>
            <div class="cc"><span id="cnt">0</span> / 500</div>
            <div class="em" id="e6"><i class="fas fa-circle-exclamation"></i> This field is required</div>
          </div>

          <div class="fsl" style="margin-top:20px"><i class="fas fa-image"></i> Attachments <span id="ulbl" style="font-size:10px;font-weight:400;color:var(--muted);letter-spacing:0;text-transform:none">(0/5 · max 10MB)</span></div>
          <div class="uz" id="uz">
            <label class="ubtn" for="fi"><i class="fas fa-arrow-up-from-bracket"></i>Add Photo</label>
            <input type="file" id="fi" accept="image/*" multiple style="display:none">
          </div>
          <div class="unote">JPG, PNG, GIF, WEBP · Max 10MB per file</div>

          <div class="sr">
            <button class="rbtn" id="rst"><i class="fas fa-rotate-left"></i> Reset</button>
            <button class="sbtn" id="sub"><i class="fas fa-paper-plane"></i> Submit Request</button>
          </div>
        </div>
      </div>
    </div>

    <!-- SIDEBAR -->
    <div class="sb">
      <div class="sc">
        <div class="sch"><i class="fas fa-circle-info"></i> Submission Process</div>
        <div class="scb">
          <div class="ps">
            <div class="psi"><div class="psd act">1</div><div><div class="psl">Fill the Form</div><div class="pss">Complete all required fields with accurate information.</div></div></div>
            <div class="psi"><div class="psd">2</div><div><div class="psl">Pre-review</div><div class="pss">Our team reviews within 5 working days.</div></div></div>
            <div class="psi"><div class="psd">3</div><div><div class="psl">Verification</div><div class="pss">We verify supporting documents and sources.</div></div></div>
            <div class="psi"><div class="psd">4</div><div><div class="psl">Published</div><div class="pss">Approved updates go live on the platform.</div></div></div>
          </div>
        </div>
      </div>

      <div class="sc">
        <div class="sch"><i class="fas fa-lightbulb"></i> Tips</div>
        <div class="scb">
          <div class="tl">
            <div class="ti"><div class="tn">1</div><div class="tt">Include the exact broker name and license number where possible.</div></div>
            <div class="ti"><div class="tn">2</div><div class="tt">Attach screenshots or documents to speed up verification.</div></div>
            <div class="ti"><div class="tn">3</div><div class="tt">Describe clearly — old value vs. new value works best.</div></div>
            <div class="ti"><div class="tn">4</div><div class="tt">Use a valid email so we can notify you of the outcome.</div></div>
          </div>
        </div>
      </div>

      <div class="supcta">
        <div class="sci">🛡️</div>
        <div class="sct">Need <em>Help</em>?</div>
        <div class="scs">Our support team is available 24/7 for fraud reports and complex cases.</div>
        <button class="scb2">Contact Support</button>
      </div>
    </div>
  </div>
</div>

<!-- SUCCESS MODAL -->
<div class="mo" id="mo">
  <div class="modal">
    <div class="mi"><i class="fas fa-circle-check"></i></div>
    <div class="mt">Request <em>Submitted!</em></div>
    <p class="ms">Your information update request has been received. Our team will review it within 5 working days and contact you with the outcome.</p>
    <button class="mb" id="mok"><i class="fas fa-check"></i> Got it</button>
  </div>
</div>

<script>
const countries=[
  {name:'Australia',code:'AU',prefix:'+61',flag:'https://img.souhei.com.cn/flag/045fe4098d24356d/AU.png_wiki-template-global'},
  {name:'Brazil',code:'BR',prefix:'+55',flag:'https://img.souhei.com.cn/flag/3137cbadd21ce901/BR.png_wiki-template-global'},
  {name:'Canada',code:'CA',prefix:'+1',flag:'https://img.souhei.com.cn/flag/b4b32b9e9479f387/CA.png_wiki-template-global'},
  {name:'China',code:'CN',prefix:'+86',flag:'https://img.souhei.com.cn/flag/7d8833382673bab2/CN.png_wiki-template-global'},
  {name:'France',code:'FR',prefix:'+33',flag:'https://img.souhei.com.cn/flag/432747c2bcd97b82/FR.png_wiki-template-global'},
  {name:'Germany',code:'DE',prefix:'+49',flag:'https://img.souhei.com.cn/flag/2ed6fcde5bf696a6/DE.png_wiki-template-global'},
  {name:'India',code:'IN',prefix:'+91',flag:'https://img.souhei.com.cn/flag/d7ed3e7b4fdbf486/IN.png_wiki-template-global'},
  {name:'Japan',code:'JP',prefix:'+81',flag:'https://img.souhei.com.cn/flag/afb23edb45c6c8cf/JP.png_wiki-template-global'},
  {name:'United Kingdom',code:'UK',prefix:'+44',flag:'https://img.souhei.com.cn/flag/52c9e8fc8d7d65f6/UK.png_wiki-template-global'},
  {name:'United States',code:'US',prefix:'+1',flag:'https://img.souhei.com.cn/flag/adaa5e0b8a65a672/US.png_wiki-template-global'},
];
const companies=['Blackwell Global','Markets4you','IC Markets','Pepperstone','FP Markets','TMGM','XM Global','Exness','OANDA','Interactive Brokers','BCR','squaredfinancial','Ultima Markets','LiteForex','darwinex','AXEL Markets','MONETA MARKETS','EBC Financial Group'];

// Country dropdown
(()=>{
  const btn=document.getElementById('cbtn'),drop=document.getElementById('cdrop'),search=document.getElementById('cds'),list=document.getElementById('cdlist'),letts=document.getElementById('cdl');
  const groups={};countries.forEach(c=>{const l=c.name[0];if(!groups[l])groups[l]=[];groups[l].push(c);});
  const sl=Object.keys(groups).sort();
  sl.forEach(l=>{const b=document.createElement('button');b.textContent=l;b.addEventListener('click',()=>{document.querySelectorAll('.cdl button').forEach(x=>x.classList.remove('act'));b.classList.add('act');document.querySelector('.cdg[data-l="'+l+'"]')?.scrollIntoView({behavior:'smooth',block:'start'});});letts.appendChild(b);});
  function render(f=''){list.innerHTML='';sl.forEach(l=>{const fl=groups[l].filter(c=>c.name.toLowerCase().includes(f)||c.prefix.includes(f));if(!fl.length)return;const g=document.createElement('div');g.className='cdg';g.dataset.l=l;const lbl=document.createElement('div');lbl.className='cdgl';lbl.textContent=l;g.appendChild(lbl);fl.forEach(c=>{const d=document.createElement('div');d.className='cdi';d.innerHTML=`<img src="${c.flag}"><span class="cp">${c.prefix}</span><span>${c.name}</span>`;d.addEventListener('click',()=>{document.getElementById('cf').src=c.flag;document.getElementById('cc').textContent=c.code;document.getElementById('cp').textContent=c.prefix;drop.style.display='none';});g.appendChild(d);});list.appendChild(g);});}
  render();
  btn.addEventListener('click',e=>{e.stopPropagation();drop.style.display=drop.style.display==='block'?'none':'block';});
  search.addEventListener('input',()=>render(search.value.toLowerCase()));
  document.addEventListener('click',e=>{if(!drop.contains(e.target)&&e.target!==btn)drop.style.display='none';});
})();

// Autocomplete
(()=>{
  const inp=document.getElementById('co'),drop=document.getElementById('adrop');
  inp.addEventListener('input',()=>{const v=inp.value.toLowerCase();drop.innerHTML='';if(!v){drop.style.display='none';return;}const m=companies.filter(c=>c.toLowerCase().includes(v));if(!m.length){drop.style.display='none';return;}m.forEach(c=>{const li=document.createElement('li');li.textContent=c;li.addEventListener('click',()=>{inp.value=c;drop.style.display='none';});drop.appendChild(li);});drop.style.display='block';});
  document.addEventListener('click',e=>{if(e.target!==inp)drop.style.display='none';});
})();

// Contact tabs
document.querySelectorAll('.ct').forEach(t=>{
  t.addEventListener('click',()=>{
    document.querySelectorAll('.ct').forEach(x=>x.classList.remove('act'));
    document.querySelectorAll('.cpanel').forEach(p=>p.classList.remove('act'));
    t.classList.add('act');document.getElementById('panel-'+t.dataset.p)?.classList.add('act');
  });
});

// Char counter
document.getElementById('content').addEventListener('input',function(){document.getElementById('cnt').textContent=this.value.length;});

// Upload
(()=>{
  const uz=document.getElementById('uz'),fi=document.getElementById('fi'),ubtn=uz.querySelector('.ubtn');
  let count=0;
  fi.addEventListener('change',()=>{
    Array.from(fi.files).slice(0,5-count).forEach(f=>{
      if(f.size>10*1024*1024){alert(f.name+': Too large');return;}
      if(!f.type.startsWith('image/'))return;
      const r=new FileReader();r.onload=e=>{const t=document.createElement('div');t.className='uth';t.innerHTML=`<img src="${e.target.result}"><div class="utho"><button type="button" onclick="this.closest('.uth').remove();upd()">🗑️</button></div>`;uz.insertBefore(t,ubtn);count++;upd();};r.readAsDataURL(f);
    });fi.value='';
  });
  window.upd=()=>{count=uz.querySelectorAll('.uth').length;document.getElementById('ulbl').textContent=`(${count}/5 · max 10MB)`;ubtn.style.display=count>=5?'none':'flex';};
})();

// Validation
function se(id){document.getElementById(id)?.classList.add('show');}
function he(id){document.getElementById(id)?.classList.remove('show');}
function mi(id,b){document.getElementById(id)?.classList.toggle('err2',b);}

document.getElementById('sub').addEventListener('click',()=>{
  let ok=true;
  ['e1','e2','e3','e4','e5','e6'].forEach(he);
  ['lastName','co','email','phone','content'].forEach(id=>mi(id,false));
  if(!document.getElementById('lastName').value.trim()){se('e1');mi('lastName',true);ok=false;}
  if(!document.getElementById('co').value.trim()){se('e2');mi('co',true);ok=false;}
  const em=document.getElementById('email').value.trim();
  if(!em||!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(em)){se('e3');mi('email',true);ok=false;}
  if(!document.getElementById('content').value.trim()){se('e6');mi('content',true);ok=false;}
  const ph=document.getElementById('phone').value.trim(),wc=document.getElementById('wechat').value.trim(),wa=document.getElementById('wa').value.trim(),oa=document.getElementById('oa').value.trim(),oi=document.getElementById('oi').value.trim();
  if(!ph&&!wc&&!wa&&!(oa&&oi)){se('e5');ok=false;}
  if(ph&&!/^\d{5,}$/.test(ph)){se('e4');ok=false;}
  if(ok)document.getElementById('mo').classList.add('show');
});

document.getElementById('rst').addEventListener('click',()=>{
  document.querySelectorAll('.inp').forEach(i=>{i.value='';i.classList.remove('err2');});
  document.querySelectorAll('.em').forEach(e=>e.classList.remove('show'));
  document.getElementById('cnt').textContent='0';
  document.querySelectorAll('.uth').forEach(t=>t.remove());
  window.upd&&upd();
});

document.getElementById('mok').addEventListener('click',()=>document.getElementById('mo').classList.remove('show'));
</script>


<?php include __DIR__ . '/../includes/footer.php'; ?>
