{% extends 'base.html.twig' %}
{% block title %}AFI Market Product view{% endblock %}
{% block body %}
<hr>
<div class="container mt-2 mb-1 bg-white" >
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-6 mb-4 mb-md-0">
<div class="product-image">
<div class="product_img_box">
<div class="zoomImageProduct">
<img class="product_img" style="width: 600px; height: auto" id="product_img" src="{{ asset('assets/uploads/products/'~product.image) }}" data-zoom-image="{{ asset('assets/uploads/products/'~product.image)|imagine_filter('my_thumb_') }}" alt="product_img1" />
</div>
<a class="product_img_zoom" title="Zoom">
<span class="linearicons-zoom-in"></span>
</a>
</div>
</div>
<div class="text-center product-thumbs">
<div class="product-thumbs-track ps-slider owl-carousel">
<img class="img-thumbnail product_img_small" src="{{ asset('assets/uploads/products/'~product.image)}}" data-imgbigurl="{{ asset('assets/uploads/products/'~product.image)|imagine_filter('my_thumb_') }}">
{% for productImage in product.productImages %}
{% if productImage.isVisible == true %}
<img class=" img-thumbnail product_img_small" src="{{ asset('assets/uploads/products/productsOthersImages/'~productImage.image)}}" data-imgbigurl="{{ asset('assets/uploads/products/productsOthersImages/'~productImage.image)|imagine_filter('my_thumb_') }}" >
{% endif %}
{% endfor %}
</div>
</div>
</div>
<div class="col-lg-7 col-md-6">
<div class="pr_detail">
<div class="product_description">
<div style="background: #F0F0F0; padding: 8px">
<h4 class="product_title" style="font-family: Tahoma,sans-serif"><a href="#">{{ product.name }}</a></h4>
</div>
<hr>
<div class="rating_wrap">
<div class="rating">
{% set note = 0 %}
{% set totalRate = 5 * product.reviewsProducts|length %}
{% for review in product.reviewsProducts %}
{% set note = review.note + note %}
{% endfor %}
<div class="product_rate" style="width:{{ totalRate > 0 ? ((note/totalRate) * 100):0 }}%"></div>
</div>
<span class="rating_num">{{ product.reviewsProducts | length }}</span>
</div>
<br>
<br>
<div class="pr_desc text-left" >
{{ product.moreInformation|raw }}
</div>
<hr>
</div>
<hr />
<div>
<form id="formCart" class="d-flex justify-content-center mt-3" method="post" action="{{ path('cart_add_form',{'id':product.id}) }}" >
<div class="cart-product-quantity mt-2">
<div class="quantity">
<input type="button" data-min-price="1" value="-" class="minus" data-url="{{ path('cart_add',{'id':product.id}) }}">
<input type="text" data-min-price="1" name="quantity_product" value="1" title="Qty" class="qty" size="4">
<input type="button" value="+" class="plus" data-url="{{ path('cart_add',{'id':product.id}) }}">
</div>
</div>
<div class="cart_btn">
<button data-form="#formCart" data-img="#product_img" id="product__{{ product.id }}" data-id="#product__{{ product.id }}" class="btn btn-outline-primary mt-2 add-to-cart_form btn-addtocart"><i class="icon-basket-loaded"></i> {{ 'Add'|trans }}</button>
<a class="add_compare hide d-none" href="#"><i class="icon-shuffle"></i></a>
<a class="add_wishlist d-none" href="#"><i class="icon-heart"></i></a>
</div>
</form>
</div>
<hr/>
<div class=" d-flex justify-content-between mt-3">
<div class=" text-center">
<a href="{{ path('shop') }}" class="btn btn-info btn-radius-50 p-radius--" type="button"><i class="linearicons-arrow-left-square"></i> {{ 'shop'|trans }}</a>
<a class="add_compare hide d-none" href="#"><i class="icon-shuffle"></i></a>
<a class="add_wishlist d-none" href="#"><i class="icon-heart"></i></a>
</div>
<div>
<a href="{{ path('cart') }}" class="btn btn-secondary btn-radius-50 p-radius--" type="button"><i class="linearicons-cart"></i>{{ ' View'|trans }}</a>
</div>
</div>
<hr/>
<ul class="product-meta mt-5">
<li><span class="text-primary"><i class="linearicons-group-work"></i></span> Category:
{% for category in product.category %}
<a href="{{ path('mymarket_show_category',{'id': category.mymarket.id,'category':category.id}) }}">
# {{ category.name }}
</a>
{% endfor %}
</li>
<li><span class="text-primary"><i class="linearicons-tags"></i></span> Tags:
{% for tag in product.tag %}
<a href="{{ path('product_seek_tags',{'id':tag.id,'tag':tag.name}) }}">
# {{ tag.name }}
</a>
{% endfor %}
</li>
</ul>
<div class="product_share d-none">
<span><span class="text-primary"><i class="linearicons-link"></i></span> Share:</span>
<ul class="social_icons">
<li><a href="#"><i class="ion-social-facebook"></i></a></li>
<li><a href="#"><i class="ion-social-twitter"></i></a></li>
<li><a href="#"><i class="ion-social-googleplus"></i></a></li>
<li><a href="#"><i class="ion-social-youtube-outline"></i></a></li>
<li><a href="#"><i class="ion-social-instagram-outline"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-12 bg-white">
<div class="tab-style3">
<ul class="nav nav-tabs nav-fill" style="background: #f6f6f6" role="tablist">
<li class="nav-item ">
<a class="nav-link active font-weight-bolder" id="Description-tab" data-toggle="tab" href="#Description" role="tab" aria-controls="Description" aria-selected="true"> {{ 'Description'|trans }}</a>
</li>
<li class="nav-item d-none">
<a class="nav-link d-none" id="Additional-info-tab" data-toggle="tab" href="#Additional-info" role="tab" aria-controls="Additional-info" aria-selected="false">Additional info</a>
</li>
<li class="nav-item ">
<a class="nav-link font-weight-bolder" id="Reviews-tab" data-toggle="tab" href="#Reviews" role="tab" aria-controls="Reviews" aria-selected="false">Reviews ({{ product.reviewsProducts | length }})</a>
</li>
</ul>
<div class="tab-content shop_info_tab">
<div class="tab-pane active product_sort_info_ fade show" id="Description" role="tabpanel" aria-labelledby="Description-tab">
<div>{{ product.description|raw }}</div>
</div>
<div class="tab-pane d-none fade show " id="Additional-info" role="tabpanel" aria-labelledby="Description-tab">
</div>
<div class="tab-pane fade" id="Reviews" role="tabpanel" aria-labelledby="Reviews-tab">
<div class="heading_s1">
<h3 class="font-monospace"><span class="ti-comments"></span> {{ 'Review'|trans }}</h3>
</div>
<div class="card">
<div class="card-body" style="background: #f6f6f6">
{{ include('reviews_product/_form.html.twig') }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row">
<div class="col-12">
<div class="heading_s1">
<h3 class="font-monospace">{{ 'Related Products'|trans }}</h3>
<div class="row">
<div class="col-12">
<div class="divider"></div>
</div>
</div>
</div>
<div class="releted_product_slider carousel_slider owl-carousel owl-theme" data-margin="20" data-responsive='{"0":{"items": "1"}, "481":{"items": "2"}, "768":{"items": "3"}, "1199":{"items": "4"}}'>
{% for category in product.category %}
{% for productReleated in category.products %}
{% if product is not same as(productReleated) %}
{{ include('partials/product_no_quick_view.html.twig',{'product': productReleated}) }}
{% endif %}
{% endfor %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 product_index">
<h2>{{ 'AFI SARL'|trans }} <b>{{ 'Import Export'|trans }}</b></h2>
</div>
</div>
</div>
{% endblock %}