<link href="/css/webht/flatpicker.min.css" rel="stylesheet">
<script src="/js/flatpickr-4.4.4.min.js"></script>
<div style="width:90%;margin:30px auto;">
     <div class="panel-heading">
        <ul class="nav nav-tabs">
		  <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
		  <li role="presentation"><a href="#manager" aria-controls="manager" role="tab" data-toggle="tab">管理页面</a></li>
		  <li role="presentation"><a href="#sendsms"  aria-controls="sendsms" role="tab" data-toggle="tab">发送短信页面</a></li>
		  <li role="presentation"><a href="#count_price"  aria-controls="count_price" role="tab" data-toggle="tab">计算费用</a></li>	
		</ul>
      </div>
	  
	   <div class="tab-content" style="padding:0 30px">
		<div role="tabpanel" class="tab-pane active" id="home">
			<div class="text-center">
				<h1>短信发送中心</h1>
				<p>版本1.0</p>
				<p>可以正常添加模板，但是只有一个模板可以发送</p>
			</div>
		</div>
		
		<div role="tabpanel" class="tab-pane" id="manager">
			<form action="http://www.mycht.cn/webht.php/apps/messagecenter/index/add_templete" method="post" name="add_template">
				<p>模板示例：Hi {1}, your guide on {2} is {3}, （local）mobile is {4}. He/she'll call you at the hotel, or leave a message tonight. You can find more info by inputting booking No. {5} at https://www.trippest.com/track-your-trip. Wish you a wonderful day with Trippest!</p>
				<label for="addtemplate">输入模板：</label>
				<textarea id="addtemplate" class="form-control" name="templete"></textarea>
				<br>
				<button type="submit" class="btn btn-default">添加模板</button>
			</form>
		</div>
		
		<div role="tabpanel" class="tab-pane" id="sendsms">
			<p>模板示例：Hi {1}, your guide on {2} is {3}, （local）mobile is {4}. He/she'll call you at the hotel, or leave a message tonight. You can find more info by inputting booking No {5} at https://www.trippest.com/track-your-trip. Wish you a wonderful day with Trippest!</p>
			<form action="http://www.mycht.cn/webht.php/apps/messagecenter/index/send_message" method="post" name="add_template">
				<label for="addtemplate">输入信息：</label>
				<br>
				<label>区号：<input type="text" name="nation_code"></label>
				<br>
				<label>手机号：<input type="text" name="phone"></label>
				<br>
				<label>元素一：<input type="text" name="one"></label>
				<br>
				<label>元素二：<input type="text" name="two"></label>
				<br>
				<label>元素三：<input type="text" name="three"></label>
				<br>
				<label>元素四：<input type="text" name="four"></label>
				<br>
				<label>元素五：<input type="text" name="five"></label>
				<br>
				<button type="submit" class="btn btn-default">发送短信</button>
			</form>
		</div>
		
		<div role="tabpanel" class="tab-pane" id="count_price">
			<div class="row">
				<div class="col-md-8">
					起始时间：<input id="from_time" class="form-control"/>
				</div>
				<div class="col-md-8">
					截止时间：<input id="to_time" class="form-control"/>
				</div>
				<div class="col-md-4">
					汇率：<input type="text" id="rate" class="form-control"/>
				</div>
				<div class="col-md-4">
					<a href="#" class="btn btn-default" id="get_price">查询</a>
				</div>
			</div>
			<div class="row" style="margin-top:20px;">
				<div class="col-md-8">
					<p id="tp_price"></p>
				</div>
				<div class="col-md-8">
					<p id="cht_price"></p>
				</div>
				<div class="col-md-8">
					<p id="total_price"></p>
				</div>
			</div>
		</div>
	  </div>
</div>

<script>
$(function(){
	$('#from_time').flatpickr();
	$('#to_time').flatpickr();
	
	$('#get_price').click(function(){
		var from_time = $('#from_time').val();
		var to_time = $('#to_time').val();
		var rate = $('#rate').val();
		
		if(from_time != '' && to_time != ''){
			$.ajax({
				url:'/webht.php/apps/messagecenter/index/count_price?from_time='+from_time+'&to_time='+to_time+'&rate='+rate,
				success:function(json,status){
					var data = JSON.parse(json);
					$('#tp_price').html('tp费用:'+data.tp);
					$('#cht_price').html('cht费用:'+data.cht);
					$('#total_price').html('总费用费用:'+data.all_total);
				}
			});
		}
	});
});
</script>