@extends('style.master')

@section('home_title',' - 編輯會員資料')
@section('page_description','宇柏旅行社')

@section('page_style')
<script type="text/javascript" src="{{ url('/js/member.js?20200630') }}"></script>
<link href="{{ url('/css/register.css?001') }}" rel="stylesheet" type="text/css" />
@endsection

@section('page_content')

			<!-- FB Login -->
			<script>

				function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
					console.log('statusChangeCallback');
					console.log(response);                   // The current login status of the person.
					if (response.status === 'connected') {   // Logged into your webpage and Facebook.
						testAPI();
					} else {                                 // Not logged into your webpage or we are unable to tell.
						document.getElementById('status').innerHTML = 'Please log ' + 'into this webpage.';
					}
				}


				function checkLoginState() {               // Called when a person is finished with the Login Button.
					FB.getLoginStatus(function(response) {   // See the onlogin handler
						statusChangeCallback(response);
					});
				}


				window.fbAsyncInit = function() {
					FB.init({
					appId      : '{app-id}',
					cookie     : true,                     // Enable cookies to allow the server to access the session.
					xfbml      : true,                     // Parse social plugins on this webpage.
					version    : '{api-version}'           // Use this Graph API version for this call.
					});


					FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
						statusChangeCallback(response);        // Returns the login status.
					});
				};

				function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
					// 開始取得使用者資料
					FB.api('/me', {
							'fields': 'id,name,email,picture'
						}, function (response) {
							console.log(response.id);
							console.log(response.name);
							console.log(response.email);
							document.getElementById('fb_id').value = response.id;
							document.getElementById('fb_name').value = response.name;
							document.getElementById('fb_email').value = response.email;

							form_fb_bind.submit();
							// FB大頭照URL
							// http://graph.facebook.com/%7Bid%7D/picture?type=normal
						})
						// 結束取得使用者資料
				}

			</script>
			
			<!-- PAGE HEADER -->
			<section class="page-header-xs">
				<div class="container">

					<div class="icon"></div>
					<h1>會員資料<span>Member</span></h1>

					<!-- breadcrumbs -->
					<ol class="breadcrumb">
						<li><a href="{{ url('home') }}">首頁</a></li>
						<li><a href="#">會員專區</a></li>
						<li class="active">編輯會員資料</li>
					</ol><!-- /breadcrumbs -->

				</div>
			</section>
			<!-- /PAGE HEADER -->

			<!-- -->
			<section>
				<div class="container">

					<div class="row">
						<div class="col-md12 margin-bottom-50 center">
							<a href="{{ url('member') }}" class="btn btn-3d btn-blue"><i class="fa fa-user"></i> 編輯會員資料</a>
							<a href="{{ url('member/password') }}" class="btn btn-3d btn-blue"><i class="fa fa-expeditedssl"></i> 修改密碼</a>
							<a href="{{ url('member/order') }}" class="btn btn-3d btn-blue"><i class="fa fa-list-alt"></i> 訂位清單</a>
							<a href="{{ url('model/logout.php') }}" class="btn btn-3d btn-blue"><i class="fa fa-power-off"></i> 會員登出</a>
						</div>
					</div>
					
					<div class="row">


						<!-- REGISTER -->
						<div class="col-md-6 col-md-offset-3">

							<!-- ALERT -->
							<!-- <div class="alert alert-mini alert-danger margin-bottom-30">
								<strong>Oh snap!</strong> Password do not match!
							</div> -->
							<!-- /ALERT -->

							<div class="box-static box-transparent box-bordered padding-30">

								<div class="box-title margin-bottom-30">
									<h2 class="size-20">編輯會員資料</h2>
								</div>

								<form name="form_fb_bind" method="post" action="model/fb_bind.php">

									<!-- FB Data -->
									<input type="hidden" id="fb_id" name="fb_id" value="">
									<input type="hidden" id="fb_name" name="fb_name" value="">
									<input type="hidden" id="fb_email" name="fb_email" value="">

								</form>

								<form name="form_update" class="nomargin sky-form" action="model/member_update.php" method="post" enctype="multipart/form-data">
									<fieldset>

										<div class="row">
											<div class="form-group">
												
												<div class="col-md-12 col-sm-12" id="picture">
													<label class="input margin-bottom-10">
														<img src="" alt="" id="fb_picture">
													</label>
												</div>
												
												<div class="col-md-12 col-sm-12" id="bind">
													<form name="form_fb_bind" method="get" action="model/fb_bind2.php">

														<label>綁定FB帳號</label>
														
														<!-- The JS SDK Login Button -->
														<div id="fb-root"></div>
														<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v8.0&appId=683121202285444&autoLogAppEvents=1" nonce="11QVLdzP"></script>
														<label class="input margin-bottom-10">
															<div class="fb-login-button" data-size="large" data-button-type="login_with" data-layout="default" data-auto-logout-link="false" data-use-continue-as="true" data-width="" onlogin="checkLoginState();"></div>
														</label>

														<!-- Load the JS SDK asynchronously -->
														<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

													</form>
												</div>
												
												
												<div class="col-md-12 col-sm-12">
													<label>身份證號 <b>*</b></label>
													<label class="input margin-bottom-10">
														<i class="ico-append fa fa-user"></i>
														<input required="" type="text" id="id" name="id" class="form-control masked" data-format="a999999999"  data-placeholder="_"  placeholder="">
														<b class="tooltip tooltip-bottom-right">請輸入身份證號碼</b>
													</label>
												</div>

												<div class="col-md-12 col-sm-12">
													<label for="register:email">姓名 <b>*</b></label>
													<label class="input margin-bottom-10">
														<i class="ico-append fa fa-envelope"></i>
														<input required="" type="text" id="name" name="name">
														<b class="tooltip tooltip-bottom-right">請輸入姓名</b>
													</label>
												</div>

												<div class="col-md-12 col-sm-12">
													<label for="register:phone">出生日期 <b>*</b></label>
													<label class="input margin-bottom-10">
														<i class="ico-append fa fa-calendar-check-o"></i>
														<input required="" type="text" id="birthday" name="birthday" class="form-control masked" data-format="9999/99/99" data-placeholder="_" placeholder="YYYY/MM/DD">
														<b class="tooltip tooltip-bottom-right">請輸入您的出生日期</b>
													</label>
												</div>

												<div class="col-md-12 col-sm-12">
													<label for="register:phone">住家電話</label>
													<label class="input margin-bottom-10">
														<i class="ico-append fa fa-phone"></i>
														<input type="text" id="tel" name="tel">
														<b class="tooltip tooltip-bottom-right">請輸入住家電話號碼</b>
													</label>
												</div>

												<div class="col-md-12 col-sm-12">
													<label for="register:phone">聯絡手機 <b>*</b></label>
													<label class="input margin-bottom-10">
														<i class="ico-append fa fa-phone"></i>
														<input required="" type="text" id="phone" name="phone">
														<b class="tooltip tooltip-bottom-right">請輸入行動電話號碼</b>
													</label>
												</div>

												<div class="col-md-12 col-sm-12">
													<label for="register:email">聯絡地址</label>
													<label class="input margin-bottom-10">
														<i class="ico-append fa fa-map"></i>
														<input type="text" id="address" name="address">
														<b class="tooltip tooltip-bottom-right">請輸入聯絡地址</b>
													</label>
												</div>

												<div class="col-md-12 col-sm-12">
													<label for="register:email">E-mail</label>
													<label class="input margin-bottom-10">
														<i class="ico-append fa fa-envelope"></i>
														<input type="text" id="email" name="email">
														<b class="tooltip tooltip-bottom-right">請輸入電子郵件</b>
													</label>
												</div>

												<div class="col-md-12 col-sm-12">
													<label for="register:email">緊急聯絡人姓名</label>
													<label class="input margin-bottom-10">
														<i class="ico-append fa fa-child"></i>
														<input type="text" id="contact" name="contact">
														<b class="tooltip tooltip-bottom-right">請輸入緊急聯絡人姓名</b>
													</label>
												</div>

												<div class="col-md-12 col-sm-12">
													<label for="register:email">緊急聯絡人電話</label>
													<label class="input margin-bottom-10">
														<i class="ico-append fa fa-phone"></i>
														<input type="text" id="contact_tel" name="contact_tel">
														<b class="tooltip tooltip-bottom-right">請輸入緊急聯絡人電話</b>
													</label>
												</div>

											</div>
										</div>

										<hr />

										<input type="hidden" id="uid" name="uid" value="">

									</fieldset>

									<div class="row">
										<div class="col-md-12 center">
											<button type="submit" id="change" class="btn btn-primary" onclick="javascript:form_update.submit()"><i class="fa fa-check"></i> 儲存修改</button>
										</div>
									</div>

								</form>
								
							</div>

						</div>
						<!-- /REGISTER -->


					</div>

				</div>

			</section>
			<!-- / -->

			<script type="text/javascript" src="{{ url('/assets/plugins/jquery/jquery-2.2.3.min.js') }}"></script>

			
			
@endsection

@section('page_js')

@endsection