@extends('theme.master')
@section('title', '家庭方案')
@section('content')

@include('admin.message')

<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog">
	  <div class="modal-content">
		<div class="modal-header">
		  <h5 class="modal-title" id="staticBackdropLabel">新增成員</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="form-group">
			<label for="member-number">成員會員註冊時的手機號碼</label>
			<input id="member-number" class="form-control" type="text" maxlength="10" oninput ="value=value.replace(/[^\d]/g,'')"  placeholder="請輸入手機號碼">
			</div>
			<div id="text">　</div>
			<button id="search-btn" class="btn btn-secondary family-btn">查詢</button>
			<form action="{{ url('family-group/store/' )}}" method="post">
				@csrf
				<div class="user-info">
					<div id="accept-user" class="family-card d-flex ">

					</div>
				</div>
			</form>
		</div>
	  </div>
	</div>
</div>


<!-- 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.FamilyGroup') }}</h1>
    </div>
</section> 

<section id="purchase-block" class="purchase-main-block">
	<div class="container">
		<div class="family-area">
			@if (!Auth::User()->isUserInSubscription()) 
				<div class="family-card d-flex becomeMember" style="gap:1em; margin-bottom:3em;">
					<h2 style="margin-bottom:0;">訂閱方案已過期</h2>
					<a href="{{ route('subscriptions.show') }}" class="btn btn-secondary" title="subscriptions.show">
						購買方案
					</a>
				</div>
			@endif

			@foreach ($member as $user)
			<div class="family-card d-flex justify-space-between">
				@if ( $user->user_img )
					<img class="card-pic" src="{{ gc_asset('images/user_img/'.$user->user_img) }}">
				@else
					<img class="card-pic" src="{{ gc_asset('images/default/user.jpg') }}">
				@endif
				<p>{{$user->fname}}</p>
				<form action="{{ url('family-group/destroy') }}" method="post">
					@method('delete')
					@csrf
					<input type="hidden" name="user_id" value="{{ Auth::User()->id }}">
					<input type="hidden" name="user_delete" value="{{ $user->id }}">
					<button type="submit" class="btn btn-secondary" onclick="return confirm('你確定要刪除嗎?')">刪除</button>
				</form>
			</div>
			@endforeach
			
			<button type="button" class="btn btn-secondary d-block w-100" data-toggle="modal" data-target="#staticBackdrop">新增成員</button>
			  
		</div>
	</div>
	



</section>

@endsection
@section('custom-script')
<script>
function filter(str) { 
    var pattern=/[`~!@#$^&*()=|{}':;',\\\[\]\.<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？]/g;
    return str.replace(pattern,"");
}
document.addEventListener("DOMContentLoaded", function(){
	const searchBtn = document.querySelector('#search-btn')
	const textArea = document.querySelector('#text')
	const checkBtn = document.querySelector('#check-btn')
	searchBtn.addEventListener('click', function () {

		let phone = document.querySelector('#member-number').value
		const userId = document.querySelector('#user_id')
		const user = document.querySelector('#accept-user')
		
		let formData = new FormData()
		formData.append('_token', '{{ csrf_token() }}')
		formData.append('phone', filter(phone))
		// formData.append('phone', phone)
		fetch('{{ url("family-group/search") }}',{
			'method': 'POST',
			'body': formData
		}).then(function(response) {
			return response.json()
		}).then(result => {
			// console.log(result);
			if (result == 'typeError') {
				textArea.innerText = '格式錯誤'
			}else if (result == 'notFound') {
				textArea.innerText = '查無此人'
			}else if (result == 'repeatAccount') {
				textArea.innerText = '此帳號已被加入'
			}else if (result == 'mainAccount') {
				textArea.innerText = '主帳號不能加入自己'
			}else if(result == 'full'){
				textArea.innerText = '家庭方案人數已額滿'
			}else if(result == 'subscripted'){
				textArea.innerText = '此帳號為訂閱狀態'
			}else{
				textArea.innerText = '查詢 OK'
				user.innerHTML = `
					<input type="hidden" name="member_id" value="${result[0]}">
					<img class="card-pic" src="${result[1]}">
					
					<div class="user-info__text ml-3">
						<p>${result[3]}</p>
						<p>${result[2]}</p>
					</div>
					<button type="submit" id="check-btn" class="btn btn-secondary ml-auto">加入</button>
				`
			}
			
		});
	})
});
</script>
@endsection