{% extends "cms/base.html" %}
{% block title %}My Profile{% endblock %}
{% block page_title %}My Profile{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2>My Profile</h2>
</div>

<div class="row g-4">
  <div class="col-lg-6">
    <div class="cms-card">
      <h5>Account Details</h5>
      <form method="post" class="cms-form mt-3">
        {% csrf_token %}
        <div class="row g-3">
          <div class="col-6 form-group">
            <label>First Name</label>
            <input type="text" name="first_name" value="{{ obj.first_name }}">
          </div>
          <div class="col-6 form-group">
            <label>Last Name</label>
            <input type="text" name="last_name" value="{{ obj.last_name }}">
          </div>
          <div class="col-12 form-group">
            <label>Email</label>
            <input type="text" value="{{ obj.email }}" disabled style="background:#f8fafc;color:var(--cms-muted)">
          </div>
          <div class="col-12 form-group">
            <label>Phone</label>
            <input type="text" name="phone" value="{{ obj.phone }}">
          </div>
          <div class="col-12 form-group">
            <label>Company</label>
            <input type="text" name="company" value="{{ obj.company }}">
          </div>
          <div class="col-12 form-group">
            <label>Role</label>
            <input type="text" value="{{ obj.get_role_display }}" disabled style="background:#f8fafc;color:var(--cms-muted)">
          </div>
        </div>
        <hr style="border-color:var(--cms-border);margin:1.25rem 0">
        <h5 style="margin-bottom:1rem">Change Password</h5>
        <div class="form-group">
          <label>New Password <span style="font-size:.7rem;color:var(--cms-muted);text-transform:none">(leave blank to keep current)</span></label>
          <div style="position:relative">
            <input type="password" name="new_password" id="new_password" placeholder="Min 10 chars + special character" oninput="pwStrength(this.value)" autocomplete="new-password">
            <span onclick="togglePwVis()" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--cms-muted);font-size:.85rem" id="pwEye"><i class="fa-solid fa-eye"></i></span>
          </div>
          <!-- Strength bar -->
          <div id="pwBar" style="display:none;margin-top:.5rem">
            <div style="height:5px;border-radius:3px;background:#e2e8f0;overflow:hidden">
              <div id="pwFill" style="height:100%;width:0;transition:width .25s,background .25s;border-radius:3px"></div>
            </div>
            <div style="display:flex;justify-content:space-between;margin-top:.3rem">
              <span id="pwLabel" style="font-size:.72rem;font-weight:600"></span>
              <span id="pwScore" style="font-size:.72rem;color:var(--cms-muted)"></span>
            </div>
            <ul id="pwHints" style="font-size:.72rem;color:var(--cms-muted);margin:.4rem 0 0;padding-left:1.1rem;line-height:1.7"></ul>
          </div>
        </div>
        <div style="display:flex;gap:.75rem;margin-top:1.25rem">
          <button type="submit" id="saveBtn" class="btn-cms">
            <i class="fa-solid fa-floppy-disk me-2"></i>Save Changes
          </button>
        </div>
      </form>
    </div>
  </div>

  <div class="col-lg-6">
    <div class="cms-card">
      <h5>Account Info</h5>
      <div style="margin-top:1rem">
        <div style="display:flex;align-items:center;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--cms-border)">
          <div style="width:56px;height:56px;border-radius:50%;background:#033152;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;flex-shrink:0">
            {% with name=obj.get_full_name|default:obj.username %}{{ name|slice:":1"|upper }}{% endwith %}
          </div>
          <div>
            <div style="font-weight:700;font-size:1rem">{{ obj.get_full_name|default:obj.username }}</div>
            <div style="font-size:.8rem;color:var(--cms-muted)">{{ obj.email }}</div>
            <div style="margin-top:.3rem">
              <span style="background:#033152;color:#fff;border-radius:20px;padding:.2rem .7rem;font-size:.7rem;font-weight:600">{{ obj.get_role_display }}</span>
            </div>
          </div>
        </div>
        <div style="margin-top:1rem;font-size:.82rem;color:var(--cms-muted)">
          <div style="display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--cms-border)">
            <span>Username</span><span style="color:var(--cms-text);font-weight:600">{{ obj.username }}</span>
          </div>
          <div style="display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--cms-border)">
            <span>Member since</span><span style="color:var(--cms-text);font-weight:600">{{ obj.date_joined|date:"d M Y" }}</span>
          </div>
          <div style="display:flex;justify-content:space-between;padding:.5rem 0">
            <span>Last login</span><span style="color:var(--cms-text);font-weight:600">{{ obj.last_login|date:"d M Y H:i"|default:"—" }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="cms-card mt-3">
      <h5>Security</h5>
      <div style="margin-top:.75rem">
        <a href="{% url 'cms_security' %}" class="btn-cms-ghost" style="width:100%;justify-content:center;text-align:center">
          <i class="fa-solid fa-shield-halved me-2"></i>Manage 2FA &amp; Security
        </a>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function pwStrength(val) {
    var bar  = document.getElementById('pwBar');
    var fill = document.getElementById('pwFill');
    var lbl  = document.getElementById('pwLabel');
    var sc   = document.getElementById('pwScore');
    var hints= document.getElementById('pwHints');
    var btn  = document.getElementById('saveBtn');

    if (!val) {
        bar.style.display = 'none';
        btn.disabled = false;
        btn.style.opacity = '1';
        return;
    }
    bar.style.display = 'block';

    var score = 0;
    var issues = [];

    if (val.length >= 10)        score += 25; else issues.push('At least 10 characters');
    if (/[A-Z]/.test(val))       score += 20; else issues.push('One uppercase letter');
    if (/[a-z]/.test(val))       score += 15; else issues.push('One lowercase letter');
    if (/[0-9]/.test(val))       score += 20; else issues.push('One number');
    if (/[^A-Za-z0-9]/.test(val)) score += 20; else issues.push('One special character (!@#$%...)');

    var color = score >= 80 ? '#16a34a' : score >= 50 ? '#e0a72e' : '#e53e3e';
    var label = score >= 80 ? 'Strong' : score >= 50 ? 'Medium' : 'Weak';

    fill.style.width      = score + '%';
    fill.style.background = color;
    lbl.textContent       = label;
    lbl.style.color       = color;
    sc.textContent        = score + '/100';
    hints.innerHTML       = issues.map(function(i){ return '<li>' + i + '</li>'; }).join('');

    btn.disabled      = score < 80;
    btn.style.opacity = score < 80 ? '.5' : '1';
    btn.title         = score < 80 ? 'Password strength must reach 80/100 to save' : '';
}

function togglePwVis() {
    var inp = document.getElementById('new_password');
    var ico = document.getElementById('pwEye').querySelector('i');
    if (inp.type === 'password') { inp.type = 'text';     ico.className = 'fa-solid fa-eye-slash'; }
    else                         { inp.type = 'password'; ico.className = 'fa-solid fa-eye'; }
}
</script>
{% endblock %}