@extends('layouts.front.shell')

@section('cssdefine')

	<!-- tagsinput -->
    <link rel="stylesheet" type="text/css" href="{{ asset('css/page/tagsinput/bootstrap-tagsinput.css') }}">
			<link rel="stylesheet" type="text/css" href="{{ asset('css/page/tagsinput/app.css') }}">
			<script src="{{ asset('js/page/tagsinput/typeahead.bundle.min.js') }}"></script>
			<script src="{{ asset('js/page/tagsinput/angular.min.js') }}"></script>
			<script type="text/javascript" src="{{ asset('js/page/tagsinput/bootstrap-tagsinput.js') }}"></script>
			<script type="text/javascript" src="{{ asset('js/page/tagsinput/bootstrap-tagsinput-angular.js') }}"></script>
		<!-- others -->
			<link rel="stylesheet" type="text/css" href="{{ asset('css/page/part/trademark/trademark_info.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 active">商標資訊</li>
																			<li class="col ">申請人資訊</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">
											<a class="nav-link" data-toggle="pill" href="#pills-word" role="tab">純文字</a>
										</li>
																			<li class="nav-item col-auto">
											<a class="nav-link" data-toggle="pill" href="#pills-word_and_picture" role="tab">文字加圖</a>
										</li>
																			<li class="nav-item col-auto">
											<a class="nav-link" data-toggle="pill" href="#pills-picture" role="tab">純圖案</a>
										</li>
																			<li class="nav-item col-auto">
											<a class="nav-link" data-toggle="pill" href="#pills-design_word" 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-word" role="tabpanel">
										<div class="row">
											<div class="col-sm-6 col-md-4 form-group">
												<label for="trademark_name">商標文字</label>
												<input id="trademark_name" type="text" class="form-control inputbox_primary">
											</div>
																						<div class="col-sm-6 col-md-4 form-group">
												<label>商標圖樣顏色</label>
												<div class="form-row radio_btn_group">
																																								<div class="col-auto radio_btn">
															<input type="radio" name="pattern_color_data" id="black" checked class="d-none">
															<label for="black">墨色</label>
														</div>
																											<div class="col-auto radio_btn">
															<input type="radio" name="pattern_color_data" id="color"  class="d-none">
															<label for="color">彩色</label>
														</div>
																									</div>
											</div>
											<div class="col-12 form-group">
												<label>選取想保護的商品或服務分類</label>
												<div class="position-relative">
													<div id="tagsinput_collapse_btn" data-toggle="collapse" data-target=".trademark_type">
														<span>展開</span>&ensp;<i class="fa-solid fa-angle-down"></i>
													</div>
													<input type="text" class="form-control inputbox_primary tagsinput_select_input" data-role="tagsinput" id="tm_type_input">
												</div>
												<!-- 每大類區塊 -->
													<div class="collapse trademark_type">
														<div class="form-row link_primary cursor_pointer tm_type_layer1" data-toggle="collapse" data-target="#tm_4501"> 
															<div class="col-auto">第四十五類：</div>
															<div class="col">
																<div>保全、喪葬、宗教、算命、婚友、服裝租賃、家事管理、代理智慧財產權、法律服務&ensp;<i class="fa-solid fa-circle-chevron-down"></i></div>
															</div>
														</div>
														<div class="form-row link_primary cursor_pointer tm_type_layer2 collapse" id="tm_4501" data-toggle="collapse" data-target="#tm_450100">
															<div class="col-auto">4501類</div>
															<div class="col">各種服飾租賃&ensp;<i class="fa-solid fa-circle-chevron-down"></i></div>
														</div>
														<div class="form-row tm_type_layer3 collapse" id="tm_450100">
															<div class="col-12">450100類</div>
															<div class="col-12">
																<div class="form-row checkbox_btn_group">
																																																				<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_0" class="d-none">
																			<label id="450100_0_label" for="450100_0">各種服飾租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_1" class="d-none">
																			<label id="450100_1_label" for="450100_1">服裝租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_2" class="d-none">
																			<label id="450100_2_label" for="450100_2">禮服租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_3" class="d-none">
																			<label id="450100_3_label" for="450100_3">晚禮服租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_4" class="d-none">
																			<label id="450100_4_label" for="450100_4">制服租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_5" class="d-none">
																			<label id="450100_5_label" for="450100_5">協助和服著裝</label>
																		</div>
																																	</div>
															</div>
														</div>
													</div>
												<!-- 每大類區塊 -->
											</div>
											<div class="col-12">
												<div class="row justify-content-end">
													<div class="col-auto">
														<button class="btn_text btn_primary" data-toggle="modal" data-target="#save_notice">下一步</button>
													</div>
													<div class="col-auto">
														<div class="d-inline-flex">
															<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 class="tab-pane fade " id="pills-word_and_picture" role="tabpanel">
										<div class="row">
											<div class="col-sm-6 col-md-4 form-group">
												<label for="trademark_name">商標文字</label>
												<input id="trademark_name" type="text" class="form-control inputbox_primary">
											</div>
																							<div class="col-sm-6 col-md-4 form-group">
													<div class="form-row">
														<div class="col-auto">
															<label for="trademark_upload">商標圖樣</label>
															<div class="d-flex">
																<label for="trademark_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="trademark_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 class="col-sm-6 col-md-4 form-group">
												<label>商標圖樣顏色</label>
												<div class="form-row radio_btn_group">
																																								<div class="col-auto radio_btn">
															<input type="radio" name="pattern_color_data" id="black" checked class="d-none">
															<label for="black">墨色</label>
														</div>
																											<div class="col-auto radio_btn">
															<input type="radio" name="pattern_color_data" id="color"  class="d-none">
															<label for="color">彩色</label>
														</div>
																									</div>
											</div>
											<div class="col-12 form-group">
												<label>選取想保護的商品或服務分類</label>
												<div class="position-relative">
													<div id="tagsinput_collapse_btn" data-toggle="collapse" data-target=".trademark_type">
														<span>展開</span>&ensp;<i class="fa-solid fa-angle-down"></i>
													</div>
													<input type="text" class="form-control inputbox_primary tagsinput_select_input" data-role="tagsinput" id="tm_type_input">
												</div>
												<!-- 每大類區塊 -->
													<div class="collapse trademark_type">
														<div class="form-row link_primary cursor_pointer tm_type_layer1" data-toggle="collapse" data-target="#tm_4501"> 
															<div class="col-auto">第四十五類：</div>
															<div class="col">
																<div>保全、喪葬、宗教、算命、婚友、服裝租賃、家事管理、代理智慧財產權、法律服務&ensp;<i class="fa-solid fa-circle-chevron-down"></i></div>
															</div>
														</div>
														<div class="form-row link_primary cursor_pointer tm_type_layer2 collapse" id="tm_4501" data-toggle="collapse" data-target="#tm_450100">
															<div class="col-auto">4501類</div>
															<div class="col">各種服飾租賃&ensp;<i class="fa-solid fa-circle-chevron-down"></i></div>
														</div>
														<div class="form-row tm_type_layer3 collapse" id="tm_450100">
															<div class="col-12">450100類</div>
															<div class="col-12">
																<div class="form-row checkbox_btn_group">
																																																				<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_0" class="d-none">
																			<label id="450100_0_label" for="450100_0">各種服飾租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_1" class="d-none">
																			<label id="450100_1_label" for="450100_1">服裝租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_2" class="d-none">
																			<label id="450100_2_label" for="450100_2">禮服租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_3" class="d-none">
																			<label id="450100_3_label" for="450100_3">晚禮服租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_4" class="d-none">
																			<label id="450100_4_label" for="450100_4">制服租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_5" class="d-none">
																			<label id="450100_5_label" for="450100_5">協助和服著裝</label>
																		</div>
																																	</div>
															</div>
														</div>
													</div>
												<!-- 每大類區塊 -->
											</div>
											<div class="col-12">
												<div class="row justify-content-end">
													<div class="col-auto">
														<button class="btn_text btn_primary" data-toggle="modal" data-target="#save_notice">下一步</button>
													</div>
													<div class="col-auto">
														<div class="d-inline-flex">
															<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 class="tab-pane fade " id="pills-picture" role="tabpanel">
										<div class="row">
											<div class="col-sm-6 col-md-4 form-group">
												<label for="trademark_name">商標文字</label>
												<input id="trademark_name" type="text" class="form-control inputbox_primary">
											</div>
																							<div class="col-sm-6 col-md-4 form-group">
													<div class="form-row">
														<div class="col-auto">
															<label for="trademark_upload">商標圖樣</label>
															<div class="d-flex">
																<label for="trademark_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="trademark_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 class="col-sm-6 col-md-4 form-group">
												<label>商標圖樣顏色</label>
												<div class="form-row radio_btn_group">
																																								<div class="col-auto radio_btn">
															<input type="radio" name="pattern_color_data" id="black" checked class="d-none">
															<label for="black">墨色</label>
														</div>
																											<div class="col-auto radio_btn">
															<input type="radio" name="pattern_color_data" id="color"  class="d-none">
															<label for="color">彩色</label>
														</div>
																									</div>
											</div>
											<div class="col-12 form-group">
												<label>選取想保護的商品或服務分類</label>
												<div class="position-relative">
													<div id="tagsinput_collapse_btn" data-toggle="collapse" data-target=".trademark_type">
														<span>展開</span>&ensp;<i class="fa-solid fa-angle-down"></i>
													</div>
													<input type="text" class="form-control inputbox_primary tagsinput_select_input" data-role="tagsinput" id="tm_type_input">
												</div>
												<!-- 每大類區塊 -->
													<div class="collapse trademark_type">
														<div class="form-row link_primary cursor_pointer tm_type_layer1" data-toggle="collapse" data-target="#tm_4501"> 
															<div class="col-auto">第四十五類：</div>
															<div class="col">
																<div>保全、喪葬、宗教、算命、婚友、服裝租賃、家事管理、代理智慧財產權、法律服務&ensp;<i class="fa-solid fa-circle-chevron-down"></i></div>
															</div>
														</div>
														<div class="form-row link_primary cursor_pointer tm_type_layer2 collapse" id="tm_4501" data-toggle="collapse" data-target="#tm_450100">
															<div class="col-auto">4501類</div>
															<div class="col">各種服飾租賃&ensp;<i class="fa-solid fa-circle-chevron-down"></i></div>
														</div>
														<div class="form-row tm_type_layer3 collapse" id="tm_450100">
															<div class="col-12">450100類</div>
															<div class="col-12">
																<div class="form-row checkbox_btn_group">
																																																				<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_0" class="d-none">
																			<label id="450100_0_label" for="450100_0">各種服飾租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_1" class="d-none">
																			<label id="450100_1_label" for="450100_1">服裝租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_2" class="d-none">
																			<label id="450100_2_label" for="450100_2">禮服租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_3" class="d-none">
																			<label id="450100_3_label" for="450100_3">晚禮服租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_4" class="d-none">
																			<label id="450100_4_label" for="450100_4">制服租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_5" class="d-none">
																			<label id="450100_5_label" for="450100_5">協助和服著裝</label>
																		</div>
																																	</div>
															</div>
														</div>
													</div>
												<!-- 每大類區塊 -->
											</div>
											<div class="col-12">
												<div class="row justify-content-end">
													<div class="col-auto">
														<button class="btn_text btn_primary" data-toggle="modal" data-target="#save_notice">下一步</button>
													</div>
													<div class="col-auto">
														<div class="d-inline-flex">
															<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 class="tab-pane fade " id="pills-design_word" role="tabpanel">
										<div class="row">
											<div class="col-sm-6 col-md-4 form-group">
												<label for="trademark_name">商標文字</label>
												<input id="trademark_name" type="text" class="form-control inputbox_primary">
											</div>
																							<div class="col-sm-6 col-md-4 form-group">
													<div class="form-row">
														<div class="col-auto">
															<label for="trademark_upload">商標圖樣</label>
															<div class="d-flex">
																<label for="trademark_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="trademark_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 class="col-sm-6 col-md-4 form-group">
												<label>商標圖樣顏色</label>
												<div class="form-row radio_btn_group">
																																								<div class="col-auto radio_btn">
															<input type="radio" name="pattern_color_data" id="black" checked class="d-none">
															<label for="black">墨色</label>
														</div>
																											<div class="col-auto radio_btn">
															<input type="radio" name="pattern_color_data" id="color"  class="d-none">
															<label for="color">彩色</label>
														</div>
																									</div>
											</div>
											<div class="col-12 form-group">
												<label>選取想保護的商品或服務分類</label>
												<div class="position-relative">
													<div id="tagsinput_collapse_btn" data-toggle="collapse" data-target=".trademark_type">
														<span>展開</span>&ensp;<i class="fa-solid fa-angle-down"></i>
													</div>
													<input type="text" class="form-control inputbox_primary tagsinput_select_input" data-role="tagsinput" id="tm_type_input">
												</div>
												<!-- 每大類區塊 -->
													<div class="collapse trademark_type">
														<div class="form-row link_primary cursor_pointer tm_type_layer1" data-toggle="collapse" data-target="#tm_4501"> 
															<div class="col-auto">第四十五類：</div>
															<div class="col">
																<div>保全、喪葬、宗教、算命、婚友、服裝租賃、家事管理、代理智慧財產權、法律服務&ensp;<i class="fa-solid fa-circle-chevron-down"></i></div>
															</div>
														</div>
														<div class="form-row link_primary cursor_pointer tm_type_layer2 collapse" id="tm_4501" data-toggle="collapse" data-target="#tm_450100">
															<div class="col-auto">4501類</div>
															<div class="col">各種服飾租賃&ensp;<i class="fa-solid fa-circle-chevron-down"></i></div>
														</div>
														<div class="form-row tm_type_layer3 collapse" id="tm_450100">
															<div class="col-12">450100類</div>
															<div class="col-12">
																<div class="form-row checkbox_btn_group">
																																																				<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_0" class="d-none">
																			<label id="450100_0_label" for="450100_0">各種服飾租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_1" class="d-none">
																			<label id="450100_1_label" for="450100_1">服裝租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_2" class="d-none">
																			<label id="450100_2_label" for="450100_2">禮服租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_3" class="d-none">
																			<label id="450100_3_label" for="450100_3">晚禮服租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_4" class="d-none">
																			<label id="450100_4_label" for="450100_4">制服租賃</label>
																		</div>
																																			<div class="col-auto checkbox_btn">
																			<input type="checkbox" id="450100_5" class="d-none">
																			<label id="450100_5_label" for="450100_5">協助和服著裝</label>
																		</div>
																																	</div>
															</div>
														</div>
													</div>
												<!-- 每大類區塊 -->
											</div>
											<div class="col-12">
												<div class="row justify-content-end">
													<div class="col-auto">
														<button class="btn_text btn_primary" data-toggle="modal" data-target="#save_notice">下一步</button>
													</div>
													<div class="col-auto">
														<div class="d-inline-flex">
															<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>
					</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">尚未儲存變更，是否仍要進到下一步？</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" data-dismiss="modal" onclick="location.href='trademark_applicant.php'">不儲存，直接下一步</button>
							</div>
							<div class="px-1">
								<button class="btn_text text_sm btn_secondary" data-dismiss="modal">再想想</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

        <script>
			/*tagsinput*/
				$('#tm_type_input').tagsinput({
					allowDuplicates: false,
					itemValue: 'value',
					itemText: 'label'
				});
				$('.checkbox_btn_group .checkbox_btn label').click(function(){
					var btn_input = $(this).closest('.checkbox_btn').find('input[type="checkbox"]');
					var text = $(this).text();
					var input = $('#tm_type_input');
					var identity = $(this).attr('for');
					if(btn_input.prop('checked')==true){
						input.tagsinput('remove', { value: identity, label: text });
						btn_input.click();
					}else{
						input.tagsinput('add', { value: identity, label: text });
					}
				});	
				$('#tm_type_input').on('beforeItemRemove', function(event) {
					var tag_btn = '#'+event.item.value;
					$(tag_btn).click();
				});
			/*箭頭上下*/
				$('.tm_type_layer1, .tm_type_layer2').click(function(){
					$(this).find('i').toggleClass('fa-circle-chevron-down fa-circle-chevron-up');
				});
				$('#tagsinput_collapse_btn').click(function(){
					$(this).find('i').toggleClass('fa-angle-down fa-angle-up');
					var text = $(this).find('span').text();
					if(text == '展開'){
						$(this).find('span').text('收合');
					}else{
						$(this).find('span').text('展開');
					}
				});

		</script>

	@endsection


	@section('jsdefine')


	@endsection