@extends('layout.basic.main')
@section('title', '配信エラー')
@push('css')
	<link rel="stylesheet" href="/css/error_list/index.css?version={{ config('sns-line.version') }}">

@endpush
@section('content')
	<div id="error-list" v-cloak>
		 <div style="display: flex; align-items: center; justify-content: space-between">
			 <div class="title-page">配信エラー</div>
{{--			 <a href="https://lme.jp/manual/" class="btn btn-sns-line btn-sns-line-lg btn-manual"--}}
{{--			 >--}}
{{--				 <img src="/images/copy.png" style="margin-right: 6px">--}}
{{--				 マニュアル--}}
{{--			 </a>--}}
		 </div>

		<div class="header">
			<div class="tab">
				<div class="item-tab"
					 :class="{'active-tab': tab_active == 'unconfirm'}"
					 @click="changeTab('unconfirm')"
				>
					未確認エラー
				</div>
				<div class="item-tab"
					 :class="{'active-tab': tab_active == 'registered_send'}"
					 @click="changeTab('registered_send')"
				>
					再送登録済み
				</div>
				<div class="item-tab"
					 :class="{'active-tab': tab_active == 'history_send'}"
					 @click="changeTab('history_send')"
				>
					再送済み履歴
				</div>
				<div class="item-tab"
					 :class="{'active-tab': tab_active == 'reason_error'}"
					 @click="changeTab('reason_error')"
				>
					エラー原因一覧
				</div>
			</div>
			<div style="display: flex; align-items: center; padding-bottom: 10px" v-show="tab_active != 'reason_error'">
				<span class="note-show">表示件数：</span>
				<div style="position: relative; width: 100px;  ">
					<select class="form-control per-page-select"
						v-model="pagination.per_page"
							@change="initDataError(1)"
					>
						<option
								v-for="(perPage, index) in list_per_page"
								:value="perPage">@{{ perPage }}件</option>
					</select>
					<i class="fa fa-angle-down incon_down" style="pointer-events: none; right: 10px; top: 50%; transform: translateY(-50%); font-size: 20px; position: absolute; color: #222222 !important;"></i>
				</div>
				<span class="number-item">@{{ pagination.last_page > 0 ? ((pagination.current_page * pagination.per_page) - pagination.per_page + 1) : 0 }} 〜 @{{ pagination.current_page < pagination.last_page ? (pagination.current_page * pagination.total_item_page)  : pagination.total }} / @{{ pagination.total }}</span>

				<i class="fas fa-chevron-left control-page"
				   @click="prevPage"
{{--				   :class="{disabled: pagination.prev_page == false}"--}}
				   :style="{color: pagination.current_page == 1 ? '#F8F8F8' : '#2B2F36'}"

				   style="margin-right: 10px"></i>
				<i class="fas fa-chevron-right control-page"
				   @click="nextPage"
{{--				   :class="{disabled: pagination.next_page == false}"--}}
				   :style="{color: pagination.current_page == pagination.last_page || pagination.last_page <= 0 ? '#F8F8F8' : '#2B2F36'}"
				></i>
			</div>
		</div>

		<div class="frame-content" v-show="tab_active != 'reason_error'">
			<div class="menu-left">
				<div class="item-menu"
					:class="{'active-menu': type == 'chat11'}"
					 @click="changeType('chat11')"
				>
					1:1チャット

					<div class="number-message-error"
						  v-show="tab_active == 'unconfirm' && total_chat11_un_confirm > 0"
					>@{{ total_chat11_un_confirm < 100 ? total_chat11_un_confirm : 99 + '+' }}</div>
				</div>
				<div class="item-menu"
					 @click="changeType('send_all')"
					 :class="{'active-menu': type == 'send_all'}"
				>
					メッセージ配信
					<div class="number-message-error"
						  v-show="tab_active == 'unconfirm' && total_send_all_un_confirm > 0"
					>@{{ total_send_all_un_confirm < 100 ? total_send_all_un_confirm : 99 + '+'}}</div>
				</div>
				<div class="item-menu"
					 @click="changeType('step')"
					 :class="{'active-menu': type == 'step'}"
				>
					ステップ配信

					<div class="number-message-error"
						  v-show="tab_active == 'unconfirm' && total_scenario_un_confirm > 0"
					>@{{ total_scenario_un_confirm < 100 ? total_scenario_un_confirm : 99 + '+' }}</div>
				</div>
				<div class="item-menu"
					 @click="changeType('other')"
					 :class="{'active-menu': type == 'other'}"
				>
					その他メッセージ

					<div class="number-message-error"
						  v-show="tab_active == 'unconfirm' && total_other_un_confirm > 0"
					>@{{ total_other_un_confirm < 100 ? total_other_un_confirm : 99 + '+' }}</div>
				</div>
			</div>
			<div class="content-right">
				@include('basic.error_list.v2.table-unconfirm')
				@include('basic.error_list.v2.table-registered')
				@include('basic.error_list.v2.table-sent')

				<div v-show="tab_active != 'reason_error' && messages.length > 0">
					<div class="info-paginate">
						@{{  (pagination.current_page * pagination.per_page) - pagination.per_page + 1 }} 〜 @{{ pagination.current_page < pagination.last_page ? (pagination.current_page * pagination.total_item_page)  : pagination.total }}件 表示中
					</div>
					<pagination
							:pagination_data="pagination"
							key_storage="error_message"
							v-on:get_data="initDataError"
					></pagination>
				</div>


				<div class="frame-bottom" v-show="tab_active != 'reason_error' && tab_active != 'history_send'">
					<div class="number-item-select">
						一括操作 @{{ select_all_page ? total_record_all_not_retry : selected.length }} 件 選択中
					</div>

					<button class="btn btn-sns-line btn-change-time-send"
							:disabled="selected.length == 0"
						@click="showModalSettingAll"
					>再送タイミング登録</button>

					<button class="btn btn-sns-line btn-delete-time-send"
							:disabled="selected.length == 0"
						@click="showModalConfirmDeleteMessage"
					>エラーメッセージ削除</button>
				</div>
			</div>
		</div>

		<div v-show="tab_active == 'reason_error'">
			<table class="table message-error-table">
				<thead>
				<tr>
					<th scope="col" style="width: 16% !important;color: #222222 !important; text-align: left; font-weight: 600 !important;">
						エラーコード
					</th>
					<th scope="col" style="color: #222222 !important; text-align: left; font-weight: 600 !important;">
						エラー原因
					</th>
				</tr>
				</thead>
				<tbody>

				@foreach($tableErrorCode as $index => $errorCode)
{{--					<tr v-for="(item, index) in tableErrorCode"--}}
{{--					>--}}
{{--						<td style="text-align: left">--}}
{{--							<span>@{{ item.code }}</span>--}}
{{--						</td>--}}
{{--						<td style="font-size: 14px; text-align: left">--}}
{{--							<span v-html='item.error_message'></span>--}}
{{--							<div>--}}
{{--							<span v-show="index < 3"--}}
{{--								  style="color: #F44336; font-weight: 300; font-size: 14px"--}}
{{--							>(※) エルメの契約を有料プランにアップグレードしても、配信エラーは解消しません。</span>--}}
{{--							</div>--}}
{{--						</td>--}}
{{--					</tr>--}}
						<tr
						>
							<td style="text-align: left">
								<span style="color: #222222; font-size: 16px">{{ $errorCode['code'] }}</span>
							</td>
							<td style="font-size: 14px; text-align: left">
								<span style="white-space: pre; color: #222222">{!! $errorCode['error_message'] !!}</span>

								@if(in_array($errorCode['code'], ['001', '002', '003']))
									<div style="margin-top: 10px">
										<span
												style="color: #F44336; font-weight: 300; font-size: 14px"
										>(※) エルメの契約を有料プランにアップグレードしても、配信エラーは解消しません。</span>
									</div>
								@endif
							</td>
						</tr>

				@endforeach

				</tbody>
			</table>
		</div>

		<modal-detail-message ref="modal-detail-message"></modal-detail-message>
		@include('basic.error_list.v2.modal-setting-schedule-all')
		@include('basic.error_list.v2.modal-confirm-delete-all')
	</div>
	@include('basic.error_list.v2.modal-detail-message')
@endsection
@push('js')
	<script>
		var tableErrorCode = @json($tableErrorCode);

        console.log(tableErrorCode, 'tableErrorCode')
	</script>
	<script src="/js/pagination.js?version={{ config('sns-line.version') }}"></script>
	<script src="/js/error_list/index_v2.js?version={{ config('sns-line.version') }}"></script>
@endpush