{% extends 'base.html.twig' %}
{% block body %}
<style>
.varients{
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
  transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  padding: 0px 8px 0px 8px;
  cursor: pointer;
}

.varients:hover{
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

.varients h3{
  font-weight: 600;
}

.varients img{
  position: absolute;
  top: 20px;
  right: 15px;
  max-height: 120px;
}
@media(max-width: 990px){
  .varients{
    margin: 20px;
  }
}
</style>

  <!--==============================
	  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>
			  {% set strprice1 = ((weight_arr2[0]*10)/100)+weight_arr2[0] %}
			  {% set strprice2 = ((weight_arr2[1]*10)/100)+weight_arr2[1] %}
			  {% set strprice3 = ((weight_arr2[2]*10)/100)+weight_arr2[2] %}
              <p class="product-price">From Rs. {% if(weight_arr2[0] is defined) %} {{weight_arr2[0] | number_format(2)}} - <del>Rs .{{strprice1 | number_format(2)}}</del>{% endif %}</p>
              <p class="product-text" style="margin-top:5px;margin-bottom:20px;">
               {% set dc = prodesc | raw %}
				{#{ ((dc|slice(0,255)) |raw)}#}
				{{ prodesc | raw }}
              </p>
			 <div class="row">
                <div class="col-md-4">
                  <div class="varients">
                    <h5 align="center">Pack of 1 <br><span style="font-size:13px; color:gray;">{% if(weight_arr1[0] is defined) %} {{weight_arr1[0]}} Grams {% endif %}</span></h5>
                    <h5 align="center" style="color:green;font-size:17px;">Rs. {% if(weight_arr2[0] is defined) %} {{weight_arr2[0] | number_format(2)}} - <del>Rs .{{strprice1 | number_format(2)}}</del>{% endif %}</h5>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="varients">
                    <h5 align="center">Pack of 3 <br><span  style="font-size:13px; color:gray;">{% if(weight_arr1[1] is defined) %}  {{weight_arr1[1] }} Grams{% endif %} </span></h5>
                    <h5 align="center" style="color:green;font-size:17px;">Rs.{% if(weight_arr2[1] is defined) %} {{weight_arr2[1] | number_format(2)}} - <del>Rs .{{strprice2 | number_format(2)}}</del>{% endif %}</h5>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="varients">
                    <h5 align="center">Pack of 5 <br><span  style="font-size:13px; color:gray;"> {% if(weight_arr1[2] is defined) %}{{weight_arr1[2]}} Grams {% endif %}</span></h5>
                    <h5 align="center" style="color:green; font-size:17px;">Rs. {% if(weight_arr2[2] is defined) %}{{weight_arr2[2] | number_format(2)}} - <del>Rs .{{strprice3 | number_format(2)}}</del>{% endif %}</h5>
                  </div>
                </div>

              </div>
            {#    
              <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>
            #}  
			{% 
			if(weight_arr3[0] is defined) %}
			{% set wt1 = weight_arr3[0] %}
			{% else %}
			{% set wt1 = 0 %}
			{% endif %}
			{% 
			if(weight_arr3[1] is defined) %}
			{% set wt2 = weight_arr3[1] %}
			{% else %}
			{% set wt2 = 0 %}
			{% endif %}
			{% 
			if(weight_arr3[2] is defined) %}
			{% set wt3 = weight_arr3[2] %}
			{% else %}
			{% set wt3 = 0 %}
			{% endif %}
			<div class="row">
                <div class="col-md-4">
                  <div class="varients">
				  <div class="actions" style="display:flow;float:left;padding: 5px;margin: 5px;">
                <div class="quantity">
                  <button class="quantity-minus qty-btn"
				  {% if(app.session.get('loginId')!='')%} 
				onclick="add_cart_new_dec({{FTCHProd[0]['product_id']}},{{wt1}},1);"
				{% else %} 
				onclick="add_cart_login();" 
				{% endif %}><i class="fal fa-minus"></i></button>
                  <input type="number" id="quantity1" class="qty-input qt{{wt1}}" step="1" min="0" max="100" name="quantity"
                    value="{% if(cart_qty[wt1] is defined) %}{{cart_qty[wt1]}}{% endif %}" title="Qty" placeholder="1">
                  <button class="quantity-plus qty-btn" {% if(app.session.get('loginId')!='')%}
				onclick="add_cart_new_inc({{FTCHProd[0]['product_id']}},{{wt1}},1);" 
				{% else %} 
				onclick="add_cart_login();" 
				{% endif %}><i class="fal fa-plus"></i></button>
                </div>
              </div>
				  </div>
				  </div>
				  <div class="col-md-4">
                  <div class="varients">
				  <div class="actions" style="display:flow;float:left;padding: 5px;margin: 5px; padding-left:10px;">
                <div class="quantity">
                  <button class="quantity-minus qty-btn" {% if(app.session.get('loginId')!='')%} 
onclick="add_cart_new_dec({{FTCHProd[0]['product_id']}},{{wt2}},2);" 

				{% else %} 
				onclick="add_cart_login();" 
				{% endif %}><i class="fal fa-minus"  ></i></button>
                  <input type="number" id="quantity2" class="qty-input qt{{wt2}}" step="1" min="0" max="100" name="quantity"
                    value="{% if(cart_qty[wt2] is defined) %}{{cart_qty[wt2]}}{% endif %}" title="Qty"  placeholder="1">
                  <button class="quantity-plus qty-btn" {% if(app.session.get('loginId')!='')%} 
				onclick="add_cart_new_inc({{FTCHProd[0]['product_id']}},{{wt2}},2);" 
				{% else %} 
				onclick="add_cart_login();" 
				{% endif %}><i class="fal fa-plus"  ></i></button>
                </div>
              </div>
				  </div>
				  </div>
				  <div class="col-md-4">
                  <div class="varients">
				  <div class="actions" style="display:flow;float:left;padding: 5px;margin: 5px; padding-left:10px;">
                <div class="quantity">
                <button class="quantity-minus qty-btn" {% if(app.session.get('loginId')!='')%} 
				onclick="add_cart_new_dec({{FTCHProd[0]['product_id']}},{{wt3}},3);" 
				{% else %} 
				onclick="add_cart_login();" 
				{% endif %}><i class="fal fa-minus"  ></i></button>
                <input type="number" id="quantity3" class="qty-input qt{{wt3}}" step="1" min="0" max="100" name="quantity"
                value="{% if(cart_qty[wt3] is defined )%}{{cart_qty[wt3]}}{% else %} {% endif %}" title="Qty"  placeholder="1">
                <button class="quantity-plus qty-btn" {% if(app.session.get('loginId')!='')%} onclick="add_cart_new_inc({{FTCHProd[0]['product_id']}},{{wt3}},3)" 
				{% else %} 
				onclick="add_cart_login();" 
				{% endif %}><i class="fal fa-plus"  ></i></button>
                </div>
              </div>
				  </div>
				  </div>
				  </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="rviews-tab" data-bs-toggle="tab" href="#rviews" role="tab" aria-controls="rviews"
                aria-selected="true">Description</a>
            </li>
            <li class="nav-item" role="presentation">
              <a class="nav-link " id="ingrd-tab" data-bs-toggle="tab" href="#ingrd" role="tab"
                aria-controls="Ingredients" aria-selected="true">Ingredients</a>
            </li>
			<li class="nav-item" role="presentation">
              <a class="nav-link" id="key-tab" data-bs-toggle="tab" href="#key" role="tab" aria-controls="rviews"
                aria-selected="true">Key Features/Benefits</a>
            </li>
			<li class="nav-item" role="presentation">
              <a class="nav-link" id="nutri-tab" data-bs-toggle="tab" href="#nutri" role="tab" aria-controls="rviews"
                aria-selected="true">Nutritional Information</a>
            </li>
			<li class="nav-item" role="presentation">
              <a class="nav-link" id="discer-tab" data-bs-toggle="tab" href="#discer" role="tab" aria-controls="rviews"
                aria-selected="true">Discerning Customer</a>
            </li>
			<li class="nav-item" role="presentation">
              <a class="nav-link" id="storage-tab" data-bs-toggle="tab" href="#storage" role="tab" aria-controls="rviews"
                aria-selected="true">Storage</a>
            </li>
          </ul>
          <div class="tab-content" id="productTabContent">
            
			 <div class="tab-pane fade active show" id="rviews" role="tabpanel" aria-labelledby="rviews-tab">
              <div class="inner-pane">
              <p class="description-text">{{FTCHProd[0]['prod_desc2'] | raw}}</p>
              </div>
            </div>
			<div class="tab-pane fade " id="ingrd" role="tabpanel" aria-labelledby="ingrd-tab">
              <div class="inner-pane">
              <p class="description-text">{{FTCHProd[0]['prod_desc'] | raw}}</p>
              </div>
            </div>
			 <div class="tab-pane fade" id="key" role="tabpanel" aria-labelledby="discer-tab">
              <div class="inner-pane">
              <p class="description-text">{{FTCHProd[0]['prod_desc3'] | raw}}</p>
              </div>
            </div>
			 <div class="tab-pane fade" id="nutri" role="tabpanel" aria-labelledby="nutri-tab">
              <div class="inner-pane">
              <p class="description-text">{{FTCHProd[0]['prod_desc4'] | raw}}</p>
              </div>
            </div>
			 <div class="tab-pane fade" id="discer" role="tabpanel" aria-labelledby="discer">
              <div class="inner-pane">
             <p class="description-text">{{FTCHProd[0]['prod_desc5'] | raw}}</p>
              </div>
            </div>
			<div class="tab-pane fade" id="storage" role="tabpanel" aria-labelledby="storage-tab">
              <div class="inner-pane">
              <p class="description-text">{{FTCHProd[0]['prod_desc6'] | raw}}</p>
            </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  </section>
{% endblock %}