@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="/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/admin/asp-management/index.css?v={{config('sns-line.version')}}">
	<style>
		.box-title{
			border: 1px solid #DDDDDD;
			border-bottom: none;
			background: #F8F8F8 0% 0% no-repeat padding-box;
			padding: 5px 20px;
			font-size: 13px;
		}
	</style>
@endpush
@section('content')
	<div id="add-email" v-cloak>
	 	 <div class="mt-3" id="setting-start-end">
			 <h4 class="sub-title">メール作成</h4>
			 <div class="box-title  mt-3">
				 <span>配信日時</span>
			 </div>
			 <div class="box-content" style="border-bottom: none;">
				  <div>

					  <div >
						  <div class="row-condition_end">
							  <div class="d-flex input-radio" style="position: relative; padding-right: 0px;">
								  <input type="radio" id="type_time_send_1"
										 v-model="setting_email.type_time_send"
										 name="type_time_send" value="0" class="custom-radio">
								  <label for="type_time_send_1">登録後すぐに配信</label>
							  </div>
						  </div>
						  <div class="row-condition_end">
							  <div class="d-flex input-radio" style="position: relative; padding-right: 0px;">
								  <input type="radio" id="type_time_send_2"
										 v-model="setting_email.type_time_send"
										 name="type_time_send" value="1"
										 class="custom-radio">
								  <label for="type_time_send_2">配信日時を指定</label>
							  </div>
						  </div>
					  </div>
					  <div class="d-flex align-items-end">
						  <div class="w-input-date" style="position: relative; display: inline-block;">
							  <input type="date" min="2023-06-26"
									 value="2023-06-26"
									 v-model="setting_email.date_send"
									 id="date_send"
									 class="form-control showpicker text-center input-border input-font">
							  <i class="fal fa-calendar showpicker"></i>
							  <span class="text-danger" style="display: none;"></span>
						  </div>
						  <div class="w-input-time" style="position: relative; display: inline-block;">
							  <input type="text" id="time_send"
									 :data-field_name="'time_send'"
									 v-model="setting_email.time_send"
									 class="form-control timepicker input-border text-center input-font"
									 style="font-weight: lighter;">
							  <i class="fal fa-clock"></i>
						  </div>
						  <span style="font-size: 12px">に配信</span>
					  </div>

				  </div>
			 </div>
			 <div class="box-title">
				 <span>送信先選択</span>
			 </div>
			 <div class="box-content" style="border-bottom: none;">

				 <div>
					 <div class="d-flex align-items-center">
						 <button type="button" class="btn btn-sns-line btn-sns-line-md btn-F8F8F8" style="min-width: 100px">送信数</button>
						 <a target="_blank" style="color: #535657; font-weight: bold;" :href="'{{ route('affiliate-management.listUserSent') }}?type=intend_send&user_id='+masterId+'&emailId=' + setting_email.id + '&type_send=' + setting_email.type_send + '&level_send=' + setting_email.level_send.join(',')"
							class="pl-2 text-underline">@{{ totalAff }}人</a>
					 </div>
				 </div>
				 <div class="" style="margin-bottom: 15px; margin-top: 15px">
					 <div class="d-flex input-radio" style="position: relative; padding-right: 0px;">
						 <input type="radio"
								id="type_send_1"
								@change="changeTypeSend"
								v-model="setting_email.type_send"
								name="type_send" value="0"
								class="custom-radio">
						 <label for="type_send_1">全員</label>
					 </div>
				 </div>
				 <div class="d-flex align-items-center">
					 <div class="d-flex input-radio" style="position: relative; padding-right: 0px;">
						 <input type="radio" id="type_send_2"
								@change="changeTypeSend"
								v-model="setting_email.type_send"
								name="type_send" value="1" class="custom-radio">
						 <label for="type_send_2">絞り込み</label>
					 </div>
					 <div class="list-status-aff">
						 <div
								 v-for="(rank, indexRank) in level"
								 @click="changeRank(rank.rank)"
								 :class="{active: checkExistsRank(rank.rank)}"
								 class="status-aff">
							 @{{ rank.name }}
						 </div>
					 </div>
				 </div>
			 </div>
			 <div class="box-title">
				 <span>メッセージ登録</span>
			 </div>
			 <div class="box-content">
				 <div class="form-group">
					 <label>タイトル</label>
					 <input type="text"
							v-model="setting_email.title"
							v-validate="{required: true}"
							:data-vv-as="'メール件名'"
							name="title"
							class="form-control input-border input-font">
					 <div class="text-danger text-error" v-show="errors.has('title')">@{{ errors.first('title') }}</div>

				 </div>

				 <div class="form-group">

					 <div class="d-flex align-items-center mb-2" style="margin-top: 5px">
						 <span class="f-weight-bold" style="    margin-right: 20px;">本文</span>
						 <span class="f-weight-bold">テキスト挿入</span>
						 <div class="attach-content">
							<div class="attach-content-item" @click="addOptionContent('{AFF_NAME}')">
								アフィリエイター名
							</div>
						 </div>
					 </div>
					 <textarea class="form-control input-border input-font"
							   v-model="setting_email.content"
							   v-validate="{required: true}"
							   :data-vv-as="'本文'"
							   name="content"
							   rows="10"></textarea>
					 <div class="text-danger text-error" v-show="errors.has('content')">@{{ errors.first('content') }}</div>

				 </div>
			 </div>



			<div class="d-flex justify-content-between">
				<button type="button" @click="saveSetting" class="btn btn-sns-line btn-sns-line-lg btn-sns-line-success btn-lg"
						style="background: #E5F5EC 0% 0% no-repeat padding-box;    border: none;
box-shadow: 0px 1px 0px #00000033; color: #08BF5A!important;width: 200px; margin-top: 20px; margin-bottom: 15px;">内容確認にすすむ</button>
			</div>
			 <button type="button"
					 onclick="location.href = '/admin/affiliate-management?tabActive=send-email'"
					 class="btn btn-sns-line btn-sns-line-lg btn-sns-line-dark btn-lg" style="background: #E0E0E0 0% 0% no-repeat padding-box;
box-shadow: 0px 1px 0px #00000033;    border: none; width: 105px; color: #8F9293 !important;">戻る</button>
		 </div>
	</div>

@endsection
@push('js')
	<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/bootstrap-timepicker.js"></script>
	<script>
        $(document).ready(function () {

            $('.timepicker').timepicker({
                showMeridian: false,
                minuteStep: 1,
                showSeconds: false,
                scrollbar: true,
                appendWidgetTo: "body",
            }).change(function(e) {
				let fieldName = $(this).attr('data-field_name');
                let val = $(this).val();
                console.log(fieldName)
                aspManagement.setting_email[fieldName] = val;
            });

            let listInputDate = document.getElementsByClassName('showpicker');
            for (let i = 0; i < listInputDate.length; i++) {
                listInputDate[i].addEventListener('click', function (event) {
                    event.target.showPicker();
                })
            }

        });
		let masterId = '{{ $masterId }}';
        let level = @json($level);
        let settingEmail = @json($settingEmail);
        console.log(settingEmail)
	</script>
	<script src="/js/admin/asp-management/add-email.js?v={{config('sns-line.version')}}"></script>
@endpush