@extends('layouts.app')

@section('content')
		<div class="m-subheader ">
			<div class="d-flex align-items-center">
				<div class="mr-auto">
					<h3 class="m-subheader__title ">My Profile</h3>
				</div>
			</div>
		</div>
		<div class="m-content">
			@if(Session::has('psuccess'))
				<div class="alert alert-success">
					<button type="button" class="close" data-dismiss="alert">×</button> <i class="fa fa-ban-circle"></i>
					{!! Session::get('psuccess') !!}
				</div>
			@endif
			<div class="row">
				<div class="col-xl-3 col-lg-4">
					<div class="m-portlet m-portlet--full-height   m-portlet--rounded">
						<div class="m-portlet__body">
							<div class="m-card-profile">
								<div class="m-card-profile__title m--hide">
									Your Profile
								</div>
								<div class="m-card-profile__pic">
									<div class="m-card-profile__pic-wrapper">
										<img src="{{ asset("images/user.jpg") }}" alt=""/>
									</div>
								</div>
								<div class="m-card-profile__details">
									<span class="m-card-profile__name">{{ Auth::user()->name }}</span>
									<a href="#" class="m-card-profile__email m-link">{{ Auth::user()->email }}</a>
								</div>
							</div>
							<ul class="m-nav m-nav--hover-bg m-portlet-fit--sides">
								<li class="m-nav__separator m-nav__separator--fit"></li>
								<li class="m-nav__section m--hide">
									<span class="m-nav__section-text">Section</span>
								</li>
								<li class="m-nav__item">
									<a href="/profile" class="m-nav__link">
										<i class="m-nav__link-icon flaticon-profile-1"></i>
										<span class="m-nav__link-title">
											<span class="m-nav__link-wrap">
												<span class="m-nav__link-text">My Profile</span>
											</span>
										</span>
									</a>
								</li>
								<li class="m-nav__item">
                                    <a href="{{ route('activities') }}" class="m-nav__link">
									    <i class="m-nav__link-icon flaticon-share"></i>
										<span class="m-nav__link-text">Activity</span>
									</a>
								</li>
							</ul>

						</div>
					</div>
				</div>
				<div class="col-xl-9 col-lg-8">
					<div class="m-portlet m-portlet--full-height m-portlet--tabs   m-portlet--rounded">
						<div class="m-portlet__head">
							<div class="m-portlet__head-tools">
								<ul class="nav nav-tabs m-tabs m-tabs-line   m-tabs-line--left m-tabs-line--primary" role="tablist">
									<li class="nav-item m-tabs__item">
										<a class="nav-link m-tabs__link active" data-toggle="tab" href="#m_user_profile_tab_1" role="tab">
											<i class="flaticon-share m--hide"></i>
											Update Profile
										</a>
									</li>
									<li class="nav-item m-tabs__item">
										<a class="nav-link m-tabs__link" data-toggle="tab" href="#m_user_profile_tab_2" role="tab">
											Change Password
										</a>
									</li>
								</ul>
							</div>
							<div class="m-portlet__head-tools">
								<ul class="m-portlet__nav"><li class="m-portlet__nav-item m-portlet__nav-item--last"></li></ul>
							</div>
						</div>
						<div class="tab-content">
							<div class="tab-pane active" id="m_user_profile_tab_1">
								<form class="m-form m-form--fit m-form--label-align-right">
									<div class="m-portlet__body">
										<div class="form-group m-form__group m--margin-top-10 m--hide">
											<div class="alert m-alert m-alert--default" role="alert">
												The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
											</div>
										</div>

										<div class="form-group m-form__group row">
											<div class="col-9 ml-auto">
												<h3 class="m-form__section">1. Personal Details</h3>
											</div>
										</div>

										<div class="form-group m-form__group row">
											<label for="example-text-input" class="col-3 col-form-label">Full Name</label>
											<div class="col-6">
												{{ Form::text('name', Auth::user()->name, array('class' => 'form-control m-input', 'disabled' => 'disabled') ) }}
											</div>
										</div>
										<div class="form-group m-form__group row">
											<label for="example-text-input" class="col-3 col-form-label">Occupation</label>
											<div class="col-6">
												<input class="form-control m-input" type="text" value="CTO">
											</div>
										</div>
										<div class="form-group m-form__group row">
											<label for="example-text-input" class="col-3 col-form-label">Phone No.</label>
											<div class="col-6">
												<input class="form-control m-input" type="text" value="+456669067890">
											</div>
										</div>
									</div>
									<div class="m-portlet__foot m-portlet__foot--fit">
										<div class="m-form__actions">
											<div class="row">
												<div class="col-3">
												</div>
												<div class="col-6">
													<button type="reset" class="btn btn-accent m-btn m-btn--air btn-primary">Save changes</button>&nbsp;&nbsp;
													<button type="reset" class="btn btn-secondary m-btn m-btn--air m-btn--custom">Cancel</button>
												</div>
											</div>
										</div>
									</div>
								</form>
							</div>
							<div class="tab-pane " id="m_user_profile_tab_2">
								{{ Form::open(array('url' => 'profile/passwordSave', 'role'=>'form', 'class'=>'m-form m-form--fit m-form--label-align-right')) }}
									<div class="m-portlet__body">
										<div class="form-group m-form__group row">
											@if(Session::has('password_success'))
												<div class="alert alert-success col-12">
													{!! Session::get('password_success') !!}
												</div>
											@endif
										</div>
										<div class="form-group m-form__group row">
												<div class="col-9 ml-auto">
													<h3 class="m-form__section">Change Password</h3>
												</div>
										</div>
										<div class="form-group m-form__group row">
											<label class="col-3 col-form-label">New password</label>
											{{ Form::password('password', array('class'=>'form-control col-6')) }}
											<div class="col-3">&nbsp;</div>
											<div class="clearfix"></div>
											<div class="col-3">&nbsp;</div>
											<div class="col-6">{!! $errors->first('password', '<span class="error">:message</span>') !!}</div>
										</div>
										<div class="form-group m-form__group row">
											<label class="col-3 col-form-label">Confirmed password</label>
											{{ Form::password('password_confirmation', array('class'=>'form-control col-6')) }}
											<div class="col-3">&nbsp;</div>
											<div class="clearfix"></div>
											<div class="col-3">&nbsp;</div>
											<div class="col-6">{!! $errors->first('password_confirmation', '<span class="error">:message</span>') !!}</div>
										</div>
									</div>
									<div class="m-portlet__foot m-portlet__foot--fit">
										<div class="m-form__actions">
											<div class="row">
												<div class="col-3">
												</div>
												<div class="col-6">
													{{ Form::submit('Change Password', array("class"=>"btn btn-accent m-btn m-btn--air btn-primary")) }}
												</div>
											</div>
										</div>
									</div>
								{{ Form::close() }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
@endsection

@section('script')
<script type="text/javascript">
	(function($){
		$(document).ready(function () {
		    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
		    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
		        // save the latest tab; use cookies if you like 'em better:
		        localStorage.setItem('lastTab', $(this).attr('href'));
		    });

		    // go to the latest tab, if it exists:
		    var lastTab = localStorage.getItem('lastTab');
		    if (lastTab) {
		        $('[href="' + lastTab + '"]').tab('show');
		    }
		});
	})(jQuery);
</script>
@endsection