<!-- views/index.ejs -->
<!doctype html>
<html>
<head>
    <title>Mi tienda en linea desde Azure</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

    <script src="https://js.stripe.com/v3/"></script>
<style>


.cta-100 {
  margin-top: 100px;
  padding-left: 8%;
  padding-top: 7%;
}
.col-md-4{
    padding-bottom:20px;
}

.white {
  color: #fff !important;
}
.mt{float: left;margin-top: -20px;padding-top: 20px;}
.bg-blue-ui {
  background-color: #708198 !important;
}
figure img{width:300px;}

#blogCarousel {
  padding-bottom: 100px;
}

.blog .carousel-indicators {
  left: 0;
  top: -50px;
  height: 50%;
}


/* The colour of the indicators */

.blog .carousel-indicators li {
  background: #708198;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.blog .carousel-indicators .active {
  background: #0fc9af;
}




.item-carousel-blog-block {
  outline: medium none;
  padding: 15px;
}

.item-box-blog {
  border: 1px solid #dadada;
  text-align: center;
  z-index: 4;
  padding: 20px;
}

.item-box-blog-image {
  position: relative;
}

.item-box-blog-image figure img {
  width: 100%;
  height: auto;
}

.item-box-blog-date {
  position: absolute;
  z-index: 5;
  padding: 4px 20px;
  top: -20px;
  right: 8px;
  background-color: #41cb52;
}

.item-box-blog-date span {
  color: #fff;
  display: block;
  text-align: center;
  line-height: 1.2;
}

.item-box-blog-date span.mon {
  font-size: 18px;
}

.item-box-blog-date span.day {
  font-size: 16px;
}

.item-box-blog-body {
  padding: 10px;
}

.item-heading-blog a h5 {
  margin: 0;
  line-height: 1;
  text-decoration:none;
  transition: color 0.3s;
}

.item-box-blog-heading a {
    text-decoration: none;
}

.item-box-blog-data p {
  font-size: 13px;
}

.item-box-blog-data p i {
  font-size: 12px;
}

.item-box-blog-text {
  max-height: 100px;
  overflow: hidden;
}

.mt-10 {
  float: left;
  margin-top: -10px;
  padding-top: 10px;
}

.btn.bg-blue-ui.white.read {
  cursor: pointer;
  padding: 4px 20px;
  float: left;
  margin-top: 10px;
}

.btn.bg-blue-ui.white.read:hover {
  box-shadow: 0px 5px 15px inset #4d5f77;
}

</style>
</head>
<body>
<div class="container">
    <table class="table">
        <% for(var i=0; i < productos.length; i++) { %>
           <tr>
             <td><%= productos[i].id %></td>
             <td><%= productos[i].name %></td>
           </tr>
        <% } %>
        </table>
</div>

	  
<div class="container cta-100 ">
    <div class="container">
      <div class="row blog">
        <div class="col-md-12">
          <div id="blogCarousel" class="carousel slide container-blog" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#blogCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#blogCarousel" data-slide-to="1"></li>
            </ol>
            <!-- Carousel items -->
            <div class="carousel-inner">
              <div class="carousel-item active">
                <div class="row">
                    <% for(var i=0; i < productos.length; i++) { %>
                        <div class="col-md-4" >
                            <div class="item-box-blog">
                              <div class="item-box-blog-image">
                                <!--Date-->
                                <div class="item-box-blog-date bg-blue-ui white"> <span class="mon"><%= productos[i].id %></span> </div>
                                <!--Image-->
                                <figure> <img alt="" src="https://source.unsplash.com/random/800x600"> </figure>
                              </div>
                              <div class="item-box-blog-body">
                                <!--Heading-->
                                <div class="item-box-blog-heading">
                                  <a href="#" tabindex="0">
                                    <h5><%= productos[i].name %></h5>
                                  </a>
                                </div>
                                <!--Data-->
                                <div class="item-box-blog-data" style="padding: px 15px;">
                                  <p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
                                </div>
                                <!--Text-->
                                <div class="item-box-blog-text">
                                  <p><%= productos[i].description %></p>
                                </div>

                                <div class="mt"> <button class="btn" onclick="makePayment('<%= productos[i].id %>')" >Comprar</button> </div>
                                <!--Read More Button-->
                              </div>
                            </div>
                          </div>
                     <% } %>
                  
                  
                </div>
                <!--.row-->
              </div>
              <!--.item-->
              <div class="carousel-item ">
                <div class="row">
                  <div class="col-md-4" >
                    <div class="item-box-blog">
                      <div class="item-box-blog-image">
                        <!--Date-->
                        <div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
                        <!--Image-->
                        <figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
                      </div>
                      <div class="item-box-blog-body">
                        <!--Heading-->
                        <div class="item-box-blog-heading">
                          <a href="#" tabindex="0">
                            <h5>News Title</h5>
                          </a>
                        </div>
                        <!--Data-->
                        <div class="item-box-blog-data" style="padding: px 15px;">
                          <p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
                        </div>
                        <!--Text-->
                        <div class="item-box-blog-text">
                          <p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor.</p>
                        </div>
                        <div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
                        <!--Read More Button-->
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4" >
                    <div class="item-box-blog">
                      <div class="item-box-blog-image">
                        <!--Date-->
                        <div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
                        <!--Image-->
                        <figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
                      </div>
                      <div class="item-box-blog-body">
                        <!--Heading-->
                        <div class="item-box-blog-heading">
                          <a href="#" tabindex="0">
                            <h5>News Title</h5>
                          </a>
                        </div>
                        <!--Data-->
                        <div class="item-box-blog-data" style="padding: px 15px;">
                          <p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
                        </div>
                        <!--Text-->
                        <div class="item-box-blog-text">
                          <p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor.</p>
                        </div>
                        <div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
                        <!--Read More Button-->
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4" >
                    <div class="item-box-blog">
                      <div class="item-box-blog-image">
                        <!--Date-->
                        <div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
                        <!--Image-->
                        <figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
                      </div>
                      <div class="item-box-blog-body">
                        <!--Heading-->
                        <div class="item-box-blog-heading">
                          <a href="#" tabindex="0">
                            <h5>News Title</h5>
                          </a>
                        </div>
                        <!--Data-->
                        <div class="item-box-blog-data" style="padding: px 15px;">
                          <p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
                        </div>
                        <!--Text-->
                        <div class="item-box-blog-text">
                          <p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor.</p>
                        </div>
                         <div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
                        <!--Read More Button-->
                      </div>
                    </div>
                  </div>
                </div>
                <!--.row-->
              </div>
              <!--.item-->
            </div>
            <!--.carousel-inner-->
          </div>
          <!--.Carousel-->
        </div>
      </div>
    </div>
  </div>

  <script>
    const makePayment = async (id) => { 
        let products = <%- JSON.stringify(productos) %> 
        product = products[id];
        console.log(product)
    const stripe = await Stripe("pk_test_51NcxTJAkNYfeym1I2nddmvG02uLV9OcwrG3HJIOq59ebzgXjXQ78wTOUd6WIpmdykJCJiXNbbq0yg2tp3ZwN2Fxc00a67VDtbf"); 
    const body = { product }; 
    const headers = { 
      "Content-Type": "application/json", 
    }; 
 
    const response = await fetch( 
      "http://localhost:8000/api/create-checkout-session", 
      { 
        method: "POST", 
        headers: headers, 
        body: JSON.stringify(body), 
      } 
    ); 
 
    const session = await response.json(); 
 
    const result = stripe.redirectToCheckout({ 
      sessionId: session.id, 
    }); 
 
    if (result.error) { 
      console.log(result.error); 
    } 
  }; 
  </script>

</body>
</html> 