@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")}}">

@endpush
@section('content')
	<div id="detail-aff" v-cloak>
	 	 <div class="mt-3">
			 <h2 class="title">アフィリエイター詳細</h2>
			 <div class="mt-3">
				 <ul class="list-unstyled tab-setting" style="padding-right: 30px">
					 <li>
						 <a class="item-tab-setting" :class="{'active': tab == 'basic-setting'}" href="#detail-aff" @click="tab = 'basic-setting'">基本情報</a>
					 </li>
{{--					 <li>--}}
{{--						 <a class="item-tab-setting" :class="{'active': tab == 'setting-start-end'}" href="#detail-aff" @click="tab = 'setting-start-end'">追加時アクション</a>--}}
{{--					 </li>--}}
					 <li>
						 <a class="item-tab-setting" :class="{'active': tab == 'history-commission'}" href="#detail-aff" @click="tab = 'history-commission'">報酬支払履歴</a>
					 </li>
				 </ul>
				 <div class="mt-4" v-show="tab == 'basic-setting'" id="basic-setting">
					 <div class="">
						 <div class="bor-title-c">
							 <span>基本情報（クリックで編集）</span>
						 </div>
						 <div class="row-content-setting position-relative" style="border-bottom: none; margin: 0;">
							 <div class="description desc-title">報酬受取状況</div>
							 <div class=" right-item bg-enable-green" >
								 <select name="" class="form-control input-border input-light"
										 :class="{'bg-enable-green': aff.status_commission == 1, 'bg-enable-black': aff.status_commission == 0}"
										 id=""
										 v-model="aff.status_commission"
										 style="font-weight: lighter;">
									 <option value="1" style="font-weight: lighter; color:#08BF5A ;">有効</option>
									 <option value="0" style="font-weight: lighter;">無効</option>
								 </select>
								 <i class="far fa-angle-down" style="font-size: 22px; right: 25px"></i>
							 </div>

						 </div>
						 <div class="row-content-setting position-relative" style="border-bottom: none; margin: 0;">
							 <div class="description desc-title">登録日</div>
							 <div class="bg-enable right-item">
								 <input type="text" disabled
										v-model="aff.created_at"
										class="form-control input-border input-light">
							 </div>

						 </div>
						 <div class="row-content-setting position-relative" style="border-bottom: none; margin: 0;">
							 <div class="description desc-title">ID</div>
							 <div class="bg-enable right-item">
								 <input type="text" disabled
										v-model="aff.id"
										class="form-control input-border input-light">
							 </div>
						 </div>
						 <div class="row-content-setting position-relative" style="border-bottom: none; margin: 0;">
							 <div class="description desc-title">アフィリエイター名</div>
							 <div class="bg-enable right-item">
								 <input type="text" disabled
										v-model="aff.username"
										class="form-control input-border input-light">
							 </div>
						 </div>
						 <div class="row-content-setting position-relative" style="border-bottom: none; margin: 0;">
							 <div class="description desc-title">メールアドレス</div>
							 <div class="bg-enable right-item">
								 <input type="text" disabled
										v-model="aff.email"
										class="form-control input-border input-light">
							 </div>
						 </div>
						 <div class="row-content-setting position-relative" style="border-bottom: none; margin: 0;">
							 <div class="description desc-title">ログインパスワード</div>
							 <div class="bg-enable right-item">
								 <input type="password" disabled
										 value="12345678"
										class="form-control input-border input-light">
							 </div>
						 </div>
						 <div class="row-content-setting position-relative">
							 <div class="description desc-title">現在のランク</div>
							 <div class="bg-enable right-item">
								 <select name="" class="form-control input-border input-light"
										 v-model="aff.rank">
									 <option :value="rank.rank" v-for="(rank, indexRank) in level" style="font-weight: lighter;">@{{ rank.name }}</option>
								 </select>
								 <i class="far fa-angle-down" style="font-size: 22px; right: 25px"></i>
							 </div>
						 </div>
					 </div>
					 <div class=" mt-3">
						 <div class="bor-title-c">
							 <span>口座情報（クリックで編集）</span>
						 </div>
						 <div class="row-content-setting position-relative" style="border-bottom: none; margin: 0;">
							 <div class="description desc-title">銀行名</div>
							 <div class="right-item">
								 <input type="text"
										v-model="aff.bank_name"
										class="form-control input-border input-light">
							 </div>

						 </div>
						 <div class="row-content-setting position-relative" style="border-bottom: none; margin: 0;">
							 <div class="description desc-title">金融機関コード</div>
							 <div class="right-item">
								 <input type="text"
										v-model="aff.bank_code"
										class="form-control input-border input-light">
							 </div>

						 </div>
						 <div class="row-content-setting position-relative" style="border-bottom: none; margin: 0;">
							 <div class="description desc-title">支店名</div>
							 <div class="right-item">
								 <input type="text"
										autocomplete="off"
										v-model="aff.branch_name"
										class="form-control input-border input-light">
							 </div>
						 </div>
						 <div class="row-content-setting position-relative" style="border-bottom: none; margin: 0;">
							 <div class="description desc-title">支店コード</div>
							 <div class="bg-enable right-item">
								 <input type="text"
										autocomplete="off"
										v-model="aff.branch_code"
										class="form-control input-border input-light">
							 </div>
						 </div>
						 <div class="row-content-setting position-relative" style="border-bottom: none; margin: 0;">
							 <div class="description desc-title">口座種別</div>
							 <div class=" right-item">
								 <select name="" class="form-control input-border input-light"
										 v-model="aff.kind_acc_bank">
									 <option value="0" style="font-weight: lighter;">普通</option>
									 <option value="1" style="font-weight: lighter;">当座</option>
									 <option value="2" style="font-weight: lighter;">貯金</option>
								 </select>
								 <i class="far fa-angle-down" style="font-size: 22px; right: 25px"></i>
							 </div>
						 </div>
						 <div class="row-content-setting position-relative" style="border-bottom: none; margin: 0;">
							 <div class="description desc-title">口座番号</div>
							 <div class=" right-item">
								 <input type="number"
										v-model="aff.acc_bank_number"
										class="form-control input-border input-light">
							 </div>
						 </div>
						 <div class="row-content-setting position-relative">
							 <div class="description desc-title">口座名義</div>
							 <div class="bg-enable right-item">
								 <input type="text"
										autocomplete="off"
										v-model="aff.acc_bank_name"
										class="form-control input-border input-light">
							 </div>
						 </div>
					 </div>
				 </div>
				 <div class="mt-4" v-show="tab == 'history-commission'">
					<div class=" out-frame">
						<div style="display: flex;">
							<input type="text" disabled v-model="aff.username" style="background-color: #FFFFFF; border: none; width: 150px; padding-bottom: 15px;">
							<h5 style="padding-left: 10%; font-weight: bold;">全期間実績（2023/05/10~）</h5>
						</div>
						 <table class="table-statistics">
							 <tr>
								 <th>友だち紹介数</th>
								 <th>報酬発生数（率）</th>
								 <th>ブロック数（率）</th>
								 <th>24時間以内のブロック数（率）</th>
								 <th>未払い報酬額</th>
								 <th>支払済報酬額</th>
							 </tr>
							 <tr>
								 <td>@{{ formatNumber(statisticsCommission.totalFriendIntro) }}</td>
								 <td>@{{ formatNumber(statisticsCommission.totalCommissionGenerated) + '/' + statisticsCommission.percentCommissionGenerated + '%' }}</td>
								 <td>@{{ formatNumber(statisticsCommission.totalFriendBlock) + '/' + statisticsCommission.percentFriendBlock + '%' }}</td>
								 <td>@{{ formatNumber(statisticsCommission.totalFriendBlockIn24hours) + '/' + statisticsCommission.percentFriendBlockIn24hours + '%' }}</td>
								 <td>@{{ formatNumber(statisticsCommission.totalCommissionNotApprove) }}</td>
								 <td>@{{ formatNumber(statisticsCommission.totalCommissionApproved) }}</td>
							 </tr>
						 </table>
					</div>
					 <div class="mt-4 d-flex">
						 <div class="border-filter-month" style="margin-right: 15px">
							 <i class="far fa-chevron-left arrow"
								@click="minusMonth"
							 ></i>
							 <div class="position-relative">
								 <div class="border-input-date btn-showpicker" style="font-weight: lighter;">
									 <span id="text-month">@{{ moment(time, 'YYYY-MM').format('YYYY年MM月') }}</span>
									 <i class="fal fa-calendar"></i>
								 </div>
								 <input type="month"
										v-model="time"
										@change="changeMonth($event)"
										style="opacity: 0; position: absolute; bottom: -2px; z-index: -1;">
							 </div>
							 <i class="far fa-chevron-right arrow"
								@click="plusMonth"
							 ></i>
						 </div>

					 </div>
					 <div class="mt-3 out-frame out-frame-table"
						  style="display: flex; align-items: end; justify-content: space-between">
						 <table style="margin-bottom: 0px" class="table-main table-statistics">
							 <tr>
								 <th>友だち紹介数</th>
								 <th>報酬発生数（率）</th>
								 <th>ブロック数（率）</th>
								 <th>24時間以内のブロック数（率）</th>
								 <th>未払い報酬額</th>
								 <th>支払済報酬額</th>
							 </tr>
							 <tr>
								 <td>@{{ formatNumber(statisticsCommissionInMonth.totalFriendIntro) }}</td>
								 <td>@{{ formatNumber(statisticsCommissionInMonth.totalCommissionGenerated) + '/' + statisticsCommissionInMonth.percentCommissionGenerated + '%' }}</td>
								 <td>@{{ formatNumber(statisticsCommissionInMonth.totalFriendBlock) + '/' + statisticsCommissionInMonth.percentFriendBlock + '%' }}</td>
								 <td>@{{ formatNumber(statisticsCommissionInMonth.totalFriendBlockIn24hours) + '/' + statisticsCommissionInMonth.percentFriendBlockIn24hours + '%' }}</td>
								 <td>@{{ formatNumber(statisticsCommissionInMonth.totalCommissionNotApprove) }}</td>
								 <td>@{{ formatNumber(statisticsCommissionInMonth.totalCommissionApproved) }}</td>
							 </tr>
						 </table>
						 <div>
							 <button class="btn btn-sns-line btn-sns-line-md btn-E0E0E0-new"
									 @click="approveMultipleAff"
									 :class="{'bg-active-08BF5A-new': listResultIdSelected.length > 0}"
							 >一括ステータス変更</button>
							 <button class="btn btn-sns-line btn-sns-line-md"
									 @click="exportCsv"
									 style="margin-left: 8px;
							background: 0% 0% no-repeat padding-box padding-box rgb(255, 255, 255);
							 border: 1px solid rgb(224, 224, 224);
							  padding: 8px;
							">
								 <img src="/images/ic-download-0906-2x.png" style="width: 79%;">
							 </button>
						 </div>
					 </div>

					 <div class="mt-4 out-frame out-frame-table">
						 <table class="table table-size-small" >
							 <thead>
							 <tr>
								 <th style="max-width: 30px; width: 2%; padding-left: 20px !important;" class="text-left">
									 <label for="itemcheck_all">
										 <input type="checkbox" name="list_result_id" v-model="selectedResultId" class="custom-checkbox-index"></label>
								 </th>
								 <th style="width: 9%; min-width: 120px; text-align: left;">成約日時</th>
								 <th style="width: 9%;  min-width: 120px; text-align: left;">ブロック日時</th>
								 <th style="width: 8%; text-align: left;">報酬条件</th>
								 <th style="width: 8%; text-align: left">IPアドレス</th>
								 <th style="width: 14%; text-align: left">成約者名</th>
								 <th style="width: 8%; text-align: right">報酬額</th>
{{--								 <th style="width: 10%; text-align: center">追加時アクション</th>--}}
								 <th style="width: 8%; text-align: center">ステータス <br> （クリックで変更）</th>
							 </tr>
							 </thead>
							 <tbody>
							 <tr
									 v-for="(result, indexResult) in list_result_by_month"
									 :key="indexResult"
							 >
								 <td class="text-left">
									 <label for="itemcheck_all">
										 <input type="checkbox" :value="result.result_id" v-model="listResultIdSelected" name="list_result_id" class="custom-checkbox-index"></label>
								 </td>
								 <td class="text-left">@{{ formatDatetime(result.created_at) }}</td>
								 <td class="text-left">@{{ formatDatetime(result.time_block) }}</td>
								 <td class="text-left">@{{ getTypeLink(result.type_link) }}</td>
								 <td class="text-left">
									 <span :class="{'text-same-ip': same_ip_arr.includes(result.ip_reference)}">@{{ result.ip_reference }}</span>
								 </td>
								 <td class="text-left">
									 <a target="_blank" :href="'/basic/friendlist/my_page/'+ result.line_user_id" class="text-underline text-one-line" style="color: #5799DB !important;">@{{ result.friend_name }}</a>
								 </td>
								 <td class="text-right">@{{ formatNumber(result.total) }}</td>
								 <td class="text-center">
									 <button v-show="result.is_approved == 0"
											 @click="changeStatusApprove([result.result_id], 0, indexResult)"
											 class="btn-status btn-status-FFDAD8 btn-status-box-shadow">未承認</button>
									 <button v-show="result.is_approved == 1"
											 @click="changeStatusApprove([result.result_id], 1, indexResult)"
											 class="btn-status btn-status-E0E0E0 btn-status-box-shadow">承認済</button>
									 <button v-show="result.is_approved == 2"
											 class="btn-status btn-status-not-approve btn-status-box-shadow">拒否済み</button>
								 </td>
							 </tr>
							 </tbody>
						 </table>
						 <nav class="mt-5" style="clear: both">
							 <div class="f-weight-bold d-flex justify-content-end align-items-center">
								 <span>全@{{ totalRecord }}件中 @{{ from }}~@{{ to }}件を表示中</span>
								 <span style="padding-left: 40px; padding-right: 10px">表示件数</span>
								 <div class="position-relative">
									 <select class=" form-control per_page" v-model="per_page" @change="changePerpage" style="width: 70px; font-weight: lighter;">
										 <option value="100" style="font-weight: lighter;">100</option>
										 <option value="200" style="font-weight: lighter;">200</option>
										 <option value="500" style="font-weight: lighter;">500</option>
									 </select>
									 <i class="fas fa-angle-down"></i>
								 </div>
							 </div>
							 <ul class="pagination" style="float: right" v-if="last_page > 1">
								 <li v-if="page > 1">
									 <a href="#" aria-label="Previous" @click.prevent="changePage(page - 1)">
										 <i style="color:#08BF5A" class="fas fa-arrow-left"></i>
									 </a>
								 </li>
								 <li v-for="page_item in pagesNumber">
									 <a href="#" @click.prevent="changePage(page_item)"
										v-bind:class="[ page_item == isActived ? 'active' : '']"
										class=font-weight-bold>@{{ page_item }}</a>
								 </li>

								 <li  v-if="page < last_page">
									 <a href="#" aria-label="Next" @click.prevent="changePage(page + 1)">
										 <i style="color:#08BF5A" class="fas fa-arrow-right"></i>
									 </a>
								 </li>
							 </ul>
						 </nav>
					 </div>

				 </div>
				 <div class="d-flex justify-content-between">
					 <button type="button"
							 @click="saveSettingAffiliater"
							 class="btn btn-sns-line btn-sns-line-lg btn-save btn-lg" style=" width: 200px; margin-top: 20px; ">保存</button>
					 <button type="button" v-show="tab == 'basic-setting'"
							 @click="deleteAffiliater" class="btn btn-sns-line btn-sns-line-lg btn-lg"
							 style=" width: 200px;
							 margin-top: 20px;

							  background-color: #FFDAD8;
							  color: #F44336 !important;
							  box-shadow: 0px 1px 0px #00000033;

							  "
					 >
						 アフィリエイター削除</button>
				 </div>
				 <br>
				 <button type="button" @click="window.location.href = '{{ route('affiliate-management.index') }}'" class="btn btn-sns-line btn-sns-line-lg btn-back btn-lg" style=" width: 150px;">戻る</button>
			 </div>
		 </div>

	</div>

@endsection
@push('js')

	<script>
		$(function () {
            let btnShowPickers = document.getElementsByClassName("btn-showpicker");
            Array.from(btnShowPickers).forEach((button) => {
                console.log(button)
                button.addEventListener("click", (event) => {
                    console.log(button)
                    const input = button.nextElementSibling;

                    try {
                        input.showPicker();
                    } catch (error) {
                        window.alert(error);
                    }
                });
            });
		})
		let aff = @json($aff);
		let level = @json($level);
		let botIdSettingAff = '{{ $botId }}';
        let statisticsCommission = @json($statisticsCommission);
		let masterId = '{{ $master_id }}';
	</script>
	<script src="/js/admin/asp-management/detail-aff.js?v={{config('sns-line.version')}}"></script>
@endpush