<!-- ADD USER MODAL -->
<div class="modal-overlay" id="addUserModal">
  <div class="modal">
    <div class="modal-header"><span class="modal-title">Add User</span><button class="modal-close">✕</button></div>
    <div class="modal-body">
      <form id="addUserForm">
        <div class="form-grid">
          <div class="form-group"><label class="form-label">Name *</label><input type="text" name="name" class="form-control" required></div>
          <div class="form-group"><label class="form-label">Phone</label><input type="text" name="phone" class="form-control"></div>
          <div class="form-group span-2"><label class="form-label">Email *</label><input type="email" name="email" class="form-control" required></div>
          <div class="form-group"><label class="form-label">Password *</label><input type="password" name="password" class="form-control" required minlength="6"></div>
          <div class="form-group"><label class="form-label">Role</label>
            <select name="role_id" class="form-control">
              <option value="">No Role</option>
              <?php $roles->data_seek(0); while ($ro = $roles->fetch_assoc()): ?>
              <option value="<?= $ro['id'] ?>"><?= htmlspecialchars($ro['name']) ?></option>
              <?php endwhile; ?>
            </select>
          </div>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeModal('addUserModal')">Cancel</button>
      <button class="btn btn-primary" onclick="addUser()">Add User</button>
    </div>
  </div>
</div>

<!-- EDIT USER MODAL -->
<div class="modal-overlay" id="editUserModal">
  <div class="modal">
    <div class="modal-header"><span class="modal-title">Edit User</span><button class="modal-close">✕</button></div>
    <div class="modal-body">
      <form id="editUserForm">
        <input type="hidden" name="user_id" id="edit_user_id">
        <div class="form-grid">
          <div class="form-group"><label class="form-label">Name *</label><input type="text" name="name" id="edit_user_name" class="form-control" required></div>
          <div class="form-group"><label class="form-label">Phone</label><input type="text" name="phone" id="edit_user_phone" class="form-control"></div>
          <div class="form-group span-2"><label class="form-label">Email *</label><input type="email" name="email" id="edit_user_email" class="form-control" required></div>
          <div class="form-group"><label class="form-label">New Password (leave blank to keep current)</label><input type="password" name="password" class="form-control" minlength="6"></div>
          <div class="form-group"><label class="form-label">Role</label>
            <select name="role_id" id="edit_user_role" class="form-control">
              <option value="">No Role</option>
              <?php $roles->data_seek(0); while ($ro = $roles->fetch_assoc()): ?>
              <option value="<?= $ro['id'] ?>"><?= htmlspecialchars($ro['name']) ?></option>
              <?php endwhile; ?>
            </select>
          </div>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeModal('editUserModal')">Cancel</button>
      <button class="btn btn-primary" onclick="updateUser()">Update User</button>
    </div>
  </div>
</div>

<!-- ADD LOST REASON MODAL -->
<div class="modal-overlay" id="addLostModal">
  <div class="modal">
    <div class="modal-header"><span class="modal-title">Add Lost Reason</span><button class="modal-close">✕</button></div>
    <div class="modal-body">
      <div class="form-group"><label class="form-label">Reason *</label><input type="text" id="lostReasonInput" class="form-control" placeholder="e.g. Price too high"></div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeModal('addLostModal')">Cancel</button>
      <button class="btn btn-primary" onclick="addLostReason()">Add</button>
    </div>
  </div>
</div>

<!-- ADD STAGE MODAL -->
<div class="modal-overlay" id="addStageModal">
  <div class="modal">
    <div class="modal-header">
      <span class="modal-title">Add Stage</span>
      <button class="modal-close">✕</button>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label class="form-label">Stage Name *</label>
        <input type="text" id="stageName" class="form-control">
      </div>
      <div class="form-group">
        <label class="form-label">Position</label>
        <input type="number" id="stagePosition" class="form-control">
      </div>
      <div class="form-group">
        <label class="form-label">Color</label>
        <input type="color" id="stageColor" class="form-control" value="#6B7280">
      </div>
      <div class="form-group">
        <label class="form-label">Type</label>
        <select id="stageType" class="form-control">
          <option value="normal">Normal</option>
          <option value="start">Start</option>
          <option value="end">End</option>
        </select>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeModal('addStageModal')">Cancel</button>
      <button class="btn btn-primary" onclick="addStage()">Add</button>
    </div>
  </div>
</div>



<!-- ADD EMAIL MODAL -->
<div class="modal-overlay" id="addEmailModal">
  <div class="modal">

    <div class="modal-header">
      <span class="modal-title">Add Email</span>
      <button class="modal-close">✕</button>
    </div>

    <div class="modal-body">

      <div class="form-group">
        <label class="form-label">Email *</label>
        <input type="email"
               id="accountEmailInput"
               class="form-control"
               placeholder="example@domain.com">
      </div>

      <div class="form-group">
        <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
          <input type="checkbox" id="accountEmailDefault">
          Set as default
        </label>
      </div>

    </div>

    <div class="modal-footer">
      <button class="btn btn-secondary"
              onclick="closeModal('addEmailModal')">
        Cancel
      </button>

      <button class="btn btn-primary"
              onclick="addAccountEmail()">
        Add Email
      </button>
    </div>

  </div>
</div>

