<%@ 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;
	}
	.hiddens{
		display:none;
	}
</style>
</head>
<body>
	<!-- 头部开始 -->
	<jsp:include page='<%="/classifyList.html"%>'></jsp:include>
    <!-- 头部结束 -->
	
	

   <div class="banner_img">
		<img src="${pageContext.request.contextPath}/user/images/pic10/1.jpg" alt="">
   </div>

	<div class="big_tit">
		Large Format Stickers (SAV)
	</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="10">
			<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" id="num2"  style="display:none;">
				<p class="inoputp">Number of Designs</p>
				<select name="desnum" id="desnum">
					
				</select>
			</div>
			<script>
				$('#num1').on('input propertychange',function(){
				　　var valst = $("#num1").val();
					if(valst>1){
						$("#num2").show();
						$('#desnum').empty(); 
					}else{
						$('#desnum').empty(); 
						$("#num2").hide();
					}
					if(valst<=1000){
						for(var i=1;i<=valst;i++){
							var options = '<option value="'+i+'">'+i+'</option>';
							$("#desnum").append(options);
						}
					}else{
						for(var i=1;i<=1000;i++){
							var options = '<option value="'+i+'">'+i+'</option>';
							$("#desnum").append(options);
						}
					}
					
				});
			</script>
			
			<div class="input_list">
				<p class="inoputp">Width (mm)</p>
				<input name="name01" id="name01" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
											onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" >
				<p style="display: none;font-size: 10px;color: red;" id="name011">Please enter an integer above 200</p>
			</div>

			<div class="input_list">
				<p class="inoputp">Height (mm)</p>
				<input name="name02" id="name02" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
											onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" >
				<p style="display: none;font-size: 10px;color: red;" id="name021">Please enter an integer above 200</p>
			</div>

			<div class="input_list">
				<p class="inoputp">Material</p>
				<select id="size" name="size">
					<option value="Gloss White Economy (1 Year)">Gloss White Economy (1 Year)</option>
					<option value="Matt White Premium (3 Years)">Matt White Premium (3 Years)</option>
					<option value="Gloss White Premium (3 Years)">Gloss White Premium (3 Years)</option>
					<option value="Gloss Clear Premium (3 Years)">Gloss Clear Premium (3 Years)</option>
					<option value="One Way Window Film (2 Years)">One Way Window Film (2 Years)</option>
					<option value="Gloss White Bubble Free (3 Years)">Gloss White Bubble Free (3 Years)</option>
					<option value="Gloss White High Tack (3 Years)">Gloss White High Tack (3 Years)</option>
					<option value="Phototex Indoor Re-Usable">Phototex Indoor Re-Usable</option>
					<option value="Gloss White Cast Easy Apply (5-7 Years)">Gloss White Cast Easy Apply (5-7 Years)</option>
				</select>
		</div>
		<div class="input_list">
			<p class="inoputp">Lamination Options</p>
			<select id="name" name="name">
				<option value="None">None</option>
				<option value="Matt" class="hiddens" id="hiddens01">Matt</option>
				<option value="Gloss" class="hiddens" id="hiddens02">Gloss</option>
				<option value="Ultra Clear Gloss" class="hiddens" id="hiddens03">Ultra Clear Gloss</option>
				<option value="Anti-Graffiti" class="hiddens" id="hiddens04">Anti-Graffiti</option>
				<option value="Gloss Cast" class="hiddens" id="hiddens05">Gloss Cast</option>
			</select>
		</div>

			<script type="text/javascript">
				$("#size").change(function(){
				    var str = $(this).val();
				    $("#name").val("None");
				    $(".hiddens").hide();
				    if(str=="Gloss White Economy (1 Year)" || str=="Phototex Indoor Re-Usable"){
				        return true;
					}else if(str=="Matt White Premium (3 Years)" || str=="Gloss White Premium (3 Years)" || str=="Gloss Clear Premium (3 Years)"){
				        $("#hiddens01").show();$("#hiddens02").show();return true;
					}else if(str=="One Way Window Film (2 Years)"){
                        $("#hiddens03").show();return true;
                    }else if(str=="Gloss White Bubble Free (3 Years)" || str=="Gloss White High Tack (3 Years)"){
                        $("#hiddens01").show();$("#hiddens02").show();$("#hiddens04").show();return true;
                    }else {
                        $("#hiddens05").show();return true;
					}
				})


			</script>

		<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(){
			
			$("#name01").blur(function(){
				var str = document.getElementById("name01").value;
				if(str < 200){
					$("#name011").show();
				}else{
					$("#name011").hide();
				}
			});
			
			$("#name02").blur(function(){
				var str = document.getElementById("name02").value;
				if(str < 200){
					$("#name021").show();
				}else{
					$("#name021").hide();
				}
			})
			
			$(".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;
				}
			    if($("#name01").val() == '' || $("#name01").val() == null){
			        alert("Width (mm) cannot be empty!");
			        return false;
				}
			    if($("#name02").val() == '' || $("#name02").val() == null){
			        alert("Height (mm) cannot be empty!");
			        return false;
				}
			    if($("#name01").val() < 200){
					$("#name011").show();
					 return false;
				}
			    if($("#name02").val() < 200){
					$("#name021").show();
					 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>Large Format Stickers (SAV)</td></tr>\n'+
								'<tr><td>Quantity:</td><td>'+$("#num1").val()+'</td></tr>\n'+
								'<tr><td>Number of Designs:</td><td>'+$("#desnum").val()+'</td></tr>\n'+
								'<tr><td>Width (mm):</td><td>'+$("#name01").val()+'</td></tr>\n'+
								'<tr><td>Height (mm):</td><td>'+$("#name02").val()+'</td></tr>\n'+
								'<tr><td>Material:</td><td>'+$("#size").val()+'</td></tr>\n'+
                    			'<tr><td>Lamination Options:</td><td>'+$("#name").val()+'</td></tr>\n'+
								'</tbody></table></div>\n'+
								'<hr style="height:3px;border:none;border-top:3px double red;" />';
								
				$(".shangpin").append(str);
				
			    $.ajax({  
			    		url : "calculate10.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>