<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
	<title>Sudila Printers</title>
	<meta name="description" content="overview &amp; stats" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<!-- bootstrap & fontawesome -->
	<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
	<link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />
	<!-- page specific plugin styles -->
	<!-- text fonts -->
	<link rel="stylesheet" href="assets/css/fonts.googleapis.com.css" />
	<!-- ace styles -->
	<link rel="stylesheet" href="assets/css/chosen.min.css" />
	<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
<!--[if lte IE 9]>
    <link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
<![endif]-->
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
<!--[if lte IE 9]>
  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="assets/js/ace-extra.min.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body class="no-skin">
	<?php include 'common/navbar.php'; ?>
	<div class="main-container ace-save-state" id="main-container">
		<?php include 'common/sidebar.php'; ?>
		<div class="main-content">
			<div class="main-content-inner">
				<div class="breadcrumbs ace-save-state" id="breadcrumbs">
					<ul class="breadcrumb">
						<li> <i class="ace-icon fa fa-home home-icon"></i> <a href="home">Home</a> </li>
						<li><a href="view-book-list">Book List</a></li>
						<li class="active">New Book</li>
					</ul>
					<!-- /.breadcrumb --> 
				</div>
				<div class="page-content">
					<div class="page-header">
						<h1> Add New Book </h1>
					</div>
					<!-- /.page-header -->
					<div class="row">
						<div class="col-xs-12"> 
							<!-- PAGE CONTENT BEGINS -->
							<div class="widget-box">
								<div class="widget-body">
									<div class="widget-main"> <br>
										<!-- Content -->
										<form id="form_submit" method="post">
											<div class="form-group">
												<label>Select Category:<sup class="red">*</sup></label>
												<select multiple="" class="chosen-select form-control tag-input-style" data-placeholder="Choose a Category..." name="cat_id[]" required>
													<?php
													$sql = "SELECT * FROM category";
													$result = mysqli_query($conn, $sql);
													while ($row = mysqli_fetch_array($result)){
														echo "<option value='".$row['id']."'>".$row['category']."</option>"; 
													}
													?>
												</select>
												<span class="help-block"></span>
											</div>
											<div class="form-group">
												<label>Name (English and Sinhala):<sup class="red">*</sup></label>
												<input type="text" class="form-control" name="name" required autocomplete="off"/>
												<span class="help-block"></span>
											</div>
											<div class="form-group">
												<label>Name (English Only):<sup class="red">*</sup></label>
												<input type="text" class="form-control" name="eng_name" required autocomplete="off"/>
												<span class="help-block"></span>
											</div>
											<div class="row">
												<div class="form-group col-md-4">
													<label>Price:<sup class="red">*</sup></label>
													<input type="text" class="form-control" name="price" required autocomplete="off"/>
													<span class="help-block"></span>
												</div>
												<div class="form-group col-md-4">
													<label>ISBN:<sup class="red">*</sup></label>
													<input type="text" class="form-control" name="isbn" required autocomplete="off"/>
													<span class="help-block"></span>
												</div>
												<div class="form-group col-md-4">
													<label>Item Code:<sup class="red">*</sup></label>
													<input type="text" class="form-control" name="item_code" required autocomplete="off"/>
													<span class="help-block"></span>
												</div>

											</div>
											<div class="row">
												<div class="form-group col-md-6">
													<label>Author:<sup class="red">*</sup></label>
													<div class="row">
														<div class="col-md-12">
															<input type="text" name="author" id="form-field-tags" placeholder="Enter Author ..." required autocomplete="off" style="width:100%"/>
														</div>
													</div>
													<span class="help-block"></span>
												</div>
												<div class="form-group col-md-6">
													<label>Publisher:<sup class="red">*</sup></label><br>
													<input type="text" class="form-control scrollable" name="publisher" id="publisher" required autocomplete="off"/>
													<span class="help-block"></span>
												</div>
											</div>
											<div class="row">
												<div class="form-group col-md-3">
													<label>Book Discount (%):<sup class="red">*</sup></label>
													<input type="text" class="form-control" name="discount" required autocomplete="off" value="0"/>
													<span class="help-block"></span>
												</div>
												<div class="form-group col-md-3">
													<label>Width (mm):</label>
													<input type="text" class="form-control" name="width" autocomplete="off"/>
													<span class="help-block"></span>
												</div>
												<div class="form-group col-md-3">
													<label>Height (mm):</label>
													<input type="text" class="form-control" name="height" autocomplete="off"/>
													<span class="help-block"></span>
												</div>
												<div class="form-group col-md-3">
													<label>Weight (g):<sup class="red">*</sup></label>
													<input type="text" class="form-control" name="weight" required autocomplete="off"/>
													<span class="help-block"></span>
												</div>
											</div>
											<div class="form-group">
												<label>Description:</label>
												<textarea type="text" class="form-control" rows=5 name="descrip"></textarea>
												<span class="help-block"></span>
											</div>
											<div class="form-group">
												<label>Keywords:</label>
												<input type="text" class="form-control" name="keywords" autocomplete="off"/>
												<span class="help-block"></span>
											</div>
											<div class="form-group">
												<label>Front Cover Image:<sup class="red">*</sup></label>
												<input class="form-control" type="file" id="id-input-file-2" accept="image/*" required name="file_name1"/>
												<small class="text-danger">Max-Width: 350px</small>
												<span class="help-block"></span>
											</div>
											<div class="form-group">
												<label>Back Cover Image:</label>
												<input class="form-control" type="file" id="id-input-file-2" accept="image/*" name="file_name2"/>
												<small class="text-danger">Max-Width: 350px</small>
												<span class="help-block"></span>
											</div>
											<div class="row">
												<div class="form-group col-md-2 col-sm-3">
													<label>
														<input type="checkbox" class="ace" value="1" name="new_pro" />
														<span class="lbl"> &nbsp;&nbsp;New Product</span>
													</label>
												</div>
												<div class="form-group col-md-2 col-sm-3">
													<label>
														<input type="checkbox" class="ace" value="1" name="feature_pro" />
														<span class="lbl"> &nbsp;&nbsp;Featured Product</span>
													</label>
												</div>
												<div class="form-group col-md-2 col-sm-3">
													<label>
														<input type="checkbox" class="ace" value="1" name="stock_out" />
														<span class="lbl"> &nbsp;&nbsp;Out of Stock</span>
													</label>
												</div>
												<div class="form-group col-md-2 col-sm-3">
													<label>
														<input type="checkbox" class="ace" value="1" name="best_sell" />
														<span class="lbl"> &nbsp;&nbsp;Best Seller</span>
													</label>
												</div>
						  <!--<div class="form-group col-md-2 col-sm-3">
							<label>
								<input type="checkbox" class="ace" value="1" name="kids_book" />
								<span class="lbl"> &nbsp;&nbsp;Kids Book</span>
							</label>
						</div>-->
					</div>
					<br>
					<div class="form-group">
						<button class="btn btn-primary btn-sm"> SUBMIT</button>
					</div>
				</form>
				<!-- End Content --> 
			</div>
		</div>
	</div>
	<!-- /End .widget-box --> 
	<div class="box box-danger">
		<div class="box-header">
			<h3 class="box-title">Item Discount</h3>
		</div>
		<div class="box-body">
			<form action="connection/update_discount_fun.php" method="post">

				<div class="form-group col-md-4">
					<label>Select category:<font color="#FF0000"><strong>*</strong></font></label>
					<select class="form-control select2" placeholder="Select category" id="maincat_pub_dis" name="select_cat" >
						<Option></option>
							<?php $sql = mysqli_query($conn, "SELECT * FROM category order by id ASC ");
							while($row = mysqli_fetch_array($sql)) { ?>
								<option value="<?php echo $row['id']; ?>"><?php echo $row['category']; ?></option>
							<?php }?>
						</select>
					</div>



					<div class="form-group col-md-4">
						<label>Discount Value (%):<font color="#FF0000"><strong>*</strong></font></label>
						<input type="text" class="form-control" name="dis_val" placeholder="Enter ..." autocomplete="off" >
					</div>
					<div class="box-footer col-md-1">
						<input type="checkbox" id="sam_all" name="sam_all" >
						<label for="vehicle">Select All</label>
					</div>

					<div class="box-footer col-md-11">
						<button class="btn btn-danger">Apply to All</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
</div>
<!-- /.page-content --> 
</div>
</div>
<!-- /.main-content -->
<?php include 'common/footer.php'; ?>
</div>
<!-- /.main-container -->

<!-- basic scripts --> 
<!--[if !IE]> -->
<script src="assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]--> 
<!--[if IE]>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<![endif]--> 
<script type="text/javascript">
	if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script> 
<script src="assets/js/bootstrap.min.js"></script> 
<!-- page specific plugin scripts --> 
<!--[if lte IE 8]>
  <script src="assets/js/excanvas.min.js"></script>
<![endif]-->
<script src="assets/js/jquery.dataTables.min.js"></script>
<script src="assets/js/jquery-typeahead.js"></script>
<script src="assets/js/jquery.dataTables.bootstrap.min.js"></script>
<!-- ace scripts -->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/chosen.jquery.min.js"></script>
<script src="assets/js/ace.min.js"></script>
<script src="assets/jquery.validate.min.js"></script>
<link rel="stylesheet" href="bootstrap-sweetalert/lib/sweet-alert.css" />
<script src="bootstrap-sweetalert/lib/sweet-alert.min.js"></script>
<script src="assets/js/bootstrap-tag.min.js"></script>
<!-- inline scripts related to this page --> 
<script type="text/javascript">
	jQuery(function ($) {
	//initiate dataTables plugin
	var myTable =
	$('#dynamic-table')
	//.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
	.DataTable({
		bAutoWidth: false,
		"aaSorting": [],
	});
	
	if(!ace.vars['touch']) {
		$('.chosen-select').chosen({allow_single_deselect:true}); 
		//resize the chosen on window resize

		$(window)
		.off('resize.chosen')
		.on('resize.chosen', function() {
			$('.chosen-select').each(function() {
				var $this = $(this);
				$this.next().css({'width': $this.parent().width()});
			})
		}).trigger('resize.chosen');
		//resize chosen on sidebar collapse/expand
		$(document).on('settings.ace.chosen', function(e, event_name, event_val) {
			if(event_name != 'sidebar_collapsed') return;
			$('.chosen-select').each(function() {
				var $this = $(this);
				$this.next().css({'width': $this.parent().width()});
			})
		});
	}
	
	$('#id-input-file-1 , #id-input-file-2').ace_file_input({
		no_file:'No File ...',
		btn_choose:'Choose',
		btn_change:'Change',
		droppable:false,
		onchange:null,
		thumbnail:false, //| true | large
		whitelist:'png|jpg|jpeg',
		blacklist:'exe|php|html',
		onchange:'',
	});
	
	///////////////////
	
	var AUTHOR_LIST=[];
	
	<?php $sql_au = mysqli_query($conn, "SELECT * FROM author ORDER BY name");
	while($row_au = mysqli_fetch_array($sql_au)) {
		?>
		AUTHOR_LIST.push('<?php echo $row_au['name']; ?>');
	<?php } ?>
	
	var PUB_LIST=[];
	
	<?php $sql_pub = mysqli_query($conn, "SELECT * FROM publisher ORDER BY name");
	while($row_pub = mysqli_fetch_array($sql_pub)) {
		?>
		PUB_LIST.push('<?php echo $row_pub['name']; ?>');
	<?php } ?>

	//typeahead.js
	//example taken from plugin's page at: https://twitter.github.io/typeahead.js/examples/
	var substringMatcher = function(strs) {
		return function findMatches(q, cb) {
			var matches, substringRegex;

			// an array that will be populated with substring matches
			matches = [];

			// regex used to determine if a string contains the substring `q`
			substrRegex = new RegExp(q, 'i');

			// iterate through the pool of strings and for any string that
			// contains the substring `q`, add it to the `matches` array
			$.each(strs, function(i, str) {
				if (substrRegex.test(str)) {
					// the typeahead jQuery plugin expects suggestions to a
					// JavaScript object, refer to typeahead docs for more info
					matches.push({ value: str });
				}
			});

			cb(matches);
		}
	}

	var tag_input = $('#form-field-tags');
	try{
		tag_input.tag(
		{
			placeholder:tag_input.attr('placeholder'),
			//enable typeahead by specifying the source array
			source: AUTHOR_LIST,//defined in ace.js >> ace.enable_search_ahead
			/**
			//or fetch data from database, fetch those that match "query"
			source: function(query, process) {
			  $.ajax({url: 'remote_source.php?q='+encodeURIComponent(query)})
			  .done(function(result_items){
				process(result_items);
			  });
			}
			*/
		}
		)

		//programmatically add/remove a tag
		/*var $tag_obj = $('#form-field-tags').data('tag');
		$tag_obj.add('Programmatically Added');
		
		var index = $tag_obj.inValues('some tag');
		$tag_obj.remove(index);*/
	}
	catch(e) {
		//display a textarea for old IE, because it doesn't support this plugin or another one I tried!
		tag_input.after('<textarea id="'+tag_input.attr('id')+'" name="'+tag_input.attr('name')+'" rows="3">'+tag_input.val()+'</textarea>').remove();
		//autosize($('#form-field-tags'));
	}

	$('#author').typeahead({
		hint: true,
		highlight: true,
		minLength: 1
	}, {
		name: 'states',
		displayKey: 'value',
		source: substringMatcher(AUTHOR_LIST),
		limit: 10
	});

	$('#publisher').typeahead({
		hint: true,
		highlight: true,
		minLength: 1
	}, {
		name: 'states',
		displayKey: 'value',
		source: substringMatcher(PUB_LIST),
		limit: 10
	});

	//////////////
	
});


	$('document').ready(function()
	{
	$.validator.setDefaults({ ignore: ":hidden:not(select)" }); //for all select
	$("#form_submit").validate({
		ignore: [],
		rules: {
			price: {
				number: true,
				min: 1,
			},
			width: {
				number: true,
				min: 1,
			},
			height: {
				number: true,
				min: 1,
			},
			weight: {
				number: true,
				min: 1,
			},
			discount: {
				number: true,
				min: 0,
			},
		},
		messages:
		{
			price: {
				number: "Invalid Price Value",
				min: "Invalid Price Value",
			},
			width: {
				number: "Invalid Value",
				min: "Invalid Value",
			},
			height: {
				number: "Invalid Value",
				min: "Invalid Value",
			},
			weight: {
				number: "Invalid Value",
				min: "Invalid Value",
			},
			discount: {
				number: "Invalid Value",
				min: "Invalid Value",
			},
		},
		errorPlacement : function(error, element) {
			$(element).closest('.form-group').find('.help-block').html(error.html());
		},
		highlight : function(element) {
			$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
		},
		unhighlight: function(element, errorClass, validClass) {
			$(element).closest('.form-group').removeClass('has-error');
			$(element).closest('.form-group').find('.help-block').html('');
		},
		submitHandler: submitForm
	});
	function submitForm(){
		//disable the default form submission
		event.preventDefault();
		//grab all form data  
		var formData = new FormData($('#form_submit')[0]);
		
		$.ajax({
			url: 'connection/book_conn',
			type: 'POST',
			data: formData,
			async: false,
			cache: false,
			contentType: false,
			processData: false,
		})
		.done(function(data){
			if ( data === 'success' ) {
				swal({
					title: "",
					text: "Successfully Added!",
					type: "success",
					confirmButtonText: "OK"
				},
				function (isConfirm) {
					if (isConfirm) {
						window.location.href = "add-new-book";
					}
				});

			} else if(data ==='error2') {
				swal("", "Error While uploading file on the server. Please Try Again!", "warning");

			} else if(data ==='error3') {
				swal("", "Invaild File Type! Please Try Again!", "warning");

			} else if(data ==='exist') {
				swal("", "File Name Already Exists! Please Try Again!", "warning");

			} else if ( data === 'data exist' ) {
				swal("", "ISBN Already Exist. Please Try Again!", "warning");

			}  else if ( data === 'data exist1' ) {
				swal("", "Book Name Already Exist. Please Try Again!", "warning");

			} else {
				swal("", "Something went wrong! Please Try Again!", "warning");
			}
		})
		.fail(function(){
			swal("", "Something went wrong! Please Try Again!", "warning");
		});
	}
});

</script>
</body>
</html>