<%@ 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/pic8/1.gif" alt="">
   </div>

	<div class="big_tit">
		Postcards
	</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="8">
			<div class="input_list">
				<p class="inoputp">Quantity</p>
				<select id="num1" name="num">
					<option value="100">100</option>
					<option value="250">250</option>
					<option value="500">500</option>
					<option value="1000">1000</option>
					<option value="2500">2500</option>
					<option value="5000">5000</option>
					<option value="10000">10000</option>
				</select>
			</div>
			
			<div class="input_list" id="num2" >
				<p class="inoputp">Number of Designs</p>
				<select name="desnum" id="desnum">
					<c:forEach begin="1" step="1" end="100" var="p">
						<option value="${p}">${p}</option>
					</c:forEach>
				</select>
			</div>
			<script>
				$('#num1').on('change',function(){
				　　var valst = parseInt($("#num1").val());
						$('#desnum').empty();
					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">Size</p>
				<select id="size" name="size">
					<option value="A6 (105mm x 148mm)">A6 (105mm x 148mm)</option>
					<option value="A5 (148mm x 210mm)">A5 (148mm x 210mm)</option>
					<option value="DL (99mm x 210mm)">DL (99mm x 210mm)</option>

				</select>
			</div>
			<div class="input_list">
				<p class="inoputp">Orientation</p>
				<select id="orient">
					<option value="Portrait">Portrait</option>
					<option value="Landscape">Landscape</option>
				</select>
			</div>
			<div class="input_list">
				<p class="inoputp">Material</p>
				<select id="name" name="name">
					<option value="360gsm Coated Artboard">360gsm Coated Artboard</option>
				</select>
			</div>
			<div class="input_list">
				<p class="inoputp">Lamination</p>
				<select id="prints" name="prints">
					<option value="Matte Lamination Front & Back">Matte Lamination Front & Back</option>
					<option value="Matte Lamination Front Only">Matte Lamination Front Only</option>
				</select>
			</div>

			<div class="input_list">
				<p class="inoputp">Printing</p>
				<select id="materials" name="materials">
					<option value="Double Sided Full Colour">Double Sided Full Colour</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(){
			

			
			$("#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>Postcards</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>Size:</td><td>'+$("#size").val()+'</td></tr>\n'+
                    			'<tr><td>Orientation:</td><td>'+$("#orient").val()+'</td></tr>\n'+
								'<tr><td>Material:</td><td>'+$("#name").val()+'</td></tr>\n'+
                    			'<tr><td>Lamination:</td><td>'+$("#prints").val()+'</td></tr>\n'+
                    			'<tr><td>Printing:</td><td>'+$("#materials").val()+'</td></tr>\n'+
								'</tbody></table></div>\n'+
								'<hr style="height:3px;border:none;border-top:3px double red;" />';
								
				$(".shangpin").append(str);

			    $.ajax({  
			    		url : "calculate08.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>