<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title id="pageTitle">详情页</title>
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 user-scalable=no"/>
<meta id="description" name="Description" content=""/>
<meta id="key" name="Keywords" content=""/>
<link rel="icon" type="image/x-icon" href="${pageContext.request.contextPath}/user/images/titlecon.png" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/user/dist/css/swiper.min.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/user/css/reset.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/user/css/index.css"/>
<script language="javascript" type="text/javascript" src="${pageContext.request.contextPath}/user/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/user/dist/js/swiper.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/user/js/config.js"></script>
<style>
	.tabled{
		width:100%;
	}
	.tabled,.tabled tr,.tabled td{
		line-height:28px;
		vertical-align: middle;
		border:1px solid #666;
	}
	.tabled tr td:nth-child(1){
		font-weight:bold;
	}
	.tabled td{
		padding:0 5px;
	}
	
	.tabled tr:nth-child(even) {
		background-color: #eee;
	}
</style>
</head>
<body>
	<!-- 头部开始 -->
	<jsp:include page='<%="/classifyList.html"%>'></jsp:include>
    <!-- 头部结束 -->
    
     <div class="banner_img">
		<img src="${pageContext.request.contextPath}/user/images/pic28/1.jpg" alt="">
   </div>
	
	
	<div class="big_tit">
		Flag Pole Sets & Bases
	</div>

	
	<div class="sec_tit">
		<i class="sectit_con"></i>
		instant pricing calculator
	</div>
	
	
	<div class="form_model">
		<div class="form_box">
		<form id="myForm">
		<input type="hidden" name="pid" value="28">
			<div class="input_list">
				<p class="inoputp">Quantity</p>
				<input id="num1" type="number" name="num" onkeyup="value=value.replace(/\D/g,'')" onafterpaste="value=value.replace(/\D/g,'')">
			</div>
			
			
			<div class="input_list">
				<p class="inoputp">Product</p>
				<select name="size" id="size011">
					<option value="Ground Spike">Ground Spike</option>
					<option value="Cross Base & Water Bag">Cross Base & Water Bag</option>
					<option value="Cross Base">Cross Base</option>
					<option value="Premium Cross Base & Water Bag">Premium Cross Base & Water Bag</option>
					<option value="Premium Cross Base">Premium Cross Base</option>
					<option value="Water Bag Only">Water Bag Only</option>
					<option value="Heavy Duty Square Base (5kg)">Heavy Duty Square Base (5kg)</option>
					<option value="Heavy Duty Square Base (7kg)">Heavy Duty Square Base (7kg)</option>
					<option value="Heavy Duty Square Base (10kg)">Heavy Duty Square Base (10kg)</option>
					<option value="Wall Bracket (0 Degree)">Wall Bracket (0 Degree)</option>
					<option value="Wall Bracket (30 Degree)">Wall Bracket (30 Degree)</option>
					<option value="U-Shaped Car Tyre Base">U-Shaped Car Tyre Base</option>
					<option value="Vertical Floor Bracket">Vertical Floor Bracket</option>
					<option value="Black Pole Set & Carry Bag for Small Teardrop Banner (Banner not included)">Black Pole Set & Carry Bag for Small Teardrop Banner (Banner not included)</option>
					<option value="Black Pole Set & Carry Bag for Medium Teardrop Banner (Banner not included)">Black Pole Set & Carry Bag for Medium Teardrop Banner (Banner not included)</option>
					<option value="Black Pole Set & Carry Bag for Large Teardrop Banner (Banner not included)">Black Pole Set & Carry Bag for Large Teardrop Banner (Banner not included)</option>
					<option value="Black Pole Set & Carry Bag for Jumbo Teardrop Banner (Banner not included)">Black Pole Set & Carry Bag for Jumbo Teardrop Banner (Banner not included)</option>
					<option value="Black Pole Set & Carry Bag for Small Bow Banner (Banner not included)">Black Pole Set & Carry Bag for Small Bow Banner (Banner not included)</option>
					<option value="Black Pole Set & Carry Bag for Medium Bow Banner (Banner not included)">Black Pole Set & Carry Bag for Medium Bow Banner (Banner not included)</option>
					<option value="Black Pole Set & Carry Bag for Large Bow Banner (Banner not included)">Black Pole Set & Carry Bag for Large Bow Banner (Banner not included)</option>
					<option value="Black Pole Set & Carry Bag for Jumbo Bow Banner (Banner not included)">Black Pole Set & Carry Bag for Jumbo Bow Banner (Banner not included)</option>
					<option value="BlackPole Set & Carry Bag for Small Rectangle Flag (Banner not included)">BlackPole Set & Carry Bag for Small Rectangle Flag (Banner not included)</option>
					<option value="Black Pole Set & Carry Bag for Medium Rectangle Flag (Banner not included)">Black Pole Set & Carry Bag for Medium Rectangle Flag (Banner not included)</option>
					<option value="Black Pole Set & Carry Bag for Large Rectangle Flag (Banner not included)">Black Pole Set & Carry Bag for Large Rectangle Flag (Banner not included)</option>
					<option value="Black Pole Set & Carry Bag for Jumbo Rectangle Flag (Banner not included)">Black Pole Set & Carry Bag for Jumbo Rectangle Flag (Banner not included)</option>
				</select>
			</div>
			
			


			<button type="button" class="submirrt" value="Calculate my price" id="submmi">Calculate my price</button>

			
		</form>
			
		</div>
	</div>
	
		<!-- 计算结果 -->
			<div class="result_mode">
				<div class="result_box" style="padding:10px;">
					<i class="close_con"></i>
					<div class="shangpin"></div>
					<div class="shangpin01"></div>
				</div>
			</div>
			<script>
				$(".close_con").click(function(){
	                 $('.shangpin').empty();
	                 $('.shangpin01').empty();
					 $(".result_mode").hide();
				})
			</script> 
			

	<!-- 底部开始 -->
    <div class="footer">
		© Copyright Easy Signs Pty Ltd. 2019
    </div>

   
</body>
 <script type="text/javascript">
		$(function(){
			$(".menu").click(function(){
				if($(this).hasClass("colsenav")){
					var that = $(this)
					$(".navBarMain").animate({
						left:"-6rem",
					},function(){
						$(".shadowcent").hide();
						that.removeClass("colsenav")
					});
					
				}else{
					$(".shadowcent").show();
					$(".navBarMain").animate({
						left:"0",
					});
					$(this).addClass("colsenav")
				}
				
			});
			
			$("#submmi").click(function () {
                if($("#num1").val() == '' || $("#num1").val() == null){
                    alert("Purchase quantity cannot be empty!");
                    return false;
                }
				var str = '<div><p style="font-size:20px;color:#ce188e;text-align:center;margin:20px 0;">Your quote is as follows</p></div>\n'+
							'<div><table class="tabled">\n'+
							'<tbody valign="middle"><tr><td>Product:</td><td>Flag Pole Sets & Bases</td></tr>\n'+
								'<tr><td>Quantity:</td><td>'+$("#num1").val()+'</td></tr>\n'+
								'<tr><td>Product:</td><td>'+$("#size011").val()+'</td></tr>\n'+
								'</tbody></table></div>\n'+
								'<hr style="height:3px;border:none;border-top:3px double red;" />';
								
				$(".shangpin").append(str);
				
			    $.ajax({  
			    		url : 'calculate28.html',
			            type : "POST",   
			            data : $('#myForm').serialize(),// 序列化表单值  
			            async : false,
						dataType : 'json', 
			            success : function(data) {  //成功
			                 /* alert(data);  //就将返回的数据显示出来 */
			                 var pro = '<div><table class="tabled"><tbody valign="middle">\n'+
			                 	'<tr><td>Univalence :</td><td>$'+data.price.toFixed(2)+'</td></tr>\n'+
								'<tr><td>Design Fee :</td><td>$'+data.desSumPrice.toFixed(2)+'</td></tr>\n'+
								'<tr><td>Minor Total :</td><td>$'+data.subtotal.toFixed(2)+'</td></tr>\n'+
								'<tr><td>Expenses of Taxation :</td><td>$'+data.shuiPrice.toFixed(2)+'</td></tr></tbody></table></div>\n'+
								'<p class="tey_is">The calculation result is</p><p class="the_result">$'+data.sumAllPrice.toFixed(2)+'</p>';
			                 
							$(".shangpin01").append(pro);	
							$(".result_mode").show(); 
			                 
			            },  
			            error : function(request) {  //失败的话
			                 alert("Connection error");  
			            } 
			            
			         });
			       });
			 
			 
			
		})
		
	</script>
</html>