<?php

include "../../classes/app.class.php";

$app = new app();

?>


<div class='container flex_container'>
    <h1>ADD USER</h1>
    <hr>
    <div class="container flex_container" style='width:80%'>
        <input type='text' name='name' id='name' required placeholder='Enter name'>
        <input type='text' name='username' id='username' required placeholder='Enter username'>
        <input type='text' name='password' id='password' required placeholder='Enter password'>
        <label for='user_type'>User Type</label>
        <select name='user_type' id='user_type'>
            <option></option>
            <option value=1>ADMIN</option>
            <option value=2>STOCK</option>
            <option value=3>ARTISAN</option>
        </select>
        <label for='status'>STATUS</label>
        <select name='status' id='status'>
            <option></option>
            <option value=1>ACTIVE</option>
            <option value=0>INACTIVE</option>
        </select>
        <button onclick="add_user()">ADD</button>
    </div>

    <script>
        function add_user() {
            var name = document.getElementById('name').value;
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var user_type = document.getElementById('user_type').value;
            var status = document.getElementById('status').value;

            if (status == "") {
                document.getElementById('status').style.border = '2px solid red';
            } else {
                document.getElementById('status').style.border = '2px solid green';
            }

            if (user_type == "") {
                document.getElementById('user_type').style.border = '2px solid red';
            } else {
                document.getElementById('user_type').style.border = '2px solid green';
            }


            error = 0;

            var inputs = document.getElementsByTagName('input');

            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].value == "") {
                    inputs[i].style.border = '2px solid red';
                    error = 1;
                } else {
                    inputs[i].style.border = '2px solid green';
                }
            }
            if (error == 0) {


                var xhttp = new XMLHttpRequest();
                xhttp.onload = function() {
                    // alert(this.responseText);
                    if (this.responseText == 1) {
                        // alert('User added successfully');
                        window.location.href = "search_user.php";
                    }
                
                }
                xhttp.open("GET", '../../ajax/users/add_user.php?username=' + username + '&password=' + password + '&user_type=' + user_type + '& status=' + status + '&name=' + name, true);
                xhttp.send();
            }
        }
    </script>