@extends('layouts.app')

@section('content')
<div class="content-page">
	<div class="content">

		<!-- Start Content-->
		<div class="container-fluid">

			<div class="row">
				<div class="col-12">
					<div class="page-title-box">
						<h4 class="page-title">Users</h4>
						<ol class="breadcrumb m-0">
							<li class="breadcrumb-item">
								<a href="dashboard.html">Dashboard</a>
							</li>
							<li class="breadcrumb-item active">
								Users
							</li>
						</ol>
					</div>
				</div>
			</div>
			<!-- end page title -->

			<div class="row">
				<div class="col-9">
					<div class="card">
						<div class="card-body">
							<div class="row">
								<div class="col-8">
									<div class="page-title-box">

										<p class="page-title pt-3" style="line-height: 0">
											<i class=" mdi mdi-account-outline"></i> User List
										</p>
									</div>
								</div>
								<div class="col-4 text-right pt-1 pb-3">

									<button type="button" class="btn btn-danger waves-effect waves-light">
										<i class=" mdi mdi-trash-can-outline"></i> Delete
									</button>
								</div>
							</div>
							<div class="table-responsive">
								<table class="table mb-0 table-bordered " >
									<thead class="thead-dark">
										<tr>
											<th width="50">#</th>
											<th width="150" class="text-center">Image</th>
											<th>Name</th>
											<th>Phone </th>
											<th>Email</th>
											<th>Location</th>
											<th >Status</th>
											<th class="text-right">Action</th>
										</tr>
									</thead>
									<tbody>

										<tr>
											<td width="50">
											<input type="checkbox" name="">
											</td>
											<td class="text-center"><img src="assets/images/users/user-3.jpg" alt="table-user" class="rounded-circle" width="40" ></td>
											<td>Paul J. Friend </td>
											<td> 937-330-1634</td>
											<td> pauljfrnd@jourrapide.com</td>
											<td>New York</td>
											<td><span class="badge bg-soft-success text-success shadow-none">Active</span></td>
											<td class="text-right"><a href="userdetail.html">
											<button type="button" class="btn btn-secondary waves-effect waves-light">
												<i class="mdi mdi-eye"></i>
											</button></a></td>
										</tr>

										<tr>
											<td width="50">
											<input type="checkbox" name="">
											</td>
											<td class="text-center"><img src="assets/images/users/user-2.jpg" alt="table-user" class="rounded-circle" width="40" ></td>
											<td>Bryan J. Luellen </td>
											<td> 215-302-3376</td>
											<td> bryuellen@dayrep.com</td>
											<td> Denmark</td>
											<td><span class="badge bg-soft-success text-success shadow-none">Active</span></td>
											<td class="text-right"><a href="">
											<button type="button" class="btn btn-secondary waves-effect waves-light">
												<i class="mdi mdi-eye"></i>
											</button></a></td>
										</tr>

										<tr>
											<td width="50">
											<input type="checkbox" name="">
											</td>
											<td class="text-center"><img src="assets/images/users/user-1.jpg" alt="table-user" class="rounded-circle" width="40" ></td>
											<td> Kathryn S. Collier </td>
											<td> 828-216-2190</td>
											<td> collier@jourrapide.com</td>
											<td>New York</td>
											<td><span class="badge bg-soft-success text-success shadow-none">Active</span></td>
											<td class="text-right"><a href="orderdetail.html">
											<button type="button" class="btn btn-secondary waves-effect waves-light">
												<i class="mdi mdi-eye"></i>
											</button></a></td>
										</tr>

										<tr>
											<td width="50">
											<input type="checkbox" name="">
											</td>
											<td class="text-center"><img src="assets/images/users/user-4.jpg" alt="table-user" class="rounded-circle" width="40" ></td>
											<td>Zara Raws </td>
											<td> (02) 75 150 655</td>
											<td> austin@dayrep.com</td>
											<td> Germany</td>
											<td><span class="badge bg-soft-success text-success shadow-none">Active</span></td>
											<td class="text-right"><a href="">
											<button type="button" class="btn btn-secondary waves-effect waves-light">
												<i class="mdi mdi-eye"></i>
											</button></a></td>
										</tr>
									</tbody>
								</table>
							</div>

							<ul class="pagination pagination-rounded justify-content-end mb-0 mt-4">
								<li class="page-item">
									<a class="page-link" href="javascript: void(0);" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a>
								</li>
								<li class="page-item active">
									<a class="page-link" href="javascript: void(0);">1</a>
								</li>
								<li class="page-item">
									<a class="page-link" href="javascript: void(0);">2</a>
								</li>
								<li class="page-item">
									<a class="page-link" href="javascript: void(0);">3</a>
								</li>
								<li class="page-item">
									<a class="page-link" href="javascript: void(0);" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a>
								</li>
							</ul>

						</div>
						<!-- end card-body-->
					</div>
					<!-- end card-->
				</div>
				<!-- end col -->

				<div class="col-3">
					<div class="card">
						<div class="card-body">
							<div class="row">
								<div class="col-8">
									<div class="page-title-box">
										<p class="page-title pt-3" style="line-height: 0">
											<i class="mdi mdi-filter"></i> Filter
										</p>
									</div>
								</div>
							</div>

							<div class="row mt-4">
								<div class="col-12">
									<div class="form-group mb-3">
										<label for="example-select">Customer Name</label>
										<input type="text" id="simpleinput" class="form-control" >
									</div>

									<div class="form-group mb-3">
										<label for="example-select">E-Mail</label>
										<input type="text" id="simpleinput" class="form-control" >
									</div>
									<div class="form-group mb-3">
										<label for="example-select">Location</label>
										<input type="text" id="simpleinput" class="form-control" >
									</div>

									<button type="button" class="btn btn-danger btn-rounded waves-effect waves-light">
										<span class="btn-label"><i class="mdi mdi-filter"></i></span>Apply
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>

		</div>
		<!-- container -->

	</div>
	<!-- content -->

</div>

@endsection