@extends('theme.master')
@section('title', '訂閱紀錄')
@section('content')

@include('admin.message')


<!-- about-home start -->
<section id="blog-home" class="blog-home-main-block profile-main-block">
    <div class="container">
        <h1 class="blog-home-heading text-white">{{ __('frontstaticword.PurchaseHistory') }}</h1>
    </div>
</section> 
<!-- about-home start -->

<div class="modal fade" id="cancel-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
	  <div class="modal-content">
		<div class="modal-header">
		  <h5 class="modal-title" id="cancel-modal-title"></h5>&nbsp;<h5 class="modal-title">明細</h5>
		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		  </button>
		</div>
		<div class="modal-body">
			<div class="cancel-modal-product d-flex">
				<span>購買項目 :</span>&nbsp;<span id="product-name"></span>
			</div>
			<div class="cancel-modal-op d-flex">
				<span>可累積</span>&nbsp;<span id="op"></span>&nbsp;<span>OpenPoint 點數</span>&nbsp;<span id="point" style="color: #7eb428"></span>
			</div>
			<div class="cancel-modal-price d-flex">
				<span>總金額 :</span>&nbsp;<span id="price"></span>&nbsp;<span>元</span>
			</div>
			<div class="cancel-modal-nett-amount d-flex">
				<span>付款金額 :</span>&nbsp;<span id="nett-amount"></span>&nbsp;<span>元</span>
			</div>
			<div class="cancel-modal-duringTime d-flex">
				<span>訂閱期間 :</span>&nbsp;<span id="startTime"></span>&nbsp;&nbsp;<span>~</span>&nbsp;&nbsp;<span id="expTime"></span>
			</div>
			<div class="cancel-modal-payStatus d-flex">
				<span>付款狀態 :</span>&nbsp;<span id="payStatus"></span>
			</div>
			<div class="cancel-modal-invoice d-flex">
				<span>發票號碼 :</span>&nbsp;<span id="invoice"></span>
			</div>

			<div class="cancel-model-detail">
				<table class="table">
					<thead id="other-head">
					  <tr>
						<th scope="col" style="text-align: center;">額外項目</th>
						<th scope="col" style="text-align: center;">價格</th>
					  </tr>
					</thead>
					<tbody id="other-detail">

					</tbody>
				  </table>
			</div>
			<div id="all-order">
				
			</div>
			
		</div>
	  </div>
	</div>
</div>
<!-- about-home end -->

<section id="purchase-block" class="purchase-main-block">
	<div class="container">
		<div class="row">
			<div class="orders col-4 text-center" data-tab>
				<h3 class="orders-btn active">{{ __('adminstaticword.Subscription') . __('adminstaticword.Content') }}</h3>
			</div>
			<div class="orders col-4 text-center" data-tab>
				<h3 class="orders-btn">{{ __('adminstaticword.Buy') . __('adminstaticword.Record') }}</h3>
			</div>
			<div class="orders col-4 text-center" data-tab>
				<h3 class="orders-btn">{{ __('adminstaticword.Coupon') . __('adminstaticword.Used') }}</h3>
			</div>
		</div>
	</div>

	<div id="subscription" class="container" data-purchase>
		@if($effectOrder)
		<div class="d-flex align-center">
			<div>
				<div class="cancel-modal-product d-flex">
					<span>{{ __('adminstaticword.SubscriptionPlans') }} :</span>&nbsp;<span id="product-name">@isset($effectOrder->subscription_plan) {{ $effectOrder->subscription_plan->name }} @else 此訂單無效 @endisset</span>
					@if($effectOrder->status == 6)
						<span class="ml-4 text-danger">已過期</span>
					@endif
				</div>
				<div class="cancel-modal-duringTime d-flex">
					<span>{{ __('frontstaticword.EnrollDuration')  }} :</span>&nbsp;<span id="startTime"></span>&nbsp;{{ $effectOrder->enroll_start }}&nbsp;<span>~</span>&nbsp;{{ $effectOrder->enroll_expire }} &nbsp;<span id="expTime"></span>
				</div>
			</div>
			<div class="unbind">
				@if($effectOrder)
					@if (Auth::User()->icashpay_token && $effectOrder->payment_method == 'icashpay')
					<div>
						<a href="{{ url('/icashpay_cancel_binding') }}" onclick="return confirm('是否確定要解綁此支付方式')" class="text-white">I Cash Pay 解綁</a>
					</div>
					@endif
					@if (Auth::User()->cathay_card_id && $effectOrder->payment_method == 'cathaybk')
					<div>
						<a href="{{ url('/cathaybk_cancel_binding') }}" onclick="return confirm('是否確定要解綁此支付方式')" class="text-white">信用卡解綁</a>
					</div>
					@endif
				@endif
			</div>
		</div>
			<br>
			@if ( isset($effectOrder->plus_channel_id) )
				<table class="table">
					<thead>
					<tr>
						<th scope="col">{{ __('frontstaticword.Plus') }}</th>
					</tr>
					</thead>
					<tbody id="other-detail">
						@foreach($plusOrders as $effectOrder)
						<tr>
							<td>{{ $effectOrder->plus_channel->name }}</td>
						</tr>
						@endforeach
					</tbody>
				</table>
			@endif

			@if ($effectOrder->status == 1 || $effectOrder->status == 2)
				@if($effectOrder->payment_method == 'ios_pay')
				<p class="mb-4 text-center">請至移致 IOS 手機 APP 取消訂閱，謝謝 !</p>
				@else
				<p class="mb-4 text-center">若取消訂閱，待訂閱時間結束後將不再累積獎勵點數。</p>
				<form action="{{ url('cancel_subscription') }}" method="post" class="d-flex" style="justify-content: center">
					@csrf
					<input type="hidden" name="cancelOrderId" class="cancelOrder" value="{{ $effectOrder->id }}">
					<button type="submit" class="btn btn-secondary hot-link w-50">{{  __('adminstaticword.CancelSubscription') }}</button>
				</form>
				@endif
			@endif
			@if ($effectOrder->status == 4)
				<form action="{{ url('reSubscription') }}" method="post" class="d-flex" style="justify-content: center">
					@csrf
					<input type="hidden" name="reSubscriptOrderId" class="cancelOrder" value="{{ $effectOrder->id }}">
					<button type="submit" class="btn btn-secondary hot-link w-50">{{ __('frontstaticword.ReSubscription') }}</button>
				</form>
			@endif
			@if ($effectOrder->status == 6)
				<a class="btn btn-secondary hot-link w-50 m-auto d-block" href="{{ route('subscriptions.show') }}">{{ __('frontstaticword.ReSubscription') }}</a>
			@endif
		@else
			@if ( isset($plan) )
				<div class="cancel-modal-product d-flex">
					<span>{{ __('frontstaticword.SubscriptionPlan') }} :</span>&nbsp;<span id="product-name">@if(isset($plan->subscription_id)){{ $plan->subscription_plan->name }}@endif</span>
				</div>
				<div class="cancel-modal-duringTime d-flex">
					<span>{{ __('frontstaticword.EnrollDuration') }} :</span>&nbsp;<span id="startTime"></span>&nbsp;{{$plan->enroll_start}}&nbsp;<span>~</span>&nbsp;{{$plan->enroll_expire}}&nbsp;<span id="expTime"></span>
				</div>
				<br>
				
				<table class="table">
					<thead>
					<tr>
						<th scope="col">{{ __('frontstaticword.Plus') }}</th>
					</tr>
					</thead>
					<tbody id="other-detail">
						@foreach($plusChannels as $plusChannel)
						<tr>
							<td>{{ $plusChannel->plus_channel->name }}</td>
						</tr>
						@endforeach
					</tbody>
				</table>
				<form action="{{ route('reSubscriptionOrder') }}" method="post" class="d-flex" style="justify-content: center">
					@csrf
					<input type="hidden" name="cancelOrderId" class="cancelOrder" value="{{ $plan->id }}">
					<button type="submit" class="btn btn-secondary hot-link w-50">{{ __('frontstaticword.ReSubscription') }}</button>
				</form>
			@else
				<h2>目前尚無{{ __('adminstaticword.SubscriptionPlans') }}</h2>
			@endif
		@endif
	</div>

	<div id="orders-table" class="container d-none" data-purchase>
		<div class="purchase-table table-responsive">
	        <table class="table">
			  <thead>
			    <tr>
	                <th class="purchase-history-heading">{{ __('frontstaticword.OrderID') }}</th>
				    <th class="purchase-text text-center">{{ __('frontstaticword.SubscriptionEndDate') }}</th>
				    <th class="purchase-text text-center purchase-rwd-none">{{ __('frontstaticword.PaymentStatus') }}</th>
				    <th class="purchase-text text-center purchase-rwd-none">{{ __('frontstaticword.Invoice') . __('adminstaticword.Number') }}號碼</th>
				    <th class="purchase-text text-center" >{{ __('frontstaticword.More') }}</th>
			    </tr>
			  </thead>
				@foreach($orders as $orderId => $order)
				
		            <div class="purchase-history-table">
		            	<tbody>
			            	<tr>
								{{-- 訂單號 --}}
								<td>
									{{ $orderId }}
								</td>
								{{-- 到期日 --}}
								<td class="text-center">
									@if ($order->enroll_expire)
										@if ( in_array( $order->status, [ 1, 2, 4, 6 ] ) )
											<div class="purchase-text">{{ date('Y m/d', strtotime($order->enroll_expire)) }}</div>			                   	
										@endif
									@endif   
									
							 	</td>
								{{-- 付款狀態 --}}
				                <td class="purchase-rwd-none">
				                	<div class="purchase-text text-center">
										@foreach ($status as $statusKey => $statusName)
											@if ($order->status == $statusKey)
												{{ $statusName }}
											@endif	
										@endforeach
				                	</div>
				                </td>
								{{-- 發票 --}}
				                <td class="purchase-rwd-none">
									@if($order->invoice_no)
										<div class="purchase-text text-center">
											{{$order->invoice_no}}
											<a class="ml-2" href="{{ route('invoice.download', ['id' => $order->invoice_no ]) }}">{{  __('frontstaticword.InvoiceDownload') }}點我下載</a>
										</div>
									@endif
				                </td>
								{{-- 查看更多 --}}
								<td>
									<div class="invoice-btn">
										<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#cancel-modal" 
										data-orderno="{{$orderId}}" data-order="{{ $order->id }}" data-name="@isset($order->subscription_plan) @if($order->subscription_plan != null){{ $order->subscription_plan->name }} @else {{ $order->plus_channel ? $order->plus_channel->name : '' }} @endif @endisset"
										data-starttime="{{$order->enroll_start}}" data-exptime="{{ $order->enroll_expire }}" 
										data-status="{{$order->status}}" data-invoice="{{$order->invoice_no}}" data-total="{{$order->total_price}}"
										data-child="{{ $order['child_order']}}" data-point="{{ $order->point_counted }}" data-nett="{{ $order->nett_amount }}"
										data-total_point="{{ $order->total_point }}"
										>
											{{ __('frontstaticword.More') }}
										</button>
									</div>
								</td>
				            </tr>
				        </tbody>
		            </div>
	            @endforeach
	        </table>
        </div>
	</div>

	<div id="coupon" class="container d-none" data-purchase>
		<div class="purchase-table table-responsive">
	        <table class="table">
			  <thead>
			    <tr>
	                <th class="purchase-history-heading text-center">{{ __('frontstaticword.OrderID') }}</th>
				    <th class="purchase-text text-center">{{ __('frontstaticword.CouponCode') }}</th>
				    <th class="purchase-text text-center">{{ __('frontstaticword.Extend') . '/' . __('frontstaticword.Discount') }}</th>
			    </tr>
			  </thead>
				<div class="purchase-history-table">
					<tbody>
						@foreach ($couponUseds as $couponUsed)
							<tr>
								{{-- 訂單號 --}}
								<td class="text-center">{{ $couponUsed->order_id }}</td>
								{{-- 優惠碼 --}}
								<td class="text-center purchase-text">{{ $couponUsed->coupon->code }}</td>
								{{-- 延展 / 折價 --}}
								<td class="purchase-text">
									@if($couponUsed->coupon->distype == 'fix')
									{{ __('frontstaticword.CouponCode') . $couponUsed->coupon->amount . __('frontstaticword.Dollar') }}
									@else
										{{ __('frontstaticword.Extend') . $couponUsed->coupon->amount . __('frontstaticword.Day') }}
									@endif
								</td>
							</tr>
						@endforeach
					</tbody>
				</div>
	        </table>
        </div>
	</div>

</section>

@endsection
@section('custom-script')
<script>
$( document ).ready(function() {
	$('#cancel-modal').on('show.bs.modal', function (e) {
		// 先清除
		$('#other-detail').html('')

		var orderStatus = $(e.relatedTarget).data('status')
		
		// 訂單
		$('#cancel-modal-title').text($(e.relatedTarget).data('orderno'))
		// 方案
		$('#product-name').text($(e.relatedTarget).data('name'))
		// 訂閱期間
		$('#startTime').text($(e.relatedTarget).data('starttime'))
		$('#expTime').text($(e.relatedTarget).data('exptime'))
		// 付款狀態
		if($(e.relatedTarget).data('status') == 0){
			$('#payStatus').text('等待付款')	
		}else if($(e.relatedTarget).data('status') == 1) {
			$('#payStatus').text('已收款')	
		}else if($(e.relatedTarget).data('status') == 2){
			$('#payStatus').text('完成')	
		}else if($(e.relatedTarget).data('status') == 3){
			$('#payStatus').text('已退款')	
		}else if($(e.relatedTarget).data('status') == 4){
			$('#payStatus').text('取消')	
		}else if($(e.relatedTarget).data('status') == 5){
			$('#payStatus').text('失敗')	
		}else if($(e.relatedTarget).data('status') == 6){
			$('#payStatus').text('過期')
		}else{
			$('#payStatus').text('等待付款中')	
		}
		// 發票
		$('#invoice').text($(e.relatedTarget).data('invoice'))
		// 方案金額
		$('#price').text($(e.relatedTarget).data('total'))
		// 總金額
		
			// $('.cancel-modal-nett-amount').attr("style", "display: none !important")
			$('#nett-amount').text($(e.relatedTarget).data('nett'))
		// 累積點數
		$('#op').text( $(e.relatedTarget).data('total_point') ) 
		// 已累積點數的判斷
		if( $(e.relatedTarget).data('total_point') > 0 ){
			if ($(e.relatedTarget).data('point') == '0') {
				$('#point').text('( 尚未贈點 )')
			}else{
				$('#point').text('( 已贈點 )')
			}
		}else{
			$('#point').text('')
		}
		

		const other = $(e.relatedTarget).data('child')

		if ($(e.relatedTarget).data('status') == 2 || $(e.relatedTarget).data('status') == 4 || $(e.relatedTarget).data('status') == 6) {

			if (other.length == 0) {
				$('#other-head').css('display', 'none')
			}else{
				$('#other-head').css('display', 'table-header-group')
			}

			$.each(other,function( i, e ){

				var set = `<tr>
								<td style="text-align: center;">${other[i].plus_name}</td>
								<td style="text-align: center;">$ ${other[i].total_amount}</td>
							</tr>`

				$('#other-detail').append(set)
			});
		}else{
			$('#other-head').css('display', 'none')
		}


		// 訂單號碼給 input
		$('.cancelOrder').val($(e.relatedTarget).data('order'))

	});

	const tabBtns = [...document.querySelectorAll('[data-tab]')]
	const purchases = [...document.querySelectorAll('[data-purchase]')]

	tabBtns.forEach( (tabBtn,i) => {
		tabBtn.addEventListener('click', e => {
			tabBtns.forEach( tabBtn => {
				tabBtn.querySelector('h3').classList.remove('active')
			})
			tabBtns[i].querySelector('h3').classList.add('active')
			purchases.forEach(purchase => {
				purchase.classList.add('d-none')
			})
			purchases[i].classList.remove('d-none')
		})
	})

});

</script>
@endsection