{% extends 'yashadmin/elements/layouts/admin.html' %}

        
{% block additional_css %}
{% endblock %}
        
{% block content %}
<!--**********************************
	Content body start
***********************************-->
<div class="content-body">
	<div class="container-fluid">
		<div class="row">
			<div class="col-xl-12">
				<div class="card">
					<div class="card-body">
						<div class="row">
							<div class="col-lg-4 order-lg-2 mb-4">
								<h4 class="d-flex justify-content-between align-items-center mb-3">
									<span class="text-muted">Your cart</span>
									<span class="badge badge-primary badge-pill">3</span>
								</h4>
								<ul class="list-group mb-3">
									<li class="list-group-item d-flex justify-content-between lh-condensed">
										<div>
											<h6 class="my-0">Product name</h6>
											<small class="text-muted">Brief description</small>
										</div>
										<span class="text-muted">$12</span>
									</li>
									<li class="list-group-item d-flex justify-content-between lh-condensed">
										<div>
											<h6 class="my-0">Second product</h6>
											<small class="text-muted">Brief description</small>
										</div>
										<span class="text-muted">$8</span>
									</li>
									<li class="list-group-item d-flex justify-content-between lh-condensed">
										<div>
											<h6 class="my-0">Third item</h6>
											<small class="text-muted">Brief description</small>
										</div>
										<span class="text-muted">$5</span>
									</li>
									<li class="list-group-item d-flex justify-content-between active">
										<div class="text-white">
											<h6 class="my-0 text-white">Promo code</h6>
											<small>EXAMPLECODE</small>
										</div>
										<span class="text-white">-$5</span>
									</li>
									<li class="list-group-item d-flex justify-content-between">
										<span>Total (USD)</span>
										<strong>$20</strong>
									</li>
								</ul>

								<form>
									<div class="input-group">
										<input type="text" class="form-control" placeholder="Promo code">
										<button type="submit" class="input-group-text">Redeem</button>
									</div>
								</form>
							</div>
							<div class="col-lg-8 order-lg-1">
								<h4 class="mb-3">Billing address</h4>
								<form class="needs-validation" novalidate="">
									<div class="row">
										<div class="col-md-6 mb-3">
											<label for="firstName" class="form-label">First name</label>
											<input type="text" class="form-control" id="firstName" placeholder="" value="" required="">
											<div class="invalid-feedback">
												Valid first name is required.
											</div>
										</div>
										<div class="col-md-6 mb-3">
											<label for="lastName"  class="form-label">Last name</label>
											<input type="text" class="form-control" id="lastName" placeholder="" value="" required="">
											<div class="invalid-feedback">
												Valid last name is required.
											</div>
										</div>
									</div>

									<div class="mb-3">
										<label for="username"  class="form-label">Username</label>
										<div class="input-group">
											<span class="input-group-text">@</span>
											<input type="text" class="form-control" id="username" placeholder="Username" required="">
											<div class="invalid-feedback" style="width: 100%;">
												Your username is required.
											</div>
										</div>
									</div>

									<div class="mb-3">
										<label for="email"  class="form-label">Email <span
												class="text-muted">(Optional)</span></label>
										<input type="email" class="form-control" id="email" placeholder="you@example.com">
										<div class="invalid-feedback">
											Please enter a valid email address for shipping updates.
										</div>
									</div>

									<div class="mb-3">
										<label for="address"  class="form-label">Address</label>
										<input type="text" class="form-control" id="address" placeholder="1234 Main St" required="">
										<div class="invalid-feedback">
											Please enter your shipping address.
										</div>
									</div>

									<div class="mb-3">
										<label for="address2"  class="form-label">Address 2 <span
												class="text-muted">(Optional)</span></label>
										<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
									</div>

									<div class="row">
										<div class="col-md-5 mb-3">
											<label class="form-label">Country</label>
											<select class="default-select form-control wide w-100">
												<option selected >Choose...</option>
												<option value="1">United States</option>
											</select>
											<div class="invalid-feedback">
												Please select a valid country.
											</div>
										</div>
										<div class="col-md-4 mb-3">
											<label  class="form-label">State</label>
											<select class="default-select form-control wide w-100">
												<option selected>Choose...</option>
												<option>California</option>
											</select>
											<div class="invalid-feedback">
												Please provide a valid state.
											</div>
										</div>
										<div class="col-md-3 mb-3">
											<label for="zip"  class="form-label">Zip</label>
											<input type="text" class="form-control" id="zip" placeholder="" required="">
											<div class="invalid-feedback">
												Zip code required.
											</div>
										</div>
									</div>
									<hr class="mb-4">
									<div class="form-check custom-checkbox mb-2">
										<input type="checkbox" class="form-check-input" id="same-address">
										<label class="form-check-label" for="same-address">Shipping address
											is
											the same as
											my billing address</label>
									</div>
									<div class="form-check custom-checkbox mb-2">
										<input type="checkbox" class="form-check-input" id="save-info">
										<label class="form-check-label" for="save-info">Save this
											information
											for next
											time</label>
									</div>
									<hr class="mb-4">

									<h4 class="mb-3">Payment</h4>

									<div class="d-block my-3">
										<div class="form-check custom-radio mb-2">
											<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked="" required="">
											<label class="form-check-label" for="credit">Credit card</label>
										</div>
										<div class="form-check custom-radio mb-2">
											<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required="">
											<label class="form-check-label" for="debit">Debit card</label>
										</div>
										<div class="form-check custom-radio mb-2">
											<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required="">
											<label class="form-check-label" for="paypal">Paypal</label>
										</div>
									</div>
									<div class="row">
										<div class="col-md-6 mb-3">
											<label for="cc-name"  class="form-label">Name on card</label>
											<input type="text" class="form-control" id="cc-name" placeholder="" required="">
											<small class="text-muted">Full name as displayed on card</small>
											<div class="invalid-feedback">
												Name on card is required
											</div>
										</div>
										<div class="col-md-6 mb-3">
											<label for="cc-number"  class="form-label">Credit card number</label>
											<input type="text" class="form-control" id="cc-number" placeholder="" required="">
											<div class="invalid-feedback">
												Credit card number is required
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-md-3 mb-3">
											<label for="cc-expiration"  class="form-label">Expiration</label>
											<input type="text" class="form-control" id="cc-expiration" placeholder="" required="">
											<div class="invalid-feedback">
												Expiration date required
											</div>
										</div>
										<div class="col-md-3 mb-3">
											<label for="cc-expiration"  class="form-label">CVV</label>
											<input type="text" class="form-control" id="cc-cvv" placeholder="" required="">
											<div class="invalid-feedback">
												Security code required
											</div>
										</div>
									</div>
									<hr class="mb-4">
									<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to
										checkout</button>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--**********************************
	Content body end
***********************************-->
{% endblock %}