@extends('layout.basic.main')
@if($actionType =='sendAll')
	@section('title','一斉配信（メッセージ登録）')
@elseif($actionType =='scenario')
	@section('title','ステップ配信 メッセージ登録')
@elseif($actionType =='event')
	@section('title','リマインド配信（リマインドメッセージ登録）')
@elseif($actionType =='schedule_send' && empty($templateChildId))
	@section('title','送信予約（メッセージ登録）')
@elseif($actionType =='schedule_send' && !empty($templateChildId))
	@section('title','送信予約（メッセージ編集）')
@else
	@section('title','テンプレート（メッセージ登録）')
@endif
@push('css')
<link rel="stylesheet" href="/css/base/main.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/css/plugins/timepicker/bootstrap-timepicker.css">

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
<link rel="stylesheet" href="/css/template_v2/create.css?v={{config('sns-line.version')}}">
<link rel="stylesheet" href="/css/template_v2/media.css?v={{config('sns-line.version')}}">
	<style>
		.manage_name {
			display: flex;
			font-size: 16px;
			color: #222222;
			font-weight: normal;
			margin-bottom: 8px;
		}
		.folder_name {
			font-size: 16px;
			color: #222222;
			font-weight: normal;
			margin-bottom: 8px;
		}
	</style>

@endpush


@section('content')
<div id="template-create" v-cloak>
	<div style="width: 95%; display: flex; padding-bottom: 10px;" v-if="typeTemplate != 'group' && !templateGroupId">
		<div class="col-sm-3">
			<h2 class="font-weight-bold" style="font-size: 20px !important; margin-bottom: 0 !important; padding-left: 0; padding-bottom: 0; color: #222222;">
				テンプレート作成
			</h2>
			<a style="font-weight: 400; font-size: 14px; text-decoration: underline; color: #888888; cursor: pointer;"
			   data-toggle="modal" data-target="#modal_spec_count">テンプレートの配信カウントについて</a>
		</div>
		<div class="col-sm-9">
			<div class="row">
				<div class="col-sm-6 col-md-5">
					<div class="form-group">
						<div class="manage_name">
							管理名
							<p class="text-right" style="font-weight: normal; top: 10px; font-size: 13px; color: #8F9293; margin-left: auto; position: relative;" id="count_title">
								@{{ template_name ? template_name.length : 0 }}/20
							</p>
						</div>
						{{-- [#41187] maxlength=20: cùng ô 管理名 giới hạn 20 ký tự như màn tạo nhóm mẫu tin,
							 trước đây không chặn gì nên dán quá 20 ký tự vẫn giữ nguyên rồi bị chặn lúc lưu. --}}
						<input @keyup="keyupInputTemplateName($event)" type="text" maxlength="20"
							   style="font-weight: lighter; border: 1px solid #DDDDDD; font-size: 16px; padding-left: 12px; color: #2B2F36;"
							   :value="template_name" class="form-control" name="template_name" v-model="template_name" id="template_name"/>
						<span class="tmp_err text-danger park_name_error font-weight-bold" v-show="show_message_error_name">名前は必須です。</span>
					</div>
				</div>
				<div class="col-sm-6 col-md-5">
					<div class="form-group">
						<div class="folder_name">フォルダ</div>
						<select name="category_select" id="category_select" class="form-control my_class" v-model="folder_id"
								style="font-weight: lighter; border: 1px solid #DDDDDD; height: 35px; font-size: 14px; color: #2B2F36; ">
							<option value="0" :selected="folder_id == 0" style="font-weight: lighter;">未分類</option>
							@if(isset($categories) && count($categories) > 0)
								@foreach($categories as $category)
									<option :selected="folder_id == '{{$category->id}}'" value="{{$category->id}}" style="font-weight: lighter;" >{!! $category->name !!}</option>
								@endforeach
							@endif
						</select>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div v-show=" !$store.state.message_text.is_setting_detail_url">
		<!-- <div class="title-page">メッセージ編集</div> -->
		<div v-show="!template_child_id" id="tab-message" class="">
			<div class="sub-title">メッセージタイプを選択（保存後の変更はできません）</div>
			<ul class="list-unstyled" style="margin: 13px 0px">
				<li v-for="(tab, indexTab) in tabs" :key="indexTab"
					:class="{hidden: tab.key == 'introduction'}" >
					<a :href="'#message-' + tab.key"
					   class="tab-item"
					   :class="{active: currentTab == tab.key}"
					   @click="currentTab = tab.key">
						@{{ tab.text }}
					</a>
				</li>
			</ul>
			{{--		<div style="font-size: 12px; color: #535657 ">※「パネル・ボタン」「画像（リッチメッセージ）」にURLを設定した場合、URL分析では「送信数」「クリック数」はカウントされますが、「開封数」はカウントされません。</div>--}}
		</div>
		<div v-show="template_child_id"  class="frame">
			<div  class=" header-edit">
				<div class="title-type">メッセージタイプ</div>
				<div class="type">@{{ getTypeEditMessage }}</div>
				<div class="child" style="display: flex; align-items: center" v-show="currentTab == 'form' || currentTab == 'media'">
					<div class="title-type">@{{ currentTab == 'form' ? 'パネルタイプ' : 'メディアタイプ' }} </div>
					<div class="type">@{{ getSubTypeMessage }}</div>
				</div>

			</div>
		</div>

		<component :is="currentTabComponent" :ref="currentTabComponent"></component>
	</div>

	@include('basic.template_v2.components.text.setting-detail-url')
	@yield('action-page')
</div>
@include('basic.template_v2.components.group-message')
@include('layout.modal_setting.modal_select_action')
@include('layout.modal_filter_v2')
@include('basic.template_v2.common.modal-insert-info')
@endsection

@push('js')
<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 src="/chat_files/emojione.js"></script>
<script src="/chat_files/emojionearea.js"></script>
<script src="/js/vuex.js"></script>


<script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
<script src="/js/vue-paginate.js"></script>
<script src="/chat_files/bootstrap-timepicker.js"></script>

{{-- [#40056] Helper hiển thị lỗi cho các endpoint ajax đã chuẩn hoá HTTP code (422/400/404/409/500). --}}
<script src="/js/template_v2/ajax-error.js?v={{config('sns-line.version')}}"></script>
<script src="/js/template_v2/messages/google_map.js"></script>

<script>
	var params = [];
	var basic_home_new = [];
	var getLocate = '{{App::getLocale()}}';
	var list_status = null;
	list_status.forEach(function(item) {
		basic_home_new.push({
			k: item.id,
			text: item.name_status,
			bg: item.color,
			'class': 'default',
			show: !1,
			stt: 1,
			value: item.id
		});
	});

	var getScenario = null;
	var conversion = null;
	var url_ext_media = '{{ env("URL_SERVER_MEDIA") }}';
	var url_b2 = '{{ env("URL_SERVER_MEDIA_B2", env("URL_SERVER_MEDIA")) }}';
	var pathB2 = "{{ env('FOLDER_MEDIA_B2', env('FOLDER_MEDIA')) . 'media/images/'.$bot->admin_id.'/'.getBotId().'/' }}";
	var isUploadB2 = '{{ env("IS_UPLOAD_DROPBOX", true) }}';
</script>


<script src="/js/template_v2/messages/store.js?v={{config('sns-line.version')}}"></script>
<script src="/js/template_v2/messages/media.js?v={{config('sns-line.version')}}"></script>
<script src="/js/template_v2/messages/text.js?v={{config('sns-line.version')}}"></script>
<script src="/js/template_v2/messages/button.js?v={{config('sns-line.version')}}"></script>
<script src="/js/template_v2/messages/stamp.js?v={{config('sns-line.version')}}"></script>
<script src="/js/template_v2/messages/location.js?v={{config('sns-line.version')}}"></script>
<script src="/js/template_v2/messages/introduction.js?v={{config('sns-line.version')}}"></script>
<script src="/js/template_v2/messages/create-message.js?v={{config('sns-line.version')}}"></script>
<script src="/js/friendlist/modal_filter_v2.js?v={{ config('sns-line.version') }}"></script>
@endpush