<?php include("header.php"); 
 include("side.php"); 
  include("../db.php"); 
extract($_GET);
date_default_timezone_set("Asia/Calcutta");
 $insertdate = date("h:i:s d-m-Y ");
if(isset($submit)){

$rr=mysqli_query($conn,"SELECT * FROM `category` WHERE category_name='$category_name'");

if(mysqli_num_rows($rr) >0 ){
	 $alert=' <div class="alert alert-danger">Category <b>Already Added please enter another!!</b></div>';
} else {
 $sql=mysqli_query($conn,"INSERT INTO `category`(`category_name`, `image`, `discription`, `status`, `date`) VALUES ('$category_name', '$image', '$discription', '0', '$insertdate')");
 $alert=' <div class="alert alert-success">Category <b>successfully Added!!</b></div>';
 ?>
<script>
	 window.setTimeout(function () {
        location.href = "category.php?main=5&cat=1";
    }, 2000);

</script>
 <?php 
} }
 ?>
 <style >
 	.im{
	  height: 80px!important;
    width: 80px!important;
    margin-top: -20px;
 	}
 	.card-editor {
    border: 1px solid #ced4da !important;
}

 </style>
 <link rel="stylesheet" href="css/boot.css">
            <div id="layoutSidenav_content">
                <main>
                    <div class="container-fluid">
                        <h2 class="mt-30 page-title">Categories</h2>
                        <ol class="breadcrumb mb-30">
                            <li class="breadcrumb-item"><a href="index.php">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="category.php?main=5&cat=1">Categories</a></li>
                            <li class="breadcrumb-item active">Add Category</li>
                        </ol>
                        <div class="row">
							<div class="col-lg-12 col-md-12">
								<div class="card card-static-2 mb-30">
									<div class="card-title-2">
										<h4>Add New Category</h4>
									</div>
									<div class="card-body-table">
										<div class="news-content-right pd-20">
											<?php if(isset($alert)) { echo $alert; } ?>
											<form action="" method="get">
												<div class="col-lg-12 col-md-12">
											<div class="form-group">
												<label class="form-label">Category Name*</label>
												<input type="text" name="category_name" class="form-control" placeholder="Category Name" required/>
											</div>
										</div>
										
										<div class="col-lg-6 col-md-6">
											<div class="form-group">
												<label class="form-label">Category Image*</label>
												<div class="input-group">
													<div class="custom-file">
														<input type="file" class="custom-file-input" id="file" aria-describedby="inputGroupFileAddon04" name="image" required/>
														<label class="custom-file-label" for="file">Choose Image</label>
													</div>
												</div>
												
											</div>
										</div>
										<div class="col-lg-6 col-md-6">
											<div class="add-cate-img">
												<span id="uploaded_image">

													<img src="../images/category.jpg" alt="Caterory icon" class="im" />
															<!-- Progress bar -->
														</span>
											</div>
												</div>
											<div class="col-lg-12 col-md-12">
											<div class="form-group">
												<label class="form-label">Description ( Optional )</label>
												<div class="card card-editor">
													<div class="content-editor">
														<textarea id="froala-editor" class="text-control" name="discription" placeholder="Enter Description"></textarea>
													</div>
												</div>
											</div>
											<button class="save-btn hover-btn" type="submit" name="submit">Add New Category</button>
										</form>
										</div> 
									</div>
								</div>
							</div>
                        </div>
                    </div>
                </main>
                <?php include("footer.php"); ?>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
               <script>
$(document).ready(function(){
 $(document).on('change', '#file', function(){
  var name = document.getElementById("file").files[0].name;
  var form_data = new FormData();
  var ext = name.split('.').pop().toLowerCase();
  if(jQuery.inArray(ext, ['gif','png','jpg','jpeg','svg']) == -1) 
  {
   alert("Invalid Image File");
  }
  var oFReader = new FileReader();
  oFReader.readAsDataURL(document.getElementById("file").files[0]);
  var f = document.getElementById("file").files[0];
  var fsize = f.size||f.fileSize;
  if(fsize > 2000000)
  {
   alert("Image File Size is very big");
  }
  else
  {
   form_data.append("file", document.getElementById('file').files[0]);
   $.ajax({
    url:"upload.php",
    method:"POST",
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
    beforeSend:function(){
     $('#uploaded_image').html("<label class='text-success'>Image Uploading...</label>");
    },   
    success:function(data)
    {
     $('#uploaded_image').html(data);
     // alert("successfully upload Click ( OK ) to submit");
     
    }
   });
  }
 });
});
</script>

<script>
  new FroalaEditor('textarea#froala-editor')
</script>