@extends('layout.basic.main')
@section('title', 'ASP管理 運営（LP設定）')
@push('css')
	<link rel="stylesheet" href="/css/base/main.css?v={{config("sns-line.version")}}">
	<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")}}">

@endpush
@section('content')
	<div id="add-landing-page" v-cloak>
	 	 <div class="mt-3">
			 <div class="d-flex align-items-center">
				 <h4 class="sub-title">LP設定</h4>
				 <h4 class="sub-title" style="margin-left: 25px; margin-right: 10px">公開状態</h4>
				 <div class="d-flex align-items-center">
					 <label class="c-switch">
						 <input type="checkbox" value="1" v-model="landing_page.status">
						 <span class="c-slider round"></span>
					 </label>
				 </div>
			 </div>

			 <div class="box-content mt-3">
				  <div>
					  <div class="bor-title-c" style="margin-bottom: 0px">
						  <span>管理名</span>
					  </div>
					  <div class="form-group">
						  <span class="float-right text-note-input">@{{ landing_page.name.length }}/10</span>
						  <input type="text"
								 v-model="landing_page.name"
								 v-validate="{required: true, max: 10}"
								 :data-vv-as="'管理名'"
								 name="name"
								 class="form-control input-border input-font">
						  <div class="text-danger text-error" v-show="errors.has('name')">@{{ errors.first('name') }}</div>
					  </div>
				  </div>

				  <div class="mt-3">
					  <div class="bor-title-c"  >
						  <span>LPのURL</span>
					  </div>
					  <input type="text"
							 v-model="landing_page.url"
							 v-validate="`required|is_url`"
							 :data-vv-as="'LPのURL'"
							 name="url"
							 class="form-control input-border input-font">

					  <div class="text-danger text-error" v-show="errors.has('url') || errorsCustom.url">@{{ errors.first('url') ? errors.first('url') : errorsCustom.url }}</div>
				  </div>
			 </div>

			 <div class="note mt-3">
				<div class="text-13px">コンバージョンボタン埋め込み用コード</div>
				 <div class="d-flex mt-3">
					 <input type="text" placeholder="保存ボタンクリック後に表示されます" disabled v-model="landing_page.conversion_code"
							style="background-color: white; text-align: center"
							class="form-control flex-grow-1 input-border">
					 <div class="btn-copy-conversion-code input-border" @click="copyToClipboard(landing_page.conversion_code, $event)">
						 <svg xmlns="http://www.w3.org/2000/svg" width="12.955" height="15" viewBox="0 0 12.955 15">
							 <path id="Icon_material-content-copy" data-name="Icon material-content-copy" d="M12.545,1.5H4.364A1.368,1.368,0,0,0,3,2.864v9.545H4.364V2.864h8.182Zm2.045,2.727h-7.5A1.368,1.368,0,0,0,5.727,5.591v9.545A1.368,1.368,0,0,0,7.091,16.5h7.5a1.368,1.368,0,0,0,1.364-1.364V5.591A1.368,1.368,0,0,0,14.591,4.227Zm0,10.909h-7.5V5.591h7.5Z" transform="translate(-3 -1.5)" fill="#fff"></path>
						 </svg>
					 </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-save btn-lg" style=" width: 200px; margin-top: 20px; margin-bottom: 15px;">保存</button>
				<button type="button" @click="ajaxDeleteLandingPage" class="btn btn-sns-line btn-sns-line-lg btn-lg"
						style="box-shadow: 0px 1px 0px #00000033;
						 width: 200px;
						  margin-top: 20px;
						 margin-bottom: 15px;
						  background-color: #FFDAD8;
						  color: #F44336 !important;
						  ">このLPを削除する</button>
			</div>
			 <button type="button"  @click="backScreen" class="btn btn-sns-line btn-sns-line-lg btn-back btn-lg" style=" width: 150px;">戻る</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>
		let botIdSetting = '{{ $botId }}';
        var bot_setting_aff_id = '{{ $botSettingAffId }}';
        let landing_page = null;
        let typeSetting = '{{ $typeSetting }}';

        @if(!empty($landingPage))
            landing_page = @json($landingPage);
        @endif
	</script>
	<script src="/js/admin/asp-management/add-landing-page.js?v={{config('sns-line.version')}}"></script>
@endpush