function flushResponse() {
  document.getElementById("alert-response"  ).style.display = 'none';
  document.getElementById("alert-response"  ).classList.remove('alert-success'  );
  document.getElementById("alert-response"  ).classList.remove('alert-danger'   );
  document.getElementById("alert-response"  ).classList.remove('alert-primary'  );
}

function loadingResponse() {
  flushResponse();
  document.getElementById("alert-status"  ).innerHTML = "Loading...";
  document.getElementById("alert-desc"    ).innerHTML = "Please wait...";
  document.getElementById("alert-response").classList.add('alert-primary');
  document.getElementById("alert-response").style.display = 'block';
}

function responseAlert(response) {
  flushResponse();
  const obj = JSON.parse(response);
  if (obj.status == "success" ) document.getElementById("alert-response").classList.add('alert-success' );
  if (obj.status == "failed"  ) document.getElementById("alert-response").classList.add('alert-danger'  );
  document.getElementById("alert-status"  ).innerHTML     = obj.status;
  document.getElementById("alert-desc"    ).innerHTML     = obj.desc;
  document.getElementById("alert-response").style.display = 'block';
}

var token    		= document.getElementById("form-token"      ).value;
var allow    		= document.getElementById("form-allow"      ).value;
const listerUser	= document.getElementById("lister-user"		);
const listerRoles	= document.getElementById("lister-roles"	);

sendHttpRequest("/api/auth/users/list", "POST", null,
    function (error, response) {
        if (error) console.error("Error:", error);
        else {
            console.log("JSON Response:", response);
            const ls = JSON.parse(response);

            ls.data.forEach(row => {
                const itemElement = document.createElement("div");
                const rolesList = row.roles.map(row2 => `<li>[${row2.id}] ${row2.name}</li>`).join("");
                const verificationList = row.verification.map(row2 => `<li>${row2.type}: ${row2.verified}</li>`).join("");
                itemElement.innerHTML = `
                    <li>
                        [${row.id}] ${row.username}<br>
                        Email: ${row.email}<br>
                        Phone: ${row.phone}<br>
                        Roles:
                        <ul>
                            ${rolesList}
                        </ul><br>
                        Verification:
                        <ul>
                            ${verificationList}
                        </ul>
                    </li>
                `;
                listerUser.appendChild(itemElement);
            });
        }
    }, "application/json", `Bearer ${token}`
);

sendHttpRequest("/api/auth/roles/list", "POST", null,
    function (error, response) {
        if (error) console.error("Error:", error);
        else {
            console.log("JSON Response:", response);
            const ls = JSON.parse(response);

            ls.data.forEach(row => {
                const itemElement = document.createElement("div");
                if (allow.includes(row.id)) {
                    itemElement.innerHTML = `<label><input type="checkbox" name="roles" value="${row.id}">${row.name}</label>`;
                    listerRoles.appendChild(itemElement);
                } else {}
            });
        }
    }, "application/json", `Bearer ${token}`
);

function invite() {
    loadingResponse();
    const 	roles 		= Array
          .from(document.querySelectorAll('input[name="roles"]:checked'))
          .map(row => Number(row.value)); // Convert into number. Output example: [2, 3]
    const 	email    	= document.getElementById('form-email').value;
    const 	username	= document.getElementById('form-username').value;
    const 	password	= document.getElementById('form-password').value;
    var 	url     	= "/api/auth/invite";
    var 	payload 	= {
        "roles"		: roles,
        "email"		: email,
        "username"	: username,
        "password"	: password
    };
    // console.log(payload);
    sendHttpRequest(url, "POST", payload, function (error, response) {
        if (error) {
            // console.error("Error:", error);
            responseAlert({"status" : "failed", "desc" : error});
        }
        else {
            // console.log("JSON Response:", response);
            responseAlert(response);
        }
    }, "application/json", `Bearer ${token}`);
}

flushResponse();