@extends('layout.basic.main')
@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')}}">
	<style>
		.note-normal{
			color: #222222;
			font-weight: 300;
			font-size: 14px;
		}
		.a_term{
			color: #5799DB;
			font-weight: 300;
			font-size: 14px;
			margin-left: 5px;
		}
		.tt_role{
			color: #222222;
			font-weight: 600;
			font-size: 14px;
		}
		.title{
			font-weight: 600;
            font-size: 20px;
            color: #222222;
			margin-bottom:10px ;

		}
		.content-trial{
			margin-top: 45px;
		}
		.start-trial{
			/*background: #F4FBF2 0% 0% no-repeat padding-box;*/
			background: #F6FCF5 0% 0% no-repeat padding-box;
			border-radius: 10px;
			width: 418px;
			height: 216px;
			position: relative;
		}
		.btn-title-top{
			font-size: 14px;
			font-weight: 600;
			color: #FFFFFF;
			background: #08BF5A;
			text-align: center;
			width: 150px;
			padding-top: 4px;
			padding-bottom: 6px;
			border-radius: 108px;
			opacity: 1;
			position: absolute;
			top: -14px;
			left: 126px;
		}
		.line-start{
			border-bottom: 1px solid rgb(8, 191, 90);
			width: 20px;
			transform: rotate(44deg);
		}
		.line-end{
			border-top: 1px solid rgb(8, 191, 90);
			width: 20px;
			transform: rotate(131deg);
		}
		.txt-title{
			color: #08BF5A;
			font-weight: 600;
			font-size: 20px;
			margin-left: 20px;
			margin-right: 20px;
		}
		.group-txt{
			display: flex;
			margin-left: 68px;
			align-items: baseline;
        }
		.box_ct{
			position: relative;
			padding-top: 28px;
		}
		.btn-start-trial{
			font-size:16px;
			font-weight: 600;
			color:#08BF5A !important;
			background: #FFFFFF 0% 0% no-repeat padding-box;
			box-shadow: 0px 2px 4px #00000029;
			border-radius: 3px;
			width: 300px;
			height: 50px;
			border: unset;
			margin-left: 57px;
		}
		.upver{
			width: 418px;
			height: 216px;
			/*background: #EDF4FB 0% 0% no-repeat padding-box;*/
			background: #F1F6FC 0% 0% no-repeat padding-box;
			border-radius: 10px;
			margin-left: 28px;
		}
		.btn-upver{
			font-size:16px;
			font-weight: 600;
			color:#5799DB !important;
			background: #FFFFFF 0% 0% no-repeat padding-box;
			box-shadow: 0px 2px 4px #00000029;
			border-radius: 3px;
			width: 300px;
			height: 50px;
			border: unset;
			margin-left: 57px;
		}
		.upver-txt{
			text-align: center;
			color: #5799DB;
			font-weight: 600;
			font-size: 20px;
		}
		.txt-small{
			letter-spacing: 0px;
			color: #222222;
			font-weight: 300;
			font-size: 12px;
		}
		.box-note{
			background: #F8F8F8 0% 0% no-repeat padding-box;
			border-radius: 5px;
			padding: 16px 21px;
			line-height: 22px;
			max-width: 865px;
		}
		a:hover { color: #5799DB}
	</style>
@endpush
@section('content')
	<div id="asp-management-trial" v-cloak>
	 	 <div class="mt-3">
			 <h2 class="title">ASP管理</h2>
			 <div class="d-flex">
				 <div class="note-normal">ASP管理とは、エルメ上でアフィリエイトセンターを運営できる機能です。詳しくは</div>
				 <a class="a_term" target="_blank" href="https://lme.jp/manual/affiliate_center/">こちら</a>
			 </div>
			 <div class="tt_role">プロプランのみご利用可能です。</div>

			 <div class="content-trial d-flex">
				 <div class="start-trial">
					 <div class="btn-title-top">まずはお試し</div>
					 <div class="box_ct">
						 <div class="group-txt">
							 <img src="/images/line_1.png" style="width: 20px; height: 20px">
							 <div class="txt-title">7日間無料トライアル</div>
							 <img src="/images/line_2.png" style="width: 20px; height: 20px">
						 </div>
						 <div class="text-center">
							 <div class="note-normal" style="margin-top: 17px; margin-bottom: 25px;letter-spacing: 0px;">プロプランのみ利用可能な <br>ASP管理機能のトライアルができます。</div>
						 </div>
						 <button class="brn btn-sns-line btn-start-trial" v-on:click="startTrial">無料トライアルを開始する</button>
					 </div>

				 </div>

				 <div class="upver">
					 <div class="box_ct">
						 <div class="upver-txt">アップグレードして使用する</div>
						 <div class="text-center">
							 <div class="note-normal" style="margin-top: 17px; margin-bottom: 25px;letter-spacing: 0px;">プロプランにアップグレードすることで<br> 制限なくご利用いただけます。</div>
						 </div>
						 <button class="btn btn-sns-line btn-upver" type="button" v-on:click="upverProPlan">プロプランにアップグレードする</button>
					 </div>
				 </div>

			 </div>
			 <div class="txt-small" style="margin-left: 13px; margin-top: 13px;margin-bottom: 29px">※ 無料トライアルの開始は主管理者アカウントからのみ操作できます。</div>
			 <div class="box-note">
				 <div class="tt_role">トライアルでのご確認事項</div>
				 <div  class="txt-small" >・トライアル終了時に自動でプロプランに変更されることはございませんのご安心ください。 <br>
					 ・トライアル終了時までにプロプランに変更された場合、トライアル終了後もデータが引き継がれます。<br>
					 ・トライアル終了時までにプロプランに変更されていない場合、トライアル終了後にASP管理関連のデータはすべて削除されます。<br>
					 ・トライアル終了後にプロプランにアップグレードした場合でも、トライアル中のデータは引き継がれませんのでご注意ください。
				 </div>

			 </div>

		 </div>


	</div>

@endsection
@push('js')
	<script>


        let currentBotId = {{ $currentBotId }};
        let masterId = {{ $master_id }};
        let botContract = @json($botContract);
	</script>
	<script src="/js/admin/asp-management/asp-trial.js?v={{config('sns-line.version')}}"></script>
@endpush