@extends('layout/app')

@section('content')

@php($user = session('loginInfo'))
<div class="row page-titles">
  <div class="col-md-5 align-self-center">
		<h4 class="text-themecolor">My Profile</h4>
  </div>
  <div class="col-md-7 align-self-center text-end">
    <div class="d-flex justify-content-end align-items-center">
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
				<li class="breadcrumb-item active">My Profile</li>
			</ol>
    </div>
  </div>
</div> 
@if ($message = Session::get('success'))
  <div class="alert alert-success">
    <p>{{ $message }}</p>
  </div>
@endif 
@if ($errors->any())
<div class="alert alert-danger">
  <strong>Whoops!</strong> There were some problems with your input.<br><br>
  <ul>
    @foreach ($errors->all() as $error)
      <li>{{ $error }}</li>
    @endforeach
  </ul>
</div>
@endif
<div class="row">
	<div class="col-lg-4 col-xlg-3 col-md-5">
		<div class="card">
			<div class="card-body">
				<center class="m-t-30"> 
					@if(!empty($user->profile))
						<img src="{{ asset('assets/images/users/'.$user->profile) }}" class="img-circle" width="150" />
					@else
						<img src="{{ asset('assets/images/users/5.jpg') }}" class="img-circle" width="150" />
					@endif
					<h4 class="card-title m-t-10">{{ (!empty($user->name)) ? $user->name : "User" }}</h4>                    
				</center>
			</div>

			<div>
				<hr> 
			</div>

			<div class="card-body"> <small class="text-muted">Email address </small>
				<h6>{!! (!empty($user->email)) ? _emailLink($user->email) : "-" !!}</h6> <small class="text-muted p-t-30 db">Phone</small>
				<h6>{!! (!empty($user->mobile)) ? _mobileLink($user->mobile) : "-" !!}</h6> 
			</div>
		</div>
	</div>

	<div class="col-lg-8 col-xlg-9 col-md-7">
		<div class="card">
			<div class="card-body">
				<form action="{{ route('updateProfile') }}" method="POST" enctype="multipart/form-data">
					@csrf  
					@method('PUT')
					<input type="hidden" name="updated_at" value="{{ currentDate() }}">

					<div class="row">
						<div class="col-6">
							<div class="form-group">
								<label class="form-label" for="name">Name <span class="text-danger"> * </span></label>
								<input type="text" name="name" value="{{ $user->name }}" class="form-control" placeholder="Name" required>
							</div>
						</div>

						<div class="col-6">
							<div class="form-group">
								<label class="form-label" for="username">Username <span class="text-danger"> * </span></label>
								<input type="text" name="username" value="{{ $user->username }}" class="form-control" placeholder="Username" required>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-6">
							<div class="form-group">
								<label class="form-label" for="email">Email <span class="text-danger"> * </span></label>
								<input type="email" name="email" value="{{ $user->email }}" class="form-control" placeholder="Email" required>
							</div>
						</div>

						<div class="col-6">
							<div class="form-group">
								<label class="form-label" for="mobile">Phone <span class="text-danger"> * </span></label>
								<input type="text" id="mobile" name="mobile" value="{{ $user->mobile }}" class="form-control" placeholder="Phone" required maxlength="14" onpaste="return false" onkeypress="return isNumber(event)">
							</div>
						</div>
					</div>
					
					<div class="row">
						<div class="col-6">
							<div class="form-group">
								<label class="form-label" for="profile">Profile Photo</label>
								<input type="file" name="profile" class="form-control" placeholder="Profile Photo" accept="image/*">
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-xs-12 col-sm-12 col-md-12 form-actions">
							<div class="form-group">
								<button type="submit" class="btn btn-success text-white"> <i class="fa fa-user"></i> Update Profile </button>
								<a href="{{ url()->previous() }}" class="btn btn-dark">Cancel</a>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
@endsection

@section('js-script')
<script>
  $(document).ready(function() {
    setMobileMask('#mobile');
  });
</script>
@endsection