@extends('layouts.front.shell')

@section('cssdefine')

<link rel="stylesheet" type="text/css" href="{{ asset('css/page/part/trademark_applicant.css') }}">

@endsection

@section('content')

<div id="content_area" class="shrink">
				<div class="w-100 content_layer rounded_lv4 bg-transparent border-0 shadow-none px-0" style="backdrop-filter: blur(0);">
					<div class="container-fluid">
						<div class="row">
							<div class="col main_title order-0 mb-3 mb-lg-0">申請商標</div>
						</div>
						<div class="row">
							<div class="col-12">
																<ul class="row no-gutters progress_step scrollbar_x">
																			<li class="col ">商標資訊</li>
																			<li class="col active">申請人資訊</li>
																			<li class="col ">選擇方案</li>
																			<li class="col ">確認資訊</li>
																	</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="w-100 content_layer rounded_lv4">
					<div class="container-fluid">
						<div class="row">
							<div class="col-12 form-group">
								<label>申請名義</label>
								<ul class="nav nav-pills mb-3 pill_tab_style form-row" id="pills-tab" role="tablist">
																												<li class="nav-item col-auto mb-1">
											<a class="nav-link" data-toggle="pill" href="#pills-personal" role="tab">個人申請</a>
										</li>
																			<li class="nav-item col-auto mb-1">
											<a class="nav-link" data-toggle="pill" href="#pills-application_1" role="tab">商號行號工廠申請</a>
										</li>
																			<li class="nav-item col-auto mb-1">
											<a class="nav-link" data-toggle="pill" href="#pills-application_2" role="tab">法人公司機關學校申請</a>
										</li>
																	</ul>
							</div>
							<div class="col-12">
								<div class="tab-content" id="pills-tabContent">
																		<div class="tab-pane fade show active" id="pills-personal" role="tabpanel">
																					<div class="row">
												<div class="col-sm-6 col-xl-3 form-group">
													<label for="personal_name">申請人姓名</label>
													<input type="text" class="form-control inputbox_primary" id="personal_name">
												</div>
												<div class="col-sm-6 col-xl-3 form-group">
													<label>國籍</label>
													<div>中華民國</div>
												</div>
												<div class="col-sm-6 col-xl-3 form-group">
													<label for="personal_identity">申請人身分證字號</label>
													<input type="text" class="form-control inputbox_primary" id="personal_identity">
												</div>
											</div>
																				<div class="row">
											<div class="col-lg-6 col-xl-3 form-group">
												<label for="contact_name">聯絡人姓名</label>
												<input type="text" class="form-control inputbox_primary" id="contact_name">
											</div>
											<div class="col-lg-6 col-xl-9">
												<label>聯絡地址</label>
												<div class="form-row">
													<div class="col">
														<select class="form-control inputbox_primary form-group">
															<option>縣市</option>
														</select>
													</div>
													<div class="col">
														<select class="form-control inputbox_primary form-group">
															<option>鄉鎮市區</option>
														</select>
													</div>
													<div class="col-6">
														<input type="text" class="form-control inputbox_primary form-group">
													</div>
												</div>
											</div>
											<div class="col-md-6 col-xl-3 form-group">
												<label for="phone">電話</label>
												<input type="tel" class="form-control inputbox_primary" id="phone">
											</div>
											<div class="col-md-6 col-xl-3 form-group">
												<label for="tel">電子信箱</label>
												<input type="tel" class="form-control inputbox_primary" id="tel">
											</div>
											<div class="col-12 col-xl form-group">
												<label for="receipt">收據抬頭</label>
												<input type="text" class="form-control inputbox_primary" id="receipt">
											</div>
										</div>
									</div>
																		<div class="tab-pane fade " id="pills-application_1" role="tabpanel">
																					<div class="row">
												<div class="col-sm-6 col-xl-3 form-group">
																											<label for="type1_name">商號行號工廠全稱</label>
																										<input type="text" class="form-control inputbox_primary" id="type1_name">
												</div>
												<div class="col-sm-6 col-xl-3 form-group">
													<label for="type1_representative_name">代表人姓名</label>
													<input type="text" class="form-control inputbox_primary" id="type1_representative_name">
												</div>
												
												<div class="col-sm-6 col-xl-3 form-group">
													<label for="type1_taxid">統一編號</label>
													<input type="text" class="form-control inputbox_primary" id="type1_taxid">
												</div>
												<div class="col-sm-6 col-xl-3 form-group">
													<label>國籍</label>
													<div>中華民國</div>
												</div>
												<div class="col-sm-6 col-xl-3 form-group">
													<div class="form-row">
														<div class="col-auto">
															<label for="type1_seal_upload">上傳公司大小章 (蓋在空白紙上，其上簽字備註商標申請用，拍照上傳即可)</label>
															<div class="d-flex">
																<label for="type1_seal_upload" class="btn_text text_sm btn_primary"><i class="fa-solid fa-upload"></i>&ensp;上傳圖樣</label>
															</div>
															<input type="file" class="d-none" id="type1_seal_upload">
														</div>
														<div class="col">
															<div class="position-relative photo_bg_color mb-2 rounded">
																<div class="box_16to9 w-100"></div>
																<img src="{{ asset('file/house.jpg') }}" class="pattern_display object_fit_contain">
															</div>
														</div>
													</div>
												</div>
											</div>
																				<div class="row">
											<div class="col-lg-6 col-xl-3 form-group">
												<label for="contact_name">聯絡人姓名</label>
												<input type="text" class="form-control inputbox_primary" id="contact_name">
											</div>
											<div class="col-lg-6 col-xl-9">
												<label>聯絡地址</label>
												<div class="form-row">
													<div class="col">
														<select class="form-control inputbox_primary form-group">
															<option>縣市</option>
														</select>
													</div>
													<div class="col">
														<select class="form-control inputbox_primary form-group">
															<option>鄉鎮市區</option>
														</select>
													</div>
													<div class="col-6">
														<input type="text" class="form-control inputbox_primary form-group">
													</div>
												</div>
											</div>
											<div class="col-md-6 col-xl-3 form-group">
												<label for="phone">電話</label>
												<input type="tel" class="form-control inputbox_primary" id="phone">
											</div>
											<div class="col-md-6 col-xl-3 form-group">
												<label for="tel">電子信箱</label>
												<input type="tel" class="form-control inputbox_primary" id="tel">
											</div>
											<div class="col-12 col-xl form-group">
												<label for="receipt">收據抬頭</label>
												<input type="text" class="form-control inputbox_primary" id="receipt">
											</div>
										</div>
									</div>
																		<div class="tab-pane fade " id="pills-application_2" role="tabpanel">
																					<div class="row">
												<div class="col-sm-6 col-xl-3 form-group">
																											<label for="type2_name">法人公司機關學校全稱</label>
																										<input type="text" class="form-control inputbox_primary" id="type2_name">
												</div>
												<div class="col-sm-6 col-xl-3 form-group">
													<label for="type2_representative_name">代表人姓名</label>
													<input type="text" class="form-control inputbox_primary" id="type2_representative_name">
												</div>
												
												<div class="col-sm-6 col-xl-3 form-group">
													<label for="type2_taxid">統一編號</label>
													<input type="text" class="form-control inputbox_primary" id="type2_taxid">
												</div>
												<div class="col-sm-6 col-xl-3 form-group">
													<label>國籍</label>
													<div>中華民國</div>
												</div>
												<div class="col-sm-6 col-xl-3 form-group">
													<div class="form-row">
														<div class="col-auto">
															<label for="type2_seal_upload">上傳公司大小章 (蓋在空白紙上，其上簽字備註商標申請用，拍照上傳即可)</label>
															<div class="d-flex">
																<label for="type2_seal_upload" class="btn_text text_sm btn_primary"><i class="fa-solid fa-upload"></i>&ensp;上傳圖樣</label>
															</div>
															<input type="file" class="d-none" id="type2_seal_upload">
														</div>
														<div class="col">
															<div class="position-relative photo_bg_color mb-2 rounded">
																<div class="box_16to9 w-100"></div>
																<img src="{{ asset('file/house.jpg') }}" class="pattern_display object_fit_contain">
															</div>
														</div>
													</div>
												</div>
											</div>
																				<div class="row">
											<div class="col-lg-6 col-xl-3 form-group">
												<label for="contact_name">聯絡人姓名</label>
												<input type="text" class="form-control inputbox_primary" id="contact_name">
											</div>
											<div class="col-lg-6 col-xl-9">
												<label>聯絡地址</label>
												<div class="form-row">
													<div class="col">
														<select class="form-control inputbox_primary form-group">
															<option>縣市</option>
														</select>
													</div>
													<div class="col">
														<select class="form-control inputbox_primary form-group">
															<option>鄉鎮市區</option>
														</select>
													</div>
													<div class="col-6">
														<input type="text" class="form-control inputbox_primary form-group">
													</div>
												</div>
											</div>
											<div class="col-md-6 col-xl-3 form-group">
												<label for="phone">電話</label>
												<input type="tel" class="form-control inputbox_primary" id="phone">
											</div>
											<div class="col-md-6 col-xl-3 form-group">
												<label for="tel">電子信箱</label>
												<input type="tel" class="form-control inputbox_primary" id="tel">
											</div>
											<div class="col-12 col-xl form-group">
												<label for="receipt">收據抬頭</label>
												<input type="text" class="form-control inputbox_primary" id="receipt">
											</div>
										</div>
									</div>
																	</div>
							</div>
							<div class="col-12">
								<div class="row justify-content-end">
									<div class="col">
										<div class="form-row justify-content-between">
											<div class="col-auto">
												<button class="btn_text btn_primary step_change mb-2" data-href="trademark_info.php">上一步</button>
											</div>
											<div class="col-auto">
												<button class="btn_text btn_primary step_change mb-2" data-href="trademark_payway.php">下一步</button>
											</div>
										</div>
									</div>
									<div class="col-sm-auto">
										<div class="d-inline-flex w-100 justify-content-end">
											<button class="btn_text btn_secondary clean_btn">清除</button>
											<button class="btn_text btn_primary save_btn">儲存</button>
										</div>
									</div>													
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

<div class="modal fade modal_style" id="save_notice" tabindex="-1" role="dialog">
			<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal modal-sm" role="document">
				<div class="modal-content">
					<div class="modal-body scrollbar_y">
						<div class="row">
							<div class="col-12 color_warn">尚未儲存變更，是否仍要進到<span class="word"></span>？</div>
						</div>
					</div>
					<div class="modal-footer d-block">
						<div class="d-inline-flex w-100 justify-content-center">
							<div class="px-1">
								<button class="btn_text text_sm btn_primary" id="direct_btn" data-dismiss="modal">不儲存，直接<span class="word"></span></button>
							</div>
							<div class="px-1">
								<button class="btn_text text_sm btn_secondary" data-dismiss="modal">再想想</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	@endsection


	@section('jsdefine')

	<script>
			$('.step_change').click(function(){
				var btn_text = $(this).text();
				var btn_href = $(this).attr('data-href');
				$('#save_notice .word').text(btn_text);
				$('#save_notice').modal('show');
				$('#direct_btn').attr('onclick','location.href="'+btn_href+'"');
			});
		</script>

	@endsection