@extends('layout.basic.main')
@section('title', 'ASP管理 運営（成果設定）')
@push('css')
	<link rel="stylesheet" href="/css/base/main.css?v={{config("sns-line.version")}}">
	<link rel="stylesheet" href="/css/plugins/timepicker/bootstrap-timepicker.css">
	<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
	<link rel="stylesheet" href="/css/admin/asp-management/index.css?v={{config("sns-line.version")}}">
	<style>
		.box-title{
			background: #F8F8F8 0% 0% no-repeat padding-box;
			border: 1px solid #F2F2F2;
			border-bottom: none;
			padding: 5px 20px;
			font-size: 13px;
		}
		.box-content-new{
			border: 1px solid #F2F2F2;
			padding: 20px;
		}
	</style>
@endpush
@section('content')
	<div id="setting-add-friend" v-cloak>
	 	 <div class="mt-3">
			 <h2 class="title"> @{{ !notSettingAddFriend ? '友だち登録（オプト）報酬 設定' : '成果報酬 設定' }}</h2>
			 <div class="mt-3">
				 <ul class="list-unstyled tab-setting">
					 <li>
						 <a class="item-tab-setting" :class="{'active': tab == 'basic-setting'}" href="#setting-add-friend" @click="tab = 'basic-setting'">基本設定</a>
					 </li>
					 <li>
						 <a class="item-tab-setting" :class="{'active': tab == 'setting-start-end'}" href="#setting-add-friend" @click="tab = 'setting-start-end'">開始・終了設定</a>
					 </li>
					 <li>
						 <a class="item-tab-setting" :class="{'active': tab == 'introduce'}" href="#setting-add-friend" @click="tab = 'introduce'">紹介素材管理</a>
					 </li>
				 </ul>
				 <div class="mt-4" v-show="tab == 'basic-setting'" id="basic-setting">

					 <div class="wrap-status">
						<span style="padding-right: 30px; display: flex;">
							現在、この案件は
							<a style="color: #535657; font-weight: bold" id="text-status-project">
								<div v-if="basic_setting.condition_status" style="color: #08BF5A !important;">受付中</div>
								<div v-else>
									停止中
								</div>
							</a>
							です
						</span>
						 <div class="d-flex align-items-center" style="padding-left: 15px">
							 <label class="c-switch">
								 <input  value="1" v-model="basic_setting.condition_status" type="checkbox">
								 <span class="c-slider round"></span>
							 </label>
						 </div>
						 <span style="padding-left: 25px">（クリックで受付状況を変更）</span>
					 </div>

					 <div class="box-content mb-3" v-if="notSettingAddFriend">
						 <div class="bor-title-c" style="margin-bottom: 0px">
							 <span>管理名</span>
						 </div>
						 <div class="form-group" style="width: 90%;">
							 <span class="float-right text-note-input-label">@{{ basic_setting.condition_name.length }}/20</span>
							 <input type="text"
									v-model="basic_setting.condition_name"
									v-validate="{required: true, max: 20}"
									:data-vv-as="'管理名'"
									:name="'condition_name'"
									placeholder=""
									class="form-control input-border">
							 <div class="text-danger text-error" v-show="errors.has('condition_name')">@{{ errors.first('condition_name') }}</div>
						 </div>

						 <div>
							 <div class="d-flex align-items-center">
								 <div class="bor-title-c" style="margin-bottom: 0px">
									 <span>報酬条件選択</span>
								 </div>
								 <span @click="showModalCondition" style="color: #5799DB; text-decoration: underline; font-weight: bold; padding-left: 30px; cursor: pointer">条件詳細</span>
							 </div>
							 <div class="form-group" style="width: 30%; margin-top: 18px">
								 <div class="position-relative">
									 <select v-model="basic_setting.type"
											 @change="changeCondition($event.target.value)"
											 class="form-control input-border"
											 style="text-align: left !important;">
										 <option class="text-center" value="">選択してください</option>
										 <option class="text-center" value="2">商品購入</option>
										 <!-- <option class="text-center" value="3">カレンダー予約</option> -->
										 <option class="text-center" value="4">イベント予約</option>
										 <option class="text-center" value="5">フォーム回答</option>
										 <!-- <option class="text-left" value="6">コンバージョン</option> -->
									 </select>

									 <i class="far fa-angle-down"
										style="float: right; font-size: 20px; color: #E0E0E0"></i>
								 </div>
							 </div>
							 <div class="choose-item">
								 <button class="btn-choose-item" @click="toggleShowMenu">
									   @{{ objItemActive.name }}<i class="far fa-angle-down" style="float: right; font-size: 20px;"></i>
								 </button>
								 <div class="show-menu">
									 <div class="w-item">
										 <div class="category" v-show="basic_setting.type != 3">
											 <div v-for="(category, indexCategory) in list_condition"
												  :key="indexCategory"
												  @click="changeCategory(indexCategory)"
												  :class="{active: indexCategory == indexConditionActive}"
													 class="category-item">@{{ category.name }}</div>
										 </div>
										 <div class="list-item" :class="{'w-full': basic_setting.type == 3}">
											 <div
													 v-for="(item, indexItem) in list_item_condition"
													 :key="indexItem"
													 :class="{active: indexItem === indexItemActive}"
													 class="item-option">
												 <div class="d-flex input-radio" style="position: relative; padding-right: 0px;">
													 <input type="radio" :id="'item_option_' + indexItem"
															@click="selectedItem(indexItem, item.id)"
															name="item_option"
															v-model="basic_setting.condition_id"
															:value="item.id"
															class="custom-radio">
													 <label :for="'item_option_' + indexItem">@{{ item.name }}</label>
												 </div>
											 </div>
										 </div>
									 </div>
								 </div>
							 </div>
							 <input type="hidden"
									v-validate="{required: true}"
									:data-vv-as="'報酬条件選択'"
									:name="'condition_id'"
									v-model="basic_setting.condition_id">
							 <div class="text-danger text-error" v-show="errors.has('condition_id')">@{{ errors.first('condition_id') }}</div>

						 </div>
					 </div>

					 <div class="setting-duration-new">
						 <h4 class="sub-title">ランク別公開範囲・報酬額設定</h4>
						 <table class="table table-duration">
							 <tr>
								 <th style="width: 20%; text-align: center">ランク</th>
								 <th style="width: 15%; text-align: center">公開範囲設定</th>
								 <th style="width: 35%; text-align: center">期間</th>
								 <th style="width: 15%; text-align: center">報酬額</th>
								 <th style="width: 15%; text-align: center"></th>
							 </tr>
							 <template v-for="(duration, index) in setting_duration">
								 <tr :class="{'status-project-off': duration.status == 0}">
									 <td style="text-align: left">
										 @{{ duration.rank_name }}
									 </td>
									 <td style="text-align: center">
										<div style="display: flex; justify-content: center">
											<div style="display: flex; align-items: center; width: 98px; " >
												<div class="d-flex align-items-center" style="margin-right: 7px">
													<label class="c-switch">
														<input value="1" v-model="duration.status" type="checkbox">
														<span class="c-slider round"></span>
													</label>
												</div>
												<span v-if="duration.status == 1" style="color: #08BF5A">公開</span>
												<span style="white-space: nowrap" v-else>非公開</span>
											</div>
										</div>
									 </td>
									 <td style="text-align: center">
										 受付開始以降
									 </td>
									 <td style="text-align: center">
										 <div style="display: flex; align-items: end">
											 <input type="number"
													v-model="duration.duration[0].price"
													v-validate="{required: true}"
													:data-vv-as="'報酬'"
													:name="'price_'+ duration.rank + '_0'"
													class="form-control input-border input-number"
													style="font-weight: lighter !important;">
											 <span style="padding-left: 7px">円</span>
										 </div>
										 <div class="text-danger text-error" v-show="errors.has('price_'+ duration.rank + '_0')">@{{ errors.first('price_'+ duration.rank + '_0') }}</div>
									 </td>
									 <td style="text-align: center">
										 <button class="btn btn-sns-line btn-add-item-duration"
												 @click="addItemDuration(duration)"
										 	 :class="{'btn-add-item-duration': duration.status == 1, 'btn-add-item-duration-off': duration.status == 0}"
										 >
											 <i class="far fa-plus" style="color: rgb(87, 153, 219); font-size: 15px;"></i>
											 <span style="padding-left: 7px;">条件追加</span>
										 </button>
									 </td>
								 </tr>
								 <template v-for="(durationItem, indexItem) in duration.duration">
									 <tr v-if="durationItem.is_default == 0 && duration.status == 1">
										 <td style="text-align: left" colspan="2">

										 </td>
										 <td style="text-align: center">
											 <div style="display: flex; align-items: center;" class="wrap-datetime-duration">
												 <div style="position: relative; display: inline-block; margin-right: 5px;" class="input-date">
													 <input type="date"
															v-model="durationItem.date_start"
															style="padding-left: 27px;"
															:value="durationItem.date_start" id="date_start"
															min="{{ date('Y-m-d') }}"
															class="form-control showpicker text-center input-border input-font">
													 <i class="fal fa-calendar showpicker"></i>
													 <span class="text-danger" style="display: none;"></span>
												 </div>
												 <div style="position: relative; display: inline-block;" class="input-time">
													 <input type="text" data-type="duration"
															:data-parent_index="index"
															:data-time_start_index="indexItem"
															v-model="durationItem.time_start"
															:value="durationItem.time_start"
															style="padding-left: 19px"
															class="form-control timepicker input-border text-center input-font"  >
													 <i class="fal fa-clock"></i>
												 </div>
												 <span style="white-space: nowrap; padding-left: 10px">以降</span>
											 </div>
										 </td>
										 <td style="text-align: center">
											 <div style="display: flex; align-items: end">
												 <input type="number"
														v-validate="{required: true, min_value: 1}"
														:data-vv-as="'報酬'"
														v-model="durationItem.price"
														:name="'price_'+ duration.rank + '_' + indexItem + 1"
														class="form-control input-border input-number input-font">
												 <span style="padding-left: 7px">円</span>
											 </div>
											 <div class="text-danger text-error" v-show="durationItem.is_default == 0 && errors.has('price_'+ duration.rank + '_' + indexItem + 1)">@{{ errors.first('price_'+ duration.rank + '_' + indexItem + 1) }}</div>
										 </td>
										 <td style="text-align: center">
											 <div class="btn-remove" @click="removeDurationItem(duration.duration, indexItem)">
												 <i class="far fa-trash-alt"></i>
											 </div>
										 </td>
									 </tr>
								 </template>

							 </template>

						 </table>
					 </div>

					 <div class="setting-advanced">
						 <h4 class="sub-title">詳細設定</h4>
						 <table class="table table-setting-advanced">
							 <tr>
								 <td>成約認証</td>
								 <td>
									 <div class="d-flex">
										 <div class="d-flex" style="position: relative; padding-right: 0px; width: 120px;">
											 <input type="radio" id="is_auto_approve_termination_contract_1" name="is_auto_approve_termination_contract"
													v-model="basic_setting.is_auto_approve_termination_contract" value="0" class="custom-radio">
											 <label for="is_auto_approve_termination_contract_1" style="font-size: 14px; font-weight: initial;">手動認証</label>
										 </div>
										 <div class="d-flex" style="position: relative; padding-right: 0px;">
											 <input type="radio" id="is_auto_approve_termination_contract_2" name="is_auto_approve_termination_contract" value="1"
													v-model="basic_setting.is_auto_approve_termination_contract"
													class="custom-radio">
											 <label for="is_auto_approve_termination_contract_2" style="font-size: 14px; font-weight: initial;">自動認証</label>
										 </div>
									 </div>
								 </td>
							 </tr>
							 <tr>
								 <td>追加から24時間以内にブロックされた場合</td>
								 <td>
									 <div class="d-flex">
										 <div class="d-flex" style="position: relative; padding-right: 0px; width: 120px;">
											 <input type="radio" id="auto_reject_commission_when_friend_block_24hours_1" name="auto_reject_commission_when_friend_block_24hours"
													value="0"
													class="custom-radio"
													v-model="basic_setting.auto_reject_commission_when_friend_block_24hours"
											 >
											 <label for="auto_reject_commission_when_friend_block_24hours_1" style="font-size: 14px; font-weight: initial;">成約とする</label>
										 </div>
										 <div class="d-flex" style="position: relative; padding-right: 0px;">
											 <input type="radio" id="auto_reject_commission_when_friend_block_24hours_2"
													name="auto_reject_commission_when_friend_block_24hours"
													value="1"
													class="custom-radio"
													v-model="basic_setting.auto_reject_commission_when_friend_block_24hours"
											 >
											 <label for="auto_reject_commission_when_friend_block_24hours_2" style="font-size: 14px; font-weight: initial;">成約としない</label>
										 </div>
									 </div>
								 </td>
							 </tr>
							 <template v-if="notSettingAddFriend">
								 <tr>
									 <td>友だち1人あたりの報酬発生回数</td>
									 <td>
										 <div class="d-flex">
											 <div class="d-flex" style="position: relative; padding-right: 0px; width: 120px;">
												 <input type="radio" id="number_of_commission_for_each_friend_1" name="number_of_commission_for_each_friend"
														value="0"
														class="custom-radio"
														v-model="basic_setting.number_of_commission_for_each_friend"
												 >
												 <label for="number_of_commission_for_each_friend_1" style="font-size: 14px; font-weight: initial;">1回のみ</label>
											 </div>
											 <div class="d-flex" style="position: relative; padding-right: 0px;">
												 <input type="radio" id="number_of_commission_for_each_friend_2"
														name="number_of_commission_for_each_friend"
														value="1"
														class="custom-radio"
														v-model="basic_setting.number_of_commission_for_each_friend"
												 >
												 <label for="number_of_commission_for_each_friend_2" style="font-size: 14px; font-weight: initial;">何度でも</label>
											 </div>
										 </div>
									 </td>
								 </tr>
								 <tr>
									 <td class="note" colspan="2">何度でもを選択した場合、継続決済では決済のたびに報酬が発生します</td>
								 </tr>
								 <tr>
									 <td>キャンセル時</td>
									 <td>
										 <div class="d-flex">
											 <div class="d-flex" style="position: relative; padding-right: 0px; width: 120px;">
												 <input type="radio" id="when_cancel_1" name="when_cancel"
														value="1"
														class="custom-radio"
														v-model="basic_setting.when_cancel"
												 >
												 <label for="when_cancel_1" style="font-size: 14px; font-weight: initial;">成約とする</label>
											 </div>
											 <div class="d-flex" style="position: relative; padding-right: 0px;">
												 <input type="radio" id="when_cancel_2"
														name="when_cancel"
														value="0"
														class="custom-radio"
														v-model="basic_setting.when_cancel"
												 >
												 <label for="when_cancel_2" style="font-size: 14px; font-weight: initial;">成約としない</label>
											 </div>
										 </div>
									 </td>
								 </tr>
								 <tr>
									 <td class="note" colspan="2">
										 <div>カレンダー予約：来店日時より前にキャンセルが完了した時 </div>
										 <div>イベント予約　：参加日時より前にキャンセルが完了した時</div>
									 </td>
								 </tr>
							 </template>
						 </table>
					 </div>
						 <div>
							 <div style="margin-top: 20px;     margin-bottom: 10px;">
								 <label>紹介ページ設定</label>
								 <a v-if="basic_setting.id"  class="font-weight-bold"
									v-on:click="previewAddFriend"
									style="margin-left: 30px; color: #5799DB;cursor: pointer; text-decoration: underline">ページプレビュー</a>

							 </div>

							 <div>
								 <div class="box-title">
									 <span class="font-weight-bold">バナー画像</span>
									 <span style="margin-left: 30px;color: #8F9293;">推奨サイズ：1,000 px ×1,000 px</span>
								 </div>
								 <div class="box-content-new">
									 <div class="d-flex align-items-center">
										 <label v-show="!basic_setting.banner_image" style="    margin-right: 7px;
									font-size: 13px;
									min-width: 140px;">設定されていません</label>
										 <div class="d-flex">
											 <button class="btn btn-sns-line btn-sns-line-lg btn-upload-file btn-showpicker">
												 @{{ basic_setting.banner_image ? '画像変更' : 'アップロード' }}
											 </button>
											 <input data-field_name="banner_image" type="file" @change="uploadFile(0, event)" class="upload-image"  style="position: absolute; visibility: hidden">
											 <button
													 v-show="basic_setting.banner_image"
													 @click="removeFile('banner_image', basic_setting.banner_image)"
													 class="btn btn-sns-line btn-sns-line-lg btn-remove-file ml-2" v-show="basic_setting.banner_image">
												 削除
											 </button>
										 </div>
										 <div style="padding-left: 35px">
											 <img v-show="basic_setting.banner_image" :src="'{{ env('URL_SERVER_MEDIA') }}'+basic_setting.banner_image" class="img-bana">
										 </div>
									 </div>
								 </div>
							 </div>
						{{--header image--}}
							 <div v-if="notSettingAddFriend">
								 <div class="box-title">
									 <span class="font-weight-bold">ヘッダー画像</span>
									 <span style="margin-left: 30px;color: #8F9293;">推奨サイズ：1,200 px ×400 px</span>
								 </div>
								 <div class="box-content-new">
									 <div class="d-flex align-items-center">
										 <label v-show="!basic_setting.header_image" style="    margin-right: 7px;
									font-size: 13px;
									min-width: 140px;">設定されていません</label>
										 <div class="d-flex">
											 <button class="btn btn-sns-line btn-sns-line-lg btn-upload-file btn-showpicker">
												 @{{ basic_setting.header_image ? '画像変更' : 'アップロード' }}
											 </button>
											 <input data-field_name="header_image" type="file" @change="uploadFile(1, event)" class="upload-image"  style="position: absolute; visibility: hidden">
											 <button
													 v-show="basic_setting.header_image"
													 @click="removeFile('header_image', basic_setting.header_image)"
													 class="btn btn-sns-line btn-sns-line-lg btn-remove-file ml-2" v-show="basic_setting.header_image">
												 削除
											 </button>
										 </div>
										 <div style="padding-left: 35px">
											 <img v-show="basic_setting.header_image" :src="'{{ env('URL_SERVER_MEDIA') }}'+basic_setting.header_image" class="img-header">
										 </div>
									 </div>
								 </div>
							 </div>
							 <div class="box-title d-flex align-items-center">
								 <label class="font-weight-bold">案内文</label>
							 </div>
							 <div class="box-content-new">
								 <textarea id="intro_content" aria-hidden="true"></textarea>
							 </div>
						 </div>
{{--						 end page intro--}}

						 <div style="margin-top: 20px;     margin-bottom: 10px;">
							 <label>友だち追加ブラウザ用ページ</label>
							 <a v-if="basic_setting.id"  class="font-weight-bold"
								v-on:click="previewSettingQr"
								style="margin-left: 30px; color: #5799DB;cursor: pointer; text-decoration: underline">ページプレビュー</a>

						 </div>

						 <div class="box-title">
							 <span class="font-weight-bold">ヘッダー画像</span>
							 <span style="margin-left: 30px;color: #8F9293;">推奨サイズ：1,200 px ×400 px</span>
						 </div>
						 <div class="box-content-new">
							 <div class="d-flex align-items-center">
								 <label v-show="!basic_setting.header_image_qr" style="    margin-right: 7px;
									font-size: 13px;
									min-width: 140px;">設定されていません</label>
								 <div class="d-flex">
									 <button class="btn btn-sns-line btn-sns-line-lg btn-upload-file btn-showpicker" >
										 @{{ basic_setting.header_image_qr ? '画像変更' : 'アップロード' }}
									 </button>
									 <input data-field_name="header_image_qr" type="file" @change="uploadFile(2, event)" class="upload-image"  style="position: absolute; visibility: hidden">
									 <button v-show="basic_setting.header_image_qr"
											 style=" margin-right: 20px"
											 @click="removeFile('header_image_qr', basic_setting.header_image_qr)"
											 class="btn btn-sns-line btn-sns-line-lg btn-remove-file ml-2">
										 削除
									 </button>
								 </div>
								 <div>
									 <img v-show="basic_setting.header_image_qr" :src="'{{ env('URL_SERVER_MEDIA') }}'+basic_setting.header_image_qr" class="img-header">
								 </div>
							 </div>
						 </div>
						 <div class="box-title d-flex align-items-center">
							 <label class="font-weight-bold">案内文</label>
							 <span style="color: #8F9293;     margin-left: 72px;">表示設定</span>
							 <div class="d-flex align-items-center" style="padding-left: 15px">
								 <label class="c-switch">
									 <input value="1" v-model="basic_setting.is_show_setting_qr" type="checkbox">
									 <span class="c-slider round"></span>
								 </label>
							 </div>
						 </div>
						 <div class="box-content-new">
							 <textarea id="intro_qr" aria-hidden="true"></textarea>
						 </div>
					 </div>
				 </div>

				 <div class="mt-4" v-show="tab == 'setting-start-end'" id="setting-start-end">
					 <div class="box-content mt-3">
						 <div class="bor-title-c">
							 <span>開始予約</span>
						 </div>
						 <div class="row-condition_end">
							 <div class="d-flex input-radio" style="position: relative; padding-right: 0px;">
								 <input type="radio" id="type_start_1" name="type_start" value="0"
										v-model="basic_setting.type_start" class="custom-radio">
								 <label for="type_start_1">設定しない</label>
							 </div>
						 </div>
						 <div class="row-condition_end">
							 <div class="d-flex input-radio" style="position: relative; padding-right: 0px;">
								 <input type="radio" id="type_start_2"
										v-model="basic_setting.type_start"
										name="type_start" value="1" class="custom-radio">
								 <label for="type_start_2">開始日時を指定</label>
							 </div>
							 <div class="d-flex align-items-center">
								 <div style="position: relative; display: inline-block;" class="w-input-date">
									 <input type="date"
											v-model="basic_setting.date_start"
											class="form-control showpicker text-center input-border" style="font-weight: lighter;">
									 <i class="fal fa-calendar showpicker"></i>
									 <span class="text-danger" style="display: none;"></span>
								 </div>
								 <div style="position: relative; display: inline-block;" class="w-input-time">
									 <input type="text"
											data-type="tab-start-end"
											data-field_name="time_start"
											v-model="basic_setting.time_start"
											class="form-control timepicker input-border text-center" style="font-weight: lighter;">
									 <i class="fal fa-clock"></i>
								 </div>
							 </div>
						 </div>
					 </div>
					 <div class="box-content mt-3">
						 <div class="bor-title-c">
							 <span>終了条件</span>
						 </div>
						 <div class="row-condition_end">
							 <div class="d-flex input-radio" style="position: relative; padding-right: 0px;">
								 <input type="radio" id="condition_end_1" name="condition_end" value="0"
										v-model="basic_setting.end_condition" class="custom-radio">
								 <label for="condition_end_1">設定しない</label>
							 </div>
						 </div>
						 <div class="row-condition_end">
							 <div class="d-flex input-radio" style="position: relative; padding-right: 0px;">
								 <input type="radio" id="condition_end_2"
										v-model="basic_setting.end_condition"
										name="condition_end" value="1" class="custom-radio">
								 <label for="condition_end_2">終了日時を指定</label>
							 </div>
							 <div class="d-flex align-items-center">
								 <div style="position: relative; display: inline-block;" class="w-input-date">
									 <input type="date"
											v-model="basic_setting.date_end"
											class="form-control showpicker text-center input-border" style="font-weight: lighter;">
									 <i class="fal fa-calendar showpicker"></i>
									 <span class="text-danger" style="display: none;"></span>
								 </div>
								 <div style="position: relative; display: inline-block;" class="w-input-time">
									 <input type="text"
											v-model="basic_setting.time_end"
											data-type="tab-start-end"
											data-field_name="time_end"
											class="form-control timepicker input-border text-center" style="font-weight: lighter;">
									 <i class="fal fa-clock"></i>
								 </div>
							 </div>
						 </div>
						 <div class="row-condition_end">
							 <div class="d-flex input-radio" style="position: relative; padding-right: 0px;">
								 <input type="radio" id="condition_end_3"
										v-model="basic_setting.end_condition"
										name="condition_end" value="2" class="custom-radio">
								 <label for="condition_end_3">成約件数上限</label>
							 </div>
							 <div class="w-input-time">
								 <input type="number"
										v-model="basic_setting.end_after_number_times"
										class="form-control input-border text-center" style="font-weight: lighter;">
							 </div>
							 <div class="text-note-input">件の成約で終了</div>
						 </div>
						 <div class="row-condition_end">
							 <div class="d-flex input-radio" style="position: relative; padding-right: 0px;">
								 <input type="radio" id="condition_end_4"
										v-model="basic_setting.end_condition"
										name="condition_end" value="3" class="custom-radio">
								 <label for="condition_end_4">報酬額上限</label>
							 </div>
							 <div class="w-input-time">
								 <input type="number"
										v-model="basic_setting.end_after_reaching_yen"
										class="form-control input-border text-center" style="font-weight: lighter;">
							 </div>
							 <div class="text-note-input">円分の支払い報酬額到達で終了</div>
						 </div>
					 </div>
				 </div>

				 <div class="mt-4" v-show="tab == 'introduce'" id="introduce">
					 <div class="d-flex align-items-center">
						 <h4 class="sub-title" style="margin-right: 30px">LP管理</h4>
						 <a :href="(check_not_max_landing_page && basic_setting.id ) ?
						  			'{{ route('affiliate-management.addLandingPage') }}' + '?botId=' + botId + '&bot_setting_aff_id=' + basic_setting.id
						  			: 'javascript:showSettingBasic()'"
							class="btn btn-sns-line btn-sns-line-md btn-add-landing-page"
							:disabled="!check_not_max_landing_page"
							style="min-width: 90px;">
							 <i class="far fa-plus" style="color: rgb(87, 153, 219); font-size: 15px;"></i>
							 追加する</a>
						 <span style="color: #8F9293; font-size: 12px; padding-left: 10px">※10個まで登録できます</span>
						 <div class="position-relative select-filter" style="width: 120px; margin-left: auto">
							 <select class="form-control input-border input-font"
									 v-model="filter_landing_page"
									 style="text-align: left !important;">
								 <option value="" class="text-left input-font">全て表示</option>
								 <option value="1" class="text-left input-font">公開中</option>
								 <option value="0" class="text-left input-font">非公開</option>
							 </select>
							 <i class="far fa-angle-down" style="float: right; font-size: 20px; color: rgb(224, 224, 224);"></i>
						 </div>
					 </div>
					 <div class="note-not-have-lp" v-if="list_setting_landing_page.length == 0">
						 LPが登録されていません
					 </div>
					 <div class="wrapper-landing-page">
						 <div class="row-landing">
							 <div class="landing-item"
							 	v-for="(landingItem, index) in list_setting_landing_page"
							 >
								 <div class="border">
									 <div v-if="landingItem.status == 1" class="btn-marker btn-marker-public">公開中</div>
									 <div v-else class="btn-marker btn-marker-unpublic">非公開</div>
									 <iframe :src="landingItem.url" scrolling="no"></iframe>
									 <div class="d-flex align-items-center justify-content-between position-relative" style="padding: 0px 10px">
										 <a :href="'{{ route('affiliate-management.addLandingPage') }}' + '?botId=' + botId + '&bot_setting_aff_id=' + basic_setting.id + '&landingPageId=' + landingItem.id + '&type_setting=' + notSettingAddFriend"
											class="name-landing">@{{ landingItem.name }}</a>
										 <i class="far fa-ellipsis-h ic-menu" style="font-size: 25px; cursor: pointer"></i>
										 <div class="action-landing-page">
											 <div class="item-action public" @click="ajaxChangeStatusLandingPage(index, landingItem.id, 1)">LPを表示</div>
											 <div class="item-action" @click="ajaxChangeStatusLandingPage(index, landingItem.id, 0)">非公開にする</div>
										 </div>
									 </div>
								 </div>
							 </div>


						 </div>
					 </div>

					 <div class="d-flex align-items-center" style="margin-top: 35px">
						 <h4 class="sub-title" style="margin-right: 30px">バナー・紹介文</h4>
						 <button type="button"
								 class="btn btn-sns-line btn-add-landing-page btn-sns-line-md"
								 @click="addItemContentBana"
								 style="min-width: 90px;">
							 <i class="far fa-plus" style="color: rgb(87, 153, 219); font-size: 15px;"></i>

							 追加する</button>
						 <span style="color: rgb(143, 146, 147); font-size: 12px; padding-left: 10px;">※10個まで登録できます</span>
					 </div>

					 <div class="note-not-have-lp" v-if="list_content_bana.length == 0">
						 バナー・紹介文が登録されていません
					 </div>
					 <div class="wrapper-landing-page" style="margin-top: 25px">
						 <div class="item-lp"
							  style="margin-bottom: 10px; "
							  v-for="(itembana, indexBana) in list_content_bana"
							  :key="indexBana">
							 <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px">
								 <span class="stt">紹介素材@{{ indexBana + 1 }}</span>
								 <div class="d-flex align-items-center justify-content-between">
									 <div class="d-flex align-items-center action-bana">
										 <div class="item" @click="moveItemContentBana(indexBana, 'down')">
											 <i class="far fa-chevron-circle-down"></i>
										 </div>
										 <div class="item" @click="moveItemContentBana(indexBana, 'up')">
											 <i class="far fa-chevron-circle-up"></i>
										 </div>
										 <div class="item" @click="removeItemContentBana(indexBana)">
											 <i class="far fa-trash-alt"></i>
										 </div>
									 </div>
								 </div>
							 </div>
							 <div class="box-title">
								 <span class="font-weight-bold">バナー</span>
								 <span style="margin-left: 50px; color: rgb(143, 146, 147);">推奨サイズ：1,000 px ×1,000 px</span>
							 </div>
							 <div class="box-content-new">
								 <div class="d-flex align-items-center">
									 <label v-show="!itembana.image" style="    margin-right: 7px;
									font-size: 13px;
									min-width: 140px;">設定されていません</label>
									 <div class="d-flex">
										 <button class="btn btn-sns-line btn-sns-line-lg btn-upload-file btn-showpicker" @click="showPickerFileBana(indexBana)">
											 @{{ itembana.image ? '画像変更' : 'アップロード' }}
										 </button>
										 <button v-show="itembana.image"
												 style=" margin-right: 20px"
												 @click="removeFileContentBana(indexBana)"
												 class="btn btn-sns-line btn-sns-line-lg btn-remove-file ml-2">
											 削除
										 </button>
									 </div>
									 <div>
										 <img v-show="itembana.image" :src="'{{ env('URL_SERVER_MEDIA') }}'+itembana.image" class="img-bana-2">
									 </div>
								 </div>
							 </div>
							 <div class="box-title" style="display: flex; justify-content: space-between">
								 <span class="font-weight-bold">紹介文</span>
								 <span style="margin-left: 50px; color: rgb(143, 146, 147);">@{{ itembana.content.length }}/1,000</span>
							 </div>
							 <textarea name=""
									   v-model="itembana.content"
									   placeholder="紹介文を入力"
									   v-validate="`required|max:1000`"
									   :data-vv-as="'紹介素材' + (indexBana + 1)"
									   :name="'content_' + indexBana"
									   class="form-control textarea-bana"></textarea>

							 <div class="text-danger text-error" v-show="errors.has('content_' + indexBana)">@{{ errors.first('content_' + indexBana) }}</div>
						 </div>
					 </div>
						 <input type="file" id="input-file-content-bana" @change="uploadFile('content-bana', $event)" class="upload-image"  style="position: absolute; visibility: hidden">
				 </div>

				 <div class="d-flex justify-content-between">
					 <button type="button" @click="saveSetting" class="btn btn-sns-line btn-sns-line-lg btn-save btn-lg"
							 style=" width: 200px; margin-top: 20px; margin-bottom: 15px;">保存</button>
					 <button v-if="notSettingAddFriend && basic_setting.id" type="button" @click="deleteCondition" class="btn btn-sns-line btn-sns-line-lg btn-lg"
							 style="box-shadow: 0px 1px 0px #00000033; 
							 width: 200px;
							  margin-top: 20px;
							   margin-bottom: 15px; 
							   background-color: #FFDAD8;
							   color: #F44336 !important;
							   ">この案件を削除する</button>
				 </div>

				 <br>
				 <button type="button" @click="window.location.href = '{{ route('affiliate-management.index', ['bot_id' => $botId, 'master_id' => $masterId]) }}'"
						 class="btn btn-sns-line btn-sns-line-lg btn-back btn-lg" style=" width: 150px;">戻る</button>
			 </div>
		 </div>
		<div class="modal fade" id="modal-condition-item"
			 tabindex="-1" role="dialog"
			 data-backdrop="static"
			 data-keyboard="false"
			 aria-labelledby="chatSettingStatus">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true" style="opacity: 1;font-size: 27px"
						>
							<i class="fas fa-times c-hover-icon-action" style="color: rgba(125,145,149,1); padding: 5px 10px; border-radius: 4px;"></i></button>
						<h3 class="text-center" style="font-weight: bold">報酬発生条件詳細</h3>

					</div>
					<div class="modal-body scroll-modal">
						<table>
							<tr>
								<td>商品購入</td>
								<td>申し込み完了時</td>
							</tr>
							<tr>
								<td>カレンダー予約</td>
								<td>予約完了時</td>
							</tr>
							<tr>
								<td>イベント予約</td>
								<td>予約完了時</td>
							</tr>
							<tr>
								<td>フォーム回答</td>
								<td>回答完了時</td>
							</tr>
						</table>
					</div>

				</div>
			</div>
		</div>
	</div>

@endsection
@push('js')
	<script src="/js/form_answer/vee-validate.rc7.min.js"></script>
	<script src="/js/form_answer/vee-validate_ja.min.js"></script>
	<script src="/js/validate/config.js"></script>
	<script src="/chat_files/bootstrap-timepicker.js"></script>
	<script src="/tinymce/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
	<script src="/tinymce/langs/ja.js"></script>
	<script>
		var masterId = '{{ $masterId }}';
        $(document).ready(function () {


            tinymce.init({
                selector: 'textarea#intro_content',
				sandbox_iframes: false,
                menubar: false,
                mode: "exact",
                plugins: [
					"advlist", "anchor", "autolink", "charmap", "code", "fullscreen", 
					"help", "image", "insertdatetime", "link", "lists", "media", 
					"preview", "searchreplace", "table", "visualblocks", "advtemplate", "emoticons"
				],
                toolbar:
                    "undo redo | blocks | styleselect | forecolor | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link | code",
                language: "ja",
                link_default_protocol: "https",
                autoresize_max_height: 400,
                height: 200,
                setup: function (editor) {
                    editor.on("keyup", function(){
                        $('#final_confirm_page_hide').val(tinymce.get("intro_content").getContent());
                        aspManagement.basic_setting.intro_content = tinymce.get("intro_content").getContent();
                    });
                    editor.on('init', function () {
						if(aspManagement.basic_setting.intro_content){
							editor.setContent(aspManagement.basic_setting.intro_content);
						}
                    });
                    editor.on('change', function(){
                        aspManagement.basic_setting.intro_content = tinymce.get("intro_content").getContent();
                    });
                },
            })
			tinymce.init({
				selector: 'textarea#intro_qr',
				sandbox_iframes: false,
				menubar: false,
				mode: "exact",
				plugins: [
					"advlist", "anchor", "autolink", "charmap", "code", "fullscreen", 
					"help", "image", "insertdatetime", "link", "lists", "media", 
					"preview", "searchreplace", "table", "visualblocks", "advtemplate", "emoticons"
				],
				toolbar:
						"undo redo | blocks | styleselect | forecolor | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link | code",
				language: "ja",
				link_default_protocol: "https",
				autoresize_max_height: 400,
				height: 200,
				setup: function (editor) {
					editor.on("keyup", function(){
						$('#final_confirm_page_hide').val(tinymce.get("intro_qr").getContent());
						aspManagement.basic_setting.intro_qr = tinymce.get("intro_qr").getContent();
					});
					editor.on('init', function () {
						if(aspManagement.basic_setting.intro_qr){
							editor.setContent(aspManagement.basic_setting.intro_qr);
						}
					});
					editor.on('change', function(){
						aspManagement.basic_setting.intro_qr = tinymce.get("intro_qr").getContent();
					});
				},
			})



            let listInputDate = document.getElementsByClassName('btn-showpicker');
            for (let i = 0; i < listInputDate.length; i++) {
                listInputDate[i].addEventListener('click', function (event) {
                    event.target.nextElementSibling.showPicker();
                })

            }
        });

        let notSettingAddFriend = {{ $notSettingAddFriend }};
        console.log(notSettingAddFriend)
        let botIdSetting = {{ $botId }};
        let botSettingAffId = '{{ $botSettingAffId }}';

        function showSettingBasic() {
            alert('基本設定を設定してから操作してください')
        }
	</script>
	<script src="/js/admin/asp-management/setting-add-friend.js?v={{config('sns-line.version')}}"></script>
@endpush