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

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

	<div class="big_tit">
		Menus
	</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="2">

			<div class="input_list">
				<p class="inoputp">Quantity</p>
				<select id="num1" name="num">
					<option value="50">50</option>
					<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"  style="display:none;">
				<p class="inoputp">Number of Designs</p>
				<select name="desnum" id="desnum">
					<option value="1">1</option>
				</select>
			</div>


			<script>
                $('#num1').on('change',function(){
                    var valst = parseInt($("#num1").val());
                    if(valst>50){
                        $("#num2").show();
                        $('#desnum').empty();
                    }else{
                        $('#desnum').empty();
                        $("#num2").hide();
                    }
                    var str = parseInt(valst)/50;
                    if(str<=200){
                        for(var i=1;i<=str;i++){
                            var options = '<option value="'+i+'">'+i+'</option>';
                            $("#desnum").append(options);
                        }
                    }else{
                        for(var i=1;i<=200;i++){
                            var options = '<option value="'+i+'">'+i+'</option>';
                            $("#desnum").append(options);
                        }
                    }

                });
			</script>



			<div class="input_list">
				<p class="inoputp">Product Range</p>
				<select id="rang_s" name="ranges">
					<option value="Premium">Premium</option>
					<option value="Essential">Essential</option>
				</select>
			</div>

			<div class="input_list">
				<p class="inoputp">Size</p>
				<select id="size" name="size">
					<option value="Gate Fold (A3 folded to 210x297mm)" class="ranges_e">Gate Fold (A3 folded to 210x297mm)</option>
					<option value="Double Gate Fold (A3 folded to 105x297mm)" class="ranges_e">Double Gate Fold (A3 folded to 105x297mm)</option>
					<option value="A4 Bifold (A3 folded in half to A4)">A4 Bifold (A3 folded in half to A4)</option>
					<option value="A5 Bifold (A4 folded in half to A5)">A5 Bifold (A4 folded in half to A5)</option>
					<option value="DL C-Fold (A4 folded to DL)">DL C-Fold (A4 folded to DL)</option>
					<option value="DL Z-Fold (A4 folded to DL)">DL Z-Fold (A4 folded to DL)</option>
					<option value="DL Long Menu (No Fold)">DL Long Menu (No Fold)</option>
					<option value="A3 (No Fold)" class="ranges_e">A3 (No Fold)</option>
					<option value="A4 (No Fold)" class="ranges_e">A4 (No Fold)</option>
					<option value="A5 (No Fold)" class="ranges_e">A5 (No Fold)</option>
				</select>
			</div>


			<div class="input_list">
				<p class="inoputp">Material</p>
				<select id="meter" name="meter">
					<option value="200gsm Paper" class="ranges_e">200gsm Paper</option>
					<option value="250gsm Paper" class="ranges_e">250gsm Paper</option>
					<option value="310gsm Artboard" class="ranges_e">310gsm Artboard</option>
					<option value="128gsm Gloss Paper" class="ranges">128gsm Gloss Paper</option>
					<option value="128gsm Matte Paper" class="ranges">128gsm Matte Paper</option>
					<option value="150gsm Gloss Paper" class="ranges">150gsm Gloss Paper</option>
					<option value="150gsm Matte Paper" class="ranges">150gsm Matte Paper</option>
				</select>
			</div>
			<div class="input_list ranges_e">
				<p class="inoputp">Lamination</p>
				<select id="lamination" name="lamion">
					<option value="Gloss Both Sides Laminated">Gloss Both Sides Laminated</option>
					<option value="Matte Both Sides Laminated">Matte Both Sides Laminated</option>
					<option value="Soft Touch Anti-Scuff Both Sides Laminated">Soft Touch Anti-Scuff Both Sides Laminated</option>
				</select>
			</div>

			<script type="text/javascript">
				$("#rang_s").change(function () {
					var str = $(this).val();
					if(str == "Premium"){
					    $(".ranges").hide();
					    $(".ranges_e").show();
                        $("#meter").val("200gsm Paper");
                        $("#size").val("Gate Fold (A3 folded to 210x297mm)");
					}else{
                        $(".ranges_e").hide();
                        $(".ranges").show();
                        $("#meter").val("128gsm Gloss Paper");
                        $("#size").val("A4 Bifold (A3 folded in half to A4)");
					}
                })
			</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(){
			$(".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 () {
				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>Menus</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>Product Range:</td><td>'+$("#rang_s").val()+'</td></tr>\n'+
								'<tr><td>Size:</td><td>'+$("#size").val()+'</td></tr>\n'+
								'<tr><td>Material:</td><td>'+$("#meter").val()+'</td></tr>\n'+
                    			'<tr id="kan" style="display:none;"><td>Lamination:</td><td>'+$("#lamination").val()+'</td></tr>\n'+
								'</tbody></table></div>\n'+
								'<hr style="height:3px;border:none;border-top:3px double red;" />';
                $(".shangpin").append(str);
				if($("#rang_s").val()=="Essential"){
				    $("#kan").hide();
				}else{
                    $("#kan").show();
				}

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