{% comment %}
  customer_portal/_portal_login_panel.html
  ─────────────────────────────────────────
  Drop this into your customer ADD and EDIT/UPDATE forms, INSIDE the same
  <form> that saves the customer:

      {% include "customer_portal/_portal_login_panel.html" %}

  On the EDIT screen, pass the existing values so it pre-fills:
      {% include "customer_portal/_portal_login_panel.html" with portal=portal %}
  where `portal` comes from:
      from customer_portal.integration import existing_portal_for_customer
      portal = existing_portal_for_customer(cust_obj)

  Fields posted (read by customer_portal.integration.sync_portal_from_request):
      portal_enabled, portal_username, portal_email, portal_pw_mode, portal_password
{% endcomment %}

<style>
  .cpl{border:1px solid #e4e9f0;border-radius:14px;background:#fbfcfe;margin:18px 0;overflow:hidden}
  .cpl .cpl-head{display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer}
  .cpl .cpl-head .sw{position:relative;width:46px;height:26px;flex:none}
  .cpl .cpl-head .sw input{opacity:0;width:0;height:0}
  .cpl .cpl-head .sw .track{position:absolute;inset:0;background:#cdd6e2;border-radius:999px;transition:.2s}
  .cpl .cpl-head .sw .track:before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
  .cpl .cpl-head .sw input:checked + .track{background:#0d7a5f}
  .cpl .cpl-head .sw input:checked + .track:before{transform:translateX(20px)}
  .cpl .cpl-head .t{font-weight:700;font-size:15px;color:#0f1c2e}
  .cpl .cpl-head .d{font-size:12.5px;color:#6b7c93}
  .cpl .cpl-body{display:none;padding:4px 20px 20px;border-top:1px solid #eef2f7}
  .cpl.open .cpl-body{display:block}
  .cpl .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
  @media(max-width:640px){.cpl .grid{grid-template-columns:1fr}}
  .cpl label{display:block;font-size:12px;font-weight:700;color:#26384d;margin:0 0 6px}
  .cpl input[type=text],.cpl input[type=email],.cpl input[type=password],.cpl select{
    width:100%;padding:10px 12px;border:1px solid #e4e9f0;border-radius:10px;font-size:14px;font-family:inherit}
  .cpl input:focus,.cpl select:focus{outline:none;border-color:#0d7a5f;box-shadow:0 0 0 3px #e6f4ef}
  .cpl .uname-msg{font-size:12px;margin-top:6px;font-weight:600;min-height:16px}
  .cpl .uname-msg.free{color:#0a5c47}.cpl .uname-msg.shareable{color:#9a6a00}.cpl .uname-msg.taken{color:#b4233a}
  .cpl .pw-modes{display:flex;gap:8px;flex-wrap:wrap}
  .cpl .pw-modes label{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #e4e9f0;border-radius:10px;padding:9px 13px;cursor:pointer;font-weight:600;font-size:13px;margin:0}
  .cpl .pw-modes label.sel{border-color:#0d7a5f;background:#e6f4ef;color:#0a5c47}
</style>

<div class="cpl {% if portal.enabled %}open{% endif %}" id="cplPanel">
  <div class="cpl-head" id="cplToggleHead">
    <label class="sw" onclick="event.stopPropagation()">
      <input type="checkbox" name="portal_enabled" id="cplEnabled" value="1" {% if portal.enabled %}checked{% endif %}>
      <span class="track"></span>
    </label>
    <div>
      <div class="t">Allow this customer to login</div>
      <div class="d">Give the customer a self-service portal: balance, ledger &amp; invoice printing.</div>
    </div>
  </div>

  <div class="cpl-body">
    <div class="grid">
      <div>
        <label>Portal username <span style="color:#b4233a">*</span></label>
        <input type="text" name="portal_username" id="cplUsername"
               value="{{ portal.username }}" autocomplete="off" placeholder="e.g. ahmed_traders">
        <div class="uname-msg" id="cplUnameMsg"></div>
      </div>
      <div>
        <label>Email</label>
        <input type="email" name="portal_email" id="cplEmail"
               value="{{ portal.email }}" autocomplete="off" placeholder="customer@email.com">
      </div>
    </div>

    <div style="margin-top:14px">
      <label>Password</label>
      <div class="pw-modes" id="cplPwModes">
        <label class="sel"><input type="radio" name="portal_pw_mode" value="manual" checked> Set password</label>
        <label><input type="radio" name="portal_pw_mode" value="phone"> Use phone number</label>
        <label><input type="radio" name="portal_pw_mode" value="default"> Default (12345678)</label>
      </div>
      <div id="cplPwWrap" style="margin-top:10px">
        <input type="text" name="portal_password" id="cplPassword" placeholder="Enter password">
      </div>
    </div>

    <div style="margin-top:12px;font-size:12px;color:#6b7c93;line-height:1.55">
      The username is a <b>global login</b>. The same username can be re-used across your other
      businesses <b>only</b> when the email &amp; phone are identical — then this customer logs in
      once and picks the business. Otherwise pick a different username.
    </div>
  </div>
</div>

<script>
(function(){
  var panel   = document.getElementById('cplPanel');
  var enabled = document.getElementById('cplEnabled');
  var head    = document.getElementById('cplToggleHead');
  var uname   = document.getElementById('cplUsername');
  var email   = document.getElementById('cplEmail');
  var msg     = document.getElementById('cplUnameMsg');
  var pwWrap  = document.getElementById('cplPwWrap');
  var pwInput = document.getElementById('cplPassword');
  var modes   = document.getElementById('cplPwModes');

  // real contact number on the customer form (name="mobile"); fall back to phone
  function getPhone(){
    var p = document.querySelector('[name="mobile"]') || document.querySelector('[name="phone"]');
    return p ? p.value : '';
  }

  head.addEventListener('click', function(){
    panel.classList.toggle('open', enabled.checked);
  });
  enabled.addEventListener('change', function(){
    panel.classList.toggle('open', enabled.checked);
  });

  // password mode selector
  modes.addEventListener('change', function(e){
    [].forEach.call(modes.querySelectorAll('label'), function(l){ l.classList.remove('sel'); });
    var sel = modes.querySelector('input:checked');
    if(sel){ sel.closest('label').classList.add('sel'); }
    pwWrap.style.display = (sel && sel.value === 'manual') ? 'block' : 'none';
  });

  // live username availability
  var timer = null;
  function checkUname(){
    var u = (uname.value||'').trim();
    if(!u){ msg.textContent=''; msg.className='uname-msg'; return; }
    var url = "{% url 'customer_portal:ajax_check_username' %}"
      + "?username=" + encodeURIComponent(u)
      + "&email="    + encodeURIComponent(email.value||'')
      + "&phone="    + encodeURIComponent(getPhone());
    fetch(url).then(function(r){return r.json();}).then(function(d){
      msg.textContent = d.message;
      msg.className = 'uname-msg ' + (d.status==='free'?'free':(d.status==='shareable'?'shareable':(d.status==='taken'?'taken':'')));
    }).catch(function(){ msg.textContent=''; });
  }
  function debounced(){ clearTimeout(timer); timer = setTimeout(checkUname, 350); }
  uname.addEventListener('input', debounced);
  email.addEventListener('input', debounced);

  // init state
  panel.classList.toggle('open', enabled.checked);
  pwWrap.style.display = 'block';

  // ── Hooks for the QUICK-EDIT (AJAX) screen ──────────────────────────────
  // Call window.cplSetPortal({enabled, username, email}) after loading a
  // customer; call window.cplReset() when clearing the form.
  window.cplSetPortal = function(p){
    p = p || {};
    enabled.checked = !!p.enabled;
    uname.value = p.username || '';
    email.value = p.email || '';
    panel.classList.toggle('open', enabled.checked);
    msg.textContent = ''; msg.className = 'uname-msg';
    // reset password mode to manual + blank
    var manualRadio = modes.querySelector('input[value="manual"]');
    if (manualRadio){ manualRadio.checked = true;
      [].forEach.call(modes.querySelectorAll('label'), function(l){ l.classList.remove('sel'); });
      manualRadio.closest('label').classList.add('sel');
    }
    pwInput.value = ''; pwWrap.style.display = 'block';
  };
  window.cplReset = function(){ window.cplSetPortal({enabled:false}); };
})();
</script>