{% extends 'base.html.twig' %}
{% block body %}

  <!--==============================
	  Hero area Start
	==============================-->
  <div class="breadcumb-wrapper" data-bg-src="../../assets/img/breadcumb/breadcumb-bg.jpg">
    <div class="container z-index-common">
      <div class="breadcumb-content">
        <h1 class="breadcumb-title">Product Details</h1>
        <div class="breadcumb-menu-wrap">

          <ul class="breadcumb-menu">
            {{blinks | raw}}
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!--==============================
	  Hero Area End
	==============================-->
<section class="vs-product-wrapper space">
    <div class="container">
      <div class="product-details">
        <div class="row gx-60">
          <div class="col-lg-5">
            <div class="product-big-img vs-carousel" data-slide-show="1" data-arrows="false" data-fade="true"
              data-asnavfor=".product-thumb-slide">
			  {% if(FTCHProd[0]['prd_image']!='') %}
              <div class="img"><img src="{{pro_img_url}}{{FTCHProd[0]['prd_image']}}"  alt="Product Image"></div>
			  {% endif %}
			  {% if(FTCHProd[0]['prd_image1']!='') %}
              <div class="img"><img {{pro_img_url}}{{FTCHProd[0]['prd_image1']}}" alt="Product Image"></div>
			  {% endif %}
			  {% if(FTCHProd[0]['prd_image2']!='') %}
              <div class="img"><img {{pro_img_url}}{{FTCHProd[0]['prd_image2']}}" alt="Product Image"></div>
			  {% endif %}
			   {% if(FTCHProd[0]['prd_image3']!='') %}
              <div class="img"><img {{pro_img_url}}{{FTCHProd[0]['prd_image3']}}" alt="Product Image"></div>
			  {% endif %}
            </div>
            <div class="row product-thumb-slide vs-carousel" data-slide-show="4" data-md-slide-show="4"
              data-sm-slide-show="3" data-xs-slide-show="3" data-asnavfor=".product-big-img">
              <div class="col-lg-2">
			  {% if(FTCHProd[0]['prd_image']!='') %}
                <div class="thumb">
					<img src="{{pro_img_url}}{{FTCHProd[0]['prd_image']}}" alt="Product Thumb Image"></div>
              </div>
			  {% endif %}
			  {% if(FTCHProd[0]['prd_image1']!='') %}
              <div class="col-lg-3">
                <div class="thumb">
				<img src="{{pro_img_url}}{{FTCHProd[0]['prd_image1']}}" alt="Product Thumb Image"></div>
              </div>
			  {% endif %}
			  {% if(FTCHProd[0]['prd_image2']!='') %}
              <div class="col-lg-3">
                <div class="thumb">
				<img src="{{pro_img_url}}{{FTCHProd[0]['prd_image2']}}" alt="Product Thumb Image"></div>
              </div>
			  {% endif %}
			  {% if(FTCHProd[0]['prd_image3']!='') %}
              <div class="col-lg-3">
                <div class="thumb">
				<img src="{{pro_img_url}}{{FTCHProd[0]['prd_image3']}}" alt="Product Thumb Image"></div>
              </div>
			  {% endif %}
            </div>
          </div>

          <div class="col-lg-7">
            <div class="product-about">
              <div class="product-rating">
                <div class="star-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"></i>
                </div>
                <p>( <span>3</span> Customer Review )</p>
              </div>

              <h2 class="product-title">
                {{bname}}
              </h2>
              <p class="product-price">Rs. {{FTCHProd[0]['prod_cost'] | number_format(2)}}</p>
              <p class="product-text">
               {% set dc = prodesc | raw %}
					{{ ((dc|slice(0,255)) |raw)}}
              </p>
              <div class="varient-select">
                <h3 class="h6 mb-4">Color: <span class="product-color" id="product_color">Lilac Purple</span></h3>
                <ul class="image-list">
                  <li class="varient-image">
                    <input type="radio" name="varient-color" id="pc-1" value="Lilac Purple">
                    <label for="pc-1"><img src="../../assets/img/products/p-c-1.png" alt="varient image"></label>
                  </li>
                  <li class="varient-image">
                    <input type="radio" name="varient-color" id="pc-2" value="Black">
                    <label for="pc-2"><img src="../../assets/img/products/p-c-2.png" alt="varient image"></label>
                  </li>
                  <li class="varient-image">
                    <input type="radio" name="varient-color" id="pc-3" value="white">
                    <label for="pc-3"><img src="../../assets/img/products/p-c-3.png" alt="varient image"></label>
                  </li>
                  <li class="varient-image">
                    <input type="radio" name="varient-color" id="pc-4" value="Pale Silver">
                    <label for="pc-4"><img src="../../assets/img/products/p-c-4.png" alt="varient image"></label>
                  </li>
                </ul>
              </div>
              <div class="actions" style="display:flow;">
                <div class="quantity">
                  <button class="quantity-minus qty-btn" {% if(app.session.get('loginId')!='')%} 
				onclick="add_cartp_dec({{FTCHProd[0]['product_id']}});" 
				{% else %} 
				onclick="add_cart_login();" 
				{% endif %}><i class="fal fa-minus"  ></i></button>
                  <input type="number" id="quantity" class="qty-input" step="1" min="0" max="100" name="quantity"
                    value="{{cart_qty[FTCHProd[0]['product_id']]}}" title="Qty"  placeholder="1">
                  <button class="quantity-plus qty-btn" {% if(app.session.get('loginId')!='')%} 
				onclick="add_cartp_inc({{FTCHProd[0]['product_id']}});" 
				{% else %} 
				onclick="add_cart_login();" 
				{% endif %}><i class="fal fa-plus"  ></i></button>
                </div>
                <!--<a href="javascript:;" 
				{% if(app.session.get('loginId')!='')%} 
				onclick="add_cartd({{FTCHProd[0]['product_id']}},'1');" 
				{% else %} 
				onclick="add_cart_login();" 
				{% endif %}  class="vs-btn style4">Add to cart</a>-->
                <a href="javascript:;"
				{% if(app.session.get('loginId')!='')%} 
				{% if(cart_wish[FTCHProd[0]['product_id']]==0)%}
				onclick="add_wishlist({{FTCHProd[0]['product_id']}});"
				class="icon-btn"
				{% else %} 
				onclick="add_unwishlist({{FTCHProd[0]['product_id']}});"
				class="icon-btn1"
				{% endif %}
				{% endif %}
				id="prd_{{FTCHProd[0]['product_id']}}" ><i class="fas fa-heart"></i></a>
              </div>
              <div class="product_meta">
                <span class="sku_wrapper">SKU: <span class="sku">02</span>
                </span>
                <span class="posted_in">Category: <a href="#" rel="tag">Accessories</a>
                </span>
                <span>Tags: <a href="#" rel="tag">Camping</a><a href="#" rel="tag">Summer</a><a href="#"
                    rel="tag">Vintage</a></span>
              </div>
            </div>
          </div>
        </div>

        <div class="tab-wrap">
          <ul class="nav product-tab1" id="productTab" role="tablist">
            <li class="nav-item" role="presentation">
              <a class="nav-link active" id="description-tab" data-bs-toggle="tab" href="#description" role="tab"
                aria-controls="description" aria-selected="true">description</a>
            </li>
            <li class="nav-item" role="presentation">
              <a class="nav-link" id="rviews-tab" data-bs-toggle="tab" href="#rviews" role="tab" aria-controls="rviews"
                aria-selected="true">Reviews (02 )</a>
            </li>
          </ul>
          <div class="tab-content" id="productTabContent">
            <div class="tab-pane fade active show" id="description" role="tabpanel" aria-labelledby="description-tab">
              <div class="inner-pane">
              <p>{{FTCHProd[0]['add_info'] | raw}}</p>
              </div>
            </div>
            <div class="tab-pane fade" id="rviews" role="tabpanel" aria-labelledby="review-tab">
              <div class="inner-pane">
                <div class="woocommerce-Reviews">
                  <div class="vs-comments-wrap">
                    <ul class="comment-list">
                      <li class="review vs-comment-item">
                        <div class="vs-post-comment">
                          <div class="comment-avater">
                            <img src="../../assets/img/blog/comment-author-1.jpg" alt="reviewer image">
                          </div>
                          <div class="comment-content">
                            <div class="star-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"></i>
                            </div>
                            <h4 class="name h4">Crish Thomas</h4>
                            <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit purus vel, of a
                              viveirra facilisi neque quisque. Phasellus aliquam ut a id rhogncus. In viverra sed vitae
                              vivamus amet, nuncg vivamus. </p>
                            <span class="comment-date">Published 1 day ago</span>
                          </div>
                        </div>
                      </li>
                      <li class="review vs-comment-item">
                        <div class="vs-post-comment">
                          <div class="comment-avater">
                            <img src="../../assets/img/blog/comment-author-3.jpg" alt="reviewer image">
                          </div>
                          <div class="comment-content">
                            <div class="star-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"></i>
                            </div>
                            <h4 class="name h4">Malisha Beco</h4>
                            <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit purus vel, of a
                              viveirra facilisi neque quisque. Phasellus aliquam ut a id rhogncus. In viverra sed vitae
                              vivamus amet, nuncg vivamus. </p>
                            <span class="comment-date">Published 1 day ago</span>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>

                <!-- Comment Form -->
                <div class="vs-comment-form">
                  <div id="respond" class="comment-respond">
                    <h3 class="blog-inner-title">Add a review</h3>

                    <div class="row">
                      <div class="form-group rating-select">
                        <label>Your Rating</label>
                        <p class="stars">
                          <span>
                            <a class="star-1" href="#">1</a>
                            <a class="star-2" href="#">2</a>
                            <a class="star-3" href="#">3</a>
                            <a class="star-4" href="#">4</a>
                            <a class="star-5" href="#">5</a>
                          </span>
                        </p>
                      </div>

                      <div class="col-md-6 form-group">
                        <input type="text" class="form-control" placeholder="Enter Your Name">
                      </div>
                      <div class="col-md-6 form-group">
                        <input type="email" class="form-control" placeholder="Email Address">
                      </div>
                      <div class="col-12 form-group">
                        <textarea class="form-control" placeholder="Write Your Comment"></textarea>
                      </div>
                      <div class="col-12 ">
                        <div class="custom-checkbox notice">
                          <input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox"
                            value="yes">
                          <label for="wp-comment-cookies-consent"> Save my name, email, and website in this browser for
                            the next time I comment.</label>
                        </div>
                      </div>
                      <div class="col-12 form-group">
                        <button class="vs-btn style4 w-100">Submit</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  </section>
{% endblock %}