<?php
include_once 'includes/processes.php';
$Process = new Login_Process;
$Process->check_status($_SERVER['SCRIPT_NAME']);
$saveDetails = $Process->saveProductDetails($_POST,$_FILES,$_POST['save']);
if(!isset($_SESSION['level1_cat'])) {
	header("location:sell.php");
}
unset($_SESSION['img_error']);
?>
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
  <title>Sell a Product | SellerHQ</title>

  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,300,700">
  <link rel="stylesheet" href="./css/font-awesome.min.css">
  <link rel="stylesheet" href="./js/libs/css/ui-lightness/jquery-ui-1.9.2.custom.min.css">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  
  <!-- Plugin CSS -->
  <link rel="stylesheet" href="./js/plugins/fileupload/bootstrap-fileupload.css">
  <link rel="stylesheet" href="./js/plugins/select2/select2.css"> 
  <link rel="stylesheet" href="./js/plugins/icheck/skins/minimal/blue.css">
  <link rel="stylesheet" href="./js/plugins/datepicker/datepicker.css">
  <link rel="stylesheet" href="./js/plugins/simplecolorpicker/jquery.simplecolorpicker.css">
  <link rel="stylesheet" href="./js/plugins/timepicker/bootstrap-timepicker.css">

    <!-- App CSS -->
  <link rel="stylesheet" href="./css/target-admin.css">
  <link rel="stylesheet" href="./css/custom.css">


  <script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![endif]-->
	
	<style>
	label {
		font-weight: 1;
	}
	 .small-size {
	font-size: 12px;
}
	</style>
</head>

<body>

 <?php include"includes/header.php"; ?>

<div class="container">

  <div class="content">

    <div class="content-container">

      

      <div class="content-header">
        <h2 class="content-header-title">Give Product Description</h2>
        <ol class="breadcrumb">
          <li><a href="sell.php">Choose Product Category</a></li>
          <li class="active">Give Product Description</li>
          <li>Review Your Product and Submit</li>
        </ol>
      </div> <!-- /.content-header -->

      <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">

      <div class="portlet">

        <div class="portlet-header">

          <h3>
            <i class="fa fa-cloud-upload"></i>
            Product Images 
          </h3>

        </div> <!-- /.portlet-header -->

        <div class="portlet-content">

          <div class="row">
			<div class="col-sm-3"> 
				<div class="small-size">
					<div class="alert alert-info"> <i class="fa fa-info"></i> <strong>Note:</strong> <br />
						<ol>
							<li>Please Images must be <i>680px X 850px</i>.</li>
							<li>Only a maximum of four(4) images are allowed.</li>  
							<li>The first Image is considered the main Display image on our site.</li>
							Please follow this guideline so your listing is not rejected
						<ol>
					</div>
				</div>
			</div>
			<div class="col-sm-8" id="prod_images"> 
			<?php 
				for($i=0;$i<count($_SESSION['prod_img']);$i++) {
					
					echo "<div class='col-sm-3' id='img".$i."'>               
				   <div class='fileupload fileupload-new' data-provides='fileupload'>
					  <div class='fileupload-new thumbnail' style='width: 200px; height: 150px;'><img src='http://www.nativeafrika.com/prod_img/".$_SESSION['prod_img'][$i]."' alt='Placeholder' /></div>
					  <div class='fileupload-preview fileupload-exists thumbnail' style='max-width: 200px; max-height: 150px; line-height: 20px;'></div>
					  <div>
						<span class='btn btn-default btn-file'><span class='fileupload-new'>Select image</span><span class='fileupload-exists'>Change</span><input type='file' name='prod_img[]' /></span>
						<a href='#' class='btn btn-default fileupload-exists' data-dismiss='fileupload'>Remove</a>
					  </div>
					</div>
				  <span style='font-size:12px;color:red;' onclick='removeImgElement(\"img".$i."\");'>remove</span></div>";
				}	 
			?>
			</div>
          </div> <!-- /.row -->
			<button class="btn btn-info btn-sm" id="addimgbtn" type="button" onclick="addImage('prod_images');">Add image</button>
        </div> <!-- /.portlet-content -->

      </div> <!-- /.portlet -->



      <div class="portlet">
      
        <div class="portlet-header">
      
          <h3>
            <i class="fa fa-tasks"></i>
            Product Details
          </h3>
      
        </div> <!-- /.portlet-header -->
      
        <div class="portlet-content">
		<?php echo $_SESSION['leadImage']; ?>
		
          <div class="form-horizontal">
            <div class="form-group">
              <label class="col-md-2">Product Title <span style="font-size:10px;color:red;">*</span></label>

              <div class="col-md-8">
                <input type="text" class="form-control" name="prod_name" placeholder="Full Width" maxlength="100" value="<?php echo $_SESSION['prod_name']; ?>" required/>
				<p class="help-block">Maximum of 100 characters</p>
              </div>
            </div>

            <div class="form-group">
              <label class="col-md-2">Product Description <span style="font-size:10px;color:red;">*</span></label>

              <div class="col-md-8">
                 <textarea id="prod_desc" class="form-control ckeditor" name="prod_desc" id=""><?php echo $_SESSION['prod_desc']; ?></textarea>
              </div>
            </div>
			
			<div class="alert alert-warning">Note: for the product price; If you don't have a special price, leave the "Special Price" box at zero (0).</div>
            <div class="form-group">
              <label class="col-md-2">Price <span style="font-size:10px;color:red;">*</span></label>
              <div class="col-md-2">
                <input type="text" class="form-control" name="prod_price" placeholder="Price" value="<?php echo $_SESSION['prod_price']; ?>" required />
              </div>
			  
              <label class="col-md-2">Special Price</label>
              <div class="col-md-2">
                <input type="text" class="form-control" name="special_price" placeholder="Special Price" value="<?php if(isset($_SESSION['special_price'])){ echo $_SESSION['special_price']; }else{ echo "0"; } ?>" />
              </div>
            </div>

            <div class="form-group">
              <label class="col-md-2">Weigth(kg) <span style="font-size:10px;color:red;">*</span></label>
              <div class="col-md-2">
                <input type="text" class="form-control" name="weigth" placeholder="in kg" value="<?php echo $_SESSION['weigth']; ?>" required />
              </div>
			  
              <label class="col-md-2">Condition <span style="font-size:10px;color:red;">*</span></label>
              <div class="col-md-2">
                <select class="form-control" name="condition" required>
				<option value=""> -- select -- </option>
				<option value="New" <?php if($_SESSION['condition']=="New"){echo "selected";} ?>>New</option>
				<option value="Fairly Used" <?php if($_SESSION['condition']=="Fairly Used"){echo "selected";} ?>>Fairly Used</option>
				</select>
              </div>
            </div>

            <div class="form-group">
              <label class="col-md-2">Quantity <span style="font-size:10px;color:red;">*</span></label>
              <div class="col-md-2">
                <input type="number" name="qty" class="form-control" value="<?php echo $_SESSION['qty']; ?>" placeholder="0" required />
				<p class="help-block">(Only numerials)</p>
              </div>
              <label class="col-md-2">Brand <span style="font-size:10px;color:red;">*</span></label>
              <div class="col-md-2">
                <input type="text" name="brand" value="<?php echo $_SESSION['brand']; ?>" class="form-control" placeholder="Product Brand" required />
              </div>
            </div>
			
			<div class="form-group">

              <label class="col-md-2">Sizes</label>
				<div class="col-md-8">
               <input type="text" id="s2_tokenization" name="sizes" class="form-control" value="<?php echo $_SESSION['size']; ?>">
			  <p class="help-block">(type multiple sizes differeciate with a space. E.g L XL XXL, 32-inches, etc.)</p>
			  </div>
            </div> <!-- /.col -->
			

          </div>
      
        </div> <!-- /.portlet-content -->
      
      </div> <!-- /.portlet -->




      <div class="portlet">

        <div class="portlet-header">
			<h3>
				<i class="fa fa-tasks"></i>
				Product Features & Specification
			</h3>
        </div> <!-- /.portlet-header -->

        <div class="portlet-content">
			
			<div class="alert alert-info">This section your will added different features and sepecifications for your product. Example 1, Color: back. example 2, Material: 100% cotton etc click the "Add Feature" to add more features of specifications</div>

			<div class="row" id="dynamicInputs">
				<?php 
					for($i=0;$i<count($_SESSION['feature_spec']);$i++) { 
						echo "<div class='col-sm-6' id='spec".$i."'><div class='form-group'> <div class='input-group'><input class='form-control' name = 'feature_spec[]' value='".$_SESSION['feature_spec'][$i]."' placeholder='Type in a Feature or Specification' required id='appendedInputButton' type='text'><span class='input-group-btn'> <button class='btn btn-secondary btn-sm' type='button' onclick='removeElement(\"spec".$i."\");'>
						remove!</button>  </span> </div> </div></div>";
					} 
				?>
			</div> <!-- /.row --><br />
			<button class="btn btn-info btn-sm" type="button" onclick="addFeature('dynamicInputs');">Add Feature</button>

        </div> <!-- /.portlet-content -->

      </div> <!-- /.portlet -->


      <div class="portlet">

        <div class="portlet-header">
			<h3>
				<i class="fa fa-tasks"></i>
				Return Policy
			</h3>
        </div> <!-- /.portlet-header -->

        <div class="portlet-content">
			
			<div class="form-group">
              <div class="col-md-10">
                <label class="checkbox-inline">
                  <input type="checkbox" name="return_policy" value="yes" <?php if(isset($_SESSION['return_policy'])){ if($_SESSION['return_policy']=="yes"){ echo "checked";} }else{echo "checked"; } ?> /> I will accept returns for this item for 7 days after I deliver
                </label>
				<p class="help-block">(Tips: If you offer returns, your sales will be higher)</p>
              </div>
            </div>

        </div> <!-- /.portlet-content -->

      </div> <!-- /.portlet -->
	  
	  <a href="sell.php" class="btn bnt-default">Back</a>
	  <button type="submit" name="save" class="btn btn-success">Save & Continue</button>
	</form>
    </div> <!-- /.content-container -->
      
  </div> <!-- /.content -->

</div> <!-- /.container -->

<?php include"includes/footer.php"; ?>


  <script src="./js/libs/jquery-1.10.1.min.js"></script>
  <script src="./js/libs/jquery-ui-1.9.2.custom.min.js"></script>
  <script src="./js/plugins/select2/select2.js"></script>
  <script src="./js/libs/bootstrap.min.js"></script>
  <script src="./js/plugins/fileupload/bootstrap-fileupload.js"></script>
  <script src="./js/plugins/ckeditor/ckeditor.js"></script>
  
  <!-- Plugin JS -->
  <script src="./js/plugins/icheck/jquery.icheck.js"></script>
  <script src="./js/plugins/datepicker/bootstrap-datepicker.js"></script>
  <script src="./js/plugins/timepicker/bootstrap-timepicker.js"></script>
  <script src="./js/plugins/simplecolorpicker/jquery.simplecolorpicker.js"></script>
  <script src="./js/plugins/autosize/jquery.autosize.min.js"></script>
  <script src="./js/plugins/textarea-counter/jquery.textarea-counter.js"></script>
  <!--[if lt IE 9]>
  <script src="./js/libs/excanvas.compiled.js"></script>
  <![endif]-->
  <!-- App JS -->  <!-- Plugin JS -->
  <script src="./js/demos/form-extended.js"></script>
  <script src="./js/target-admin.js"></script>
  
<script>
<?php  
	if(isset($_SESSION['feature_spec'])){
		$Speccount = count($_SESSION['feature_spec'])-1;
		echo "var featurecounter =".$Speccount." ;";
	}else {
		echo "var featurecounter = 0;";
	} 
	
	if(isset($_SESSION['prod_img'])){
		$Imgcount = count($_SESSION['prod_img']);
		echo "var imgcounter =".$Imgcount." ;";
	}else {
		echo "var imgcounter = 0;";
	}
?>
if(imgcounter==4) {
	document.getElementById("addimgbtn").disabled = true;
}else{
	document.getElementById("addimgbtn").disabled = false;
}

	function addImage(divName){
		var newdiv = document.createElement('div');
		newdiv.innerHTML = "<div class='col-sm-3' id='img"+imgcounter+"'>"+                
               "<div class='fileupload fileupload-new' data-provides='fileupload'>"+
                  "<div class='fileupload-new thumbnail' style='width: 200px; height: 150px;'><img src='http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image' alt='Placeholder' /></div>"+
                  "<div class='fileupload-preview fileupload-exists thumbnail' style='max-width: 200px; max-height: 150px; line-height: 20px;'></div>"+
                  "<div>"+
                    "<span class='btn btn-default btn-file'><span class='fileupload-new'>Select image</span><span class='fileupload-exists'>Change</span><input type='file' name='prod_img[]' /></span>"+
                    "<a href='#' class='btn btn-default fileupload-exists' data-dismiss='fileupload'>Remove</a>"+
                  "</div>"+
                "</div>"+
			  "<span style='font-size:12px;color:red;' onclick='removeImgElement(\"img"+imgcounter+"\");'>remove</span></div>";
		 document.getElementById(divName).appendChild(newdiv);
		 
		 imgcounter++;
		
		if(imgcounter==4) {
			document.getElementById("addimgbtn").disabled = true;
		}
	}
	
	function addFeature(divName){
		var newdiv = document.createElement('div');
		newdiv.innerHTML = "<div class='col-sm-6' id='spec"+featurecounter+"'><div class='form-group'> <div class='input-group'><input class='form-control' name = 'feature_spec[]' placeholder='Type in a Feature or Specification' required id='appendedInputButton' type='text'><span class='input-group-btn'> <button class='btn btn-secondary btn-sm' type='button' onclick='removeElement(\"spec"+featurecounter+"\");'>remove!</button>  </span> </div> </div></div>";
		 document.getElementById(divName).appendChild(newdiv);
		 
		 featurecounter++;
	}

	function removeElement(element_id) {
		var elementid = document.getElementById(element_id);
		elementid.remove();
	}

	function removeImgElement(element_id) {
		var elementid = document.getElementById(element_id);
		elementid.remove();
		imgcounter--;
		if(imgcounter<4) {
			document.getElementById("addimgbtn").disabled = false;
		}
	}
</script>

  
</body>
</html>
