@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="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>
		.link_color{
			color: #28CFD6 !important;
		}

		.content_right_header {
			width: auto !important;
			padding-right: 15px;
		}

		.btn_summary_redirect{
			line-height: 32px !important;
		}

		.message_line {
			min-width: 260px;
		}

		.message_lme{
			min-width: 225px;
		}

		.note{
			border: 1px solid #F8F8F8;
			padding: 16px 20px;
			background-color: #F8F8F8;
		}
		.box-trial-note{
			background: #EDF4FB 0% 0% no-repeat padding-box;
			padding: 9px 16px ;
			display: flex;
			justify-content: space-between;
		}
		.a-title{
			font-weight: 600;;
			font-size: 16px;
			color:#5799DB ;
			margin-right: 29px;
			text-decoration: underline;
		}
		.note-normal{
			color: #222222;
			font-weight: 300;
			font-size: 14px;
		}
		#alertInTimeTrial h3{
			font-weight: 600;
            font-size: 16px !important;
            color: #F44336;

			margin-top: 30px;
		}
		.btn-uppro{
			background: #FFFFFF 0% 0% no-repeat padding-box;
			border: 1px solid #5799DB;
			border-radius: 3px;
			color: #5799DB !important;
			font-weight: 600;
			font-size: 14px;
			width: 300px;
			height: 40px;
		}
		.btn-uppro:hover{
			background: #5799DB 0% 0% no-repeat padding-box;
			border: 1px solid #5799DB;
			color: #FFFFFF !important;
		}
		.box-note{
			background: #F8F8F8 0% 0% no-repeat padding-box;
            padding: 10px 20px;
            border-radius: 5px;
            margin-bottom: 20px;
			color: #222222;
			margin-top:24px;
			line-height: 21px;
		}
		.txt-small{
			font-size: 12px;
			color: #222222;
			font-weight: 300;
		}
		#alertExpiredTrial .tt-modal{
			color: #222222;
			font-size: 20px !important;
			font-weight: 600;
			margin-top: 30px;
			text-align: center;
			margin-bottom: 5px;
		}
	</style>
@endpush
@section('content')
	<div id="asp-management-index" v-cloak>
	 	<div class="mt-3">
			<div class="box-trial-note" v-if="checkTrial || isInvalidTrial">
				 <div class="d-flex">
					 <a class="a-title">7日間トライアル中</a>
					 <div class="note-normal">（{{\Carbon\Carbon::parse($botCurrent->datetime_trial)->format('Y年n月j日 H:i')}}に終了）</div>
				 </div>

				 <div class="note-normal" >プロプランへ<a style="color:#5799DB; text-decoration: underline ; margin-right: 40px" target="_blank" href="/admin/bot-add?bot_id={{$currentBotId}}&type_upgrade=month">アップグレード</a></div>
			</div>
			<h2 class="title">アフィリエイト管理</h2>
			<div class="mt-3">
				<label style="margin-bottom: 5px;">主管理者ユーザー選択</label>
				<select @change="selectedMasterUser" v-model="masterId" class="form-control my_class" style="width: 400px;">
					<option :selected="user.id == masterId" v-for="user in listUser" :value="user.id">@{{ user.username }}</option>
				</select>
			</div>
			 <div class="note mt-3">
				 <div class="f-weight-bold" style="color:#535657 ">アフィリエイター案内用URL (以下のURLを紹介者に案内します）</div>
				 <div class="form-group mt-3 d-flex align-items-center" style="margin-bottom: 8px;">
					 <input type="text" style="width: 60%;" class="form-control input-border" value="{{ route('getLoginAff.V2', ['admin_id' => $idDecode]) }}">
					 <div class="btn-copy" @click="copyToClipboard('{{ route('getLoginAff.V2', ['admin_id' => $idDecode]) }}', $event)">
						 <svg xmlns="http://www.w3.org/2000/svg" width="12.955" height="15" viewBox="0 0 12.955 15">
							 <path id="Icon_material-content-copy" data-name="Icon material-content-copy" d="M12.545,1.5H4.364A1.368,1.368,0,0,0,3,2.864v9.545H4.364V2.864h8.182Zm2.045,2.727h-7.5A1.368,1.368,0,0,0,5.727,5.591v9.545A1.368,1.368,0,0,0,7.091,16.5h7.5a1.368,1.368,0,0,0,1.364-1.364V5.591A1.368,1.368,0,0,0,14.591,4.227Zm0,10.909h-7.5V5.591h7.5Z" transform="translate(-3 -1.5)" fill="#fff"/>
						 </svg>
					 </div>
				 </div>
				 <div style="font-size: 12px; color: #51595C;font-weight: 500;">アフィリエイターには、このエルメアカウントに紐づている全てのLINE公式アカウントの報酬条件が表示されます。</div>
			 </div>
			 <div class="" id="screen-index">
				 <ul class="list-unstyled tab-setting">
					 <li>
						 <a class="item-tab-setting" :class="{active: tab == 'condition-aff'}" @click="tab = 'condition-aff'" href="#asp-management-index">案件設定</a>
					 </li>
					 <li>
						 <a class="item-tab-setting" :class="{active: tab == 'status-introduce'}" @click="tab = 'status-introduce'" href="#asp-management-index">成約状況</a>
					 </li>
					 <li>
						 <a class="item-tab-setting" :class="{active: tab == 'list-aff'}" @click="tab = 'list-aff'" href="#asp-management-index">アフィリエイターリスト</a>
					 </li>
					 <li>
						 <a class="item-tab-setting" :class="{active: tab == 'send-email'}" @click="tab = 'send-email'" href="#asp-management-index">メール送信</a>
					 </li>
					 <li>
						 <a class="item-tab-setting" :class="{active: tab == 'setting-general'}" @click="tab = 'setting-general'" href="#asp-management-index">共通設定</a>
					 </li>
				 </ul>

				 <div class="mt-4">

					 <div v-show="tab == 'condition-aff'" class="f-size-12">
						<div v-show="condition_aff.mode_view == 'bot'">
							<div>
								 <div id="step-1">
									 <div class="item-step">
										 <div class="content-step">
											 <span class="title-step">Step.1</span>
											 <span class="">報酬条件を設定するLINE公式アカウントを選択して下さい。</span>
										 </div>
										 <div class="btn-all-project">
											 <button class="btn btn-sns-line" @click="showAll">
												 全ての案件を見る
											 </button>
										 </div>
									 </div>

									 <div style="width: 50%; position: relative; margin-top: 15px">
										 <div class="wrap-image-bot">
											 <img :src="botSelected.bot_image ? (botSelected.bot_image.includes('http') ? botSelected.bot_image : '{{ env('URL_SERVER_MEDIA') }}' + botSelected.bot_image) : '/images/8.png'" class="img-bot" alt="">
										 </div>
										 <select @change="changeBot()"
												 style="height: 40px !important; padding-left: 50px"
												 v-model="condition_aff.bot_id"
												 class="form-control input-border input-font">
												<option v-for="(bot, indexBot) in listBot" class="input-font" style="text-align: left"
														:value="bot.id">@{{ bot.view_name }}</option>
											</select>
											<i class="far fa-angle-down"></i>
									 </div>



								 </div>
								<div id="step-2" class="f-weight-bold">
									<div class="item-step" style="margin-top: 23px">
										<div class="content-step">
											<span class="title-step">Step.2</span>
											<span class="">案件の設定します。</span>
										</div>
									</div>

									<div class="box-content" style="margin-top: 15px">
										<div class="what-register-friend-reward">
											友だち登録（オプト）報酬とは？
										</div>
										<div style="margin-top: 10px">友だち登録（オプト）報酬とは、アフィリエイトリンクから友だち追加された場合に紹介報酬が発生する制度です。</div>
										<div class="what-register-friend-reward what-register-friend-remuneration" style="margin-top: 10px">
											成果報酬とは？
										</div>
										<div style="margin-top: 10px">成果報酬とは、アフィリエイトリンクから友だち追加された後に設定した報酬発生条件を達成した場合に報酬が発生する制度です。</div>
										<div class="note-project">
											アフィリエイトリンクから友だち追加された場合でも、自動的に報酬条件の該当ページが表示されるわけではありません。友だち追加時アクションやリッチメニューなどで、報酬条件の該当ページを案内する必要があります。（例）商品購入を報酬発生条件と設定している場合でも、友だち追加後に自動的に商品ページが表示されるわけではありませんので、友だち追加時に商品ページURLを送信する設定をしておくなどの必要があります。
										</div>
									</div>
								</div>
								<div>
									<a :href="'{{ route('affiliate-management.settingAff') }}?botId=' + condition_aff.bot_id+'&master_id='+masterId"
									   class="btn btn-sns-line btn-add-project">
										<i class="fas fa-plus" style="color: #5799DB; font-size: 15px"></i>
										<span style="padding-left: 7px">成果報酬案件を追加する</span>
									</a>
								</div>

								<div id="list-project">
									<div class="item-project" v-if="Object.keys(bots).length">
										<div class="content" >
											<div class="header add-friend">
												友だち登録（オプト）報酬
											</div>
											<div class="main">
												<div class="admin-name">
													友だち登録（オプト）報酬
												</div>
												<div class="wrap-img-project">
													<img v-if="!bots.banner_image" src="/images/asp-default-project.png">
													<img v-else :src="'{{ env('URL_SERVER_MEDIA') }}'+bots.banner_image">
												</div>
												<div>
													<table>
														<tr>
															<td>受付状況</td>
															<td class="status-project">
																<div v-if="bots.is_aff_view == 1" style="color: #08BF5A !important;">受付中</div>
																<div v-else>
																	停止中
																</div>
															</td>
														</tr>
														<tr>
															<td>成約件数</td>
															<td>
																<span>@{{ bots.number_friend_approved ? bots.number_friend_approved : '-' }}</span>
																<span class="subject">件</span>
															</td>
														</tr>
														<tr>
															<td>承認待ち</td>
															<td>
																<span>@{{ bots.number_friend_pending_approved ? bots.number_friend_pending_approved : '-' }}</span>
																<span class="subject">件</span>
															</td>
														</tr>
														<tr>
															<td>支払い報酬金額</td>
															<td>
																<span>@{{ formatNumber(bots.commission) }}</span>
																<span class="subject">円</span>
															</td>
														</tr>
														<tr class="reception-period">
															<td >受付期間</td>
															<td >
																<div v-if="bots.aff_id && bots.end_condition == 0">受付中</div>
																<div v-else-if="bots.end_condition == 1">
																	<div>@{{ formatDatetime2(bots.date_start + ' ' + bots.time_start) }}</div>
																	<div style="margin: 4px 0px ">-</div>
																	<div>@{{ formatDatetime2(bots.date_end + ' ' + bots.time_end) }}</div>
																</div>
																<div v-else>受付中</div>
															</td>
														</tr>
														<tr>
															<td>@{{ bots.end_condition == 3 ? '終了までの残り報酬額残り' : '終了までの残り件数'  }}</td>
															<td>
																<span v-if="bots.end_condition == 2">
																	@{{ bots.times_remain }}
																</span>
																<span v-else-if="bots.end_condition == 3">
																	@{{ bots.amount_remain }}
																</span>
																<span v-else>-</span>
																<span class="subject">@{{ bots.end_condition == 3 ? '円' : '件' }}</span>
															</td>
														</tr>
													</table>
												</div>

												<a :href="'{{ route('affiliate-management.settingAddFriend') }}' + '?botId=' + bots.id+'&master_id='+masterId"
														class="btn btn-sns-line btn-setting-project">条件設定</a>
											</div>
										</div>
									</div>
									<div class="item-project"
										 v-for="(condition, indexCondition) in list_condition" :key="indexCondition"
									>
										<div class="content">
											<div class="header">
												@{{ getTypeLink(condition.type_link) }}
											</div>
											<div class="main">
												<div class="admin-name">
													@{{ condition.condition_name }}
												</div>
												<div class="wrap-img-project">
													<img v-if="!condition.banner_image" src="/images/asp-default-project.png">
													<img v-else :src="'{{ env('URL_SERVER_MEDIA') }}'+condition.banner_image">
												</div>
												<div>
													<table>
														<tr>
															<td>受付状況</td>
															<td class="status-project">
																<!-- @{{ condition.condition_status == 1 ? '受付中' : '停止中' }} -->
																<div v-if="condition.condition_status == 1" style="color: #08BF5A !important;">受付中</div>
																<div v-else>
																	停止中
																</div>
															</td>
														</tr>
														<tr>
															<td>成約件数</td>
															<td>
																<span>@{{ condition.number_friend_approved ? condition.number_friend_approved : '-' }}</span>
																<span class="subject">件</span>
															</td>
														</tr>
														<tr>
															<td>承認待ち</td>
															<td>
																<span>@{{ condition.number_friend_pending_approved ? condition.number_friend_pending_approved : '-' }}</span>
																<span class="subject">件</span>
															</td>
														</tr>
														<tr>
															<td>支払い報酬金額</td>
															<td>
																<span>@{{ formatNumber(condition.commission) }}</span>
																<span class="subject">円</span>
															</td>
														</tr>
														<tr class="reception-period">
															<td >受付期間</td>
															<td >
																<div v-if="condition.aff_id && condition.end_condition == 0">受付中</div>
																<div v-else-if="condition.end_condition == 1">
																	<div>@{{ formatDatetime2(condition.date_start + ' ' + condition.time_start) }}</div>
																	<div style="margin: 4px 0px ">-</div>
																	<div>@{{ formatDatetime2(condition.date_end + ' ' + condition.time_end) }}</div>
																</div>
																<div v-else>受付中</div>
															</td>
														</tr>
														<tr>
															<td>@{{ condition.end_condition == 3 ? '終了までの残り報酬額残り' : '終了までの残り件数'  }}</td>
															<td>
																<span v-if="condition.end_condition == 2">
																	@{{ condition.times_remain }}
																</span>
																<span v-else-if="condition.end_condition == 3">
																	@{{ condition.amount_remain }}
																</span>
																<span v-else>-</span>
																<span v-if="condition.aff_id" class="subject">@{{ condition.end_condition == 3 ? '円' : '件' }}</span>
															</td>
														</tr>
													</table>
												</div>

												<a  :href="'{{ route('affiliate-management.settingAff') }}' + '?botId=' + condition.id +'&master_id='+masterId+ '&botSettingAffId=' + condition.bot_setting_aff_id" class="btn btn-sns-line btn-setting-project">条件設定</a>
											</div>
										</div>
									</div>
								</div>
							</div>

						</div>

					 	<div v-show="condition_aff.mode_view == 'all'" id="all-project">
							 <div style="display: flex;">
								 <div class="filter-type-project">
									<div class="item"
										 :class="{'active': condition_aff.type_item_view_all == 'add-friend'}"
										 @click="changeTypeItemViewAllCondition('add-friend')"
										 style="min-width: 250px">
										友だち登録（オプト）報酬のみ
									</div>
									 <div class="item"
										  :class="{'active': condition_aff.type_item_view_all == 'condition'}"
										  @click="changeTypeItemViewAllCondition('condition')"
										  style="min-width: 140px">
										 成果報酬のみ
									 </div>
								 </div>
								 <button style="margin-left: auto; min-width: 140px"
										 @click="changeModeViewTabCondition()"
										 class="btn btn-sns-line btn-130 btn-F2F2F2">
									 < 戻る
								 </button>
							 </div>
							 <table class="table mt-3" style="margin-top: 25px">
								 <thead>
								 <tr>
									 <th style="width: 26%; text-align: left; padding-left: 20px !important">LINE公式アカウント名</th>
									 <th style="width: 17%; text-align: left; padding-right: 33px !important;">受付状況</th>
									 <th style="text-align: left;">管理名</th>
									 <th style="width: 100px;"></th>
								 </tr>
								 </thead>
								 <tbody>
								 	<tr v-for="(condition, index) in list_condition_all_bot" :key="index">
										<td class="text-left">
											<div style="display: flex; align-items: center">
												<div class="w-img-bot-all">
													<img class="" :src="condition.bot_image ? (condition.bot_image.includes('http') ? condition.bot_image : '{{ env('URL_SERVER_MEDIA') }}' + condition.bot_image) : '/images/8.png'">
												</div>
 												@{{ condition.view_name }}
											</div>

										</td>
									 <td class="text-center" style="padding-right: 33px !important;">
										 <div style="display: flex; align-items: center">
											 <div class="d-flex align-items-center">
												 <label class="c-switch" style="margin: auto">
													 <input type="checkbox"
															value="1"
															@change="changeStatusConditionAllBot(condition)"
															v-model="condition.condition_status"
													 >
													 <span class="c-slider round"></span>
												 </label>
											 </div>
											 <span v-if="condition.condition_status == 1" class="status-item-accept">受付中</span>
											 <span v-else class="status-item-stop">停止中</span>
										 </div>
									 </td>
									 <td class="text-left" style=" ">@{{ condition.type_link == 1 ? '友だち登録（オプト）報酬 ' : condition.condition_name }}</td>
									 <td class="text-center">
										 <a v-if="condition.type_link != 1" :href="'{{ route('affiliate-management.settingAff') }}' + '?botId=' + condition.id + '&botSettingAffId=' + condition.bot_setting_aff_id" class="btn-setting">条件設定</a>
										 <a v-else :href="'{{ route('affiliate-management.settingAddFriend') }}' + '?botId=' + condition.id+'&master_id='+masterId" class="btn-setting">条件設定</a>

									 </td>
								 </tr>
								 </tbody>
							 </table>
						</div>
					</div>
					 <div v-show="tab == 'status-introduce'" id="status-introduce">
						 <div class="d-flex" style="margin-bottom: 20px">
							 <div class="border-filter-month">
								 <i class="far fa-chevron-left arrow" @click="minusMonth"></i>
								 <div class="position-relative">
									 <div class="border-input-date btn-showpicker">
										 <span id="text-month" style="font-size: 13px; font-weight: lighter;">@{{ moment(status_introduce.month, 'YYYY-MM').format('YYYY年MM月') }}</span>
										 <i class="fal fa-calendar" style="color: #8F9293"></i>
									 </div>
									 <input type="month" @change="changeMonth($event)"
											v-model="status_introduce.month" class=""
											style="opacity: 0; position: absolute; bottom: -2px; z-index: -1">
								 </div>
								 <i class="far fa-chevron-right arrow" @click="plusMonth"></i>
							 </div>
{{--							 <button class="btn btn-sns-line btn-sns-line-md mode-view"--}}
{{--									 @click="changeModeFilterTabStatus('all')"--}}
{{--									 :class="{'mode-view-active': status_introduce.mode_filter == 'all'}">一覧</button>--}}
{{--							 <button class="btn btn-sns-line btn-sns-line-md mode-view"--}}
{{--									 @click="changeModeFilterTabStatus('bot')"--}}
{{--									 :class="{'mode-view-active': status_introduce.mode_filter == 'bot'}"--}}
{{--									 style="margin-left: 10px; width: 180px;">LINE公式アカウントごと</button>--}}
							 <div class="position-relative" style="margin-left: 10px; width: 32%;">
								 <select @change="changeBotTabStatusIntroduce"
{{--										 :disabled="status_introduce.mode_filter == 'all'"--}}
										 v-model="status_introduce.filter_bot_id"
										 class="form-control input-border text-center input-font">
									 <option class="input-font" value="">全件表示</option>
									 <option class="input-font" v-for="(bot, indexBot) in listBot"
											 :value="bot.id">@{{ bot.view_name }}</option>
								 </select>
								 <i class="far fa-angle-down" style="font-size: 22px; right: 15px; color:#E0E0E0 "></i>
							 </div>
							 <div class="position-relative" style=" margin-left: 10px; width: 145px;">
								 <select @change="changeModeView(status_introduce.mode_view)"
										 v-model="status_introduce.mode_view"
										 class="form-control input-border text-center input-font">
									 <option class="input-font" value="list">成約日順</option>
									 <option class="input-font" value="level">ランキング</option>

								 </select>
								 <i class="far fa-angle-down" style="font-size: 22px; right: 15px; color:#E0E0E0 "></i>
							 </div>

						 </div>

						 <div
							  :class="{'history-commission-list': status_introduce.mode_view == 'list', 'history-commission-rank': status_introduce.mode_view != 'list'}"
							  style="margin-bottom: 20px"
							  class="mt-3 d-flex align-items-center">
{{--							 <button class="btn btn-sns-line btn-sns-line-md btn-130 btn-F2F2F2"--}}
{{--									 :class="{'btn-08BF5A': status_introduce.mode_view == 'list'}"--}}
{{--									 @click="changeModeView('list')">成約日順</button>--}}
{{--							 <button class="btn btn-sns-line btn-sns-line-md btn-130 btn-F2F2F2"--}}
{{--									 :class="{'btn-08BF5A': status_introduce.mode_view == 'level'}"--}}
{{--									 @click="changeModeView('level')" style="margin-left: 10px">ランキング</button>--}}
							 <div style="" class="d-flex align-items-center">

								 <div class="f-weight-bold " >
									 <span style="color: #535657;font-size: 12px">報酬合計額</span>
									 <span class="pl-2" style="word-break: keep-all;font-size: 14px">@{{ formatNumber(total_commission_in_month) }}円</span>
								 </div>
								 <div class="f-weight-bold mrl-total-commission" style="font-size: 13px">
									 <span style="color:#535657;font-size: 12px">成約数</span>
									 <span class="pl-2" style="word-break: keep-all;font-size: 14px">@{{ formatNumber(totalRecord) }}件</span>
								 </div>
							 </div>
							 <div class="d-flex" style="margin-left: auto">
								 <button
										 @click="approveMultipleAff"
										 class="btn btn-sns-line btn-sns-line-md btn-E0E0E0-new"
										 :class="{'bg-active-08BF5A-new': listResultIdSelected.length > 0 || listResultIdSelectedLevel.length > 0}"
								 >一括ステータス変更</button>
								 <button @click="exportCsv" class="btn btn-sns-line btn-sns-line-md " style="margin-left: 8px;background: #FFFFFF 0% 0% no-repeat padding-box;
									border: 1px solid #E0E0E0; padding: 8px">
									 <img style=" width: 79%;" src="/images/ic-download-0906-2x.png"></button>
							 </div>
						 </div>
						 <div v-show="status_introduce.mode_view == 'list'" style="width: 129%;">

							 <table class="table">
								 <thead>
								 <tr>
									 <th style="max-width: 30px; width: 2%; padding-left: 20px !important;" class="text-left">
										 <label for="itemcheck_all">
											 <input type="checkbox" name="list_result_id" v-model="selectedResultId" class="custom-checkbox-index"></label>
									 </th>
									 <th style="width: 12%; text-align: left;">LINE公式アカウント名</th>
									 <th style="width: 9%; text-align: left;">成約日時</th>
									 <th style="width: 9%; text-align: left;">ブロック日時</th>
									 <th style="width: 10%; text-align: left;">報酬条件</th>
									 <th style="width: 8%; text-align: left">IPアドレス</th>
									 <th style="width: 14%; text-align: left">成約者名</th>
									 <th style="width: 12%; text-align: left;">アフィリエイター名</th>
									 <th style="width: 8%; text-align: right">報酬額</th>
									 <th style="width: 10%; text-align: center; font-size: 10px !important">ステータス <br> （クリックで変更）</th>
								 </tr>
								 </thead>
								 <tbody>
								 	<tr
										v-for="(result, indexResult) in list_result_by_month"
										:key="indexResult"
									>
										 <td class="text-left">
											 <label for="itemcheck_all">
												 <input type="checkbox" :value="result.result_id" v-model="listResultIdSelected" name="list_result_id" class="custom-checkbox-index"></label>
										 </td>
										<td>@{{ result.view_name }}</td>
										 <td class="text-left">@{{ formatDatetime(result.created_at) }}</td>
										 <td class="text-left">@{{ formatDatetime(result.time_block) }}</td>
										 <td class="text-left">@{{ getTypeLink(result.type_link) }}</td>
										 <td class="text-left">
											 <span :class="{'text-same-ip': same_ip_arr.includes(result.ip_reference)}">@{{ result.ip_reference }}</span>
										 </td>
										 <td class="text-left">
											 <a target="_blank" :href="'/basic/friendlist/my_page/'+ result.line_user_id" 
											 	class="text-underline text-one-line link_color" style="color: #5799DB !important;">@{{ result.friend_name }}</a>
										 </td>
										 <td class="text-left">
											 <a :href="'{{ route('affiliate-management.detailAff') }}?aff_id=' + result.aff_id + '&bot_id=' + result.bot_id+'&master_id='+masterId"
											 	class="text-underline text-one-line link_color" style="color: #5799DB!important;">@{{ result.username }}</a>
										 </td>
										 <td class="text-right">@{{ formatNumber(result.total) }}</td>
										 <td class="text-center">
											 <button v-show="result.is_approved == 0"
													 @click="changeStatusApprove([result.result_id], 0, indexResult)"
													 class="btn-status btn-status-FFDAD8 btn-status-box-shadow">未承認</button>
											 <button v-show="result.is_approved == 1"
													 @click="changeStatusApprove([result.result_id], 1, indexResult)"
													 class="btn-status btn-status-E0E0E0 btn-status-box-shadow">承認済</button>
											 <button v-show="result.is_approved == 2"
													 class="btn-status btn-status-not-approve btn-status-box-shadow">拒否済み</button>
										 </td>
								 	</tr>
									<tr v-show="list_result_by_month.length == 0">
										<td colspan="9"> 現在、成約はありません</td>
									</tr>
								 </tbody>
							 </table>
							 <nav class="mt-5" style="clear: both">
								 <div class="f-weight-bold d-flex justify-content-end align-items-center">
									 <span>全@{{ totalRecord }}件中 @{{ from }}~@{{ to }}件を表示中</span>
									 <span style="padding-left: 40px; padding-right: 10px">表示件数</span>
									 <div class="position-relative">
										 <select class=" form-control per_page" v-model="status_introduce.per_page" @change="changePerpage" style="width: 70px; font-weight: lighter;">
											 <option class="input-font" value="100">100</option>
											 <option class="input-font" value="200">200</option>
											 <option class="input-font" value="500">500</option>
										 </select>
										 <i class="fas fa-angle-down"></i>
									 </div>
								 </div>
								 <ul class="pagination" style="float: right" v-if="last_page > 1">
									 <li v-if="page > 1">
										 <a href="#" aria-label="Previous" @click.prevent="changePage(page - 1)">
											 <i style="color:#08BF5A" class="fas fa-arrow-left"></i>
										 </a>
									 </li>
									 <li v-for="page_item in pagesNumber">
										 <a href="#" @click.prevent="changePage(page_item)"
											v-bind:class="[ page_item == isActived ? 'active' : '']"
											class=font-weight-bold>@{{ page_item }}</a>
									 </li>

									 <li  v-if="page < last_page">
										 <a href="#" aria-label="Next" @click.prevent="changePage(page + 1)">
											 <i style="color:#08BF5A" class="fas fa-arrow-right"></i>
										 </a>
									 </li>
								 </ul>
							 </nav>
						 </div>
						 <div v-show="status_introduce.mode_view == 'level'"
							 class="history-commission-rank"
						 >

							 <table class="table">
								 <thead>
								 <tr>
									 <th style="max-width: 30px; width: 2%; padding-left: 20px !important;" class="text-left">
										 <label for="itemcheck_all">
											 <input type="checkbox" name="list_aff_level" v-model="selectedResultIdLevel" class="custom-checkbox-index"></label>
									 </th>
									 <th style="width: 6%; text-align: center;">順位</th>
									 <th style="width: 7%; text-align: left;">ランク</th>
									 <th style="width: 18%; text-align: left;">アフィリエイター名</th>
									 <th style="width: 18%; text-align: left">メールアドレス</th>
									 <th style="width: 10%; text-align: right">紹介件数</th>
									 <th style="width: 10%; text-align: right;">ブロック数</th>
									 <th style="width: 10%; text-align: right">報酬額</th>
									 <th style="width: 10%; text-align: center; font-size: 10px !important">ステータス <br> （クリックで変更）</th>
								 </tr>
								 </thead>
								 <tbody>
								 	<tr v-for="(resultLevel, indexLevel) in list_result_by_month_level" :key="indexLevel">
									 <td class="text-left">
										 <label for="itemcheck_all">
											 <input type="checkbox" :value="resultLevel.aff_id" name="list_aff_level"
													v-model="listResultIdSelectedLevel"
													class="custom-checkbox-index"></label>
									 </td>
									 <td class="text-center">@{{ indexLevel + 1 }}</td>
									 <td class="text-left">@{{ resultLevel.name_rank }}</td>
									 <td class="text-left">
										 <a :href="'{{ route('affiliate-management.detailAff') }}?aff_id=' + resultLevel.aff_id + '&bot_id=' + resultLevel.bot_id+'&master_id='+masterId"
											class="text-underline text-one-line link_color" style="color: #5799DB !important;">@{{ resultLevel.username }}</a>
									 </td>
									 <td class="text-left">@{{ resultLevel.email }}</td>
									 <td class="text-right">
										 @{{ formatNumber(resultLevel.number_approved) }}
									 </td>
									 <td class="text-right">
										 @{{ formatNumber(resultLevel.number_friend_block) }}
									 </td>
									 <td class="text-right">@{{ formatNumber(resultLevel.total) }}</td>
									 <td class="text-center">
										 <button v-show="resultLevel.is_approved != 1"
												 @click="changeStatusApproveByAffiliate([resultLevel.aff_id], resultLevel.bot_id, 0)"
												 class="btn-status btn-status-FFDAD8 btn-status-box-shadow">未承認</button>
										 <button
												 v-show="resultLevel.is_approved == 1"
												 @click="changeStatusApproveByAffiliate([resultLevel.aff_id], resultLevel.bot_id, 1)"
												 class="btn-status btn-status-E0E0E0 btn-status-box-shadow">承認済</button>
									 </td>
								 </tr>
									<tr v-show="list_result_by_month_level.length == 0">
										<td colspan="9"> 現在、成約はありません</td>
									</tr>
								 </tbody>
							 </table>
							 <nav class="mt-5" style="clear: both">
								 <div class="f-weight-bold d-flex justify-content-end align-items-center">
									 <span>全@{{ totalRecord }}件中 @{{ from }}~@{{ to }}件を表示中</span>
									 <span style="padding-left: 40px; padding-right: 10px">表示件数</span>
									 <div class="position-relative">
										 <select class=" form-control per_page" v-model="status_introduce.per_page" @change="changePerpage" style="width: 70px; font-weight: lighter;">
											 <option class="input-font" value="100">100</option>
											 <option class="input-font" value="200">200</option>
											 <option class="input-font" value="500">500</option>
										 </select>
										 <i class="fas fa-angle-down"></i>
									 </div>
								 </div>
								 <ul class="pagination" style="float: right" v-if="last_page > 1">
									 <li v-if="page > 1">
										 <a href="#" aria-label="Previous" @click.prevent="changePage(page - 1)">
											 <i style="color:#08BF5A" class="fas fa-arrow-left"></i>
										 </a>
									 </li>
									 <li v-for="page_item in pagesNumber">
										 <a href="#" @click.prevent="changePage(page_item)"
											v-bind:class="[ page_item == isActived ? 'active' : '']"
											class=font-weight-bold>@{{ page_item }}</a>
									 </li>

									 <li  v-if="page < last_page">
										 <a href="#" aria-label="Next" @click.prevent="changePage(page + 1)">
											 <i style="color:#08BF5A" class="fas fa-arrow-right"></i>
										 </a>
									 </li>
								 </ul>
							 </nav>
						 </div>
					 </div>

					 <div v-show="tab == 'list-aff'" id="list-aff">
						  <div class="d-flex align-items-center">
							  <button class="btn btn-sns-line btn-sns-line-md btn-E0E0E0-new btn-E0E0E0-new-focus" style="margin-right: auto"
									  :class="{'bg-active-08BF5A-new': listIdAffiliaterSelected.length > 0}"
									  @click="showModalChangeLevel">一括ランク変更</button>
							  <span style="padding-right: 10px; font-weight: bold; margin-top: 3px">表示</span>
							  <div class="position-relative">
								  <select class="form-control per_page input-font"
										  @change="filterRank"
										  v-model="list_aff.filterRank"
										  style="min-width: 90px; font-weight: lighter; border: 1px solid #E0E0E0;">
									  <option class="input-font" value="">全て</option>
									  <option class="input-font" :value="itemLevel.rank"
											  v-for="(itemLevel, indexLevel) in config_level"
									  >@{{ itemLevel.name }}</option>
								  </select>
								  <i class="fas fa-angle-down" style="color: #E0E0E0"></i>
							  </div>
							  <a class="btn btn-sns-line btn-sns-line-md"

									  :href="'{{ route('affiliate-management.exportCsvAff') }}?rank=' + list_aff.filterRank +'&master_id='+masterId"
								 target="_blank"
									  style="margin-left: 8px ;background: #FFFFFF 0% 0% no-repeat padding-box;
									border: 1px solid #E0E0E0;
									border-radius: 3px;padding: 8px;"> <img style=" width: 79%;" src="/images/ic-download-0906-2x.png"></a>
						  </div>

						 <div style="">
							 <table class="table">
								 <thead>
								 <tr>
									 <th style="max-width: 30px; width: 2%; padding-left: 20px !important;" class="text-left">
										 <label for="itemcheck_all">
											 <input type="checkbox" name="selectedAffId"
													v-model="selectedAffId"
													class="custom-checkbox-index"></label>
									 </th>
									 <th style="width: 6%; text-align: center;">報酬受取</th>
									 <th style="width: 7%; text-align: right;">管理ID</th>
									 <th style="width: 7%; text-align: center;">ランク</th>
									 <th style="width: 20%; text-align: left">アフィリエイター名</th>
									 <th style="width: 18%; text-align: left">メールアドレス</th>
									 <th style="width: 10%; text-align: right;">友だち登録数</th>
									 <th style="width: 10%; text-align: right">成果報酬件数</th>
									 <th style="width: 10%; text-align: right">ブロック数</th>
{{--									 <th style="width: 10%; text-align: center">追加時アクション</th>--}}
								 </tr>
								 </thead>
								 <tbody>
									<tr v-for="(aff, indexAff) in list_affiliater">
									 <td class="text-left">
										 <label for="itemcheck_all">
											 <input type="checkbox"
													:value="aff.id"
													v-model="listIdAffiliaterSelected"
													name="selectedAffId" class="custom-checkbox-index"></label>
									 </td>
									 <td class="text-center">
										 <label class="c-switch">
											 <input type="checkbox"
													@change="changeStatusCommission(aff.id, indexAff)"
													value="1"
													v-model="aff.status_commission"
											 >
											 <span class="c-slider round"></span>
										 </label>
									 </td>
									 <td class="text-right">@{{ pad(aff.id, 4) }}</td>
									 <td class="text-center">@{{ aff.rank_name }}</td>
									 <td class="text-left">
										 <a :href="'{{ route('affiliate-management.detailAff') }}?aff_id=' + aff.id +'&master_id='+masterId"
											class="text-underline text-one-line link_color" style="color: #5799DB !important;">@{{ aff.username }}</a>
									 </td>
									 <td class="text-left">@{{ aff.email }}</td>
									 <td class="text-right">
										 @{{ formatNumber(aff.number_approved) }}
									 </td>
									 <td class="text-right">
										 @{{ formatNumber(aff.count_number_of_commission_item_greater_than_0) }}
									 </td>
									 <td class="text-right">@{{ formatNumber(aff.number_friend_block) }}</td>
{{--									 <td class="text-center text-setting">--}}
{{--										 <button class="btn-status btn-status-CBF4DD btn-status-box-shadow">プレビュー</button>--}}
{{--									 </td>--}}
								 </tr>
									<tr v-show="list_affiliater.length == 0">
										<td colspan="10" class="text-center">まだアフィリエイターの登録がありません</td>
									</tr>
								 </tbody>
							 </table>
							 <nav class="mt-5" style="clear: both">
								 <div class="f-weight-bold d-flex justify-content-end align-items-center">
									 <span>全@{{ totalRecord }}件中 @{{ from }}~@{{ to }}件を表示中</span>
									 <span style="padding-left: 40px; padding-right: 10px">表示件数</span>
									 <div class="position-relative">
										 <select class=" form-control per_page" v-model="list_aff.per_page" @change="changePerpageAff" style="width: 70px; font-weight: lighter;">
											 <option class="input-font" value="100">100</option>
											 <option class="input-font" value="200">200</option>
											 <option class="input-font" value="500">500</option>
										 </select>
										 <i class="fas fa-angle-down"></i>
									 </div>
								 </div>
								 <ul class="pagination" style="float: right" v-if="last_page > 1">
									 <li v-if="list_aff.page > 1">
										 <a href="#" aria-label="Previous" @click.prevent="changePageAff(list_aff.page - 1)">
											 <i style="color:#08BF5A" class="fas fa-arrow-left"></i>
										 </a>
									 </li>
									 <li v-for="page_item in pagesNumber">
										 <a href="#" @click.prevent="changePageAff(page_item)"
											v-bind:class="[ page_item == list_aff.page ? 'active' : '']"
											class=font-weight-bold>@{{ page_item }}</a>
									 </li>

									 <li  v-if="list_aff.page < last_page">
										 <a href="#" aria-label="Next" @click.prevent="changePageAff(list_aff.page + 1)">
											 <i style="color:#08BF5A" class="fas fa-arrow-right"></i>
										 </a>
									 </li>
								 </ul>
							 </nav>
						 </div>
					 </div>

					 <div v-show="tab == 'send-email'" id="send-email">
						 <div class="d-flex">
							 <a
									 style="background-color: #D5E9FC; color: #5799DB !important; "
									:href="'{{ route('affiliate-management.addEmail') }}'+'?master_id='+masterId"
									 class="btn btn-sns-line btn-sns-line-md btn-sns-line-primary" >新規作成</a>
							 <div class="tab-filter">
								 <div class="item" @click="changeFilterTableEmail('not_sent')" :class="{active: send_email.filter_status == 'not_sent'}" >予約中</div>
								 <div class="item send" @click="changeFilterTableEmail('sent')" :class="{active: send_email.filter_status == 'sent'}">送信済</div>
							 </div>
						 </div>

						 <table v-if="send_email.filter_status == 'not_sent'" class="table">
							 <thead>
							 <tr>
								 <th style=" width: 22%; padding-left: 20px !important;" class="text-left">送信日時</th>
								 <th style="width: 59%; text-align: left;">タイトル</th>
								 <th style="width: 11%; text-align: right;">配信予定数</th>
								 <th style="width: 12%; text-align: center;"></th>
							 </tr>
							 </thead>
							 <tbody>
							 <tr v-for="(email, indexEmail) in list_setting_email">
								 <td class="text-left">@{{ formatDatetime(email.date_send + ' ' + email.time_send) }}</td>
								 <td class="text-left">
									 <a :href="'{{ route('affiliate-management.addEmail') }}?email_id=' + email.id + '&master_id='+masterId" class="text-underline text-one-line link_color" style="color: #5799DB !important;">@{{ email.title }}</a>
								 </td>
								 <td class="text-right">
									 <a target="_blank" 
											 :href="'{{ route('affiliate-management.listUserSent') }}?type=intend_send&user_id='+masterId+'&&emailId=' + email.id"
											 class="text-underline f-weight-bold link_color" style="color: #5799DB !important;">@{{ formatNumber(email.number_people_to_send) }}</a>
								 </td>
								 <td class="text-center">
									 <button
											 @click="cancelEmail(email.id, indexEmail)"
											 class="btn-status btn-status-FFDAD8 btn-status-box-shadow">キャンセル</button>
								 </td>
							 </tr>
							 </tbody>
						 </table>
						 <table v-if="send_email.filter_status == 'sent'" class="table">
							 <thead>
							 <tr>
								 <th style=" width: 20%; padding-left: 20px !important;" class="text-left">送信日時</th>
								 <th style="width: 57%; text-align: left;">タイトル</th>
								 <th style="width: 9%; text-align: right;">配信数</th>
								 <th style="width: 12%; text-align: right;">配信エラー</th>
								 <th style="width: 12%; text-align: center;"></th>
							 </tr>
							 </thead>
							 <tbody>
							 <tr v-for="(email, indexEmail) in list_setting_email_sent">
								 <td class="text-left">@{{ formatDatetime(email.date_send + ' ' + email.time_send) }}</td>
								 <td class="text-left">
									 <span>@{{ email.title }}</span>
								 </td>
								 <td class="text-right">
									 <a target="_blank" :href="'{{ route('affiliate-management.listUserSent') }}?type=success&user_id='+masterId+'&emailId=' + email.id" class="text-underline f-weight-bold link_color" style="color: #5799DB !important;">@{{ formatNumber(email.number_email_sent) }}</a>
								 </td>
								 <td class="text-right">
									 <a target="_blank"  v-if="email.number_email_send_error > 0" :href="'{{ route('affiliate-management.listUserSent') }}?type=error&user_id='+masterId+'&emailId=' + email.id" class="text-underline f-weight-bold link_color" style="color: #5799DB !important;">@{{ formatNumber(email.number_email_send_error) }}</a>
								 	<span v-else>0</span>
								 </td>
								 <td class="text-center">
									 <button @click="location.href = '/admin/affiliate-management/confirm-email/' + email.id+'?master_id='+masterId" class="btn-status btn-status-E0E0E0 btn-status-box-shadow"> 詳細</button>
								 </td>
							 </tr>
							 </tbody>
						 </table>
					 </div>

					 <div v-show="tab == 'setting-general'" class="" id="setting-general">
						 <div class="">
							 <div class="bor-title-c">
								 <span>基本情報（クリックで編集）</span>
							 </div>
							 <div class="row-content-setting">
								 <div class="left">
									 <div class="description">表示する会社・組織名</div>
								 </div>
								 <div class="right">
									 <input type="text"
											v-model="setting_general.company_name"
											class="form-control input-border input-font"> 
								 </div>
							 </div>
							 <div class="row-content-setting">
								 <div class="left">
									 <div class="description">締日</div>
								 </div>
								 <div class="right">
									 <div class="position-relative">
										 <select class="form-control input-border input-font"
												 v-model="setting_general.close_day"
										 >
										 <option class="input-font" v-for="(day, index) in range_day_in_month" :key="index" :value="day">@{{ day }} 日</option>
										 <option class="input-font" value="31">月末日</option>
										 </select>
										 <i class="far fa-angle-down"></i>
									 </div>

								 </div>
							 </div>
							 <div class="row-content-setting">
								 <div class="left">
									 <div class="description">支払日</div>
								 </div>
								 <div class="right d-flex">
									 <div class="position-relative w-50">
										 <select class="form-control input-border border-right input-font"
												 v-model="setting_general.payment_month"
										 >
											 <option class="input-font" value="0" >当月</option>
											 <option class="input-font" value="1">翌々月</option>
											 <option class="input-font" value="2">翌月</option>
										 </select>
										 <i class="far fa-angle-down"></i>
									 </div>
									 <div class="position-relative w-50 ">
										 <select class="form-control input-border input-font"
												 v-model="setting_general.payment_day"
										 >
										 <template v-for="(day, index) in range_day_in_month" :key="index">
											 <option class="input-font" v-if="index < 30" :value="day">@{{ day }} 日</option>
											</template>
											<option class="input-font" value="31">月末日</option>
 										 </select>
										 <i class="far fa-angle-down"></i>
									 </div>
								 </div>
							 </div>
							 <div class="row-content-setting">
								 <div class="left">
									 <div class="w-column">
										 <div class="description d-flex align-items-center justify-content-center" style="height: auto; width: 50%;">ランク名称変更</div>
										 <div class="rank" style="width: 50%;">
											 <div class="description" >Aランク</div>
											 <div class="description" >Bランク</div>
											 <div class="description" >Cランク</div>
											 <div class="description" >Dランク</div>
										 </div>
									 </div>
								 </div>
								 <div class="right">
									 <div class="position-relative">
										 <template v-for="(rank, indexRank) in setting_general.level" :key="indexRank">
											 <input type="text"
													class="form-control input-border input-border-rank input-font"
													v-model="rank.name"
													>
										 </template>
									 </div>

								 </div>
							 </div>
							 <div class="row-content-setting">
								 <div class="left">
									 <div class="description">アフィリエイターへのランキング表示</div>
								 </div>
								 <div class="right d-flex align-items-center">
									 <div class="position-relative" style="width: 100%;">
										 <select class="form-control input-border input-font"
												 v-model="setting_general.is_show_rank_aff"
										 >
											 <option class="input-font" value="1">表示する</option>
											 <option class="input-font" value="0">表示しない</option>
										 </select>
										 <i class="far fa-angle-down"></i>
									 </div>
								 </div>
							 </div>
							 <div class="row-content-setting" style="border-bottom: 1px solid #F2F2F2">
								 <div class="left">
									 <div class="description">アフィリエイター新規登録</div>
								 </div>
								 <div class="right d-flex align-items-center">
									 <div class="position-relative" style="width: 100%;">
										 <select class="form-control input-border input-font"
												 v-model="setting_general.is_register_new_affiliate"
										 >
											 <option class="input-font" value="1">登録可能</option>
											 <option class="input-font" value="0">登録不可</option>
										 </select>
										 <i class="far fa-angle-down"></i>
									 </div>
								 </div>
							 </div>
						 </div>

						 <div class=" mt-3">
							 <div style="margin-top: 20px; margin-bottom: 10px;">
								 <label>TOPページ設定</label>
								 <a  class="font-weight-bold"
									v-on:click=""
									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,200 px ×400 px</span>
								 </div>
								 <div class="box-content-new">
									 <div class="d-flex align-items-center">
										 <label v-show="!setting_general.image_header_top" 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">
												 @{{ setting_general.image_header_top ? '画像変更' : 'アップロード' }}
											 </button>
											 <input type="file" @change="uploadFile('image_header_top', event)" class="upload-image"  style="position: absolute; visibility: hidden">
											 <button
													 v-show="setting_general.image_header_top"
													 @click="removeImage('image_header_top')"
													 class="btn btn-sns-line btn-sns-line-lg btn-remove-file ml-2" >
												 削除
											 </button>
										 </div>
										 <div style="padding-left: 35px">
											 <img v-show="setting_general.image_header_top" :src="'{{ env('URL_SERVER_MEDIA') }}'+setting_general.image_header_top" class="img-top">
										 </div>
									 </div>
								 </div>
								 <div class="box-title d-flex align-items-center">
									 <span class="font-weight-bold">案内文</span>
									 <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="setting_general.is_show_text_top" type="checkbox">
											 <span class="c-slider round"></span>
										 </label>
									 </div>
								 </div>
								 <div class="box-content-new">
									 <textarea id="text_top" aria-hidden="true"></textarea>
								 </div>
							 </div>

							 <div style="margin-top: 15px; border-bottom: 1px solid #F2F2F2" class="row-content-setting" >
								 <div class="left" style="flex: 0 0 24%;">
									 <div class="description" style="line-height: normal; height: 100%; justify-content: center !important;" >
										 <div class="text-center">
											 オススメ案件情報選択
											 <br>
											 <span>（4つまで）</span>
										 </div>

									 </div>
								 </div>
								 <div class="right">
									 <div class="row-recommend header">
										 <div class="column" style="border-right: 1px solid #F2F2F2">
											 <div>LINE公式アカウント</div>
										 </div>
										 <div class="column" >
											 <div>案件選択</div>
										 </div>
									 </div>
									 <div class="row-recommend"
										  v-for="(itemRecommend, indexRecommend) in setting_general.recommend_condition"
									 >
										 <div style="border-right: 1px solid #F2F2F2" class="column">
											 <div class="order">@{{ indexRecommend + 1 }}</div>
											 <div class="choose-bot">
												 <div class="position-relative" style="">
													 <select @change="changeBotRecommend(indexRecommend, $event.target.value)"
															 v-model="itemRecommend.botId"
															 :style="[!itemRecommend.botId ? {'color': '#E0E0E0'} : {}]"
															 class="form-control input-border input-font">
														 <option class="input-font" value="" style="color: #51595C">選択してください</option>
														 <option class="input-font" style="color: #51595C" v-for="(bot, indexBot) in listBot"
																 :value="bot.id">@{{ bot.view_name }}</option>
													 </select>
													 <i class="far fa-angle-down"></i>
												 </div>
											 </div>
										 </div>
										 <div class="column">
											 <div class="position-relative choose-bot" style="">
												 <select
														 v-model="itemRecommend.botSettingAffId"
														 v-validate="{required: itemRecommend.botId != ''}"
														 :data-vv-as="'案件選択'"
														 :style="[!itemRecommend.botSettingAffId ? {'color': '#E0E0E0'} : {}]"
														 :name="'recommended_aff_id_' + indexRecommend"
														 class="form-control input-border input-font">
													 <option class="input-font" style="color: #51595C" value="">選択してください</option>
													 <option class="input-font" style="color: #51595C" v-for="(setting, indexSetting) in setting_general['list_bot_setting_aff_by_bot_' + (indexRecommend + 1)]"
															 :value="setting.id"
															 v-if="!checkExistsRecommend(itemRecommend.botId, setting.id, indexRecommend) && itemRecommend.botId"
													 >@{{ setting.name }}</option>
												 </select>
												 <i class="far fa-angle-down"></i>
											 </div>
										 </div>
										 <div style="width: 100%; padding-left: 40px">
											 <div class="text-danger text-error" v-show=" errors.has('recommended_aff_id_'+ indexRecommend)">@{{ errors.first('recommended_aff_id_' + indexRecommend)  }}</div>
										 </div>
									 </div>
								 </div>
							 </div>

						 </div>

						 <div style="margin-top: 30px">
							 <div style="margin-top: 20px;     margin-bottom: 10px;">
								 <label>利用規約</label>
							 </div>
							 <div class="box-title">
								 <span class="font-weight-bold">利用規約文</span>
							 </div>
							 <div class="box-content-new">
								 <textarea id="terms_of_service" aria-hidden="true"></textarea>
							 </div>
						 </div>

						 <div class=" mt-3">
							 <div class="bor-title-c">
								 <span>お問い合わせ情報</span>
							 </div>
							 <div class="row-content-setting "
							 >
								 <div class="left">
									 <div class="description">問い合わせ受信メールアドレス</div>
								 </div>
								 <div class="right">
									 <input type="text"
											v-validate="`email`"
											:data-vv-as="'問い合わせ受信メールアドレス'"
											name="info_contact_email"
											v-model="setting_general.info_contact_email"
											class="form-control input-border input-font"> 
									 <div class="text-danger text-error" v-show="errors.has('info_contact_email')">@{{ errors.first('info_contact_email') }}</div>

								 </div>
							 </div>
							 <div class="row-content-setting" >
								 <div class="left">
									 <div class="description">問い合わせ用LINE公式アカウント</div>
								 </div>
								 <div class="right">
									 <input type="text"
											v-model="setting_general.info_contact_link_add_friend"
											v-validate="'is_url'"
											:data-vv-as="'問い合わせ用LINE公式アカウント'"
											name="info_contact_link_add_friend"
											placeholder="友だち追加URLを入力してください"
											class="form-control input-border input-font"> 

									 <div class="text-danger text-error" v-show="errors.has('info_contact_link_add_friend')">@{{ errors.first('info_contact_link_add_friend') }}</div>
								 </div>
							 </div>
							 <div class="row-content-setting" style="border-bottom: 1px solid #F2F2F2">
								 <div class="left">
									 <div class="description">電話番号</div>
								 </div>
								 <div class="right">
									 <input type="text"
											v-validate="`phone`"
											:data-vv-as="'電話番号'"
											name="info_contact_phone"
											v-model="setting_general.info_contact_phone"
											class="form-control input-border input-font"> 
									 <div class="text-danger text-error" v-show="errors.has('info_contact_phone')">@{{ errors.first('info_contact_phone') }}</div>

								 </div>
							 </div>

						 </div>

						 <div class=" mt-3" style="display: none;">
							 <div style="margin-top: 35px; margin-bottom: 10px;">
								 <label>友だち追加ブラウザ用ページ</label>
								 <a  class="font-weight-bold"
									 v-on:click=""
									 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,200 px ×400 px</span>
								 </div>
								 <div class="box-content-new">
									 <div class="d-flex align-items-center">
										 <label v-show="!setting_general.page_add_friend_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">
												 @{{ setting_general.page_add_friend_image ? '画像変更' : 'アップロード' }}
											 </button>
											 <input type="file" @change="uploadFile('page_add_friend_image', event)" class="upload-image"  style="position: absolute; visibility: hidden">
											 <button
													 v-show="setting_general.page_add_friend_image"
													 @click="removeImage('page_add_friend_image')"
													 class="btn btn-sns-line btn-sns-line-lg btn-remove-file ml-2" >
												 削除
											 </button>
										 </div>
										 <div style="padding-left: 35px">
											 <img v-show="setting_general.page_add_friend_image" :src="'{{ env('URL_SERVER_MEDIA') }}'+setting_general.page_add_friend_image" class="img-top">
										 </div>
									 </div>
								 </div>
								 <div class="box-title d-flex align-items-center">
									 <span class="font-weight-bold">案内文</span>
									 <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="setting_general.is_show_explain_add_friend" type="checkbox">
											 <span class="c-slider round"></span>
										 </label>
									 </div>
								 </div>
								 <div class="box-content-new">
									 <textarea id="page_add_friend_explain" aria-hidden="true"></textarea>
								 </div>
							 </div>
						 </div>

						 <button type="button" @click="saveSettingGeneral" class="btn btn-sns-line btn-sns-line-lg btn-save" style=" width: 200px; margin-top: 20px; margin-bottom: 15px;">保存</button>
					 </div>
				 </div>
			 </div>
		 </div>

		<div class="modal fade" id="modal-action-add-friend"
			 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" style="margin: 0px 30px">
						 <div class="item-action-add-friend">
							 アクションプレビューアクションプレビューアクションプレビューアクショ…
						 </div>
						<div class="item-action-add-friend">
							アクションプレビューアクションプレビューアクションプレビューアクショ…
						</div>
						<div class="item-action-add-friend">
							アクションプレビューアクションプレビューアクションプレビューアクショ…
						</div>

						<div class="d-flex" style="justify-content: center; margin-top: 30px">
							<button class="btn btn-sns-line btn-sns-line-md btn-08BF5A" style="min-width: 130px">編集</button>
							<button class="btn btn-sns-line btn-sns-line-md btn-status-E0E0E0" style="margin-left: 30px; min-width: 130px">戻る</button>
						</div>

					</div>

				</div>
			</div>
		</div>
		<div class="modal fade" id="modal-change-level"
			 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" style="margin: 0px 125px">
						<div class="option-level"
							 @click="list_aff.rank_modal = rank.rank"
							 :class="{active: rank.rank == list_aff.rank_modal}" v-for="(rank, indexRank) in config_level">
							<div class="d-flex input-radio" style="position: relative; padding-right: 0px;">
								<input type="radio" :id="'rank_modal' + indexRank"
									   v-model="list_aff.rank_modal"
									   name="rank_modal" :value="rank.rank" class="custom-radio">
								<label :for="'rank_modal' + indexRank">@{{ rank.name }}</label>
							</div>
						</div>
						<div class="d-flex" style="justify-content: center; margin-top: 30px">
							<button
									@click="changRankAff"
									class="btn btn-sns-line btn-sns-line-md btn-save" style="min-width: 130px">実行</button>
						</div>

					</div>

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

		<div class="modal fade" id="alertInTimeTrial"
			 tabindex="-1" role="dialog"
			 data-backdrop="static"
			 aria-labelledby="chatSettingStatus" style="    background-color: #00000080;">
			<div class="modal-dialog modal-lg" role="document" style="    top: 50%;    transform: translateY(-50%);">
				<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" v-on:click="updateTimeCloseAlert()"
						>
							<i class="fal fa-times c-hover-icon-action" style="color: #222222; padding: 5px 10px; border-radius: 4px;"></i></button>
						<h3 class="text-center ">トライアル期間中にプロプランにアップグレードがない場合 <br>
							ASP管理関連のデータはすべて削除されます。</h3>

					</div>
					<div class="modal-body scroll-modal" style="margin: 0px 30px">
						<div class="text-center">
							<button type="button" class="btn btn-sns-line btn-sns-line-primary btn-uppro" v-on:click="upVerPro()">プロプランにアップグレード
								<i class="fas fa-caret-right" style="    float: right;
																padding-top: 1px;
																font-size: 20px;"></i>
							</button>
						</div>
						<div class="box-note">
							<div class="" style="font-weight: 600; font-size: 14px; color: #222222">ご確認事項</div>
							<div  class="txt-small" style="" >・トライアル終了時に自動でプロプランに変更されることはございませんのご安心ください。<br>
								・トライアル期間中にプロプランに変更された場合、トライアル終了後もデータが引き継がれます。<br>
								・トライアル終了時までにプロプランに変更されていない場合、トライアル終了後にASP管理関連のデータはすべて削除されます。<br>
								・トライアル終了後にプロプランにアップグレードした場合でも、トライアル中のデータは引き継がれませんのでご注意ください。
							</div>

						</div>

					</div>

				</div>
			</div>
		</div>
		<div class="modal fade" id="alertExpiredTrial"
			 tabindex="-1" role="dialog"
			 data-backdrop="static"
			 aria-labelledby="chatSettingStatus" style="    background-color: #00000080;">
			<div class="modal-dialog modal-lg" role="document" style="    top: 50%;    transform: translateY(-50%);">
				<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" v-on:click="closeAlertExpiredTrial()"
						>
							<i class="fal fa-times c-hover-icon-action" style="color: #222222; padding: 5px 10px; border-radius: 4px;"></i></button>
						<h2 class="text-center tt-modal">ASP管理 7日間無料トライアル最終日です</h2>
							<div class="note-normal text-center">本日中にプロプランにアップグレードがない場合、ASP管理関連のデータはすべて削除されます。</div>

					</div>
					<div class="modal-body scroll-modal" style="margin: 0px 30px">
						<div class="text-center">
							<button type="button" class="btn btn-sns-line btn-sns-line-primary btn-uppro" v-on:click="upVerPro()">プロプランにアップグレード
								<i class="fas fa-caret-right" style="    float: right;
																padding-top: 1px;
																font-size: 20px;"></i>
							</button>
						</div>
						<div class="box-note">
							<div class="" style="font-weight: 600; font-size: 14px; color: #222222">ご確認事項</div>
							<div  class="txt-small" style="" >・トライアル終了時に自動でプロプランに変更されることはございませんのご安心ください。<br>
								・トライアル期間中にプロプランに変更された場合、トライアル終了後もデータが引き継がれます。<br>
								・トライアル終了時までにプロプランに変更されていない場合、トライアル終了後にASP管理関連のデータはすべて削除されます。<br>
								・トライアル終了後にプロプランにアップグレードした場合でも、トライアル中のデータは引き継がれませんのでご注意ください。
							</div>

						</div>

					</div>

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


	</div>
@endsection
@push('js')
	<!-- <script src="https://cdn.tiny.cloud/1/g3zs72us63f0hhxg73jreycj5mblfo0jqrg6udujttaqokrz/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> -->
	<script src="/tinymce/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
	<script src="/tinymce/langs/ja.js"></script>
	<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>
		$(function () {

            tinymce.init({
                selector: 'textarea#text_top',
				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: 250,
                setup: function (editor) {
                    editor.on("keyup", function(){
                        aspManagement.setting_general.text_top = tinymce.get("text_top").getContent();
                    });
                    editor.on('init', function () {
                        if (aspManagement.setting_general.text_top) {
                            editor.setContent(aspManagement.setting_general.text_top);
						}
                    });
                    editor.on('change', function(){
                        aspManagement.setting_general.text_top = tinymce.get("text_top").getContent();
                    });
                },
            })

            tinymce.init({
                selector: 'textarea#terms_of_service',
				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: 250,
                setup: function (editor) {
                    editor.on("keyup", function(){
                        aspManagement.setting_general.terms_of_service = tinymce.get("terms_of_service").getContent();
                    });
                    editor.on('init', function () {
                        if (aspManagement.setting_general.terms_of_service) {
                            editor.setContent(aspManagement.setting_general.terms_of_service);
						}
                    });
                    editor.on('change', function(){
                        aspManagement.setting_general.terms_of_service = tinymce.get("terms_of_service").getContent();
                    });
                },
            })

            tinymce.init({
                selector: 'textarea#page_add_friend_explain',
				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: 130,
                setup: function (editor) {
                    editor.on("keyup", function(){
                        aspManagement.setting_general.page_add_friend_explain = tinymce.get("page_add_friend_explain").getContent();
                    });
                    editor.on('init', function () {
                        if (aspManagement.setting_general.page_add_friend_explain) {
                            editor.setContent(aspManagement.setting_general.page_add_friend_explain);
						}
                    });
                    editor.on('change', function(){
                        aspManagement.setting_general.page_add_friend_explain = tinymce.get("page_add_friend_explain").getContent();
                    });
                },
            })

            let btnShowPickers = document.getElementsByClassName("btn-showpicker");
            Array.from(btnShowPickers).forEach((button) => {
                console.log(button)
                button.addEventListener("click", (event) => {
                    console.log(button)
                    const input = button.nextElementSibling;

                    try {
                        input.showPicker();
                    } catch (error) {
                        window.alert(error);
                    }
                });
            });


		})
		let masterId = '{{ $master_id }}';
        let listUser = @json($listUser);
	</script>
	<script>
		var currentBotId = {{$currentBotId }};
		var listBot = @json($listBot);
		var checkTrial = {{$checkTrial}};
		var isShowAlert = {{$isShowAlert}};
		var isInvalidTrial = {{$isInvalidTrial}};
	</script>
	<script src="/js/admin/asp-management/index.js?v={{config('sns-line.version')}}"></script>
@endpush