<!DOCTYPE html>
<html lang="en-US">
<head>
<!-- Meta============================================= -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1, max-scale=1">
<meta name="author" content="OpenzcTPL.">
<title>{openzc:define.META_TAG_TITLE/}</title>
<meta name="keywords" content="{openzc:define.META_TAG_KEYWORDS/}" />
<meta name="description" content="{openzc:define.META_TAG_DESCRIPTION/}" />
<!-- Stylesheets============================================= -->
{openzc:include filename="common/css.tpl"/}
<!-- Favicon============================================= -->
{openzc:include filename="common/favicon.tpl"/}
<style>
	.ps-tabs-content li{padding:0}
</style>
</head>
<body>

<!-- Document Full Container
	============================================= -->
<div id="full-container"> 
  
  <!-- Header============================================= --> 
  {openzc:include filename="common/header.tpl"/} 
  <!-- #header end --> 
  
  <!-- Content
		============================================= -->
  <section id="content">
    <div id="content-wrap"> 
      
      <!-- Page Title
				============================================= -->
      <div id="page-title">
        <div id="page-title-wrap">
          <div class="container">
            <div class="row">
              <div class="col-md-12">
                <ul class="breadcrumb">
                  {openzc:field.position/}
                </ul>
                <!-- .breadcrumb end --> 
                
              </div>
              <!-- .col-md-12 end --> 
            </div>
            <!-- .row end --> 
          </div>
          <!-- .container end --> 
          
        </div>
        <!-- #page-title-wrap end --> 
        
      </div>
      <!-- #page-title end --> 
     
      <!-- === Content Main =========== -->
      <div id="content-main" class="section-flat page-single page-product-single">
        <div class="section-content">
          <div class="container">
            <div class="row">
              <div class="col-md-12">
                <div class="page-single-content">
                  <div class="row">
                    <div class="col-md-12">
                      <div class="content">
                        <div class="block-content">
                          <div class="row">
                            <div class="col-md-5">
                              <div class="slider-product-single">
                                <ul class="owl-carousel">
                                  {openzc:mulimg imgsizer="458,500"}
                                  <li>
                                    <div class="slide">
                                      <div class="img-bg"> <img src="[field:products_image_detail/]" alt=""> </div>
                                    </div>
                                  </li>
                                  {/openzc:mulimg}
                                </ul>
                              </div>
                              <!-- .slider-product-single end -->
                              <div class="slider-product-single-thumbs">
                                <ul class="owl-carousel">
                                  {openzc:mulimg imgsizer="103,90"}
                                  <li>
                                    <div class="slide">
                                      <div class="img-bg"> <img src="[field:products_image_detail/]" alt=""> </div>
                                    </div>
                                  </li>
                                  {/openzc:mulimg}
                                </ul>
                              </div>
                              <!-- .slider-product-single-thumbs --> 
                            </div>
                            <!-- .col-md-5 end -->
                            <div class="col-md-7">
                              <form class="openzc-form" action="{openzc:link name='FILENAME_PRODUCT_INFO' parameter='[action=>add_product]'/}" method="post">
                                <input type="hidden" name="securityToken" value="{openzc:field.securityToken/}"/>
                                <input type="hidden" name="products_id" value="{openzc:proinfo field='products_id'/}"/>
                                <input type="hidden" name="action" value="addCart"/>
                                <input type="hidden" name="reloadGroup" value="cartlist"/>
                                <ul class="list-product-single-details">
                                  <li>
                                    <h5> {openzc:proinfo field="products_name"/} </h5>
                                    <div class="ps-rating">
                                      <div class="rating"> {openzc:rating star='<i class="fa fa-star"></i>' empty='<i class="fa fa-star-o"></i>'/}</div>
                                      <!-- .rating end --> 
                                      <a href="#writereview">Write Review</a> </div>
                                    <!-- .ps-rating end -->
                                    <div class="ps-price"> <span class="price-current">You Pay<span>{openzc:proinfo field="products_price"/}</span></span> {openzc:proinfo field="products_price_string"/}
                                      {openzc:if $products_info['products_price_discount']} <span class="price-original">Instead of<span>{openzc:proinfo field="products_original_price"/}</span></span> {/openzc:if} </div>
                                    <!-- .ps-price end -->
                                    <div class="ps-countdown"> Offer Time Left :
                                      <ul class="countdown countdown-1" data-event-date="1 august 2500 09:00:00">
                                        <!-- Put your Time here -->
                                        <li> <span class="counter days">120</span> <span class="title timeRefDays">Days</span> </li>
                                        <li> <span class="counter hours">17</span> <span class="title timeRefHours">Hours</span> </li>
                                        <li> <span class="counter minutes">37</span> <span class="title timeRefMinutes">Min</span> </li>
                                        <li> <span class="counter seconds">60</span> <span class="title timeRefSeconds">Secs</span> </li>
                                      </ul>
                                      <!-- .deadline-timer end --> 
                                    </div>
                                    <!-- .ps-countdown end --> 
                                  </li>
                                  <li>
                                    <div class="ps-line-info"> <i class="fa fa-shipping-fast"></i> This product can be delivered to <span class="color-dark">all over Saudi Arabia</span> </div>
                                    <!-- .ps-line-info end --> 
                                  </li>
                                  <li>
                                    <div class="ps-line-info"> <i class="fa fa-calendar-alt"></i> It's usually delivered within <span class="color-dark">5 Days</span> </div>
                                    <!-- .ps-line-info end --> 
                                  </li>
                                  <li>
                                    <div class="ps-options-select"> 
										{openzc:proattr options_id="1"}
                                      <div class="ps-select-color">
                                        <h6>[field:options_name/]</h6>
                                        <ul class="ps-options-select-color list-options-select">
                                          {openzc:loopson}
                                          <li {openzc:if $field['status']=='active'}class="is-active"{/openzc:if}> <a href="javascript:;" style="background:[field:products_options_values_color/]"><label for="color[field:options_values_id/]">&nbsp;&nbsp;
                                            <input id="color[field:options_values_id/]" class="d-none" {openzc:if $field['checked']}checked=""{/openzc:if} type="radio" name="id[[field:options_id/]]" value="[field:options_values_id/]"/></label>
                                            </a> </li>
                                          {/openzc:loopson}
                                        </ul>
                                        <!-- .ps-options-select-color end --> 
                                      </div>
                                      {/openzc:proattr} 
                                      <!-- .ps-select-color end --> 
                                      {openzc:proattr item="select,radio" no_options_id="1"}
                                      <div class="ps-select-size">
                                        <h6>[field:options_name/]</h6>
                                        <ul class="ps-options-select-size list-options-select">
                                          {openzc:loopson}
                                          <li {openzc:if $field['status']=='active'}class="is-active"{/openzc:if}> <a href="javascript:;"><label> [field:options_values_name/]
                                            <input class="d-none" {openzc:if $field['checked']}checked=""{/openzc:if} type="radio" name="id[[field:options_id/]]" value="[field:options_values_id/]"/></label>
                                            </a> </li>
                                          {/openzc:loopson}
                                        </ul>
                                        <!-- .ps-options-select-size end --> 
                                      </div>
                                      {/openzc:proattr} 
                                      <!-- .ps-select-size end --> 
                                      {openzc:proattr item="text"}
                                      <div class="ps-select-input">
                                        <h6>[field:options_name/]</h6>
                                        {openzc:loopson}
                                        <input type="text" name="id[txt_[field:options_id/]]" value=""/>
                                        {/openzc:loopson} 
                                        <!-- .ps-options-select-size end --> 
                                      </div>
                                      {/openzc:proattr} </div>
                                    <!-- .ps-options-select end --> 
                                  </li>
                                  <li>
                                    <ul class="ps-list-features">
                                      {openzc:proinfo field="products_description_preview" desclen="300"/}...
                                    </ul>
                                    <!-- .ps-list-features end --> 
                                  </li>
                                  <li>
                                    <div class="ps-counter-quantity">
                                      <h6>Quantity</h6>
                                      <div class="counter-add-item"> <a class="decrease-btn" href="#">-</a>
                                        <input type="text" name="cart_quantity" value="1" >
                                        <a class="increase-btn" href="#">+</a> </div>
                                      <!-- .counter-add-item end --> 
                                      <a class="btn medium grey hover-colorful with-icon openzc-btn" data-action="addWishlist" data-id="{openzc:proinfo field='products_id'/}" href="javascript:;"> <i class="fa fa-heart"></i> Wishlist </a> <a class="btn medium grey hover-colorful with-icon openzc-btn" data-action="addCompare" data-id="{openzc:proinfo field='products_id'/}" href="javascript:;"> <i class="fa fa-copy"></i> Compare </a> </div>
                                    <!-- .ps-counter-quantity end --> 
                                  </li>
                                  <li>
                                    <div class="ps-btns">
                                      <button value="tobuy" class="btn large colorful hover-grey openzc-submit" >Buy Now</button>
                                      <button value="tocart" class="btn large dark hover-grey openzc-submit" >Add to Cart</button>
                                    </div>
                                    <!-- .ps-btns end --> 
                                  </li>
                                  <li>
                                    <div class="ps-payment-methods">
                                      <h6>Pay Safely</h6>
                                      <img src="/assets/images/files/payment-methods.png" alt=""> </div>
                                    <!-- .ps-payment-methods end --> 
                                  </li>
                                </ul>
                              </form>
                              <!-- .list-product-single-details end --> 
                            </div>
                            <!-- .col-md-7 end -->
                            <div class="col-md-12">
                              <div class="ps-details-tabs">
                                <ul class="ps-tabs">
                                  <li class="active"><a href="javascript:;">Product Description</a></li>
                                  <li><a href="javascript:;" name="writereview">Ratings</a></li>
                                </ul>
                                <!-- .ps-tabs end -->
                                <ul class="ps-tabs-content">
                                  <li class="active"> {openzc:proinfo field="products_description"/} </li>
                                  <li>
                                    <div class="col-md-12">
										<div class="tt-review-comments mg-t-15">
											{openzc:reviews row="5"}
											<div class="tt-item">
											  <div class="tt-avatar"> <a href="#"></a> </div>
											  <div class="tt-content">
												<div class="tt-rating"> {openzc:rating star='<i class="icon-star"></i>' half='<i class="icon-star-half"></i>' empty='<i class="icon-star-empty"></i>'/} </div>
												<div class="tt-comments-info"> <span class="username">by <span>[field:customers_name/]</span></span> <span class="time">on [field:date_added/]</span> </div>
												<p> [field:reviews_text/] </p>
											  </div>
											</div>
											{/openzc:reviews}
										</div>
									  <form id="form-order-notes" class="openzc-form" action="{openzc:link name='FILENAME_PRODUCT_REVIEWS_WRITE' parameter='[action=>process,products_id=>__products_id__'/}" method="post">
										  <input type="hidden" name="securityToken" value="{openzc:field.securityToken/}"/>
										  <input type="hidden" name="action" value="writeReviews"/>
                                      	  <div class="content">
                                        <div class="block-content">
											<h5 class="block-title">Reviews Rating</h5>
                                      <ul class="row-radios">
                                        <li>
                                          <label class="radio-container radio-default">
                                            <input type="radio" name="rating" value="1">
                                            <span class="checkmark"></span><div class="rating"> {openzc:rating star='<i class="fa fa-star"></i>' empty='<i class="fa fa-star-o"></i>' rating='1'/}</div></label>
                                        </li>
                                        <li>
                                          <label class="radio-container radio-default">
                                            <input type="radio" name="rating" value="2">
                                            <span class="checkmark"></span><div class="rating"> {openzc:rating star='<i class="fa fa-star"></i>' empty='<i class="fa fa-star-o"></i>' rating='2'/}</div></label>
                                        </li>
                                        <li>
                                          <label class="radio-container radio-default">
                                            <input type="radio" name="rating" value="3">
                                            <span class="checkmark"></span><div class="rating"> {openzc:rating star='<i class="fa fa-star"></i>' empty='<i class="fa fa-star-o"></i>' rating='3'/}</div></label>
                                        </li>
                                        <li>
                                          <label class="radio-container radio-default">
                                            <input type="radio"  name="rating" value="4">
                                            <span class="checkmark"></span><div class="rating"> {openzc:rating star='<i class="fa fa-star"></i>' empty='<i class="fa fa-star-o"></i>' rating='4'/}</div></label>
                                        </li>
                                        <li>
                                          <label class="radio-container radio-default">
                                            <input type="radio" name="rating" value="5">
                                            <span class="checkmark"></span><div class="rating"> {openzc:rating star='<i class="fa fa-star"></i>' empty='<i class="fa fa-star-o"></i>' rating='5'/}</div></label>
                                        </li>
                                      </ul>
											<br/>
                                          <h5 class="block-title">Enter your Reviews Text</h5>
                                          <div class="row">
                                            <div class="col-md-12">
                                              
                                                <div class="form-group">
                                                  <textarea name="review_text" id="onComment" class="form-control" placeholder="Enter your Reviews Text..."></textarea>
                                                </div>
                                                <!-- .form-group end -->
                                                <div class="form-group">
                                                  <button class="btn medium colorful hover-colorful-2" href="javascript:;"><i class="fa fa-cart-arrow-down"></i>Submit Reviews</button>
                                                </div>
                                                <!-- .form-group end -->
                                           
                                              <!-- #form-order-notes end --></div>
                                            <!-- .col-md-12 end --></div>
                                          </div>
                                        </div>
									  </form>
                                    </div>
                                  </li>
                                </ul>
                                <!-- .ps-tabs-content end --> 
                              </div>
                              <!-- .ps-details-tabs end --> 
                            </div>
                            <!-- .col-md-12 end --> 
                          </div>
                          <!-- .row end --> 
                        </div>
                        <!-- .block-content end --> 
                      </div>
                      <!-- .content end --> 
                      
                    </div>
                    <!-- .col-md-12 end --> 
                  </div>
                  <!-- .row end --> 
                  
                </div>
                <!-- .page-single-content end --> 
                
              </div>
              <!-- .col-md-12 end --> 
            </div>
            <!-- .row end --> 
          </div>
          <!-- .container end --> 
          
        </div>
        <!-- .section-content end --> 
        
      </div>
      <!-- .section-flat end --> 
      
      <!-- === Related Products =========== -->
      <div id="related-products" class="section-flat">
        <div class="section-content">
          <div class="container">
            <div class="row">
              <div class="col-md-12">
                <h4 class="section-title">Related Products</h4>
                <div class="slider-products-1">
                  <ul class="owl-carousel">
                    {openzc:prolist type="relate" row="8" imgsizer="224,170"}
                    <li>
                      <div class="slide">
                        <div class="box-preview box-product"> {openzc:if strstr($field['products_flag'],"sale") || strstr($field['products_flag'],"special")} <span class="badge-sale">Sale</span> {/openzc:if}
                          <div class="box-img"> <a href="[field:products_link/]"><img src="[field:products_image/]" alt=""></a>
                            <div class="overlay">
                              <div class="overlay-inner">
                                <ul class="product-icons-meta">
                                  <li><a href="javascript:;" class="openzc-btn" data-action="addCompare" data-id="[field:products_id/]"><i class="fa fa-exchange-alt"></i></a></li>
                                  <li><a href="javascript:;" class="openzc-btn" data-action="addWishlist" data-id="[field:products_id/]"><i class="fa fa-heart"></i></a></li>
                                </ul>
                                <!-- .product-icons-meta end --> 
                              </div>
                              <!-- .overlay-inner end --> 
                            </div>
                            <!-- .overlay end --> 
                          </div>
                          <!-- .box-img end -->
                          <div class="box-content"> 
                            <!-- <h5><a href="javascript:;">HEllo worldHEllo worldHEllo worldHEllo worldHEllo worldHEllo worldHEllo worldHEllo world</a></h5> -->
                            <h5><a href="[field:products_link/]">[field:products_name/]</a></h5>
                            <h4 class="product-price"> <span class="new">[field:products_price/]</span> {openzc:if $field['products_price_discount']} <span class="old">[field:products_original_price/]</span> {/openzc:if} </h4>
                            <!-- .product-price end -->
                            <div class="rating">{openzc:rating star='<i class="fa fa-star"></i>' empty='<i class="fa fa-star-o"></i>'/}</div>
                            <!-- .rating end --> 
                            <a class="btn btn-add-to-cart medium rounded with-icon colorful hover-dark mt-30" href="[field:products_link/]"> <i class="fa fa-shopping-cart"></i> Add to Cart </a> </div>
                          <!-- .box-content end --> 
                        </div>
                        <!-- .box-preview end --> 
                      </div>
                      <!-- .slide end --> 
                    </li>
                    {/openzc:prolist}
                  </ul>
                </div>
                <!-- .slider-products-1 end --> 
                
              </div>
              <!-- .col-md-12 end --> 
            </div>
            <!-- .row end --> 
          </div>
          <!-- .container end --> 
          
        </div>
        <!-- .section-content end --> 
        
      </div>
      <!-- .section-flat end --> 
      
    </div>
    <!-- #content-wrap --> 
    
  </section>
  <!-- #content end --> 
  
  <!-- Footer
		============================================= -->
  <footer id="footer"> {openzc:include filename="common/newsletters.tpl"/}
    {openzc:include filename="common/footer.tpl"/} </footer>
  <!-- #footer end -->
  
  <div class="side-full-categories">
    <div class="mobile-full-categories">
      <h5>All Categories</h5>
      <ul class="mobile-menu-categories">
      </ul>
      <!-- .mobile-menu-categories end --> 
    </div>
    <!-- .mobile-full-categories end --> 
  </div>
  <!-- .side-full-categories end -->
  
  <div class="box-notification"> <i class="fa fa-cart-arrow-down"></i>
    <div class="box-content"> <span>Added to Cart</span>
      <h5>Elitebook 2019</h5>
      <a class="btn x-small grey hover-colorful" href="javascript:;">Shop Cart</a> </div>
    <!-- .box-content end --> 
    <a class="close" href="javascript:;">×</a> </div>
  <!-- .box-notification end --> 
  
</div>
<!-- #full-container end --> 

<a class="scroll-top-icon scroll-top" href="javascript:;"><i class="fa fa-angle-up"></i></a> 

<!-- External JavaScripts============================================= --> 
{openzc:include filename="common/script.tpl"/}
</body>
</html>
