<?php 
  if (!isset($_SESSION['username'])) {
    $_SESSION['msg'] = "To access this page, Login is required";
    header('location: login.php');
  }  ?>
<!DOCTYPE>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}


label{color:#3D2B1F; margin-left:1%;  }

label a{ color: red; }

input[type=text],select, input[type=password]{  width: 100%;  padding: 14px;  border: 1px solid #ccc;  border-radius: 4px;  font-weight: bold; box-sizing: border-box;  margin-top: 10px;  margin-bottom: 5px;  resize: vertical; background: white;  color:#848482;}

input[type=submit] {  background:#007AA5;   font-weight: bold;  padding: 8px 10px; float: right; border: none;  border-radius: 3px;  cursor: pointer;  margin-top: 4%;   color: white; font-size: x-small;}

input[type=submit]:hover{ opacity: .6; }

input[placeholder]{ font-size:x-small; }



.top-aa{text-align: left; margin-bottom: 1%; width: 100%; font-size: x-small; color: #848482; padding: 20px;}

.category-add{ float: left; width: 100%; box-shadow: 0px 2px 3px 2px  #E3DAC9; }
.category-head{ width: 100%; float: left; padding: 15px; background:#F5F5DC; font-size: small; font-weight: bolder; color:#007AA5;  }

.body-category{ width: 100%; float: left; padding: 15px; background: white; }


.category{ float: left; width: 100%;   }

.col-category-a  {  float: left;  width: 30%;  padding: 15px; }
.col-category-b  {  float: left;  width: 70%; padding: 15px; }


.success { padding: 15px; color:forestgreen; background:#C0E8D5;  font-weight: bold;  width: 100%;  font-size: x-small; margin: auto; text-align: left; margin-bottom: 3%; border-radius: 3px; }

/* Clear floats after the col-categorys */
.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width:600px) {
  .col-category {  width: 100%;   } 
.col-category-a , .col-category-b  { float:left ; width: 100%; }
.col-category-b { float:left ; width: 100%;  }
.body-category{ width: 100%;  } 

}

</style>
</head>
<body>


<div class="row">
<div class="top-aa">
<a href="index.php" style="color: black; text-decoration: none; font-weight: bold;">Home </a>
<a>// Product Categories</a>
</div>

  <nav class="category">
  <div class="col-category-a">

<nav class="category-add">
<nav class="category-head"> <a> <i class="fa fa-plus-circle"></i> CATEGORY PRODUCT </a></nav> 
<nav class="body-category">
 
<form action="" method="post">

 <?php if (isset($_SESSION['suc'])): ?>
    <div class="success">    <?php     echo $_SESSION['suc'];   unset($_SESSION['suc']);    ?>  </div>
<?php endif ?>

<label>Category Code <a> * </a></label>
<input type="text"  name="category_code"  placeholder="P002" required="autofocus" >


<label>Category Name <a> * </a></label>
<input type="text"  name="category_name"   placeholder="Paints & Soundries" required="autofocus" >

<input type="submit" name="submit" value="Add category">

</form>
</nav>
</nav>
</div>


  
  <div class="col-category-b">
<nav class="category-add">
<nav class="category-head"> <a> <i class="fa fa-shopping-basket"></i> MANAGE - Product Categories</a></nav> 
<nav class="body-category">
<?php include ("manage-categories.php"); ?>
</nav>
</nav>


  </div>
  </nav>
</div>

</body>
</html>

<?php include 'inc/config.php'; 
if(isset($_POST["submit"])){

$category_name = $_POST['category_name'];
$category_code = $_POST['category_code'];


$sql = "INSERT INTO categories (Category_code,   Category_name)
VALUES ('$category_code', '$category_name')";


if ($conn->query($sql) === TRUE) {

// $_SESSION['suc'] =  "$category_name category added successfully";



echo "<script type= 'text/javascript'>alert('$category_name  category recorded successfully');</script>";

echo "<script type= 'text/javascript'>window.location.href='index.php?link=product-categories'</script>";

} else {
echo "<script type= 'text/javascript'>alert('Error ! check your grammer');</script>";

}

$conn->close();
}
?>