<%@ page import ="com.entities.User" %> 
<%  
User user = (User)session.getAttribute("current-user");
if(user==null){
	
	session.setAttribute("message", "You are not logged in! Login First");
	response.sendRedirect("login.jsp");
	
	
}

%>


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Arifact's|Checkout</title>
<link rel = "icon" href = "images/icon.jpg" type = "image/x-icon">
<%@include file="components/bootstrapcss.jsp" %>
<style>
*{ 
    margin: 0;
    padding: 0;
    box-sizing:border-box;
    font-family: 'Poppins', sans-serif;
    align-content: center;
}
.navbar{ 
    display: flex;
    align-items: center;
    padding: 40px;
    top: 35px;
    right: 30px;
    cursor: pointer;
   
}
nav{ 
    flex: 1;
    text-align: right;
    
}
nav ul{ 
    display: inline-block;
    list-style-type: none;
    text-decoration: none;
    
}
nav ul li{ 
     display: inline-block;
    margin-right: 40px;
    position: relative;
    text-decoration: none;
}

nav ul li::after{ 
   content: '';
    height: 3px;
    width: 0;
    background: #009688;
    position: absolute;
    left: 0;
    bottom: -10px;
    transition: 0.7s;
}

nav ul li:hover::after{ 
   width: 100%;
    
}

.navbar .fa{ 
     width: 50px;
    height: 50px;
     align-items: center;
    font-size: 30px;
    line-height: 50px; 
    color: #fff;
    transition: 0.7s;
}

.navbar .fa:hover{ 
    color: #009688;
    

}

a{ 
    text-decoration: none;
    color: #000;
}


.logo{ 
    width: 250px;
    position: absolute;
    left: 3%;
    top: -10%;
    height: 200px;
}

h1{ 
	text-align: center;
	top: 100%;
	padding: 14px;
}

.card {
    width: 370px;
    height: 530px;
    box-shadow: 0 0 40px 20px rgb(0, 0, 0, 0.1);
    perspective: 1000px;
    background: rgba(255, 255, 255, 0.04);
}

.inner-box {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1s;
}

.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #b55f1d;
    padding: 55px;
    box-sizing: border-box;
    
}





.field {
    
    height: 40px;
    width: 100%;
    display: flex;
    background: rgba(255, 255, 255, 0.94);
}


.field input {
    height: 100%;
    width: 100%;
    background: #0d0204;
    border: white;
    outline: bold;
    color: white;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
}

.field span {
    color: #0d0204;
    width: 30px;
    line-height: 45px;
}

.mail {
    margin-top: 10px;
}

.space {
    margin-top: 10px;
     height: 150px;
}

.phone {
    margin-top: 10px;
} 


button {
	text-align: center;
    width: 100%;
    background:#00e6b8;
    border: 1px solid #00e6b8;
    margin: 30px 0 10px;
    height: 35px;
    font-size: 20px;
    padding: 30px;
    box-sizing: border-box;
    outline: none;
    color: #fff;
    cursor: pointer;
    margin: 13px;
    border-radius : 7px;
    left : 20px;
    top: 50px;
}

#footer{ 
    padding: 50px 0 20px;
    background: #000;
    color: #8a8a8a;
    position: relative;
}

.footer-row{ 
   width: 80%;
   margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
}
.footer-left, .footer-right{ 
    flex-basis: 45%;
    padding: 10px;
    margin-bottom: 20px;
}

.footer-right{ 
    text-align: right;

}

.footer-row h1{ 
margin: 10px 0;
}

.footer-row p{ 
line-height: 35px;
}

ul{ 
    list-style-type: none;

}
.footer-left .fa, .footer-right .fa{ 
    font-size: 20px;
    color: #009688;
    margin: 10px;
}

.footer-img{ 
    max-width: 500px;
    opacity: 0.3;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
}


.social-links{ 
    text-align: center;
}

.social-links .fa{ 
    height: 40px;
    width: 40px;
    font-size: 20px;
    line-height: 40px;
    border: 1px solid #009688;
    margin: 40px 5px 0;
    color: #009688;
    cursor: pointer;
    transition: .5s;
}
.social-links .fa:hover{ 
    background: #009688;
    color: #fff;
    transform: translateY(-7px);
}

.social-links p{ 
    font-size: 14px;
    margin-top: 20px;
}


.row{

margin-top:109px;
}





</style>
</head>
<body>
<section id="banner">
            <a href="about.jsp">
            <img src="images/logos1.png" class="logo">
            </a>
              <div class="navbar">
             
            <nav> 
                <ul> 
                    <li><a href="index.jsp">Home</a></li>
                    <li><a href="products.jsp">Products</a></li>
                    <li><a href="about.jsp">About</a></li>
                    
                   
                       
                </ul>     
            </nav>
                
            </div>
             </section>
<h1 class="text-center mb-3"> Order Now </h1>

<div class="container">
<div class="row">
<div class="col-md-8">

<div class="card-body">
<h3> Your Selected Items</h3>
<div class="cart-body"></div>
</div>
</div>



<div class="col-md-4">

<div class="card">
 <div class="card-back">
                    <h2>Your Details For Order</h2>
                    <form>
                        <div class="field">
                            

                            <input name="check_name" type="text" placeholder="Your Name" required>
                        </div>
                         <div class="field mail">
                            

                            <input name="check_email" type="email" placeholder="Your Email ID" required>
                        </div>

                        <div class="field phone">
                            

                            <input name="check_phone" type="text" placeholder="Your Phone Number" required>
                        </div>
                        <div class="field space">
                            <textarea name="check_address"rows="10" cols="55"placeholder="Your Shipping Address here..."></textarea>
                             <br>
                        </div>


                    </form>

 

                    


</div>
</div>

                        <a href="payment.jsp">
               
                       <button type="submit"><strong>PROCEED TO ORDER</strong></button>
                
            </a>
                 


</div>




</div>



</div>
<section id="footer">
        <img src="images/logos2.png" class="footer-img">
       
        
        <div class="social-links">
            <i class="fa fa-facebook"></i>
            <i class="fa fa-whatsapp"></i>
            <i class="fa fa-instagram"></i>
            <i class="fa fa-twitter"></i>
            <p>=============Copyright Artifact's &amp; Terms &amp; Conditions============</p>
            
        </div>
        
    </section>

 <%@include file="components/modal.jsp" %>
 
 
</body>
</html>