@push('css')
{{--	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">--}}
	<link rel="stylesheet" href="/css/template_v2/modal/modal-preview-broadcast.css?v={{config('sns-line.version')}}">
	<link rel="stylesheet" href="/css/template_v2/modal/broadcast.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;
		}
	</style>
@endpush
<template id="wrap-modal-preview-broadcast" v-cloak>
	<div class="modal fade" id="modalPreviewBroadcast"
		 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">
					<h2 class="font-weight-normal modal-title" style="padding-left: 10px">@{{ getTitleModal }}</h2>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
						<i class="fas fa-times" style="color:#7D9195; background-color: unset; position: relative;"></i>
					</button>
				</div>
				<div class="modal-body">
					<div class="wrap-content">
						<div class="preview-tmp">

							<div class="broadcast" style="margin-bottom: 30px; display:flex; justify-content: space-between; align-items: center">
								<div>
									<div v-show="type == 'chat11' || type == 'other'" class="name-type-error-modal">メッセージ</div>
									<div v-show="type == 'step'" class="name-type-error-modal">@{{ messageError.name }}</div>
									<div v-show="type == 'step'" class="name-type-error-modal">@{{ messageError.step_name }}</div>
									<div v-show="type == 'send_all'" class="name-type-error-modal">@{{ messageError.name }}</div>
								</div>
{{--								@include('basic.error_list.v2.header-preview')--}}
							</div>

							<div class="broadcast">
								@include('basic.error_list.v2.preview-action-herme')
							</div>

							<div v-if="items.length > 0 && tab_active != 'action'"
									class="border-preview">
								<div class="frame-preview">
									<template
											v-for="(item, index) in items">
										<template v-if="item && item != null">
											<template v-if="item.type == 'group'">
												<template v-for="(itemChild, indexChild) in item.template_childs">
													@include('basic.template_v2.common.modal.item-preview-child')
												</template>
											</template>
	
											<template v-else
											>
												@include('basic.template_v2.common.modal.item-preview')
											</template>
										</template>
									</template>

								</div>
							</div>
						</div>
						<div class="send-test">
							<div class="broadcast" style=" overflow: auto;    max-height: calc(73vh - 123px) !important;" >
								@include('basic.error_list.v2.outline')

								<div v-show="tab_parent_active != 'history_send'" style="margin-top: 30px">
									<div style="font-weight: 600; font-size: 14px; color: #222222">メッセージ再送に関するアクションを選択</div>
									<div style="font-weight: 300; font-size: 14px; color: #222222">※ 配信エラーの原因が解消されていない場合、再送しても配信エラーとなります。</div>
								</div>

								<div v-show="tab_parent_active != 'history_send'" class="list-radio">
									<label class="radio-wp">
										<input type="radio"
											   value="1"
											   v-model="setting.type"
											   id="type_1"
											   name="type_send">
										<label for="type_1" class="radio-select">
											<div class="d-flex align-items-center">
												<span class="radio-checkmark"></span>
												<span class="font-s14">
													再送するタイミングを登録
												</span>
											</div>
										</label>
									</label>

									<div class="wrap-choose-time">
										<div class="d-flex align-items-center mt-1">
											<div class="w-input-datetime" style="margin-right: 10px">
												<input type="date" name="date_start_apply"
													   min="{{ now()->toDateString() }}"
													   :disabled="setting.type != 1"
													   id="date_start_apply"
													   v-model="setting.date_send"
													   class="form-control text-center show-datepicker" style="width: 180px;cursor: pointer">
												<i class="fal fa-calendar"></i>
											</div>
											<div class="w-input-datetime">
												<input type="text"
													   name="time_start_apply"
													   id="time_start_apply"
													   :disabled="setting.type != 1"
													   v-model="setting.time_send"
													   class="text-center form-control timepicker"
													   style="width: 110px; height: 34px">
												<i class="far fa-clock"></i>
											</div>
										</div>
									</div>

									<label class="radio-wp " style="margin-top: 10px">
										<input type="radio"
											   value="2"
											   v-model="setting.type"
											   id="type_2"
											   name="type_send">
										<label for="type_2" class="radio-select">
											<div class="d-flex align-items-center">
												<span class="radio-checkmark"></span>
												<span class="font-s14" >
													すぐに再送する
												</span>
											</div>
										</label>
									</label>
									<br>

									<label class="radio-wp" style="margin-top: 5px">
										<input type="radio"
											   value="3"
											   id="type_3"
											   v-model="setting.type"
											   name="type_send">
										<label for="type_3" class="radio-select">
											<div class="d-flex align-items-center">
												<span class="radio-checkmark "></span>
												<span class="font-s14" >
													このエラーメッセージを削除する
												</span>
											</div>
										</label>
									</label>
								</div>

								<button v-show="tab_parent_active != 'history_send'"
										:disabled="messageError.status == 100 || messageError.status == 101"
										@click="saveSettingResendMessageError"
										 class="btn btn-copy-broadcast-delivered"
								>選択したアクションを実行する</button>

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

@push('js')
	<script>
        var tableErrorCode = @json($tableErrorCode);

        console.log(tableErrorCode, 'tableErrorCode')
	</script>
{{--	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>--}}

	<script src="/js/error_list/modal-detail-message.js?v={{config('sns-line.version')}}"></script>
@endpush