<% include ./Partials/header.ejs %>
<title>Create Product</title>
<link rel="stylesheet" href="/stylesheets/allProducts.css">


<style>
    
    .cartItem{
        width:100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 18vh;
    }
    .items{
        width: 90vw;
        height: 13vh;
        border: 1px solid #00000036;
        display: flex;
        align-items: center;
        margin-top: 2vh;
        border-radius: 7px;
        background-color: #fff;
        
    }
    .frame{
        width:  7%;
        height: 90%;
        margin-left: .5vw;
        border-radius: 7px;
    }
    .frame>img{
        width: 100%;
        height: 100%;
        object-fit: fill;
        border-radius: 7px;
    }
    .item-name>h5{
        font-family: "bookthree";
        font-size: 1.5vw;
    }
    .item-price>h6{
        font-family: "booktwo";
        font-size: 1.3vw;
    
    }
    .itemDets{
        margin-left: 2vw;
    }
    .total-price{
        position: absolute;
        width: 101vw;
        height: 15vh;
        bottom: 0;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px solid #00000038;
        box-shadow: 1px 1px 5px #0000001c;
       
    }
    .quantity{
        width: 7vw;
        position: relative;
        margin-top: -8vh;
        margin-left: 70vw;
       
        
    }
    .quantity>a{
        font-size: 1.3vw;
        color: red;
        font-family: "bookfive";

    }
    #totalAmt{
        margin-left: 1vw;
        font-family: "bookfive";
        color: #000;
    }

    .total-price>h5{
        font-size: 1.8vw;
        font-family:"bookthree";
        font-weight: 400;
        color: #000000d2;
    }
    #rzp-button1{
        padding: 9px 20px !important;
        border-radius: 7px;
        border: none;
        background-color: #FFC064;
        font-family: "bookthree";
        box-shadow: 2px 2px 8px #00000018;
        width: 16vw;
        position: absolute;
        left: 60vw;
        top: 89vh;
        
    }

    #note{
        font-family: "bookfive";
        font-size: 1vw;
        position: absolute;
        

    }
    .box{
        display: flex;
        flex-direction: column;
    }
    .box>span{
        position: relative;
        left: 28.5vw;
        font-family: "bookfive";
        font-size: 1vw;
    }
    .same{
        margin-left: -40vw;
    }
    #tag{
        position: absolute;
        top: 95.5vh;
        left: 61.5vw;
        font-size: 1vw;


    }

    .overlap{
        width: 30vw;
        height: 30vw;
        background-color: #fff;
        box-shadow: 1px 1px 5px #00000046;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .disabled-screen{
        width: 100vw;
        height: 110vh;
        top: -10vh;
        z-index: 99 !important;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #00000042;
        display: none;
    }

</style>

<div class="disabled-screen">
    <div class="overlap">
        <h4>Payment Successfull</h4>
    <a href="/check"><button id="ok">OK</button></a>
    </div>
</div>

<div class="cartItem">

    <% var final = 0 %>
   <% cartItems.forEach(function(item){ %>
    <div class="items">
        <div class="frame"><img src="<%=item.pimage%>" alt=""></div>
        <div class="itemDets">
            <div class="item-name"><h5><%=item.pname%></h5></div>
            <div class="item-price"><h6>₹<%=item.price%></h6></div>
            <div class="quantity">
                <a href="/remove/<%=item._id%>">remove</a>
            </div>
        </div>
     </div>

     <div class="total-price">
     <% total = item.price %>
     <% var val = total.replace(/,/g, ""); %>
     <% var totalPrice = parseInt(val); %>
     <% final += totalPrice %>
     <% var format = Number(final); %>
     <% var newFormat = format.toLocaleString(); %>
     <h5 class="same">Total Amount To Pay: <br> <span id="note">This version is for practice purpose</span></h5>
     <h5 id="totalAmt" class="same">₹<%= newFormat %></h5>
     </div>
    
   <% }) %>


</div>




<div class="box">
    <button id="rzp-button1" data-final="<%= final %>">Place Order</button><span id="tag">Click here to place your order</span>
   
</div>

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

<script>

document.getElementById('rzp-button1').onclick = async function(e){
    e.preventDefault();

    // Retrieve the value of "final" from the data attribute
    var final = document.getElementById('rzp-button1').getAttribute('data-final');

    let response = await fetch("https://amazonclone-webproject.onrender.com/payment", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            amount: final * 100,
        })
    })
 

    let orderData = await response.json();
    console.log(orderData.order.id);

    var options = {
    "key": "rzp_test_PCIwXguS5ffBCG", // Enter the Key ID generated from the Dashboard
    "amount": final * 100, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
    "currency": "INR",
    // "name": "Acme Corp",
    // "description": "Test Transaction",
    // "image": "https://example.com/your_logo",
    "order_id": orderData.order.id, //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
    "handler": function (response){
        // alert(response.razorpay_payment_id);
        // alert(response.razorpay_order_id);
        // alert(response.razorpay_signature)
        window.location.href = 'https://amazonclone-webproject.onrender.com/check';

$.ajax({
    url: 'http://localhost:3000/pay-verify',
    type: 'POST',
    data: {
        razorpay_payment_id: response.razorpay_payment_id,
        razorpay_order_id: response.razorpay_order_id,
        razorpay_signature: response.razorpay_signature,
    },
})
    },
};
var rzp1 = new Razorpay(options);
    rzp1.open();
}


// var opScreen = document.querySelector(".disabled-screen");
// document.querySelector("#rzp-button1").addEventListener("click", function(){
//     setTimeout(function(){
//     opScreen.style.display = "flex";
// }, 5000)
// });

// var okButton = document.querySelector("#ok");
// okButton.addEventListener("click", function(){
//     opScreen.style.display = "none";
// })

</script>
