{{-- Extends layout --}}
@extends('layouts.default')
{{-- Styles Section --}}
@section('styles')
  <title>Ivrfai | Profile</title>
  <style>
	.modal-backdrop {
		z-index: 9 !important;
	}
	.modal {
		top: 20% !important;
	}
  </style>
@endsection
{{-- Content --}}
@section('content')
	<div class="row small-spacing">
		<div class="col-lg-3 col-12">
			<div class="box-content bordered primary margin-bottom-20">
				<div class="profile-avatar">
					<img src="/assets/images/profile.jpg" alt="">
					<h3><strong>{{ $user->first_name }} {{ $user->last_name }}</strong></h3>
					<h4>{{ $user->b2b_company_name }}</h4>
					<h4><i>{{ $user->type }}</i></h4>
				</div>
				<!-- .profile-avatar -->
				<table class="table table-hover no-margin">
					<tbody>
					<!--	<tr>
						<td>Status</td>
							<td><span class="notice notice-danger">Active</span></td>
						</tr> -->
					<!--	<tr>
						<td>Since</td>
							<td>{{\Carbon\Carbon::parse($user->employment_start)->diff(\Carbon\Carbon::now())->format('%y years & %m months')}}</td> 
						</tr> -->
					</tbody>
				</table>
			</div>
		</div>
		<!-- /.col-lg-3 col-12 -->
		<div class="col-lg-9 col-12">
			<div class="row">
				<div class="col-12">
					<div class="box-content card">
						<h4 class="box-title"><i class="fa fa-user ico"></i>About</h4>
						<!-- /.box-title -->
						<div class="dropdown js__drop_down">
							<a href="#" class="dropdown-icon fas fa-ellipsis-v js__drop_down_button"></a>
							{{-- <ul class="sub-menu">
								<li><a href="#">Edit</a></li>
								<li><a href="#">Delete</a></li>
								<li><a href="#">Deactivate</a></li>
							</ul> --}}
							<!-- /.sub-menu -->
						</div>
						{{-- @dd($user) --}}
						<!-- /.dropdown js__dropdown -->
						<div class="card-content">
							<div class="row">
								<div class="col-lg-6">
									<div class="row">
										<div class="col-5"><label>First Name:</label></div>
										<!-- /.col-5 -->
										<div class="col-7">{{ $user->first_name }}</div>
										<!-- /.col-7 -->
									</div>
									<!-- /.row -->
								</div>
								<!-- /.col-lg-6 -->
								<div class="col-lg-6">
									<div class="row">
										<div class="col-5"><label>Last Name:</label></div>
										<!-- /.col-5 -->
										<div class="col-7">{{ $user->last_name }}</div>
										<!-- /.col-7 -->
									</div>
									<!-- /.row -->
								</div>
								<!-- /.col-lg-6 -->
								<div class="col-lg-6">
									<div class="row">
										<div class="col-5"><label>User ID:</label></div>
										<!-- /.col-5 -->
										<div class="col-7">{{ $user->employee_custom_id }}</div>
										<!-- /.col-7 -->
									</div>
									<!-- /.row -->
								</div>
								<!-- /.col-lg-6 -->
								<div class="col-lg-6">
									<div class="row">
										<div class="col-5"><label>Email:</label></div>
										<!-- /.col-5 -->
										<div class="col-7"><a href="mailto: {{ $user->email }}">{{ $user->email }}</a></div>
										<!-- /.col-7 -->
									</div>
									<!-- /.row -->
								</div>
								<!-- /.col-lg-6 -->
								<div class="col-lg-6">
									<div class="row">
										<div class="col-5"><label>Age:</label></div>
										<!-- /.col-5 -->
										<div class="col-7">{{\Carbon\Carbon::parse($user->dob)->diff(\Carbon\Carbon::now())->format('%y years')}}</div>
										<!-- /.col-7 -->
									</div>
									<!-- /.row -->
								</div>
								<!-- /.col-lg-6 -->
								<div class="col-lg-6">
									<div class="row">
										<div class="col-5"><label>Phone:</label></div>
										<!-- /.col-5 -->
										<div class="col-7">+{{ $user->country_code }}-{{ $user->mobile }}</div>
										<!-- /.col-7 -->
									</div>
									<!-- /.row -->
								</div>
								<!-- /.col-lg-6 -->
							</div>
							<!-- /.row -->
						</div>
						<!-- /.card-content -->
					</div>
				</div>

				<div class="col-12">
					<div class="box-content card">
						<h4 class="box-title"><i class="fa fa-user ico"></i>Change Password</h4>
						<div class="card-content">
							<div class="row">
								@if (session('message'))
									<div class="col-md-12">
										<div class="alert alert-success">
											<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> {{ session('message') }}
										</div>
									</div>
								@endif
								<form class="form-validate col-md-12" data-toggle="validator" action="{{ route('change_password') }}" method="post">
									@csrf
									<div class="form-group">
										<label for="old_password" class="control-label">Old Password</label>
										<input type="password" name="old_password" id="old_password" class="form-control" placeholder="Enter password here" />
										@if (isset(session('error_fields')->old_password[0]))
											<span class="invalid-feedback" style="display: block;" role="alert">
												<strong>{{ session('error_fields')->old_password[0] }}</strong>
											</span>
										@endif
									</div>
									<div class="form-group">
										<label for="new_password" class="control-label">Password</label>
										<input type="password" name="new_password" id="new_password" class="form-control" placeholder="Enter new password here" />
										@if (isset(session('error_fields')->passsword[0]))
											<span class="invalid-feedback" style="display: block;" role="alert">
												<strong>{{ session('error_fields')->passsword[0] }}</strong>
											</span>
										@endif
									</div>
									<div class="form-group">
										<label for="confirm_password" class="control-label">Confirm Password</label>
										<input type="password" name="confirm_password" id="confirm_password" class="form-control" placeholder="Enter confirm password here" />
										@if (isset(session('error_fields')->confirm_password[0]))
											<span class="invalid-feedback" style="display: block;" role="alert">
												<strong>{{ session('error_fields')->confirm_password[0] }}</strong>
											</span>
										@endif
									</div>
									<div class="d-flex flex-sm-row flex-column mt-2">
										<button type="submit" class="btn btn-primary mb-1 mb-sm-0 mr-0 mr-sm-1">Save </button>
										<button type="reset" class="btn btn-outline-secondary">Reset</button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>		
		</div>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="boostrapModal-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">Comments</h4>
				</div>
				<div class="modal-body">
					<div class="table-responsive" data-pattern="priority-columns">
						<table class="table table-small-font table-bordered table-striped">
							<thead>
								<tr>
									<td>#</td>
									<td>Comments</td>
									<td>Created By</td>
									<td>Created At</td>
								</tr>
							</thead>
							<tbody id="comment_results">

							</tbody>
						</table>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default btn-sm waves-effect waves-light" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="boostrapModal-2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">Insuffs</h4>
				</div>
				<div class="modal-body">
					<div class="table-responsive" data-pattern="priority-columns">
						<table class="table table-small-font table-bordered table-striped">
							<thead>
								<tr>
									<td>#</td>
									<td>insuffs</td>
									<td>Created By</td>
									<td>Created At</td>
								</tr>
							</thead>
							<tbody id="insuffs_results">

							</tbody>
						</table>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default btn-sm waves-effect waves-light" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
@endsection
@section('scripts')
<script>
	$('#boostrapModal-1').on('shown.bs.modal', function (e) {
		var _id = 5;
		$.ajax({
			type:'GET',
			url:'{{ url("get-comments") }}/' + _id,
			data:{},
			success:function(data) {
				$("#comment_results").html(data);
			}
		});
	});

	$('#boostrapModal-2').on('shown.bs.modal', function (e) {
		var _id = 5;
		$.ajax({
			type:'GET',
			url:'{{ url("get-insuffs") }}/' + _id,
			data:{},
			success:function(data) {
				$("#insuffs_results").html(data);
			}
		});
	});
</script>
@endsection