@extends('layouts.base')
@section('content')
<div class="page-inner">
        
    @include('partials.bread-crumbs')

    <div class="row">
			
		<div class="col-md-8">
			<div class="card card-with-nav">
				<div class="card-header">
					<div class="row row-nav-line">
						<ul class="nav nav-tabs nav-line nav-color-primary w-100 pl-3" role="tablist">
							<li class="nav-item submenu"> <a class="nav-link active show" data-toggle="tab" href="#profile" role="tab" aria-selected="true">Profile</a> </li>
							{{-- <li class="nav-item submenu"> <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-selected="false">Settings</a> </li> --}}
						</ul>
					</div>
				</div>
				<div class="card-body">
					<form id="form" name="form">
						<div class="row mt-3">
							<div class="col-md-6">
								<div class="form-group form-group-default  form-input-readonly">
									<label>{{trans('labels.user_name')}}</label>
									<input type="text" class="form-control" name="username" value="{{Auth::user()->username}}" readonly>
								</div>
							</div>
							
						</div>
						<div class="row mt-3">
							<div class="col-md-6">
								<div class="form-group form-group-default">
									<label>{{trans('labels.name')}}</label>
									<input type="text" class="form-control" name="name" value="{{Auth::user()->name}}">
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group form-group-default">
									<label>{{trans('labels.email')}}</label>
									<input type="email" class="form-control" name="email" value="{{Auth::user()->email}}">
								</div>
							</div>
						</div>
						<div class="row mt-3">
							<div class="col-md-6">
								<div class="form-group form-group-default">
									<label>{{trans('labels.password')}}</label>
									<input type="password" class="form-control" id="password" name="password" placeholder="Password">
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group form-group-default">
									<label>{{trans('labels.confirm_password')}}</label>
									<input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Password Confirmation">
								</div>
							</div>
							
						</div>

						<div class="text-right mt-3 mb-3">
							

							<button type="button" class="btn btn-success text-center pull-right" id="updateProfileBtn" style="margin-right:10px;"><i class="fa fa-check-circle"></i> {{trans('labels.update_profile_button')}}</button>
							@include('partials.buttons.reset')
						</div>
					</form>
				</div>
			</div>
		</div>
		
		<div class="col-md-4">
			<div class="card card-profile">
				<div class="card-header" style="background-image: url('../assets/img/blogpost.jpg')">
					<div class="profile-picture">
						<div class="avatar avatar-xl">
							
							<img src="{{asset('images/profiles').'/'.Auth::user()->profile_url}}" alt="{{Auth::user()->name}}" class="avatar-img rounded-circle">
						</div>
					</div>
				</div>
				<div class="card-body">
					<div class="user-profile text-center">
						<div class="name">{{Auth::user()->name}} ({{Auth::user()->username}})</div>
						<div class="job">{{Auth::user()->name}}</div>
						<div class="desc">{{Auth::user()->email}}</div>
						{{-- <div class="social-media">
							<a class="btn btn-info btn-twitter btn-sm btn-link" href="#"> 
								<span class="btn-label just-icon"><i class="flaticon-twitter"></i> </span>
							</a>
							<a class="btn btn-danger btn-sm btn-link" rel="publisher" href="#"> 
								<span class="btn-label just-icon"><i class="flaticon-google-plus"></i> </span> 
							</a>
							<a class="btn btn-primary btn-sm btn-link" rel="publisher" href="#"> 
								<span class="btn-label just-icon"><i class="flaticon-facebook"></i> </span> 
							</a>
							<a class="btn btn-danger btn-sm btn-link" rel="publisher" href="#"> 
								<span class="btn-label just-icon"><i class="flaticon-dribbble"></i> </span> 
							</a>
						</div> --}}
						<div class="view-profile">
							<a href="#" class="btn btn-primary btn-block" id="updateProfilePhotoModalBtn">Update Profile Photo</a>
						</div>
					</div>
				</div>
				{{-- <div class="card-footer"> --}}
					{{-- <div class="row user-stats text-center">
						<div class="col">
							<div class="number">125</div>
							<div class="title">Post</div>
						</div>
						<div class="col">
							<div class="number">25K</div>
							<div class="title">Followers</div>
						</div>
						<div class="col">
							<div class="number">134</div>
							<div class="title">Following</div>
						</div>
					</div> --}}
				{{-- </div> --}}
			</div>
		</div>
	</div>

	<div class="modal fade" id="updateProfilePhotoModal" tabindex="-1" user="dialog" style="display: none;" aria-hidden="true" >
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="exampleModalLongTitle">{{trans('labels.profile_photo')}}</h4>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
				</div>
				<div class="modal-body  bg-light">
					<form id="profilePhotoForm"  method="post" enctype="multipart/form-data">
						<div class="card">
							
							<div class="card-body bg-light">
								<div class="row">
									<div class="col-md-12 col-lg-12">
										<div class="form-group">
											<div class="col-md-12">
												<div class="input-file input-file-image">
													<img class="img-upload-preview" src="{{asset('images/150place-holder.png')}}" alt="preview" width="150">
													<input type="file" class="form-control form-control-file" id="uploadImg1" name="uploadImg1" accept="image/*" required="">
													<label for="uploadImg1" class="label-input-file btn btn-black btn-round">
														<span class="btn-label">
															<i class="fa fa-file-image"></i>
														</span>
														Select Photo
													</label>
												</div>
											</div>
										</div>
									</div>
									
								</div>
							</div>
							
						</div>
					</form>
				</div>
				<div class="modal-footer">
					
					<button type="button" class="btn btn-success text-center" id="btnUpdateProfile"><i class="fa fa-check-circle"></i> {{trans('labels.update_profile_photo_button')}}</button>
					<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
					
				</div>
			</div>
		</div>
	</div>
	
</div>


@endsection
@section('custom_scripts')
<script type="text/javascript" src="{{asset('js/xhr.js')}}"> </script>
<script type="text/javascript" src="{{asset('js/system/user-profile.js')}}"> </script>
<script type="text/javascript" src="{{asset('js/datatables.min.js')}}"> </script>
@endsection