@extends('frontend.layout.master')

@section('title', 'User Settings')

@section('content')

	<div class="container py-4">

		<h1>{{ $user->name }}</h1>

		<div class="row py-2">
			<div class="col-md-3 col-sm-12 justify-content-center">
				<img src="/images/default_avatar.jpg" alt="{{ $user->name }}" class="rounded img-fluid mx-auto d-block mx-4 mb-4">
				<p align="center"><a href="{{ route('frontend.user.show', $user->slug) }}">View Public Profile</a></p>

				<div class="row">
					<div class="col-sm-12">
						<h5>Navigation</h5>
						<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
							<a class="nav-link active" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="true">Edit Profile</a>
							<a class="nav-link" id="v-pills-avatar-tab" data-toggle="pill" href="#v-pills-avatar" role="tab" aria-controls="v-pills-avatar" aria-selected="false">Change Avatar</a>
							<a class="nav-link" id="v-pills-password-tab" data-toggle="pill" href="#v-pills-password" role="tab" aria-controls="v-pills-password" aria-selected="false">Change Password</a>
							<a class="nav-link" id="v-pills-social-tab" data-toggle="pill" href="#v-pills-social" role="tab" aria-controls="v-pills-social" aria-selected="false">Social Connections</a>
							<a class="nav-link" id="v-pills-notifications-tab" data-toggle="pill" href="#v-pills-notifications" role="tab" aria-controls="v-pills-notifications" aria-selected="false">Notifications</a>
							<a class="nav-link" href="{{ route('frontend.account.logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Logout</a>
							<form id="logout-form" action="{{ route('frontend.account.logout') }}" method="POST" style="display: none;">{{ csrf_field() }}</form>
						</div>
					</div>
				</div>



			</div>
			<div class="col-md-9 col-sm-12">
				<div class="tab-content" id="v-pills-tabContent">
					<div class="tab-pane show active" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
						<div class="card">
							<div class="card-header">Edit Profile</div>
							<div class="card-body">

								<form method="POST" action="{{ route('frontend.account.profile.update') }}">

									{{ csrf_field() }}
									{!! method_field('patch') !!}

									<div class="form-group row">
										<label for="name" class="col-md-3 col-form-label">Display Name</label>
										<div class="col-md-9">
											<input type="text" name="name" id="name" class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}" value="{{ old('name') ? old('name') : $user->name }}" >
											@if ($errors->has('name'))<div class="invalid-feedback" role="alert">{{ $errors->first('name') }}</div>@endif
										</div>
									</div>

									<div class="form-group row">
										<label for="email" class="col-md-3 col-form-label">E-Mail</label>
										<div class="col-md-9">
											<input type="text" name="email" id="email" class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}" value="{{ old('email') ? old('email') : $user->email }}" disabled>
											@if ($errors->has('email'))<div class="invalid-feedback" role="alert">{{ $errors->first('email') }}</div>@endif
										</div>
									</div>

									<div class="form-group row">
										<label for="about_me" class="col-md-3 col-form-label">About Me (Optional)</label>
										<div class="col-md-9">
											<textarea  name="about_me" id="about_me" class="form-control {{ $errors->has('about_me') ? 'is-invalid' : '' }}" rows="4">{{ old('about_me') ? old('about_me') : $user->about_me }}</textarea>
											@if ($errors->has('about_me'))<div class="invalid-feedback" role="alert">{{ $errors->first('about_me') }}</div>@endif
										</div>
									</div>

									<div class="form-group row mb-0">
										<div class="col-md-6 offset-md-3">
											<button type="submit" class="btn btn-primary">Update Profile</button>
										</div>
									</div>

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

					<div class="tab-pane" id="v-pills-avatar" role="tabpanel" aria-labelledby="v-pills-avatar-tab">
						<div class="card">
							<div class="card-header">Change Avatar</div>
							<div class="card-body">
								<form class="text-center" method="post" action="#" enctype="multipart/form-data">

									{{ csrf_field() }}
									{!! method_field('patch') !!}

									<label class="btn btn-primary btn-file">
										Select New Avatar<input type="file" name="avatar" style="display: none;" onchange="this.form.submit()">
									</label>
								</form>
							</div>
						</div>
					</div>

					<div class="tab-pane" id="v-pills-password" role="tabpanel" aria-labelledby="v-pills-password-tab">
						<div class="card">
							<div class="card-header">Change Password</div>
							<div class="card-body">
								<form method="POST" action="{{ route('frontend.account.password.update') }}">

									{{ csrf_field() }}

									<div class="form-group row">
										<label for="old_password" class="col-md-3 col-form-label">Current Password</label>
										<div class="col-md-6">
											<input type="password" class="form-control{{ $errors->first('old_password', ' is-invalid') }}" id="old_password" name="old_password" required >
											@if ($errors->has('old_password'))<div class="invalid-feedback" role="alert">{{ $errors->first('old_password') }}</div>@endif
										</div>
									</div>

									<div class="form-group row">
										<label for="new_password" class="col-md-3 col-form-label">New Password</label>
										<div class="col-md-6">
											<input type="password" class="form-control {{ $errors->first('new_password', 'is-invalid') }}" id="new_password" name="new_password" required >
											@if ($errors->has('new_password'))<div class="invalid-feedback" role="alert">{{ $errors->first('new_password') }}</div>@endif
										</div>
									</div>

									<div class="form-group row">
										<label for="new_password_confirmation" class="col-md-3 col-form-label">Confirm New Password</label>
										<div class="col-md-6">
											<input type="password" class="form-control {{ $errors->first('new_password_confirmation', 'is-invalid') }}" id="new_password_confirmation" name="new_password_confirmation" required >
											@if ($errors->has('new_password_confirmation'))<div class="invalid-feedback" role="alert">{{ $errors->first('new_password_confirmation') }}</div>@endif
										</div>
									</div>

									<div class="form-group row">
										<div class="col-md-6 offset-md-3">
											<button type="submit" class="btn btn-primary">Change Password</button>
										</div>
									</div>

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

					<div class="tab-pane" id="v-pills-social" role="tabpanel" aria-labelledby="v-pills-social-tab">
						<div class="card">
							<div class="card-header">Social Connections</div>
							<div class="card-body">

								<div class="form-group row">
									<label class="col-md-3 col-form-label">Facebook</label>
									<div class="col-md-6">

										@if(!empty($user->google_id))

											<a href="#" class="btn btn-danger">Disconnect Facebook</a>

										@else

											<a href="#" class="btn btn-primary">Connect to Facebook</a>

										@endif

									</div>
								</div>

								<div class="form-group row">
									<label class="col-md-3 col-form-label">Google</label>
									<div class="col-md-6">

										@if(!empty($user->google_id))

											<a href="#" class="btn btn-danger">Disconnect Google</a>

										@else

											<a href="#" class="btn btn-primary">Connect to Google</a>

										@endif

									</div>
								</div>

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

					<div class="tab-pane" id="v-pills-notifications" role="tabpanel" aria-labelledby="v-pills-notifications-tab">
						<div class="card">
							<div class="card-header">Edit Notifications</div>
							<div class="card-body">
								<P>Coming Soon!</P>						
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

@endsection