<!DOCTYPE html>
<html lang="en">
<head>
    {% include 'head.html' %}

</head>
<body>
    {% include 'nav.html' %}
    <div class="smooth-scroll">
        <section id="product-detail">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class = "card-wrapper height-auto">
                            <div class = "card">
                              <!-- card left -->
                              <div class = "product-imgs">
                                <div class = "img-display">
                                  <div class = "img-showcase">
                                    <img src = "/static/images/product/pro-1.jpg" alt = "shoe image">
                                    <img src = "/static/images/product/pro-2.jpg" alt = "shoe image">
                                    <img src = "/static/images/product/pro-3.jpg" alt = "shoe image">
                                    <img src = "/static/images/product/pro-4.jpg" alt = "shoe image">
                                  </div>
                                </div>
                                <div class = "img-select">
                                  <div class = "img-item">
                                    <a href = "#" data-id = "1">
                                      <img src = "/static/images/product/pro-1.jpg" alt = "shoe image">
                                    </a>
                                  </div>
                                  <div class = "img-item">
                                    <a href = "#" data-id = "2">
                                      <img src = "/static/images/product/pro-2.jpg" alt = "shoe image">
                                    </a>
                                  </div>
                                  <div class = "img-item">
                                    <a href = "#" data-id = "3">
                                      <img src = "/static/images/product/pro-3.jpg" alt = "shoe image">
                                    </a>
                                  </div>
                                  <div class = "img-item">
                                    <a href = "#" data-id = "4">
                                      <img src = "/static/images/product/pro-4.jpg" alt = "shoe image">
                                    </a>
                                  </div>
                                </div>
                              </div>
                              <!-- card right -->
                              <div class = "product-content">
                                <h2 class = "product-title">PERSONALIZED CIGAR BOX</h2>
                                <!-- <div class = "product-rating">
                                  <i class = "fas fa-star"></i>
                                  <i class = "fas fa-star"></i>
                                  <i class = "fas fa-star"></i>
                                  <i class = "fas fa-star"></i>
                                  <i class = "fas fa-star-half-alt"></i>
                                  <span>4.7(21)</span>
                                </div> -->
                          
                                <div class = "product-price">
                                  <p class = "last-price">Old Price: <span>$257.00</span></p>
                                  <p class = "new-price">New Price: <span>$249.00 (5%)</span></p>
                                </div>
                          
                                <div class = "product-detail">
                                    <h2>about this item: </h2>
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo eveniet veniam tempora fuga tenetur placeat sapiente architecto illum soluta consequuntur, aspernatur quidem at sequi ipsa!</p>
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, perferendis eius. Dignissimos, labore suscipit. Unde.</p>
                                    <ul>
                                        <li>Available: <span>in stock</span></li>
                                        <li>Shipping Fee: <span>Free</span></li>
                                    </ul>
                                    <div class="d-flex gap-2 my-2">
                                        <div>
                                            <h2 class="">Select Material: </h2>
                                            <select name="cars" id="cars" class="material-select">
                                                <option value="volvo">WOOD</option>
                                                <option value="saab">LEATHER</option>
                                                <option value="opel">VELVET</option>
                                                <option value="audi">CARBON</option>
                                            </select>
                                        </div>
                                        <div class = "purchase-info mt-auto">
                                            <input type="number" min="0" value="1">
                                        </div>
                                    </div>
                                </div>
                                
                                

                                <form>
                                  <div class="form-group custome-name">
                                    <div>
                                      <label for="">Type Your Text</label>
                                      <input type="text" class="form-control custome-name-input" id="typetext" aria-describedby="typetext" placeholder="Type Your Text">
                                    </div>
                                    <div>
                                      <label for="">Description</label>
                                      <textarea type="text" class="form-control custome-name-input" id="typetext" aria-describedby="typetext" placeholder="Type Your Text"></textarea>
                                    </div>
                                      <!-- <button type="button" class="btn custome-btn" data-bs-toggle="modal" data-bs-target="#customeimg"> Customize Your Name </button> -->
                                      <button type="button" class="btn custome-btn"> Customize Your Name </button>

                                  </div>
                                </form>  
                          
                              </div>
                            </div>
                          </div>
                    </div>      
                </div>
            </div>
        </section>

        {% include 'footer.html' %}
    </div>


    <div class="modal fade" id="customeimg" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Preview Your Product</h5>
            <button type="button" class="close d-none" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="custome-img-prev">
              <img src="/static/images/preview/img-1.jpg" alt="" class="">
              <p id="customName"></p>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn buy-btn">Buy Now</button>
          </div>
        </div>
      </div>
    </div>


    {% include 'script.html' %}
    <script src="/static/js/home.js"></script>
    <script src="/static/js/product-details.js"></script>
    
    <script>
      $(".custome-btn").click(function(){
        var typetext = $("#typetext").val();
        if(typetext == ''){
          alert('Please Enter Name !');
          return false;
        }else{
          $("#customName").text(typetext);
          $("#customeimg").modal('show');
        }
      });
    </script>
</body>
</html>