{% extends 'hexabox/elements/layouts/admin.html' %}
{% load static %}
        
{% block additional_css %}

{% endblock %}        
{% block content %}

			<div class="container-fluid">
				<div class="row">

					<!-- Start - Contact Table -->
					<div class="col-xl-12 active-p">
						<div class="d-flex flex-wrap gap-2 align-items-center justify-content-between mb-4">
							<h4 class="mb-0">Contacts List</h4>
							<div class="clearfix">
								<a class="btn btn-primary btn-sm me-1" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">+ Add Contacts</a>
								<button type="button" class="btn btn-secondary btn-sm ms-1" data-bs-toggle="modal" data-bs-target="#exampleModal1">+ Invite Customer
								</button>
							</div>
						</div>
						<div class="card h-auto">
							<div class="card-body px-2 pt-3 pb-2">
								<div class="table-responsive check-wrapper">
									<table class="table table-sm table-row-rounded table-borderless table-sm-responsive text-nowrap mb-2">
										<thead>
                                            <tr>
												<th class="sorting-disabled">
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-all" required="">
													</div>
												</th>
                                                <th class="mw-150">Name</th>
                                                <th class="mw-100">Email</th>
                                                <th class="mw-150">Tags</th>
                                                <th class="mw-100">Phone</th>
                                                <th class="mw-100">Status</th>
                                                <th class="mw-100">Dob</th>
                                            </tr>
                                        </thead>
										<tbody>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/small/avatar1.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<p class="mb-0 ms-2">Olivia Grace</p>	
													</div>
												</td>
												<td>demo1@gmail.com</td>												
												<td class="pe-0"><span class="badge badge-success light badge-sm">Customer</span></td>
												<td class="pe-0">(123) 456 789</td>
												<td class="pe-0"><span class="d-flex align-items-center"><i class="fa-solid fa-circle text-primary fs-8 me-1"></i>Avalible</span></td>
												<td><span>06 Sep 2021</span></td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
													<img src="{% static 'hexabox/images/avatar/small/avatar2.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<p class="mb-0 ms-2">Oliver Noah</p>	
													</div>
												</td>
												<td>demo1@gmail.com</td>
												<td class="pe-0">
													<span class="badge badge-success light badge-sm">Customer</span>
													<span class="badge badge-warning light badge-sm">Lead</span>
												</td>
												<td class="pe-0">(123) 456 789</td>
												<td class="pe-0"><span class="d-flex align-items-center"><i class="fa-solid fa-circle text-primary fs-8 me-1"></i>In Progress</span></td>
												<td><span>08 Jan 1995</span></td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
													<img src="{% static 'hexabox/images/avatar/small/avatar1.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<p class="mb-0 ms-2">Amelia Rose</p>	
													</div>
												</td>
												<td>demo3@gmail.com</td>
												<td class="pe-0"><span class="badge badge-warning light badge-sm">Lead</span></td>
												<td class="pe-0">(123) 456 789</td>
												<td class="pe-0"><span class="d-flex align-items-center"><i class="fa-solid fa-circle text-danger fs-8 me-1"></i>Cancelled</span></td>
												<td><span>08 Jan 1994</span></td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
														<img src="{% static 'hexabox/images/avatar/small/avatar10.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<p class="mb-0 ms-2">Oliver Noah</p>	
													</div>
												</td>
												<td>demo1@gmail.com</td>
												<td class="pe-0">
													<span class="badge badge-success light badge-sm">Customer</span>
													<span class="badge badge-warning light badge-sm">Lead</span>
												</td>
												<td class="pe-0">(123) 456 789</td>
												<td class="pe-0"><span class="d-flex align-items-center"><i class="fa-solid fa-circle text-primary fs-8 me-1"></i>In Progress</span></td>
												<td><span>08 Jan 1995</span></td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
													<img src="{% static 'hexabox/images/avatar/small/avatar9.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<p class="mb-0 ms-2">Charlotte Mae</p>	
													</div>
												</td>
												<td>demo3@gmail.com</td>
												<td class="pe-0"><span class="badge badge-warning light badge-sm">Lead</span></td>
												<td class="pe-0">(123) 456 789</td>
												<td class="pe-0"><span class="d-flex align-items-center"><i class="fa-solid fa-circle text-danger fs-8 me-1"></i>Cancelled</span></td>
												<td><span>08 Jan 1994</span></td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
													<img src="{% static 'hexabox/images/avatar/small/avatar8.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<p class="mb-0 ms-2">Ethan Cole</p>	
													</div>
												</td>
												<td>demo3@gmail.com</td>
												<td class="pe-0"><span class="badge badge-secondary light badge-sm">Important</span></td>
												<td class="pe-0">(123) 456 789</td>
												<td class="pe-0"><span class="d-flex align-items-center"><i class="fa-solid fa-circle text-danger fs-8 me-1"></i>Cancelled</span></td>
												<td><span>10 Feb 1994</span></td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
													<img src="{% static 'hexabox/images/avatar/small/avatar7.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<p class="mb-0 ms-2">Isabella Claire</p>	
													</div>
												</td>
												<td>demo3@gmail.com</td>
												<td class="pe-0">
													<span class="badge badge-secondary light badge-sm">Important</span>
													<span class="badge badge-warning light badge-sm">Lead</span>
												</td>
												<td class="pe-0">(123) 456 789</td>
												<td class="pe-0"><span class="d-flex align-items-center"><i class="fa-solid fa-circle text-primary fs-8 me-1"></i>In Progress</span></td>
												<td><span>10 Feb 1994</span></td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
													<img src="{% static 'hexabox/images/avatar/small/avatar6.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<p class="mb-0 ms-2">Henry Mason</p>	
													</div>
												</td>
												<td>demo1@gmail.com</td>
												<td class="pe-0"><span class="badge badge-success light badge-sm">Customer</span></td>
												<td class="pe-0">(123) 456 789</td>
												<td class="pe-0"><span class="d-flex align-items-center"><i class="fa-solid fa-circle text-success fs-8 me-1"></i>Avalible</span></td>
												<td><span>06 Sep 2021</span></td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
													<img src="{% static 'hexabox/images/avatar/small/avatar5.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<p class="mb-0 ms-2">Evelyn Hope</p>	
													</div>
												</td>
												<td>demo1@gmail.com</td>
												<td class="pe-0">
													<span class="badge badge-success light badge-sm">Customer</span>
													<span class="badge badge-warning light badge-sm">Lead</span>
												</td>
												<td class="pe-0">(123) 456 789</td>
												<td class="pe-0"><span class="d-flex align-items-center"><i class="fa-solid fa-circle text-primary fs-8 me-1"></i>In Progress</span></td>
												<td><span>08 Jan 1995</span></td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
													<img src="{% static 'hexabox/images/avatar/small/avatar4.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<p class="mb-0 ms-2">Alexander Finn</p>	
													</div>
												</td>
												<td>demo3@gmail.com</td>
												<td class="pe-0">
													<span class="badge badge-warning light badge-sm">Lead</span>
												</td>
												<td class="pe-0">(123) 456 789</td>
												<td class="pe-0"><span class="d-flex align-items-center"><i class="fa-solid fa-circle text-danger fs-8 me-1"></i>Cancelled</span></td>
												<td><span>08 Jan 1994</span></td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
													<img src="{% static 'hexabox/images/avatar/small/avatar3.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<p class="mb-0 ms-2">Abigail Faith</p>	
													</div>
												</td>
												<td>demo3@gmail.com</td>
												<td class="pe-0"><span class="badge badge-secondary light badge-sm">Important</span></td>
												<td class="pe-0">(123) 456 789</td>
												<td class="pe-0"><span class="d-flex align-items-center"><i class="fa-solid fa-circle text-danger fs-8 me-1"></i>Cancelled</span></td>
												<td><span>10 Feb 1994</span></td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
													<img src="{% static 'hexabox/images/avatar/small/avatar2.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<p class="mb-0 ms-2">Samuel Owen</p>	
													</div>
												</td>
												<td>demo3@gmail.com</td>
												<td class="pe-0">
													<span class="badge badge-secondary light badge-sm">Important</span>
													<span class="badge badge-warning light badge-sm">Lead</span>
												</td>
												<td class="pe-0">(123) 456 789</td>
												<td class="pe-0"><span class="d-flex align-items-center"><i class="fa-solid fa-circle text-primary fs-8 me-1"></i>In Progress</span></td>
												<td><span>10 Feb 1994</span></td>
											</tr>
											<tr>
												<td>
													<div class="form-check custom-checkbox">
														<input type="checkbox" class="form-check-input check-input" required="">
													</div>
												</td>
												<td>
													<div class="d-flex align-items-center">
													<img src="{% static 'hexabox/images/avatar/small/avatar1.webp' %}" class="avatar avatar-xs rounded-circle border border-2 border-white" alt="">
														<p class="mb-0 ms-2">Harper Joy</p>	
													</div>
												</td>
												<td>demo3@gmail.com</td>
												<td class="pe-0"><span class="badge badge-danger light badge-sm">Supplier</span></td>
												<td class="pe-0">(123) 456 789</td>
												<td class="pe-0"><span class="d-flex align-items-center"><i class="fa-solid fa-circle text-primary fs-8 me-1"></i>In Progress</span></td>
												<td><span>10 Feb 1994</span></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					<!-- End - Contact Table -->

				</div>
			</div>

		<!-- Start - Add Contacts Modal -->
		<div class="offcanvas offcanvas-end custom-offcanvas" tabindex="-1" id="offcanvasExample">
			<div class="offcanvas-header pb-0">
				<h2 class="modal-title fs-5" id="#gridSystemModal">Add Employee</h2>
				<button type="button" class="btn btn-square btn-danger light btn-sm ms-auto" data-bs-dismiss="offcanvas" aria-label="Close">
					<i class="fa-solid fa-xmark"></i>
				</button>
			</div>
			<div class="offcanvas-body">
				<div class="mb-3">
					<label class="form-label">Profile Picture</label>
					<form action="#" class="dropzone">
						<div class="dropzone-content">
							<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M27.1666 26.6667L20.4999 20L13.8333 26.6667" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
								<path d="M20.5 20V35" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
								<path d="M34.4833 30.6501C36.1088 29.7638 37.393 28.3615 38.1331 26.6644C38.8731 24.9673 39.027 23.0721 38.5703 21.2779C38.1136 19.4836 37.0724 17.8926 35.6111 16.7558C34.1497 15.619 32.3514 15.0013 30.4999 15.0001H28.3999C27.8955 13.0488 26.9552 11.2373 25.6498 9.70171C24.3445 8.16614 22.708 6.94647 20.8634 6.1344C19.0189 5.32233 17.0142 4.93899 15.0001 5.01319C12.9861 5.0874 11.015 5.61722 9.23523 6.56283C7.45541 7.50844 5.91312 8.84523 4.7243 10.4727C3.53549 12.1002 2.73108 13.9759 2.37157 15.959C2.01205 17.9421 2.10678 19.9809 2.64862 21.9222C3.19047 23.8634 4.16534 25.6565 5.49994 27.1667" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
								<path d="M27.1666 26.6667L20.4999 20L13.8333 26.6667" stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
							</svg>
							<div class="fallback">																
								<input name="file" type="file" multiple>
							</div>
						</div>
					</form>	
				</div>
				<form>
					<div class="row">
						<div class="col-xl-6 mb-3">
							<label for="exampleFormControlInput1" class="form-label">Employee ID <span class="text-danger">*</span></label>
							<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="">
						</div>	
						<div class="col-xl-6 mb-3">
							<label for="exampleFormControlInput2" class="form-label">Employee Name<span class="text-danger">*</span></label>
							<input type="text" class="form-control" id="exampleFormControlInput2" placeholder="">
						</div>	
						<div class="col-xl-6 mb-3">
							<label for="exampleFormControlInput3" class="form-label">Employee Email<span class="text-danger">*</span></label>
							<input type="email" class="form-control" id="exampleFormControlInput3" placeholder="">
						</div>
						<div class="col-xl-6 mb-3">
							<label for="exampleFormControlInput4" class="form-label">Password<span class="text-danger">*</span></label>
							<input type="password" autocomplete="current-password" class="form-control" id="exampleFormControlInput4" placeholder="">
						</div>
						<div class="col-xl-6 mb-3">
							<label class="form-label">Designation<span class="text-danger">*</span></label>
							<select class="selectpicker form-select">
								<option data-display="Select">Please select</option>
								<option value="Software Engineer">Software Engineer</option>
								<option value="Civil Engineer">Civil Engineer</option>
								<option value="Web Doveloper">Web Doveloper</option>
							</select>
						</div>	
						<div class="col-xl-6 mb-3">
							<label class="form-label">Department<span class="text-danger">*</span></label>
							<select class="selectpicker form-select">
								<option data-display="Select">Please select</option>
								<option value="Software">Software</option>
								<option value="Doit">Doit</option>
								<option value="Designing">Designing</option>
							</select>
						</div>
						<div class="col-xl-6 mb-3">
							<label class="form-label">Country<span class="text-danger">*</span></label>
							<select class="selectpicker form-select">
								<option data-display="Select">Please select</option>
								<option value="Ind">Ind</option>
								<option value="USA">USA</option>
								<option value="UK">UK</option>
							</select>
						</div>
						<div class="col-xl-6 mb-3">
							<label for="exampleFormControlInput88" class="form-label">Mobile<span class="text-danger">*</span></label>
							<input type="number" class="form-control type-number" id="exampleFormControlInput88" placeholder="">
						</div>
						<div class="col-xl-6 mb-3">
							<label class="form-label">Gender<span class="text-danger">*</span></label>
							<select class="selectpicker form-select">
								<option data-display="Select">Please select</option>
								<option value="Male">Male</option>
								<option value="Female">Female</option>
								<option value="Other">Other</option>
							</select>
						</div>
						<div class="col-xl-6 mb-3">
							<label for="defaultFlatpickr" class="form-label">Joining Date<span class="text-danger">*</span></label>
							<input type="text" class="form-control" id="defaultFlatpickr">
						</div>
						<div class="col-xl-6 mb-3">
							<label for="defaultFlatpickr2" class="form-label">Date of Birth<span class="text-danger">*</span></label>
							<input type="text" class="form-control" id="defaultFlatpickr2">
						</div>
						<div class="col-xl-6 mb-3">
							<label for="exampleFormControlInput10" class="form-label">Reporting To<span class="text-danger">*</span></label>
							<input type="text" class="form-control" id="exampleFormControlInput10" placeholder="">
						</div>		
						<div class="col-xl-6 mb-3">
							<label class="form-label">Language Select<span class="text-danger">*</span></label>
							<select class="selectpicker form-select">
								<option data-display="Select">Please select</option>
								<option value="English">English</option>
								<option value="Hindi">Hindi</option>
								<option value="Canada">Canada</option>
							</select>
						</div>
						<div class="col-xl-6 mb-3">
							<label class="form-label">User Role<span class="text-danger">*</span></label>
							<select class="selectpicker form-select">
								<option data-display="Select">Please select</option>
								<option value="html">Parmanent</option>
								<option value="css">Parttime</option>
								<option value="javascript">Per Hours</option>
							</select>
						</div>
						<div class="col-xl-12 mb-3">
							<label class="form-label">Address<span class="text-danger">*</span></label>
							<textarea rows="2" class="form-control"></textarea>
						</div>
						<div class="col-xl-12 mb-3">
							<label class="form-label">About<span class="text-danger">*</span></label>
							<textarea rows="2" class="form-control"></textarea>
						</div>	
					</div>
					<div class="clearfix">
						<button class="btn btn-danger light">Cancel</button>
						<button class="btn btn-primary ms-2">Submit</button>
					</div>
				</form>
			</div>
		</div>
		<!-- End - Add Contacts Modal -->	
		
		<!-- Start - Invite Customer Modal -->
		<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header">
						<h2 class="modal-title fs-5" id="exampleModalLabel1">Invite Customer</h2>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<div class="row">
							<div class="col-xl-12 mb-3">
								<label class="form-label">Email ID<span class="text-danger">*</span></label>
								<input type="email" class="form-control" placeholder="hello@gmail.com">
							</div>
							<div class="col-xl-12 mb-3">
								<label class="form-label">Employment date<span class="text-danger">*</span></label>
								<input class="form-control bs-datepicker" type="text">
							</div>
							<div class="col-xl-6 mb-3">
								<label class="form-label">First Name<span class="text-danger">*</span></label>
								<div class="input-group">
									<input type="text" class="form-control">
								</div>
							</div>
							<div class="col-xl-6 mb-3">
								<label class="form-label">Last Name<span class="text-danger">*</span></label>
								<div class="input-group">
									<input type="text" class="form-control">
								</div>
							</div>
							<div class="col-xl-12 mb-3">
								<label class="form-label">Send invitation email <span class="text-danger">*</span></label>
								<input type="email" class="form-control text-center" placeholder=" + invite ">
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-primary">Save changes</button>
					</div>
				</div>
			</div>
		</div>
		<!-- End - Invite Customer Modal -->


{% endblock %}