<?php

session_start();


if(!isset($_SESSION['user_id'])){

    header("Location: login.php");
    exit;

}


require_once "config.php";




// SAVE USER

if(isset($_POST['save'])){


$fullname=$_POST['fullname'];

$username=$_POST['username'];

$email=$_POST['email'];

$password=$_POST['password'];

$role=$_POST['role'];

$status=$_POST['status'];




// CHECK USERNAME

$stmt=$pdo->prepare("
SELECT id 
FROM users
WHERE username=?
");

$stmt->execute([$username]);


if($stmt->fetch()){


$_SESSION['error']="Username already exists";

header("Location:add_user.php");

exit;


}









$stmt=$pdo->prepare("

INSERT INTO users

(
fullname,
username,
email,
password,
role,
status

)

VALUES

(?,?,?,?,?,?)

");




$stmt->execute([

$fullname,

$username,

$email,

$hashed,

$role,

$status

]);




$_SESSION['success']="User added successfully";


header("Location:users.php");

exit;


}



?>



<!DOCTYPE html>

<html>

<head>


<meta name="viewport" content="width=device-width,initial-scale=1">


<title>
Add User
</title>


<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">


<link rel="stylesheet" href="assets/css/sidebar.css">


<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">



<style>


*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:Poppins;

}



body{

background:#f4f7f9;

transition:.3s;

}


body.dark{

background:#111827;

color:white;

}



.content{

margin-left:260px;

padding:25px;

}




.topbar{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}




.mobile-btn{

display:none;

font-size:25px;

cursor:pointer;

color:#065f46;

}



.toggle{

font-size:25px;

cursor:pointer;

color:#059669;

}




.card{

background:white;

padding:25px;

border-radius:18px;

max-width:800px;

box-shadow:0 5px 20px #0002;

}



body.dark .card{

background:#1f2937;

}





.form-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

}




.form-group{

margin-bottom:15px;

}



.full{

grid-column:1/-1;

}




label{

font-size:14px;

font-weight:600;

display:block;

margin-bottom:6px;

}




input,
select{


width:100%;

padding:12px;

border-radius:10px;

border:1px solid #ddd;

outline:none;

}




button{


background:#059669;

color:white;

border:0;

padding:12px 25px;

border-radius:10px;

cursor:pointer;

}



.back{


background:#64748b;

color:white;

padding:12px 25px;

border-radius:10px;

text-decoration:none;

}



.buttons{

display:flex;

gap:10px;

margin-top:20px;

}




.alert{

background:#fee2e2;

color:#991b1b;

padding:12px;

border-radius:10px;

margin-bottom:15px;

}




.overlay{

display:none;

position:fixed;

inset:0;

background:#0008;

z-index:999;

}



.overlay.show{

display:block;

}




@media(max-width:768px){


.content{

margin-left:0;

padding:15px;

}



.mobile-btn{

display:block;

}



.sidebar{

left:-260px;

}



.sidebar.active{

left:0;

}




.form-grid{

grid-template-columns:1fr;

}



.buttons{

flex-direction:column;

}



button,
.back{

width:100%;

text-align:center;

}



}



</style>


</head>



<body>



<?php include "sidebar.php"; ?>



<div class="overlay"

id="overlay"

onclick="closeMenu()">

</div>




<div class="content">





<div class="topbar">


<i class="fa fa-bars mobile-btn"

onclick="openMenu()">

</i>




<h2>

<i class="fa fa-user-plus"></i>

Add User

</h2>



<i class="fa fa-moon toggle"

onclick="theme()">

</i>



</div>







<?php if(isset($_SESSION['error'])){ ?>


<div class="alert">

<?= $_SESSION['error']; ?>

</div>


<?php unset($_SESSION['error']); } ?>







<div class="card">





<form method="POST">



<div class="form-grid">





<div class="form-group">

<label>
Full Name
</label>

<input type="text"
name="fullname"
placeholder="Enter full name"
required>

</div>





<div class="form-group">

<label>
Username
</label>

<input type="text"
name="username"
placeholder="Username"
required>

</div>





<div class="form-group">

<label>
Email
</label>

<input type="email"
name="email"
placeholder="Email address">

</div>





<div class="form-group">

<label>
Password
</label>

<input type="password"
name="password"
placeholder="Password"
required>

</div>





<div class="form-group">

<label>
Role
</label>


<select name="role" required>


<option value="">
Select Role
</option>


<option>
Admin
</option>


<option>
Manager
</option>


<option>
Accountant
</option>


<option>
User
</option>



</select>


</div>






<div class="form-group">

<label>
Status
</label>


<select name="status">


<option value="1">
Active
</option>


<option value="0">
Inactive
</option>


</select>


</div>



</div>





<div class="buttons">


<button name="save">

<i class="fa fa-save"></i>

Save User

</button>




<a href="users.php"
class="back">

Cancel

</a>



</div>





</form>





</div>






</div>








<script>


function openMenu(){


document.getElementById("sidebar")
.classList.add("active");


document.getElementById("overlay")
.classList.add("show");


}




function closeMenu(){


document.getElementById("sidebar")
.classList.remove("active");


document.getElementById("overlay")
.classList.remove("show");


}





function theme(){


document.body.classList.toggle("dark");


localStorage.setItem(

"dark",

document.body.classList.contains("dark")

);


}




if(localStorage.getItem("dark")=="true"){


document.body.classList.add("dark");


}



</script>



</body>

</html>