{% 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;
  }
}
.slick-track{
	transform:translate3d(0px, 0px, 0px) !important;
}
</style>

<!-- PRODUCT Details [Start] -->
<style>
.faq-container-KSiT {
  width: 100%;
  max-width: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.faq-item-KSiT {
  border-bottom: 1px solid #e9ecef;
}

.faq-item-KSiT:last-child {
  border-bottom: none;
}

.faq-question-KSiT {
  padding: 20px;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background-color: /*#f1f3f5*/ #ffffff;
  transition: background-color 0.3s ease;
}

.faq-question-KSiT:hover {
  background-color: #e9ecef;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  background-color: #ffffff;
  color: #6c757d;
  font-size: 14px;
  line-height: 1.6;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer.open {
  max-height: 200px; /* Adjust for longer answers */
  padding: 15px 20px;
}

.arrow {
  font-size: 17px;
  color:#fcbc33;
  transition: transform 0.3s ease;
}

.arrow.open {
  color:#00b300;    
  transform: rotate(90deg);
}

/* Responsive Design */
@media (max-width: 768px) {
  .faq-question-KSiT {
    font-size: 14px;
    padding: 15px;
  }

  .faq-answer {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .faq-container-KSiT {
    max-width: 90%;
  }
}
</style>
<!-- PRODUCT Details [end] -->

<!--==============================
	  Hero area Start
	==============================-->
<div class="breadcumb-wrapper col d-none d-lg-block" 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="{{bname}}"></div>
            {% endif %}
            {% if(FTCHProd[0]['prd_image1']!='') %}
            <div class="img"><img src="{{pro_img_url}}{{FTCHProd[0]['prd_image1']}}" alt="{{bname}}"></div>
            {% endif %}
            {% if(FTCHProd[0]['prd_image2']!='') %}
            <div class="img"><img  src="{{pro_img_url}}{{FTCHProd[0]['prd_image2']}}" alt="{{bname}}"></div>
            {% endif %}
            {% if(FTCHProd[0]['prd_image3']!='') %}
            <div class="img"><img src="{{pro_img_url}}{{FTCHProd[0]['prd_image3']}}" alt="{{bname}}"></div>
            {% endif %} </div>
          <div class="row product-thumb-slide vs-carousel col d-none d-lg-block" style="transform:transition(0px) !important;" data-slide-show="4" data-md-slide-show="4"
              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] - (weight_arr2[0]/100)*30) | number_format(2)}} <del style="color:gray;">Rs.{{weight_arr2[0] | 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 %} <br>
                    <small>(35g pack of 1)</small><br>
                    </span> </h5>
                  <h5 align="center" style="color:orange;font-size:17px;">Rs. {% if(weight_arr2[0] is defined) %} {{ (weight_arr2[0] - (weight_arr2[0]/100)*30) | number_format(2)}} <del style="color:gray;">Rs.{{weight_arr2[0] | number_format(2)}}</del>{% endif %}</h5>

                    {% if(weight_arr3[0] is defined) %}
                        {% set wt1 = weight_arr3[0] %}
                    {% else %}
                        {% set wt1 = 0 %}
                    {% endif %}
        			
                    <div class="col-md-4" style="border:0px solid gray" align="center">
                      <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>
              </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 %} <br>
                    <small>(35g pack of 3)</small><br>
                    </span></h5>
                  <h5 align="center" style="color:orange;font-size:17px;">Rs.{% if(weight_arr2[1] is defined) %} {{ (weight_arr2[1] - (weight_arr2[1]/100)*30) | number_format(2)}} <del style="color:gray;">Rs.{{weight_arr2[1] | number_format(2)}}</del>{% endif %}</h5>
                  
                    {% if(weight_arr3[1] is defined) %}
                    	{% set wt2 = weight_arr3[1] %}
                    {% else %}
                    	{% set wt2 = 0 %}
                    {% endif %}   
                    
                    <div class="col-md-4" align="center">
                      <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>
              </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 %}<br>
                    <small>(35g pack of 5)</small><br>
                    </span></h5>
                  <h5 align="center" style="color:orange; font-size:17px;">Rs. {% if(weight_arr2[2] is defined) %}{{ (weight_arr2[2] - (weight_arr2[2]/100)*30) | number_format(2)}} <del style="color:gray;">Rs.{{weight_arr2[2] | number_format(2)}}</del>{% endif %}</h5>
                  
                    {% if(weight_arr3[2] is defined) %}
                    	{% set wt3 = weight_arr3[2] %}
                    {% else %}
                    	{% set wt3 = 0 %}
                    {% endif %}
                    
                    <div class="col-md-4" align="center">
                      <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>
            </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>
            #}  
            
            <!-- Replaced part HIDDEN [START] -->
            {#
            {% 
            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 %}
            #}
            <!-- Replaced part HIDDEN [END] -->
            
            <!-- Replaced part HIDDEN [START] -->
            {#
            <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>
            #}
            <!-- Replaced part HIDDEN [END] -->
            <!--<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>
      
        <!-- PRODUCT Details [Start] -->
        <div style="padding-top:26px;">
        <div class="tab-wrap" align="center">
          <div class="col-lg-12" style="border:0px solid #00CC66">
            <div class="faq-container-KSiT">
              <div class="faq-item-KSiT">
                <div class="faq-question-KSiT"> What is Lorem Ipsum? <span class="arrow">▶</span> </div>
                <div class="faq-answer" align="left"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
              </div>
              <div class="faq-item-KSiT">
                <div class="faq-question-KSiT"> What is Lorem Ipsum? <span class="arrow">▶</span> </div>
                <div class="faq-answer" align="left"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
              </div>
              <div class="faq-item-KSiT">
                <div class="faq-question-KSiT"> What is Lorem Ipsum? <span class="arrow">▶</span> </div>
                <div class="faq-answer" align="left"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
              </div>
            </div>
          </div>
        </div>
        </div>
        <!-- PRODUCT Details [end] -->
      
      <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>

<!-- PRODUCT Details [start] -->
     <script id="rendered-js" >
const faqItems = document.querySelectorAll('.faq-item-KSiT');

faqItems.forEach(item => {
  const question = item.querySelector('.faq-question-KSiT');
  const answer = item.querySelector('.faq-answer');
  const arrow = item.querySelector('.arrow');

  question.addEventListener('click', () => {
    const isOpen = answer.classList.contains('open');

    // Close all open answers
    document.querySelectorAll('.faq-answer').forEach(a => a.classList.remove('open'));
    document.querySelectorAll('.arrow').forEach(a => a.classList.remove('open'));

    // Toggle current item
    if (!isOpen) {
      answer.classList.add('open');
      arrow.classList.add('open');
    }
  });
});
//# sourceURL=pen.js
    </script>
<!-- PRODUCT Details [end] -->
{% endblock %}