<div class="modal fade" id="mdlOrderDesktop" tabindex="-1" role="dialog" aria-labelledby="order-desktop-title" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<p id="order-desktop-title">＜订阅 Subscribe＞<br /><span class="modal-title">中国文化电子书：《西游记　跟我学》诗歌集（中英对照版）</span></p>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-8">
						<form>
							<div class="row pt-3">
								<div class="col-7">
									<label class="pr-3 form-label">订阅期：</label>
									<input class="form-check-input" name="plan" type="checkbox" value="6" id="6-months">
									<label class="form-check-label ml-3 main-color form-label" for="6-months">6个月 HKD38.00</label>
								</div>
								<div class="col-5">
									<input class="ml-3" type="checkbox" name="plan" value="12" id="12-months" checked="checked">
									<label class="form-check-label main-color form-label" for="12-months">12个月 HKD58.00</label>
								</div>
							</div>
							<div class="row pt-4">
								<div class="col-2">
									<label for="name" class="form-label">姓名</label>
								</div>
								<div class="col-10">
									<input type="text" class="form-control" id="name" name="name" placeholder="请填写姓名">
								</div>
							</div>
							<div class="row pt-4">
								<div class="col-2">
									<label for="phone" class="form-label">电话</label>
								</div>
								<div class="col-4">
									<input type="text" class="form-control" id="phone" name="phone" placeholder="请填写电话">
								</div>
								<div class="col-2 text-right">
									<label for="email" class="form-label">电邮</label>
								</div>
								<div class="col-4">
									<input type="email" class="form-control" id="email" name="email" placeholder="请填写电邮">
								</div>
							</div>
							<div class="row pt-4">
								<div class="col-2">
									<label for="reference" class="form-label">参考编号</label>
								</div>
								<div class="col-4">
									<input type="text" class="form-control" id="reference" name="reference" placeholder="请填写八达通付款后的参考编号">
								</div>
								<div class="col-6">
									<button class="btn text-center btn-form-submit" data-content="desktop">递交资料</button>
								</div>
							</div>
							<div class="row pt-3">
								<div class="col-12">
									<p>以八达通付款后，手机屏会收到一个「参考编号」，请在「参考编号」栏位输入该编号。</p>
								</div>
								<div class="col-12 p-3">
									<input class="form-check-input" type="checkbox" value="Y" id="agree">
									<label class="form-check-label ml-3" for="agree">本人同意我的个人资料被用作通知我有关订阅及服务信息（<a target="_blank" href="<?=base_url('notice/terms');?>">詳情按此</a>）</label>
								</div>
							</div>
						</form>
					</div>
					<div class="col-4">
						<div class="row align-items-end">
							<div class="col-5 pl-0 pr-0">
								<img class="img-fluid octopus-logo" src="<?=$base_url;?>assets/img/octopus.png" />
							</div>
							<div class="col-7">
								<p class="text-center currency">HKD</p>
								<p class="text-center price pb-3">58.00</p>
							</div>
						</div>
						<img class="img-fluid qrcode-price" src="<?=$base_url;?>assets/img/qrcode-58.png" />
						<p class="text-center pt-3">盘年公益文化事务部</p>
						<p class="eng text-center">is created by Jonson Technology Co. Ltd</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="mdlOrderMobile" tabindex="-1" role="dialog" aria-labelledby="order-mobile-title" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<p id="order-mobile-title">＜订阅 Subscribe＞<br /><span class="modal-title">中国文化电子书：《西游记　跟我学》诗歌集（中英对照版）</span></p>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form>
					<p>订阅期：</p>
					<div class="row">
						<div class="col-6 pr-0">
							<input class="form-check-input" type="checkbox" name="plan-mobile" value="6" id="6-months-mobile">
							<label class="form-check-label ml-3 main-color form-label" for="6-months-mobile">6个月 HKD38.00</label>
						</div>
						<div class="col-6 pr-0">
							<input class="ml-3" type="checkbox" name="plan-mobile" value="12" id="12-months-mobile" checked="checked">
							<label class="form-check-label main-color form-label" for="12-months-mobile">12个月 HKD58.00</label>
						</div>
					</div>
					<div class="row pt-3">
						<div class="col-2">
							<label for="name-mobile" class="form-label">姓名</label>
						</div>
						<div class="col-10">
							<input type="text" class="form-control" id="name-mobile name="name-mobile" placeholder="请填写姓名">
						</div>
					</div>
					<div class="row pt-3">
						<div class="col-2">
							<label for="phone-mobile" class="form-label">电话</label>
						</div>
						<div class="col-10">
							<input type="text" class="form-control" id="phone-mobile" name="phone-mobile" placeholder="请填写电话">
						</div>
					</div>
					<div class="row pt-3">
						<div class="col-2">
							<label for="email-mobile" class="form-label">电邮</label>
						</div>
						<div class="col-10">
							<input type="email" class="form-control" id="email-mobile" name="email-mobile" placeholder="请填写电邮">
						</div>
					</div>
					<div class="row pt-3">
						<div class="col-2">
							<label for="reference-mobile" class="form-label">参考编号</label>
						</div>
						<div class="col-10">
							<input type="text" class="form-control" id="reference-mobile" name="reference-mobile" placeholder="请填写八达通付款后的参考编号">
						</div>
					</div>
					<div class="row pt-2">
						<div class="col-2"></div>
						<div class="col-10">
							<p>以八达通付款后，手机屏会收到一个「参考编号」，请在「参考编号」栏位输入该编号。</p>
						</div>
					</div>
					<div class="row pt-2">
						<div class="col-2"></div>
						<div class="col-10">
							<input class="form-check-input" type="checkbox" value="Y" id="agree-mobile">
							<label class="form-check-label ml-3" for="agree-mobile">本人同意我的个人资料被用作通知我有关订阅及服务信息（<a target="_blank" href="<?=base_url('notice/terms');?>">詳情按此</a>）</label>
						</div>
					</div>
					<div class="row pt-2">
						<div class="col-12">
							<button class="btn text-center btn-form-submit" data-content="mobile">递交资料</button>
						</div>
					</div>
				</form>
				<div class="row justify-content-center">
					<div class="col-2"></div>
					<div class="col-8 text-center">
						<table class="table">
							<tbody>
								<tr>
									<td class="w-50"><img class="img-fluid octopus-logo" src="<?=$base_url;?>assets/img/octopus.png" /></td>
									<td class="w-50 price-block">
										<p class="text-center currency">HKD</p>
										<p class="text-center price">58.00</p>
									</td>
								</tr>
								<tr>
									<td colspan="2">
										<img class="img-fluid d-block mx-auto qrcode-price" src="<?=$base_url;?>assets/img/qrcode-58.png" />
									</td>
								</tr>
								<tr>
									<td colspan="2">
										<p class="text-center pt-3">盘年公益文化事务部</p>
										<p class="eng text-center">is created by Jonson Technology Co. Ltd</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="col-2"></div>
				</div>
			</div>
		</div>
	</div>
</div>


