@extends('layout.basic.main')

@section('title',empty($broadcastId)?'一斉配信（作成）': (isset( $_GET['type']) ? '一斉配信（コピー）' : '一斉配信（編集）'))

@push('css')
	<link rel="stylesheet" href="/css/send_all.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
	<link rel="stylesheet" href="/css/plugins/timepicker/bootstrap-timepicker.css">


	<style>
        .active {
            font-weight: 700;
        }

        .choice_submit {
            text-align: center;
            padding-top: 10px !important;
        }

        .btn-default {
            color: #333 !important;
            background-color: #fff !important;
            border: solid 1px #ccc !important;
        }

        .btn-default:hover, .btn-default:active {
            color: #333;
            background-color: #d4d4d4 !important;
            border-color: #8c8c8c !important;
        }
        a:hover, .time-send-broadcast:hover{
            color: red !important;
            transition: 0.7s;
        }


        #table_broadcast th {
            height: 45px;
            padding: 5px;
            font-weight: 500;
            font-size:16px !important;
            color: #222222 !important;
            background-color: #F5F5F5 !important;
        }

        #table_broadcast.table_broadcast_sent th {
            height: 45px;
            padding: 5px;
            padding-left: 15px;
            font-weight: 500;
            font-size:16px !important;
            color: #222222 !important;
            background-color: #F5F5F5 !important;
        }

        #table_broadcast #table_broadcast_head {
            text-align: left !important;
        }

        #table_broadcast td{
            padding: 5px;
            text-align: left !important;
            border-bottom: 1px solid #DDDDDD !important;
            border-right: unset !important;
        }

        #table_broadcast.table_broadcast_sent td{
            padding: 5px;
            padding-left: 15px;
            text-align: left !important;
            border-bottom: 1px solid #DDDDDD !important;
            border-right: unset !important;
        }

        #table_broadcast_input {
            width: 55px;
        }

        #table_broadcast_input th {
            height: 45px;
            padding: 5px;
            font-weight: 500;
            font-size:16px !important;
            color: #222222 !important;
            background-color: #F5F5F5 !important;
        }

        #table_broadcast_input #table_broadcast_head {
            text-align: left !important;
        }

        #table_broadcast_input td{
            padding: 5px;
            text-align: left !important;
            border-bottom: 1px solid #F4F6F7 !important;
            border-right: unset !important;
        }

        #table_broadcast_action {
            width: 310px;
        }

        #table_broadcast_action.table_action_sent {
            width: 200px;
        }

        #table_broadcast_action th {
            height: 45px;
            padding: 5px;
            padding-left: 20px;
            font-weight: 500;
            font-size:16px !important;
            color: #222222 !important;
            background-color: #F5F5F5 !important;
        }

        #table_broadcast_action #table_broadcast_head {
            text-align: left !important;
        }

        #table_broadcast_action tr td{
            padding: 5px;
            padding-left: 20px;
            text-align: left !important;
            border-bottom: 1px solid #F4F6F7 !important;
            border-right: unset !important;
        }


        .btn-status {
            color: white;
            font-size: 12px;
            width: 70px;
            margin: auto;
            padding: 9px;
            border-radius: 1px;
        }

        .btn-create-broadcast {
            /* padding: 9px 35px ; */
            font-weight: 500;
            font-size: 14px;
            background: #5799DB;
            border-radius: 4px;
            color: white;
            height: 40px;
            width: 130px;
            line-height: 40px;
            cursor: pointer;
            border: unset;
        }

        .btn-create-broadcast:hover {
            opacity: 0.7;
        }
        .date-picker {
            background: url(/images/calendar.png) right 5px center no-repeat;
            appearance: none;
            -webkit-appearance: none; /* Support for Google Chrome và Safari. */
            -moz-appearance: none; /* Support for firefox. */
            -ms-appearance: none; /* Support for Internet Explorer. */
            -o-appearance: none; /* Support for Opera. */
        }

        .select_rich_menu {
            margin-left: 5px;
            height: 30px;
            white-space: nowrap;
            width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 100px;
            font-size: 14px;
            padding:0 25px 2px 5px;
            border: 1px solid rgba(128, 128, 128, 0.27);
            border-radius: 4px;
            cursor: pointer;
            background: url(/images/down.png) right 6px center no-repeat white;
        }

        .text-message {
            white-space: nowrap;
            width: 320px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .btn-add-message {
            font-size:12px;
            font-weight: bold;
            border-radius: 4px;
            padding: 9px 2px !important;
            background: rgba(87,153,219,1);
            color: white;
        }
        .btn-add-message:hover, .save-rich-menu:hover {
            color: white !important;
            background: rgb(49, 118, 186) !important;
        }

        .btn-add-message:focus {
            color: #FFFFFF;
        }

        .message-order {
            font-size: 12px;
            position: absolute;
            top: 0;
            left: 18px;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            justify-items: center;
        }

        .icon-edit-message, .icon-delete-message {
            font-size: 20px;
            color: rgba(170,170,170,1);
            cursor: pointer;
        }

        .icon-edit-message:hover, .preview-broadcast:hover {
            color: rgb(0, 160, 234) !important;
        }

        .delete-broadcast:hover, .icon-delete-message:hover{
            color: #de0b0b !important;
        }

        .send-test-broadcast:hover {
            background: #5f5ddc !important;
        }

        .modal-backdrop.in {
            display: none !important;
        }

        .btn-switch-status {
            background: rgba(244,67,54,1);
            color: white;
            cursor: pointer;
            width: 90px;
            padding:9px 5px !important;
            font-size: 12px;
            margin-left: 15px;
            font-weight: bold;
        }

        .btn-switch-status:hover {
            background: rgb(224, 50, 37);;
            color: white;
        }

        .modal-overlay {
            position: unset !important;
        }

        #newFunnelModal .modal-dialog {
            margin-top: 20px;
        }

        .modal-dialog {
            position: relative;
            margin-top: 7%;
            background-color: #fff;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            border-radius: 6px;
            outline: 0;
            -webkit-box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
            box-shadow: 0 3px 9px rgb(0 0 0 / 50%)
        }

        .modal-common {
            position: relative;
            margin-top: 7%;
            background-color: #fff;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            border: 1px solid #999;
            border-radius: 6px;
            outline: 0;
            -webkit-box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
            box-shadow: 0 3px 9px rgb(0 0 0 / 50%)
        }

        .action-broadcast{
            position: absolute;
            opacity: 0;
            visibility: hidden;
            transition: 0.5s;
            z-index: 0;
            display: none;
        }

        .btn:hover{
            opacity: 0.7;
        }

        .btn-group:hover .action-broadcast{
            opacity: 1;
            visibility: visible;
            z-index: 100;
            display: block;
        }

        .fade {
            transform: unset !important;
            animation: unset !important;
        }

        .fade.in {
            transform: unset !important;
            animation: unset !important;
        }

        .modal-content {
            -webkit-animation-name: unset !important;
            -webkit-animation-duration: 0.6s;
            animation-name: unset !important;;
            animation-duration: unset !important;
        }

        .modal.fade .modal-dialog {
            -webkit-transition: unset !important;
            transition: unset !important;
            /*-webkit-transform: unset !important;*/
            -ms-transform: unset !important;
            -o-transform: unset !important;
            /*transform: unset !important;*/
            margin: 60px auto;
        }

        .modal-content input[type="text"] {
            width: 100% !important;
        }

        .taiou_gry {
            font-size: 14px;
            background-color: #7D9195 !important;
            min-width: 50px;
            padding: 5px !important;
            text-align: center;
        }

        #single_template_idSelector .listItemInFolder .checkbox{
            margin: 0;
        }
        #single_template_idSelector .listItemInFolder .checkbox label{
            font-weight: bold;
            padding: 10px;
            width: 100%;
        }
        #single_template_idSelector .listItemInFolder .checkbox input{
            top: 12px;
        }

        .list-group-item {
            position: relative;
            display: block;
            padding: 10px 15px;
            margin-bottom: -1px;
            background-color: #fff;
            border: 1px solid #ddd;
        }

        .active-folder {
            background: #08BF5A !important;
            color: #fff !important;
        }

        .non-active-folder {
            background: #F4FBF2 !important;
            color: #707070;
            border: 1px solid #707070;
        }

        #tagEditModaltagSelector .listFolder >*, #single_template_idSelector .listFolder >* {
            margin-bottom: 5px;
            border: none;
            border-radius: 4px;
            font-weight: bold;
            font-size: 15px;
            color: #51595C;
        }

        #single_template_idSelector .listItemInFolder .checkbox {
            margin: 0;
        }

        #single_template_idSelector .listItemInFolder .checkbox label {
            font-weight: bold;
            padding: 10px;
            width: 100%;
        }

        #tagEditModaltagSelector .listItemInFolder >*, #single_template_idSelector .listItemInFolder >* {
            margin-bottom: 5px;
            border: 1px solid #F6F6F6;
            border-radius: 4px;
            font-weight: bold;
            font-size: 15px;
            padding: 0;
            color: #51595C;
        }

        #templateDetail .message{
            text-align: center;
            background: #F2F2F2;
            padding: 25px;
            margin: 10px;
        }

        #templateDetail .bg_preview_wap {
            width: 100%;
            margin: auto;
            background: #fff;
            word-break: break-word;
        }

        #templateDetail .text_preview {
            padding: 16px !important
        }

        #templateDetail .preview_video_wap {
            border-radius: 5px;
            width: 60%;
            margin-left: 20%;
            background: #fff;
            min-height: 250px;
            overflow-y: scroll;
            padding-bottom: 10px
        }

        #templateDetail .video_wap_preview {
            width: 100%
        }

        #templateDetail .preview_thumb img {
            width: 150px;
            max-height: 200px;
            float: left;
            padding-left: 10px
        }

        #templateDetail .message .question_wap {
            border-radius: 5px;
            width: 370px;
            margin-left: 25%;
            background: #fff
        }

        #templateDetail .question_title {
            border-bottom: 1px solid #ccc;
            padding: 10px !important;
            overflow: hidden;
            word-break: break-all
        }

        #templateDetail .answer_question {
            min-height: 40px;
            overflow: auto;
        }
        .temp_name {
            font-size: 14px !important;
            font-weight: 700;
            margin: 0 10px;
        }

        #broadcast .message .container-btn-quick-reply {
            display: flex;
            flex-flow: row wrap;
            align-content: space-between;
            justify-content: space-between;
            padding: 0 10px;
        }

        #broadcast .message .container-btn-quick-reply .btn-quick-reply {
            margin-top: 8px !important;
            width: 110px;
            height: auto;
            background-color: #9A9FB2;
            border-radius: 10px;
            color: #FFFFFF;
        }

        #broadcast .message .container-btn-quick-reply .btn-quick-reply:nth-child(2n) {
            page-break-after: always;
            break-after: always;
        }

        #broadcast .message .question_wap .answer_button_2{
            display: flex;
            flex-flow: row wrap;
            align-content: space-between;
            justify-content: space-between;
            width: 95%;
            margin: 10px auto;
            padding-bottom: 10px;
        }

        #broadcast .message .question_wap .answer_button_2 p{
            width: 47%;
            margin-bottom: 10px;
            height: auto;
            word-wrap: break-word;
        }

        #broadcast .message .question_wap .answer_button_2 p:nth-child(1n) {
            page-break-after: always;
            break-after: always;
        }

        #broadcast .message .question_wap .button_type_image{
            position: relative;
        }

        #broadcast .message .question_wap .button_type_image p.buttons_title{
            top: 10px;
            left: 10px;
            padding: 3px 10px;
            border-radius: 10px;
        }

        #broadcast .message .question_wap .button_type_image p.buttons_content{
            bottom: 15px;
            transform: translate(-50%, 0);
            left: 50%;
            padding: 7px;
            width: 85%;
            text-align: center;
            border-radius: 10px;
        }
        input[type="radio"][disabled] + label.custom-label-edit-broadcast { 	cursor: not-allowed; }
        .btn-standard .head_buttons .buttons_title,
        .btn-standard .head_buttons .buttons_content
        {
            padding: 5px 10px !important;
            font-weight: 300 !important;
        }
        .btn-standard .head_buttons {
            border-bottom: 1px solid #DDDDDD;
            padding: 0;
        }
        .btn-standard .answer_button .btn_modal_preview {
            font-weight: 300 !important;
            padding: 5px;
            color: #3771BE
        }
	</style>
	<link rel="stylesheet" href="/css/broadcast/style.css?v={{config("sns-line.version")}}">
@endpush

@section('content')
	<div id="broadcast">
		<div id="edit-broadcast" v-cloak>
			<div class="edit-broadcast-header">
				<div class="edit_broadcast_title">
					メッセージ登録
				</div>
				<a class="return_main" href="/basic/message-send-all">メッセージ配信一覧に戻る</a>
			</div>
			<div class="edit-broadcast-input">
				<div class="body-input">
					<div class="edit-broadcast-infor">
						<div class="infor_input">
							<div class="input_title">
								<p style="font-weight: 700; font-size: 13px; color: #535657;">管理用タイトル</p>
								<p style="font-weight: 500; font-size: 13px; color: #535657;">（友だちには公開されません）</p>
								<i class="fa fa-asterisk" style="color: #F44336; font-size: 10px; padding-top: 5px; margin: 0 10px;"></i>
								<p style="font-weight: 500; font-size: 11px; color: #8F9293; margin-left: auto;">@{{ broadcastEdit.name ? broadcastEdit.name.length : 0 }}/20</p>
							</div>
							<div class="input_area">
								<input class="form-control"
									   type="text"
									   style="height: 50px; font-weight: 500;"
									   :data-vv-as="'管理用タイトル'"
									   :name="'broadcast-name'"
									   v-validate="'required|max:20'"
									   v-model="broadcastEdit.name"
								>
								<div class="text-danger text-error"
									 v-show="errors.has('broadcast-name')"
								>@{{ errors.first('broadcast-name') }}</div>
							</div>
						</div>
						<div class="infor_sender">
							<div class="sender_title">送信者名</div>
							<div class="sender_setting">
								<img @error="setAltImg" v-show="!broadcastEdit.profile_bot.avt_path" src="/images/blank_avatar.png" class="img-fluid" style="width: 40px; height: 40px; border: 1px solid #DDDDDD; border-radius: 30px;">
								<img @error="setAltImg" v-show="broadcastEdit.profile_bot.avt_path" :src="broadcastEdit.profile_bot.avt_path" class="img-fluid" style="width: 40px; height: 40px; object-fit: cover; border: 1px solid #DDDDDD; border-radius: 30px;">
								<div class="sender_setting_name">@{{ broadcastEdit.profile_bot.nick_name }}</div>
								<button class="btn btn-sns-line btn-sns-line-primary btn_sender_setting"
                                        :disabled="broadcastEdit.type == 'copy'"
										@click="showModalProfileV2"
								>設定</button>
							</div>
						</div>
					</div>
					<div class="edit-broadcast-setting">
						<div class="setting_broadcast_time">
							<div class="setting_time_title">配信タイミング設定</div>
							<div class="setting_time_now">
								<div class="input-radio" style="margin-top: 5px">
									<input type="radio"
										   value="0"
										   name="setting_send_message"
										   v-model="broadcastEdit.setting_send_message"
										   class="custom-radio" :id="'setting_time_send_0_1'">
									<label class="custom-label-edit-broadcast" :for="'setting_time_send_0_1'">メッセージ登録後すぐに配信</label>
								</div>
							</div>
							<div class="setting_time_then">
								<div style="display: flex; align-items: center">
									<div class="input-radio" style="margin-top: 5px">
										<input type="radio"
											   value="1"
											   name="setting_send_message"
											   v-model="broadcastEdit.setting_send_message"
											   class="custom-radio" :id="'setting_time_send_0_2'">
										<label class="custom-label-edit-broadcast" :for="'setting_time_send_0_2'">配信予約</label>
									</div>

									<div  class="d-flex align-items-center" style="margin-left: 10px">
										<div class="w-input-date"
											 style="position: relative; display: inline-block; width: 200px; margin-right: 10px">
											<input type="date"
												   min="{{ now()->toDateString() }}"
												   v-model="broadcastEdit.send_day"
                                                   id="input-send-day"
                                                   :data-vv-as="'配信予定日時'"
                                                   :name="'parent_send_day'"
												   class="form-control showpicker text-center input-border input-date-hide"
												   :disabled="broadcastEdit.setting_send_message == 0"
											>
											<i class="far fa-calendar showpicker icon-datetime"></i>
											<span class="text-danger" style="display: none;"></span>
                                            <span class="view_date" id="showpicker-hide">@{{ moment(broadcastEdit.send_day).format('YYYY年MM月DD日') + getStrDayInWeek(broadcastEdit.send_day) }}</span>
										</div>
										<div class="w-input-time"
											 style="position: relative; display: inline-block; width: 120px;">
											<input type="text"
												   v-model="broadcastEdit.send_time"
												   data-field_name="add_or_edit_send_time"
												   class="form-control timepicker input-border text-center"
												   :disabled="broadcastEdit.setting_send_message == 0">
											<i class="fal fa-clock icon-datetime"></i>
										</div>
										<p class="set_time_to" style="padding-left: 7px">に配信</p>
									</div>
								</div>


							</div>
                            <div class="text-danger text-error"
                                 v-show="errors.has('parent_send_day')"
                            >@{{ errors.first('parent_send_day') }}</div>
							<div class="setting_time_note"
                                 v-show="broadcastEdit.type != 'copy'">
								配信日時は複数登録ができます。最大10個の日時まで登録可能です。
							</div>
							<a class="setting_time_add"
                               v-show="broadcastEdit.type != 'copy'"
                               :class="{'setting_time_add_disable': broadcastEdit.delivery_dates.length == 10}"
							   @click="addDeliveryDate">　
								<i class="fal fa-plus"
								   style="text-decoration: underline;"></i> 配信日時追加
							</a>
							<div class="list-delivery">

                                <template v-for="(date, indexDate) in broadcastEdit.delivery_dates">
                                    <div class="d-flex align-items-center item-date"

                                    >
                                        <div class="w-input-date"
                                             style="position: relative; display: inline-block; width: 180px; margin-right: 10px">
                                            <input type="date"
                                                   min="{{ now()->toDateString() }}"
                                                   v-model="date.send_day"
                                                   data-field_name="b_send_time_item"
                                                   :data-index="indexDate"
                                                   :data-vv-as="'配信予定日時'"
                                                   :name="'child_send_day' + indexDate"
                                                   v-validate="'required'"
                                                   :class="'input-send-day-item'"
                                                   class="form-control showpicker text-center input-border input-date-hide"
                                            >
                                            <i class="far fa-calendar showpicker icon-datetime"></i>
                                            <span class="text-danger" style="display: none;"></span>
                                            <span class="view_date" :class="'showpicker-send-day-item'"
                                            >@{{ moment(date.send_day).format('YYYY年MM月DD日') + getStrDayInWeek(date.send_day) }}</span>

                                        </div>
                                        <div class="w-input-time"
                                             style="position: relative; display: inline-block; width: 120px;">
                                            <input type="text"
                                                   :data-index="indexDate"
                                                   data-field_name="b_send_time_item"
                                                   v-model="date.send_time"
                                                   class="form-control timepicker input-border text-center">
                                            <i class="fal fa-clock icon-datetime"></i>
                                        </div>
                                        <div class="text-center btn-remove-date"
                                             @click="removeDeliveryDate(indexDate)"
                                        >
                                            <i class="fas fa-trash-alt" style="color: #E0E0E0; cursor: pointer;"></i>
                                        </div>
                                    </div>

                                    <div class="text-danger text-error"
                                         v-show="errors.has('child_send_day' + indexDate)"
                                    >@{{ errors.first('child_send_day' + indexDate) }}</div>
                                </template>


                                <input type="hidden"
                                       :value="JSON.stringify(broadcastEdit)"
                                       :data-vv-as="'管理用タイトル'"
                                       :name="'unique_time_send'"
                                       v-validate="'unique_time_send'"
                                >

                                <div style="margin-top: 5px" class="text-danger text-error"
                                     v-show="errors.has('unique_time_send')"
                                >@{{ errors.first('unique_time_send') }}</div>
							</div>
						</div>
						<div class="setting_broadcast_destination">
							<div class="setting_destination_title">
								<div style="font-weight: 700; font-size: 13px; color: #535657;">配信先絞込み</div>
								<div class="deliver_num">
									配信数<i class="fa fa-question-circle" style="color: #5799DB; margin-left: 5px;"></i>
									<div class="deliver_num_note">現時点での推計値を表示しているため、実際の配信数と差が生じる場合があります。「再計算」をクリックすると現時点での配信予定数を再計算します。</div>
								</div>
							</div>
							<div class="setting_destination_option">
								<div style="margin: auto; margin-left: 0; display: flex;">
									<div class="input-radio" style="margin-top: 5px; margin-right: 10px">
										<input type="radio"
											   value="0"
											   name="flag_setting_filter"
                                               @change="changeFlagSettingFilter"
											   v-model="broadcastEdit.flag_setting_filter"
                                               :disabled="broadcastEdit.type == 'copy'"
											   class="custom-radio" :id="'falg_setting_filter_0'">
										<label class="custom-label-edit-broadcast"  :for="'falg_setting_filter_0'">すべての友だち</label>
									</div>
									<div class="input-radio" style="margin-top: 5px">
										<input type="radio"
											   value="1"
                                               @change="changeFlagSettingFilter"
											   name="flag_setting_filter"
											   v-model="broadcastEdit.flag_setting_filter"
                                               :disabled="broadcastEdit.type == 'copy'"
											   class="custom-radio" :id="'falg_setting_filter_1'">
										<label class="custom-label-edit-broadcast"  :for="'falg_setting_filter_1'">絞り込み</label>
									</div>
								</div>

								<button class="btn btn-sns-line btn-sns-line-primary btn_destination_setting"
										@click="showModalFilterV2(broadcastEdit.broadcast_id)"
										:disabled="broadcastEdit.flag_setting_filter == 0 || broadcastEdit.type == 'copy'"
								>設定</button>
								<div style="font-weight: bold; font-size: 18px; color: #5899DB; margin: auto; text-decoration: underline; cursor: pointer"
                                    @click="showNumberFilter(broadcastEdit.broadcast_id)"
                                >@{{ broadcastEdit.flag_setting_filter == 0 ? totalUser : broadcastEdit.count_filter }}人(予定)</div>
								<button class="btn btn-sns-line btn-sns-line-primary btn_destination_recalculate"
                                    @click="getNumberFilter"
									:disabled="broadcastEdit.flag_setting_filter == 0 || !broadcastEdit.broadcast_id || broadcastEdit.type == 'copy'">再計算</button>
							</div>
							<div class="setting_destination_area">
								<div v-show="broadcastEdit.flag_setting_filter == 0">未設定（全員）</div>
								<div v-show="broadcastEdit.flag_setting_filter == 1 && broadcastEdit.list_preview_filter.length == 0">未設定（全員）</div>
								<div v-for="(preview, index) in broadcastEdit.list_preview_filter"
                                     v-if="broadcastEdit.flag_setting_filter == 1 && broadcastEdit.list_preview_filter.length > 0"
                                     v-html="preview"
                                     style="font-weight: 600">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="edit-broadcast-action" style="width: 80%; padding-left: 15px;">
				<div class="body-action">
					<div class="message-registration" v-show="(broadcastEdit.broadcast_id && broadcastEdit.type != 'copy')">
						<div class="message_registration_head">メッセージ登録</div>
						<div style="display: flex; margin-bottom: 15px; align-items: center">
							<button class="btn btn-sns-line btn-sns-line-lg btn-sns-line-primary btn_action_add_mess"
								@click="addTemplate"
							>
								<i class="fal fa-plus"></i> メッセージ追加
							</button>
							<button class="btn btn-sns-line btn-sns-line-lg btn-sns-line-primary btn_add_from_temp"
                                @click="showModalConfirmAddTemplate"
                            >
								<i class="fal fa-plus"></i> テンプレートから追加
							</button>
							<a class="quick_test" @click="viewDetailPreviewBroadcast" v-show="list_user_quick_reply.length == 0">クイックテスト未設定</a>
                            <div v-show="list_user_quick_reply.length > 0"
                            style="    color: #222222;
                                font-weight: normal;
                                margin-right: 10px;
                                margin-left: auto;"
                            >クイックテスト送信</div>
                            <div class="list-user-quick-reply" style="margin-left: 0px" v-show="list_user_quick_reply.length > 0">
                                <div class="item"
                                     v-for="(itemQuickReply, indexQuickReply) in list_user_quick_reply"
                                     @click="sendQuickReply([itemQuickReply.id], broadcastEdit.broadcast_id, broadcastEdit.action_id)"
                                >
                                    <img  class="avatar" :src="displayAvatar(itemQuickReply.avatar_url)" alt="" @error="setAltImg">
                                    <img  class="icon-send-now" src="/images/icon-send-now.png" alt="">

                                    <div class="explain-user-quick">
                                        友だち名にテスト送信する
                                    </div>
                                </div>

                            </div>
						</div>

						<div id="list-message" class="list-message">
                            <draggable
                                    v-model="messages" :disabled="!enabled"
                                    @change="sortItemMessage"
                                    tag="div"
                                    v-bind="dragOptions"
                            >
                                <transition-group type="transition" name="flip-list">
                                    <div class="item-message"
                                         v-for="(message, indexMessage) in messages"
                                         :key="indexMessage"
                                         :data-id="message.id"
                                    >
                                        <i class="fa fa-bars"></i>

                                        <div class="content-item type-text" v-if="message.type == 'text'">
                                            <div class="msg-text">@{{message.content|shortContent}}</div>
                                        </div>
                                        <div class="content-item image type-image" v-if="message.type == 'image'"
                                             @click="showModalPreviewTemplateChild(message.id)"
                                        >
                                            <div class="img">
                                                <img :src="getPreviewMedia(message.content, message.image_server)" alt="">
                                            </div>
                                            <span class="note_tmp_image">(画像クリックで拡大)</span>
                                        </div>

                                        <div class="content-item image type-stamp" v-if="message.type == 'stamp'">
                                            <div class="img">
                                                <img :src="'https://stickershop.line-scdn.net/stickershop/v1/sticker/' +message.content.split('_')[1]+'/ANDROID/sticker.png'" alt="">
                                            </div>
                                            <span class="note_tmp_image">スタンプ</span>
                                        </div>

                                        <div class="content-item image type-button" v-if="message.type == 'form'">
                                            <div class="msg-text">カルーセル</div>
                                        </div>

                                        <div class="content-item image type-button" v-if="message.type == 'group'">
                                            <div class="msg-text">@{{ message.name }}</div>
                                        </div>

                                        <div class="content-item image type-location" v-if="message.type == 'location'">
                                            @{{ message.content|shortContent }}
                                        </div>

                                        <div class="content-item image type-introduce" v-if="message.type == 'introduction'">
                                            @{{ message.content|shortContent }}
                                            @{{message.introduction.friend_name|covertLineId}}
                                            {{-- @{{item.template_first.content|shortContent}} --}}
                                        </div>

                                        <div class="content-item image type-video" v-if="message.type == 'video'"
                                             @click="showModalPreviewTemplateChild(message.id)"
                                        >
                                            <div class="img">
                                                <img v-show="message.thumbnail_path" :src="getPreviewMedia(message.thumbnail_path, '