<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      layout:decorator="layout/mainLayout">
      
      <head>
        <title>Products - New</title>
                
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
    		$("select.category").change(function(){
        	var selectedCategory = $(".category option:selected").val();
        		$.ajax({
           				 type: "get",
            			url: "/getsubcategory/",
            			data: { id : selectedCategory } 
        				}).done(function(data){        					
            						$("#subcategory").html(data);
        					});
    				});
			});
		</script>
    </head>
    <body>
        
    	<div layout:fragment="content">
	        
              <div class="box box-warning">
                <div class="box-header with-border">
                  <h3 class="box-title">Create New Product</h3>
                </div><!-- /.box-header -->
                <div class="box-body">
                  <form role="form" th:action="@{/products}" th:object="${product}" method="post" enctype="multipart/form-data">
                    <p th:if="${#fields.hasErrors('global')}" th:errors="*{global}" th:class="text-red">Incorrect data</p>
                    <!-- text input -->
                    <div class="form-group" th:classappend="${#fields.hasErrors('name')}? 'has-error'">
                      <label>Name</label>
                      <input type="text" class="form-control" name="name" th:field="*{name}" placeholder="Enter Product Name"/>
                      <p th:if="${#fields.hasErrors('name')}" th:errors="*{name}" th:class="text-red">Incorrect data</p>
                    </div>
                    
                    <div class="form-group" th:classappend="${#fields.hasErrors('manufacturer')}? 'has-error'">
                      <label>Manufacturer</label>
                      <input type="text" class="form-control" name="manufacturer" th:field="*{manufacturer}" placeholder="Enter Product Manufacturer"/>
                      <p th:if="${#fields.hasErrors('manufacturer')}" th:errors="*{manufacturer}" th:class="text-red">Incorrect data</p>
                    </div>
                    
                    <div class="form-group" th:classappend="${#fields.hasErrors('price')}? 'has-error'">
                      <label>Price</label>
                      <input type="text" class="form-control" name="price" th:field="*{price}" placeholder="Enter Product Price"/>
                      <p th:if="${#fields.hasErrors('price')}" th:errors="*{price}" th:class="text-red">Incorrect data</p>
                    </div>
                    <div class="form-group" th:classappend="${#fields.hasErrors('featured')}? 'has-error'">
                      <label>Featured</label>
                      <input type="text" class="form-control" name="featured" th:field="*{featured}" placeholder="Enter featured 0 or 1 ?"/>
                      <p th:if="${#fields.hasErrors('featured')}" th:errors="*{featured}" th:class="text-red">Incorrect data</p>
                    </div>
                    <div class="form-group" th:classappend="${#fields.hasErrors('available')}? 'has-error'">
                      <label>Available</label>
                      <input type="text" class="form-control" name="available" th:field="*{available}" placeholder="Enter No of Products"/>
                      <p th:if="${#fields.hasErrors('available')}" th:errors="*{available}" th:class="text-red">Incorrect data</p>
                    </div>
                    <!-- textarea -->
                    <div class="form-group" th:classappend="${#fields.hasErrors('description')}? 'has-error'">
                      <label>Description</label>
                      <textarea class="form-control" rows="3" name="description" th:field="*{description}" placeholder="Enter Role Description"></textarea>
                      <p th:if="${#fields.hasErrors('description')}" th:errors="*{description}" th:class="text-red">Incorrect data</p>
                    </div>
					
					<div class="form-group" th:classappend="${#fields.hasErrors('image')}? 'has-error'">
                      <label for="image">Image</label>
                      <input type="file" class="form-control" name="image" th:field="*{image}"/>
                      <p th:if="${#fields.hasErrors('image')}" th:errors="*{image}" th:class="text-red">Incorrect data</p>
                      <p class="help-block">Select JPG Image</p>
                    </div>
                    
					<div class="form-group" th:classappend="${#fields.hasErrors('categoryId')}? 'has-error'">
						<label>Category</label>
						<div>
							<select  th:field="*{categoryId}" class="category">
							  <option th:each="cat : ${categoriesList}" 
							          th:value="${cat.id}" 
							          th:text="${cat.name}">Category</option>
							</select>
					  	<p th:if="${#fields.hasErrors('categoryId')}" th:errors="*{categoryId}" th:class="text-red">Incorrect data</p>
						</div>
						
    				</div>
    				<label>sub-category:</label> 				
    				<div class="form-group" id="subcategory" >			 
							<select style="width:75px;">
							<option value="">Select</option>
							</select>							
					</div>	
    				
					<div class="box-footer">
	                    <button type="submit" class="btn btn-primary">Submit</button>
	                </div>
                  </form>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
    	</div>
    	
    </body>
    
</html>