<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<th:block layout:fragment="pagetitle">
	<!--page title-->
	<div th:replace="partials/title-meta :: title-meta('Sellers')"></div>
</th:block>

<head>
</head>

<body>
	<div layout:fragment="content">
		<div th:replace="partials/page-title :: page-title('Sellers','Ecommerce')"></div>

		<div class="card">
			<div class="card-header border-0 rounded">
				<div class="row g-2">
					<div class="col-xl-3">
						<div class="search-box">
							<input type="text" class="form-control search" placeholder="Search for sellers & owner name or something..."> <i class="ri-search-line search-icon"></i>
						</div>
					</div>
					<!--end col-->
					<div class="col-xxl-3 ms-auto">
						<div>
							<select class="form-control" data-choices data-choices-search-false>
								<option value="">Select Categories</option>
								<option value="All">All</option>
								<option value="Retailer">Retailer</option>
								<option value="Health & Medicine">Health & Medicine</option>
								<option value="Manufacturer">Manufacturer</option>
								<option value="Food Service">Food Service</option>
								<option value="Computers & Electronics">Computers & Electronics</option>
							</select>
						</div>
					</div>
					<!--end col-->
					<div class="col-lg-auto">
						<div class="hstack gap-2">
							<button type="button" class="btn btn-danger"><i class="ri-equalizer-fill me-1 align-bottom"></i> Filters</button>
							<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addSeller"><i class="ri-add-fill me-1 align-bottom"></i> Add Seller</button>
						</div>
					</div>
					<!--end col-->
				</div>
				<!--end row-->
			</div>
		</div>

		<div class="row mt-4">
			<div class="col-xl-3 col-lg-6">
				<div class="card ribbon-box right overflow-hidden">
					<div class="card-body text-center p-4">
						<div class="ribbon ribbon-danger ribbon-shape trending-ribbon"><i class="ri-flashlight-fill text-white align-bottom"></i> <span class="trending-ribbon-text">Trending</span></div>
						<img src="/assets/images/companies/img-1.png" alt="" height="45">
						<h5 class="mb-1 mt-4"><a href="/apps-ecommerce-seller-details" class="text-reset">Force Medicines</a></h5>
						<p class="text-muted mb-4">David Marshall</p>
						<div class="row justify-content-center">
							<div class="col-lg-8">
								<div id="chart-seller1" data-colors='["--vz-danger"]'></div>
							</div>
						</div>
						<div class="row mt-4">
							<div class="col-lg-6 border-end-dashed border-end">
								<h5>452</h5>
								<span class="text-muted">Item Stock</span>
							</div>
							<div class="col-lg-6">
								<h5>$45,415</h5>
								<span class="text-muted">Wallet Balance</span>
							</div>
						</div>
						<div class="mt-4">
							<a href="/apps-ecommerce-seller-details" class="btn btn-light w-100">View Details</a>
						</div>
					</div>
				</div>
			</div>
			<!--end col-->
			<div class="col-xl-3 col-lg-6">
				<div class="card">
					<div class="card-body text-center p-4">
						<img src="/assets/images/companies/img-2.png" alt="" height="45">
						<h5 class="mb-1 mt-4"><a href="/apps-ecommerce-seller-details" class="text-reset">Micro Design</a></h5>
						<p class="text-muted mb-4">Katia Stapleton</p>
						<div class="row justify-content-center">
							<div class="col-lg-8">
								<div id="chart-seller2" data-colors='["--vz-success"]'></div>
							</div>
						</div>
						<div class="row mt-4">
							<div class="col-lg-6 border-end-dashed border-end">
								<h5>784</h5>
								<span class="text-muted">Item Stock</span>
							</div>
							<div class="col-lg-6">
								<h5>$97,642</h5>
								<span class="text-muted">Wallet Balance</span>
							</div>
						</div>
						<div class="mt-4">
							<a href="/apps-ecommerce-seller-details" class="btn btn-light w-100">View Details</a>
						</div>
					</div>
				</div>
			</div>
			<!--end col-->
			<div class="col-xl-3 col-lg-6">
				<div class="card">
					<div class="card-body text-center p-4">
						<img src="/assets/images/companies/img-3.png" alt="" height="45">
						<h5 class="mb-1 mt-4"><a href="/apps-ecommerce-seller-details" class="text-reset">Nesta Technologies</a></h5>
						<p class="text-muted mb-4">Harley Fuller</p>
						<div class="row justify-content-center">
							<div class="col-lg-8">
								<div id="chart-seller3" data-colors='["--vz-warning"]'></div>
							</div>
						</div>
						<div class="row mt-4">
							<div class="col-lg-6 border-end-dashed border-end">
								<h5>320</h5>
								<span class="text-muted">Item Stock</span>
							</div>
							<div class="col-lg-6">
								<h5>$27,102</h5>
								<span class="text-muted">Wallet Balance</span>
							</div>
						</div>
						<div class="mt-4">
							<a href="/apps-ecommerce-seller-details" class="btn btn-light w-100">View Details</a>
						</div>
					</div>
				</div>
			</div>
			<!--end col-->
			<div class="col-xl-3 col-lg-6">
				<div class="card ribbon-box right overflow-hidden">
					<div class="card-body text-center p-4">
						<div class="ribbon ribbon-danger ribbon-shape trending-ribbon"><i class="ri-flashlight-fill text-white align-bottom"></i> <span class="trending-ribbon-text">Trending</span></div>
						<img src="/assets/images/companies/img-4.png" alt="" height="45">
						<h5 class="mb-1 mt-4"><a href="/apps-ecommerce-seller-details" class="text-reset">iTest Factory</a></h5>
						<p class="text-muted mb-4">Oliver Tyler</p>
						<div class="row justify-content-center">
							<div class="col-lg-8">
								<div id="chart-seller4" data-colors='["--vz-success"]'></div>
							</div>
						</div>
						<div class="row mt-4">
							<div class="col-lg-6 border-end-dashed border-end">
								<h5>159</h5>
								<span class="text-muted">Item Stock</span>
							</div>
							<div class="col-lg-6">
								<h5>$14,933</h5>
								<span class="text-muted">Wallet Balance</span>
							</div>
						</div>
						<div class="mt-4">
							<a href="/apps-ecommerce-seller-details" class="btn btn-light w-100">View Details</a>
						</div>
					</div>
				</div>
			</div>
			<!--end col-->
			<div class="col-xl-3 col-lg-6">
				<div class="card">
					<div class="card-body text-center p-4">
						<img src="/assets/images/companies/img-5.png" alt="" height="45">
						<h5 class="mb-1 mt-4"><a href="/apps-ecommerce-seller-details" class="text-reset">Meta4Systems</a></h5>
						<p class="text-muted mb-4">Zoe Dennis</p>
						<div class="row justify-content-center">
							<div class="col-lg-8">
								<div id="chart-seller5" data-colors='["--vz-warning"]'></div>
							</div>
						</div>
						<div class="row mt-4">
							<div class="col-lg-6 border-end-dashed border-end">
								<h5>363</h5>
								<span class="text-muted">Item Stock</span>
							</div>
							<div class="col-lg-6">
								<h5>$73,426</h5>
								<span class="text-muted">Wallet Balance</span>
							</div>
						</div>
						<div class="mt-4">
							<a href="/apps-ecommerce-seller-details" class="btn btn-light w-100">View Details</a>
						</div>
					</div>
				</div>
			</div>
			<!--end col-->
			<div class="col-xl-3 col-lg-6">
				<div class="card ribbon-box right overflow-hidden">
					<div class="card-body text-center p-4">
						<div class="ribbon ribbon-danger ribbon-shape trending-ribbon"><i class="ri-flashlight-fill text-white align-bottom"></i> <span class="trending-ribbon-text">Trending</span></div>
						<img src="/assets/images/companies/img-6.png" alt="" height="45">
						<h5 class="mb-1 mt-4"><a href="/apps-ecommerce-seller-details" class="text-reset">Digitech Galaxy</a></h5>
						<p class="text-muted mb-4">John Roberts</p>
						<div class="row justify-content-center">
							<div class="col-lg-8">
								<div id="chart-seller6" data-colors='["--vz-success"]'></div>
							</div>
						</div>
						<div class="row mt-4">
							<div class="col-lg-6 border-end-dashed border-end">
								<h5>412</h5>
								<span class="text-muted">Item Stock</span>
							</div>
							<div class="col-lg-6">
								<h5>$34,241</h5>
								<span class="text-muted">Wallet Balance</span>
							</div>
						</div>
						<div class="mt-4">
							<a href="/apps-ecommerce-seller-details" class="btn btn-light w-100">View Details</a>
						</div>
					</div>
				</div>
			</div>
			<!--end col-->
			<div class="col-xl-3 col-lg-6">
				<div class="card ribbon-box right overflow-hidden">
					<div class="card-body text-center p-4">
						<div class="ribbon ribbon-danger ribbon-shape trending-ribbon"><i class="ri-flashlight-fill text-white align-bottom"></i> <span class="trending-ribbon-text">Trending</span></div>
						<img src="/assets/images/companies/img-7.png" alt="" height="45">
						<h5 class="mb-1 mt-4"><a href="/apps-ecommerce-seller-details" class="text-reset">Syntyce Solutions</a></h5>
						<p class="text-muted mb-4">Demi Allen</p>
						<div class="row justify-content-center">
							<div class="col-lg-8">
								<div id="chart-seller7" data-colors='["--vz-danger"]'></div>
							</div>
						</div>
						<div class="row mt-4">
							<div class="col-lg-6 border-end-dashed border-end">
								<h5>945</h5>
								<span class="text-muted">Item Stock</span>
							</div>
							<div class="col-lg-6">
								<h5>$17,200</h5>
								<span class="text-muted">Wallet Balance</span>
							</div>
						</div>
						<div class="mt-4">
							<a href="/apps-ecommerce-seller-details" class="btn btn-light w-100">View Details</a>
						</div>
					</div>
				</div>
			</div>
			<!--end col-->
			<div class="col-xl-3 col-lg-6">
				<div class="card">
					<div class="card-body text-center p-4">
						<img src="/assets/images/companies/img-8.png" alt="" height="45">
						<h5 class="mb-1 mt-4"><a href="/apps-ecommerce-seller-details" class="text-reset">Zoetic Fashion</a></h5>
						<p class="text-muted mb-4">James Bowen</p>
						<div class="row justify-content-center">
							<div class="col-lg-8">
								<div id="chart-seller8" data-colors='["--vz-warning"]'></div>
							</div>
						</div>
						<div class="row mt-4">
							<div class="col-lg-6 border-end-dashed border-end">
								<h5>784</h5>
								<span class="text-muted">Item Stock</span>
							</div>
							<div class="col-lg-6">
								<h5>$97,642</h5>
								<span class="text-muted">Wallet Balance</span>
							</div>
						</div>
						<div class="mt-4">
							<a href="/apps-ecommerce-seller-details" class="btn btn-light w-100">View Details</a>
						</div>
					</div>
				</div>
			</div>
			<!--end col-->
		</div>
		<!--end row-->

		<div class="row g-0 text-center text-sm-start align-items-center mb-3">
			<div class="col-sm-6">
				<div>
					<p class="mb-sm-0">Showing 1 to 8 of 12 entries</p>
				</div>
			</div> <!-- end col -->
			<div class="col-sm-6">
				<ul class="pagination pagination-separated justify-content-center justify-content-sm-end mb-sm-0">
					<li class="page-item disabled"> <a href="#" class="page-link"><i class="mdi mdi-chevron-left"></i></a> </li>
					<li class="page-item active"> <a href="#" class="page-link">1</a> </li>
					<li class="page-item "> <a href="#" class="page-link">2</a> </li>
					<li class="page-item"> <a href="#" class="page-link">3</a> </li>
					<li class="page-item"> <a href="#" class="page-link">4</a> </li>
					<li class="page-item"> <a href="#" class="page-link">5</a> </li>
					<li class="page-item"> <a href="#" class="page-link"><i class="mdi mdi-chevron-right"></i></a> </li>
				</ul>
			</div><!-- end col -->
		</div><!-- end row -->

		<!-- Modal -->
		<div class="modal fade zoomIn" id="addSeller" tabindex="-1" aria-labelledby="addSellerLabel" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="addSellerLabel">Add Seller</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-content border-0 mt-3">
						<ul class="nav nav-tabs nav-tabs-custom nav-success p-2 pb-0 bg-light" role="tablist">
							<li class="nav-item">
								<a class="nav-link active" data-bs-toggle="tab" href="#personalDetails" role="tab" aria-selected="true">
									Personal Details
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" data-bs-toggle="tab" href="#businessDetails" role="tab" aria-selected="false">
									Business Details
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" data-bs-toggle="tab" href="#bankDetails" role="tab" aria-selected="false">
									Bank Details
								</a>
							</li>
						</ul>
					</div>
					<div class="modal-body">
						<div class="tab-content">
							<div class="tab-pane active" id="personalDetails" role="tabpanel">
								<form action="#">
									<div class="row">
										<div class="col-lg-6">
											<div class="mb-3">
												<label for="firstnameInput" class="form-label">First Name</label>
												<input type="text" class="form-control" id="firstnameInput" placeholder="Enter your firstname">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-6">
											<div class="mb-3">
												<label for="lastnameInput" class="form-label">Last Name</label>
												<input type="text" class="form-control" id="lastnameInput" placeholder="Enter your lastname">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-6">
											<div class="mb-3">
												<label for="contactnumberInput" class="form-label">Contact Number</label>
												<input type="number" class="form-control" id="contactnumberInput" placeholder="Enter your number">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-6">
											<div class="mb-3">
												<label for="phonenumberInput" class="form-label">Phone Number</label>
												<input type="number" class="form-control" id="phonenumberInput" placeholder="Enter your number">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-6">
											<div class="mb-3">
												<label for="emailidInput" class="form-label">Email</label>
												<input type="email" class="form-control" id="emailidInput" placeholder="Enter your email">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-6">
											<div class="mb-3">
												<label for="birthdayidInput" class="form-label">Date of Birth</label>
												<input type="text" id="birthdayidInput" class="form-control" data-provider="flatpickr" placeholder="Enter your date of birth">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-4">
											<div class="mb-3">
												<label for="cityidInput" class="form-label">City</label>
												<input type="text" class="form-control" id="cityidInput" placeholder="Enter your city">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-4">
											<div class="mb-3">
												<label for="countryidInput" class="form-label">Country</label>
												<input type="text" class="form-control" id="countryidInput" placeholder="Enter your country">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-4">
											<div class="mb-3">
												<label for="zipcodeidInput" class="form-label">Zip Code</label>
												<input type="text" class="form-control" id="zipcodeidInput" placeholder="Enter your zipcode">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-12">
											<div class="mb-3">
												<label for="exampleFormControlTextarea1" class="form-label">Description</label>
												<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Enter description"></textarea>
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-12">
											<div class="hstack gap-2 justify-content-end">
												<button class="btn btn-link link-success text-decoration-none fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
												<button type="submit" class="btn btn-primary"><i class="ri-save-3-line align-bottom me-1"></i> Save</button>
											</div>
										</div>
										<!--end col-->
									</div>
									<!--end row-->
								</form>
							</div>
							<div class="tab-pane" id="businessDetails" role="tabpanel">
								<form action="#">
									<div class="row">
										<div class="col-lg-12">
											<div class="mb-3">
												<label for="companynameInput" class="form-label">Company Name</label>
												<input type="text" class="form-control" id="companynameInput" placeholder="Enter your company name">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-6">
											<div class="mb-3">
												<label for="choices-single-default" class="form-label">Company Type</label>
												<select class="form-control" data-trigger name="choices-single-default" id="choices-single-default">
													<option value="">Select type</option>
													<option value="All" selected>All</option>
													<option value="Merchandising">Merchandising</option>
													<option value="Manufacturing">Manufacturing</option>
													<option value="Partnership">Partnership</option>
													<option value="Corporation">Corporation</option>
												</select>
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-6">
											<div class="mb-3">
												<label for="pancardInput" class="form-label">Pan Card Number</label>
												<input type="text" class="form-control" id="pancardInput" placeholder="Enter your pan-card number">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-4">
											<div class="mb-3">
												<label for="websiteInput" class="form-label">Website</label>
												<input type="url" class="form-control" id="websiteInput" placeholder="Enter your URL">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-4">
											<div class="mb-3">
												<label for="faxInput" class="form-label">Fax</label>
												<input type="text" class="form-control" id="faxInput" placeholder="Enter your fax">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-4">
											<div class="mb-3">
												<label for="companyemailInput" class="form-label">Email</label>
												<input type="email" class="form-control" id="companyemailInput" placeholder="Enter your email">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-6">
											<div class="mb-3">
												<label for="worknumberInput" class="form-label">Number</label>
												<input type="number" class="form-control" id="worknumberInput" placeholder="Enter your number">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-6">
											<div class="mb-3">
												<label for="companylogoInput" class="form-label">Company Logo</label>
												<input type="file" class="form-control" id="companylogoInput">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-12">
											<div class="hstack gap-2 justify-content-end">
												<button class="btn btn-link link-success text-decoration-none fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
												<button type="submit" class="btn btn-primary"><i class="ri-save-3-line align-bottom me-1"></i> Save</button>
											</div>
										</div>
										<!--end col-->
									</div>
									<!--end row-->
								</form>
							</div>
							<div class="tab-pane" id="bankDetails" role="tabpanel">
								<form action="#">
									<div class="row">
										<div class="col-lg-6">
											<div class="mb-3">
												<label for="banknameInput" class="form-label">Bank Name</label>
												<input type="text" class="form-control" id="banknameInput" placeholder="Enter your bank name">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-6">
											<div class="mb-3">
												<label for="branchInput" class="form-label">Branch</label>
												<input type="text" class="form-control" id="branchInput" placeholder="Branch">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-12">
											<div class="mb-3">
												<label for="accountnameInput" class="form-label">Account Holder Name</label>
												<input type="text" class="form-control" id="accountnameInput" placeholder="Enter account holder name">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-6">
											<div class="mb-3">
												<label for="accountnumberInput" class="form-label">Account Number</label>
												<input type="number" class="form-control" id="accountnumberInput" placeholder="Enter account number">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-6">
											<div class="mb-3">
												<label for="ifscInput" class="form-label">IFSC</label>
												<input type="number" class="form-control" id="ifscInput" placeholder="IFSC">
											</div>
										</div>
										<!--end col-->
										<div class="col-lg-12">
											<div class="hstack gap-2 justify-content-end">
												<button class="btn btn-link link-success text-decoration-none fw-medium" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
												<button type="submit" class="btn btn-primary"><i class="ri-save-3-line align-bottom me-1"></i> Save</button>
											</div>
										</div>
										<!--end col-->
									</div>
									<!--end row-->
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--end modal-->
	</div>


	<th:block layout:fragment="pagejs">

		<!-- apexcharts -->
		<script src="/assets/libs/apexcharts/apexcharts.min.js"></script>

		<!-- sellers init js -->
		<script src="/assets/js/pages/sellers.init.js"></script>
	</th:block>
</body>

</html>