@extends('layouts.backend')

@section('title', 'View Applicant')

@section('breadcrumb-title')
    <h3>View Applicant</h3>
@endsection

@section('breadcrumb-items')
    <li class="breadcrumb-item">Applicant</li>
    <li class="breadcrumb-item active">View</li>
@endsection

@section('content')

<!-- Container-fluid starts-->
<div class="container-fluid">
	<div class="edit-profile">
		<div class="row">
			<div class="col-xl-4">
				<div class="card">
					<div class="card-header">
						<h4 class="card-title mb-0">Personal Info</h4>
						<div class="card-options"><a class="card-options-collapse" href="#" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a><a class="card-options-remove" href="#" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a></div>
					</div>
					<div class="card-body">
						<form>
							<div class="row mb-2">
								<div class="profile-title">
									<div class="media">                        
										<img class="img-70 rounded-circle" alt="" src="http://localhost:8000/assets/images/user/7.jpg">
										<div class="media-body">
											<h5 class="mb-1">MARK JECNO</h5>
											<p>DESIGNER</p>
										</div>
									</div>
								</div>
							</div>
							<div class="mb-3">
								<h6 class="form-label">Bio</h6>
								<textarea class="form-control" rows="5">On the other hand, we denounce with righteous indignation</textarea>
							</div>
							<div class="mb-3">
								<label class="form-label">Email-Address</label>
								<input class="form-control" placeholder="your-email@domain.com">
							</div>
							<div class="mb-3">
								<label class="form-label">Password</label>
								<input class="form-control" type="password" value="password">
							</div>
							<div class="mb-3">
								<label class="form-label">Website</label>
								<input class="form-control" placeholder="http://Uplor .com">
							</div>
							<div class="form-footer">
								<button class="btn btn-primary btn-block">Update</button>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="col-xl-8">
				<form class="card">
					<div class="card-header">
						<h4 class="card-title mb-0">Address Info</h4>
						<div class="card-options"><a class="card-options-collapse" href="#" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a><a class="card-options-remove" href="#" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a></div>
					</div>
					<div class="card-body">
						<div class="row">
							<div class="col-md-5">
								<div class="mb-3">
									<label class="form-label">Company</label>
									<input class="form-control" type="text" placeholder="Company">
								</div>
							</div>
							<div class="col-sm-6 col-md-3">
								<div class="mb-3">
									<label class="form-label">Username</label>
									<input class="form-control" type="text" placeholder="Username">
								</div>
							</div>
							<div class="col-sm-6 col-md-4">
								<div class="mb-3">
									<label class="form-label">Email address</label>
									<input class="form-control" type="email" placeholder="Email">
								</div>
							</div>
							<div class="col-sm-6 col-md-6">
								<div class="mb-3">
									<label class="form-label">First Name</label>
									<input class="form-control" type="text" placeholder="Company">
								</div>
							</div>
							<div class="col-sm-6 col-md-6">
								<div class="mb-3">
									<label class="form-label">Last Name</label>
									<input class="form-control" type="text" placeholder="Last Name">
								</div>
							</div>
							<div class="col-md-12">
								<div class="mb-3">
									<label class="form-label">Address</label>
									<input class="form-control" type="text" placeholder="Home Address">
								</div>
							</div>
							<div class="col-sm-6 col-md-4">
								<div class="mb-3">
									<label class="form-label">City</label>
									<input class="form-control" type="text" placeholder="City">
								</div>
							</div>
							<div class="col-sm-6 col-md-3">
								<div class="mb-3">
									<label class="form-label">Postal Code</label>
									<input class="form-control" type="number" placeholder="ZIP Code">
								</div>
							</div>
							<div class="col-md-5">
								<div class="mb-3">
									<label class="form-label">Country</label>
									<select class="form-control btn-square">
										<option value="0">--Select--</option>
										<option value="1">Germany</option>
										<option value="2">Canada</option>
										<option value="3">Usa</option>
										<option value="4">Aus</option>
									</select>
								</div>
							</div>
							<div class="col-md-12">
								<div>
									<label class="form-label">About Me</label>
									<textarea class="form-control" rows="4" placeholder="Enter About your description"></textarea>
								</div>
							</div>
						</div>
					</div>
					<div class="card-footer text-end">
						<button class="btn btn-primary" type="submit">Update</button>
					</div>
				</form>
			</div>


			<div class="col-md-12">
				<div class="card">
					<div class="card-header">
						<h4 class="card-title mb-0">Details</h4>
						<div class="card-options"><a class="card-options-collapse" href="#" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a><a class="card-options-remove" href="#" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a></div>
					</div>

					<div class="card-body">
						<ul class="nav nav-tabs nav-primary" id="pills-warningtab" role="tablist">

						    <li class="nav-item"><a class="nav-link active" id="tab-family"
						            data-bs-toggle="pill" href="#pills-family" role="tab"
						            aria-controls="pills-family" aria-selected="true"><i class="icofont icofont-ui-home"></i>Family</a></li>

						    <li class="nav-item"><a class="nav-link" id="tab-academic" data-bs-toggle="pill"
						            href="#pills-academic" role="tab" aria-controls="pills-academic"
						            aria-selected="false"><i class="icofont icofont-star-shape"></i>Academic</a></li>

						    <li class="nav-item"><a class="nav-link" id="tab-education" data-bs-toggle="pill"
						            href="#pills-education" role="tab" aria-controls="pills-education"
						            aria-selected="false"><i class="icofont icofont-thumbs-up"></i>Education</a></li>

						    <li class="nav-item"><a class="nav-link" id="tab-emergency" data-bs-toggle="pill"
						            href="#pills-emergency" role="tab" aria-controls="pills-emergency"
						            aria-selected="false"><i class="icofont icofont-users-alt-6"></i>Emergency</a></li>

						    <li class="nav-item"><a class="nav-link" id="tab-employment" data-bs-toggle="pill"
						            href="#pills-employment" role="tab" aria-controls="pills-employment"
						            aria-selected="false"><i class="icofont icofont-attachment"></i>Employment History</a></li>

						    <li class="nav-item"><a class="nav-link" id="tab-professional" data-bs-toggle="pill"
						            href="#pills-professional" role="tab" aria-controls="pills-professional"
						            aria-selected="false"><i class="icofont icofont-user-search"></i>Professional Education</a></li>
						</ul>


						<div class="tab-content" id="content-interview">
						    <div class="tab-pane fade show active" id="pills-family" role="tabpanel" aria-labelledby="tab-family">
						    	<h3 class="mb-3 m-t-30">Family</h3>
						    	<div class="card-block row">
				    		      <div class="col-6">
				    		          <div class="mb-3">
				    		            <label class="form-label" for="exampleFormControlInput1">Name</label>
				    		            <input class="form-control" id="exampleFormControlInput1" type="text" placeholder="">
				    		          </div>
				    		      </div>
				    		      <div class="col-6">
				    		          <div class="mb-3">
				    		            <label class="form-label" for="exampleFormControlInput1">Name</label>
				    		            <input class="form-control" id="exampleFormControlInput1" type="text" placeholder="">
				    		          </div> 
				    		      </div>
				    		      <div class="col-6">
				    		          <div class="mb-3">
				    		            <label class="form-label" for="exampleFormControlInput1">Relation</label>
				    		            <select class="form-control">
				    		            	<option>-- Select --</option>
				    		            	<option value="father">FATHER</option>
				    		            	<option value="father">MOTHER</option>
				    		            	<option value="father">BROTHER</option>
				    		            	<option value="father">SISTER</option>
				    		            </select>
				    		          </div>
				    		      </div>
				    		      <div class="col-6">
				    		          <div class="mb-3">
				    		            <label class="form-label" for="exampleFormControlInput1">Relation</label>
				    		            <select class="form-control">
				    		            	<option>-- Select --</option>
				    		            	<option value="father">FATHER</option>
				    		            	<option value="father">MOTHER</option>
				    		            	<option value="father">BROTHER</option>
				    		            	<option value="father">SISTER</option>
				    		            </select>
				    		          </div>
				    		      </div>

						    	</div>

								<div class="form-footer">
									<button class="btn btn-primary btn-block" data-bs-original-title="" title="">Update</button>
								</div>
						    </div>

						    <div class="tab-pane fade show" id="pills-academic" role="tabpanel" aria-labelledby="tab-academic">
						    	<h3 class="mb-3 m-t-30">Academic</h3>
						    </div>

						    <div class="tab-pane fade show" id="pills-education" role="tabpanel" aria-labelledby="tab-education">
						    	<h3 class="mb-3 m-t-30">Education</h3>
						    </div>

						    <div class="tab-pane fade show" id="pills-emergency" role="tabpanel" aria-labelledby="tab-emergency">
						    	<h3 class="mb-3 m-t-30">Emergency</h3>
						    </div>

						    <div class="tab-pane fade show" id="pills-employment" role="tabpanel" aria-labelledby="tab-employment">
						    	<h3 class="mb-3 m-t-30">Employment History</h3>
						    </div>

						    <div class="tab-pane fade show" id="pills-professional" role="tabpanel" aria-labelledby="tab-professional">
						    	<h3 class="mb-3 m-t-30">Professional Education</h3>
						    </div>
						</div>						   

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




			<div class="col-md-12">
				<div class="card">
					<div class="card-header">
						<h4 class="card-title mb-0">Clarification & Additional Info</h4>
						<div class="card-options"><a class="card-options-collapse" href="#" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a><a class="card-options-remove" href="#" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a></div>
					</div>

					<div class="card-body">
						dfdsf
					</div>
				</div>
			</div>



			<div class="col-md-12">
				<div class="card">
					<div class="card-header">
						<h4 class="card-title mb-0">Status</h4>
						<div class="card-options"><a class="card-options-collapse" href="#" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a><a class="card-options-remove" href="#" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a></div>
					</div>

					<div class="card-body">
						<div class="table-responsive add-project">
							<table class="table card-table table-vcenter text-nowrap">
								<thead>
									<tr>
										<th>Status Name</th>
										<th>Date</th>
										<th>Updated By</th>
										<th>Designation</th>
										<th>Actions</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>
											<span class="badge rounded-pill badge-primary">Applied</span>											
										</td>
										<td>28 May 2018</td>
										<td><span class="status-icon bg-success"></span> MARK JECNO</td>
										<td>-</td>
										<td class="text-end">
											
										</td>
									</tr>
									<tr>
										<td>
											<span class="badge rounded-pill badge-warning">Keep In View</span>											
										</td>
										<td>30 May 2018</td>
										<td><span class="status-icon bg-success"></span> SULAIMAN BIN AHMAD</td>
										<td>AUDIT</td>
										<td class="text-end">
											
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>


		</div>
	</div>
</div>
<!-- Container-fluid Ends-->


@endsection