@push('css')
	<link rel="stylesheet" href="/css/scenario/modal-send-test-all.css?v={{config('sns-line.version')}}">

	<style>
        .toast-close {
            margin-right: 15px;
            background-color: #E0E0E0;
            border-radius: 50%;
            margin-left: auto;
            justify-content: center;
            align-items: center;
            display: flex;
            padding: 0px;
            width: 25px;
            height: 25px;
            margin-left: 10px;
            padding-top: 2px;
        }

        .toastify {
            min-width: 213px;
            background: none;
            background-color: #F5FDF9;
            color: #08BF5A;
            display: flex;
            align-items: center;
            height: 40px;
            padding: 7px 10px;
        }

        .toastify-avatar {
            width: 24px;
            height: 24px;
        }

        .toastify.notify-add-test {
            font-size: 12px;
            color: #08BF5A;
            background-color: #E5F5EC;
            border-radius: 22px;
			min-width: 230px;
		}

        .toastify.notify-add-test .toastify-avatar {
			margin-right: 20px;
		}
	</style>
@endpush

<div id="wrap-modal-send-test-all">
	<div class="modal fade" id="modalSendTestAll">
		<div class="modal-dialog" role="document">
			<div class="modal-content" style="padding: 25px 40px;height: 91vh; overflow-y: auto;">
				<div class="modal_head" style="margin-bottom: 15px;">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
						<i class="fas fa-times"></i>
					</button>
					<div class="modal-title">一括テスト送信</div>
				</div>
				<div class="modal_body">
					<p class="text-center" style="font-weight: 300; font-size: 12px; color: #888888;">登録されている全てのメッセージ・アクションを送信・稼働します。</p>
					<p class="text-center" style="font-weight: 300; font-size: 12px; color: #888888;">設定されている絞込み条件はテストアカウントにもそのまま適用されます。</p>
					<div class="title_and_search" style="margin: 15px 0;">
						<div style="display: flex; align-items: baseline;margin-bottom: 15px;">
							<p style="font-weight: bold; font-size: 16px; color: #2B2F36; margin-right: 50px;">テストユーザー登録</p>
							<p style="font-weight: 300; font-size: 13px; color: #535657;">検索してもアカウントが表示されない場合は<a target="_blank" href="https://lme.jp/manual/test_delivery/" style="color: #5799DB; cursor: pointer;">こちら</a>
							</p>
						</div>
					</div>
					<div class="wrap-search">
						<div class="wrap-input-search">
							<input class="form-control"
								   type="text"
								   placeholder="LINE名/システム表示名で検索"
								   v-model="keyword_search_user_test"
								   @focusin="focusSearch"
								   @focusout="focusoutSearch"
								   style="font-weight: 300;"
							>

							<i class="fas fa-search" style="color: #666666 !important;"></i>
						</div>
{{--						<button class="btn btn-sns-line btn-sns-line-lg btn_search_step_all">検索</button>--}}
						<div class="list-user-search" v-show="item_user_search.length > 0 && is_show_list_user_search">
							<div class="user-item-search"
								 v-for="(user, indexUser) in item_user_search"

							>
								<div style="font-weight: 500;">
									<img class="img" v-if="user.avatar_url" :src="user.avatar_url" alt="" width="30"
										 style="border-radius: 50%"
										 onerror="this.onerror=null;this.src='/images/blank_avatar.png'">
									<img class="img" v-else width="30" style="border-radius: 50%"
										 src="https://www.pngfind.com/pngs/m/610-6104451_image-placeholder-png-user-profile-placeholder-image-png.png">
									LINE登録名: @{{ user.name }} / システム表示名: @{{ user.view_name }}
								</div>

								<button @click="user.is_tester == 1 ? '' : addTest(user.id)"
										class="btn btn-add-user-test"
										:class="{off: user.is_tester == 1}"
								>追加</button>
							</div>
						</div>
					</div>

					<div class="choose_option_send" style="margin-top: 20px">
						<div style="display: flex; align-items: baseline; margin-bottom: 10px;">
							<p style="font-weight: bold; font-size: 16px; color: #2B2F36; margin-right: 20px;">送信設定</p>
							<p style="font-weight: 300; font-size: 13px; color: #535657;">※登録されているメッセージ数が多い場合</p>
						</div>
						<input class="custom-radio" type="radio" id="send_and_check"
							   v-model="option_send_test"
							   name="input_setting_send" value="1">
						<label for="send_and_check" class="lable_opt_send">設定した配信タイミング通りにメッセージ・アクションの送信・稼働テストをする</label>
						<br>
						<input class="custom-radio" type="radio"
							   v-model="option_send_test"
							   id="send_same_time" name="input_setting_send" value="2">
						<label for="send_same_time" class="lable_opt_send">全てのメッセージを同時に送信</label>
						<br>
						<input class="custom-radio" type="radio"
							   v-model="option_send_test"
							   id="send_set_time" name="input_setting_send" value="3">
						<label for="send_set_time" class="lable_opt_send">20~30秒ごとにメッセージを送信（テスト開始後の編集内容は反映されません）</label>
					</div>

					<div style="margin-top: 25px">
						<span style="font-weight: bold; font-size: 16px; color: #222222;">テストアカウント</span>
						<button class="btn btn-send-test"
								:class="{'active': selected.length > 0,'inactive' : selected.length == 0}"
								@click="sendForTest"
						>一括テスト送信</button>
					</div>

					<div v-show="items_test.length > 0" id="table-test">
						<div style="padding-right: 10px">
							<table class="table" style="margin-bottom: 0px;">
								<thead>
								<tr>
									<th style="text-align: center; width: 10%">
										<div>
											<label class="c-checkbox">
												<input type="checkbox" v-model="selectedAll">
												<span class="checkmark"></span>
											</label>
										</div>
									</th>
									<th style="text-align: left !important; width: 50%; font-weight: 300; font-size: 16px; color: #535657;">
										テストユーザー名
									</th>
									<th style="text-align: left !important; font-weight: 300; font-size: 16px; color: #535657;">操作</th>
								</tr>
								</thead>
							</table>
						</div>
						<div class="scroll-item-test"
						>
							<table class="table  "  style="margin-top: 0px">
								<tbody  >
								<tr
										v-for="(item, index) in items_test"
								>
									<td style="width: 10%">
										<label class="c-checkbox">
											<input type="checkbox" :value="item.id"
												   v-model="selected"
												   :checked="selected.includes(item.id)">
											<span class="checkmark"></span>
										</label>
									</td>

									<td style="text-align: center; width: 50%;">
										<div style="display: flex; align-items: center">
											<img :src="displayAvatar(item.avatar_url)" @error="setAltImg">
											<span class="name-friend">@{{ item.name }}</span>
										</div>
									</td>
									<td>
										<div style="display: flex; justify-content: start">
											<div class="btn-send-user-current"
												 @click="sendUserCurrentForTest([item.id])">
												テスト送信
												<svg xmlns="http://www.w3.org/2000/svg" width="22.137" height="21.441" viewBox="0 0 22.137 21.441">
													<path id="paper-plane-top-solid" d="M-4.336,24.463a1.3,1.3,0,0,0-1.654,1.8l2.244,4.167a.934.934,0,0,0,.709.486h0l5.7.712a.218.218,0,0,1,0,.434l-5.7.712h0a.942.942,0,0,0-.709.486l-2.244,4.173a1.3,1.3,0,0,0,1.654,1.8l14.307-6.2a1.3,1.3,0,0,0,0-2.376Z" transform="translate(-6.849 -15.714) rotate(-30)" fill="#e0e0e0"/>
												</svg>
											</div>
											<div class="btn-add-user-quick-reply"
												 @click="updateUserQuickReply(item.id, item.is_quick_reply)"
												 :class="{'user-quick-reply': item.is_quick_reply  ==  1}"
											>
												<svg xmlns="http://www.w3.org/2000/svg" width="18.75" height="15" viewBox="0 0 18.75 15">
													<path id="user-clock-solid" d="M6.563,0a3.75,3.75,0,1,1-3.75,3.75A3.75,3.75,0,0,1,6.563,0ZM5.224,8.906H7.9a5.236,5.236,0,0,1,1.723.29A5.159,5.159,0,0,0,11.566,15H.87A.87.87,0,0,1,0,14.13,5.223,5.223,0,0,1,5.224,8.906Zm5.089,1.875A4.219,4.219,0,1,1,14.531,15a4.219,4.219,0,0,1-4.219-4.219Zm4.219-2.344a.47.47,0,0,0-.469.469v1.875a.47.47,0,0,0,.469.469h1.406a.469.469,0,0,0,0-.937H15V8.906A.47.47,0,0,0,14.531,8.438Z" fill="#08bf5a"/>
												</svg>

												<div v-if="item.is_quick_reply == 1" class="notify-user-quick-reply">
													クイックテストユーザーの登録を解除
												</div>

												<div v-if="checkHave3UserQuickReply() && item.is_quick_reply != 1" class="notify-user-quick-reply">
													クイックテストユーザーに登録（3人まで）
												</div>
											</div>
											<div class="btn-trash"
												 @click="removeTest(item.id)"
											>
												<svg xmlns="http://www.w3.org/2000/svg" width="15" height="17.143" viewBox="0 0 15 17.143">
													<path id="Icon_awesome-trash-alt" data-name="Icon awesome-trash-alt" d="M1.071,15.536a1.607,1.607,0,0,0,1.607,1.607h9.643a1.607,1.607,0,0,0,1.607-1.607V4.286H1.071Zm9.107-8.571a.536.536,0,1,1,1.071,0v7.5a.536.536,0,1,1-1.071,0Zm-3.214,0a.536.536,0,1,1,1.071,0v7.5a.536.536,0,1,1-1.071,0Zm-3.214,0a.536.536,0,1,1,1.071,0v7.5a.536.536,0,0,1-1.071,0ZM14.464,1.071H10.446L10.132.445A.8.8,0,0,0,9.412,0H5.585a.794.794,0,0,0-.717.445l-.315.626H.536A.536.536,0,0,0,0,1.607V2.679a.536.536,0,0,0,.536.536H14.464A.536.536,0,0,0,15,2.679V1.607A.536.536,0,0,0,14.464,1.071Z" fill="#e0e0e0"/>
												</svg>
											</div>
										</div>
									</td>

								</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

@push('js')
{{--	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>--}}
	<script src="/js/step_message/modal-send-test-all.js?v={{config('sns-line.version')}}"></script>
@endpush