{% set product = __SELF__.offer %}
{% set rating =  __SELF__.rating %}

    <!-- Breadcumb Area -->
    <div class="breadcumb_area">
        <div class="container h-100">
            <div class="row h-100 align-items-center">
                <div class="col-12">
                    <h5>{{ 'modal.GinisleyinMaglumat'|_ }}</h5>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ 'index'|page }}">{{ 'breadcrumbEsasySahypa'|_ }}</a></li>
                        
                        {% for category in product.categories %}
                            {% if category.parent.primary_key > 0 %}
                                {% if category.parent.products.count > 0 %}
                                <li class="breadcrumb-item"><a href="{{ 'category-products'|page({categorySlug: category.parent.parent.slug}) }}">{{ category.parent.parent.name }}</a></li>
                                {% else %}
                                <li class="breadcrumb-item"><a href="{{ 'category-profile'|page({categorySlug: category.parent.parent.slug}) }}">{{ category.parent.parent.name }}</a></li>
                                {% endif %}
                            {% endif %}
                            
                            {% if category.primary_key > 0 %}
                                {% if category.parent.products.count > 0 %}
                                    <li class="breadcrumb-item"><a href="{{ 'category-products'|page({categorySlug: category.parent.slug}) }}">{{ category.parent.name }}</a></li>
                                {% else %}
                                    <li class="breadcrumb-item"><a href="{{ 'category-profile'|page({categorySlug: category.parent.slug}) }}">{{ category.parent.name }}</a></li>
                                {% endif %}
                            {% endif %}
                            
                            {% if category %}
                                {% if category.products.count > 0 %}
                                    <li class="breadcrumb-item"><a href="{{ 'category-products'|page({categorySlug: category.slug}) }}">{{ category.name }}</a></li>
                                {% else %}
                                    <li class="breadcrumb-item"><a href="{{ 'category-profile'|page({categorySlug: category.slug}) }}">{{ category.name }}</a></li>
                                {% endif %}
                            {% endif %}    
                        {% endfor %}
                        
                        
                        <li class="breadcrumb-item active">{{ product.name }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcumb Area -->

    <!-- Single Product Details Area -->
    <section class="single_product_details_area section_padding_100">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-6">
                    <div class="single_product_thumb">
                        <div id="product_details_slider" class="carousel slide" data-ride="carousel">

                            <!-- Carousel Inner -->
                            <div class="carousel-inner">
                            
                                {% for key, image in product.images %}
                                    <div class="carousel-item {{ key == 0 ? 'active' : '' }}">
                                        <a class="gallery_img" href="{{ image.path}}" title="{{ product.name }}">
                                            <img class="d-block w-100" src="{{ image.path }}" alt="Gurluşyk, Gurluşyk platform, bezeg gurluşyk, gipsler merkezi, {{ product.name }}">
                                        </a>
                                    </div>
                                {% endfor %}
                            </div>

                            <!-- Carosel Indicators -->
                            <ol class="carousel-indicators">
                                {% for key, image in product.images %}
                                    <li class="{{ key == 0 ? 'active' : '' }}" data-target="#product_details_slider" data-slide-to="{{key}}" style="background-image: url({{ image.path }});"></li>
                                {% endfor %}
                            </ol>
                        </div>
                    </div>
                </div>

                <!-- Single Product Description -->
                <div class="col-12 col-lg-6">
                    <div class="single_product_desc">
                        <h4 class="title mb-2">{{ product.name }}</h4>
                        <div class="single_product_ratings mb-2">
                            {% if(product.comments_count > 0) %}
                                <i class="fa fa-star {{ (rating == 1 or rating > 1) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                <i class="fa fa-star {{ (rating == 2 or rating > 1) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                <i class="fa fa-star {{ (rating == 3 or rating > 2) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                <i class="fa fa-star {{ (rating == 4 or rating > 3) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                <i class="fa fa-star {{ (rating == 5 or rating > 4) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                            {% else %}
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                            {% endif %}
                            <span class="text-muted">({{ product.comments_count }} {{ 'product.Kammentaria'|_ }})</span>
                        </div>
                        <h4 class="price mb-2">
                            {% if product.vendor.web2 > 0 %}
                                <del style="color: rgb(253, 0, 24);">{{ product.price }} TMT</del>
                                    {{ product.getDiscountedPrice(product.vendor.web2) }} TMT
                                {% else %}
                                    {{ product.price }} TMT
                            {% endif %}
                        </h4> <span class="badge mb-2 {{ product.stock == 0 ? 'badge-secondary' : 'badge-success' }}">{{ product.stock == 0 ? 'productAdd.ZakazaGelyar'|_ : 'productAdd.ElimizdeBar'|_ }}</span>

                        <!-- Overview -->
                        <div class="short_overview mb-4">
                            <div class="row">
                                <div class="col-2">{{ 'product.Satyjy'|_ }}:</div>
                                <div class="col-10"><a href="{{ 'user-profile'|page({id: product.vendor.id}) }}">{{ product.vendor.shop_title ? product.vendor.shop_title: product.vendor.name }}</a></div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-4">{{ 'product.TelefonBelgisi'|_ }}:</div>
                                <div class="col-8">+993 {{ product.vendor.username }}</div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-4">{{ 'product.GoyulanSenesi'|_ }}:</div>
                                <div class="col-8">{{ product.created_at.format('d.m.Y') }}</div>
                            </div>
                            <p>{{ product.description|raw }}</p>
                        </div>


                        <!-- Add to Cart Form -->
                        <form class="cart clearfix my-5 d-flex flex-wrap align-items-center" method="post">
                            <div class="quantity">
                                <input type="number" class="qty-text form-control" id="quantity{{ product.id }}" step="1" min="1" value="1">
                            </div>
                            {% if user %}
                             <div class="product_add_to_cart addToCard" data-id="{{ product.id }}" data-price="{{ product.price }}" data-image="{{ product.images[0].path }}" data-name="{{ product.name }}"  data-vendor="{{ product.vendor.id }}">  
                                    <a href="#" class="btn btn-primary mt-1 mt-md-0 ml-1 ml-md-3">Sebede goş</a>
                             </div>
                            {% else %}
                                <div class="product_add_to_cart" data-id="{{ product.id }}" data-price="{{ product.price }}" data-image="{{ product.images[0].path }}" data-name="{{ product.name }}"  data-vendor="{{ product.vendor.id }}">  
                                        <a href="{{ 'login'|page }}" class="btn btn-primary mt-1 mt-md-0 ml-1 ml-md-3">{{ 'product.SebedeGos'|_ }}</a>
                                 </div>
                            {% endif %}
                            
                            {% if product.files.count > 0 %}
                                <div class="product_add_to_cart">  
                                        <a href="{{ product.files[0].path }}" target="_blank" class="btn btn-primary mt-1 mt-md-0 ml-1 ml-md-3" download>{{ 'product.3dmodel'|_ }}</a>
                                 </div>
                            {% endif %}
                        </form>

                        <!-- Others Info -->
                        <div class="others_info_area mb-3 d-flex flex-wrap">
                            {% if user %}
                                <a 
                                    data-request="onCreateFav" 
                                    data-request-flash
                                    data-request-validate
                                    data-request-data="product_id: {{ product.id }}" 
                                    href="#"><i class="icofont-heart"></i></a>
                            {% else %}
                                <a class="add_to_wishlist" href="{{ 'login'|page }}"><i class="fa fa-heart" aria-hidden="true"></i> {{ 'footer.Halanlarym'|_ }}</a>
                            {% endif %}
                            <a class="share_with_friend" id="copy-{{ product.id }}" data-id="{{ product.id }}" href="#" data-link="{{ 'product'|page({id: product.id}) }}"><i class="fa fa-share" aria-hidden="true"></i> {{ 'product.Paylasmak'|_ }}</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="product_details_tab section_padding_100_0 clearfix">
                        <!-- Tabs -->
                        <ul class="nav nav-tabs" role="tablist" id="product-details-tab">
                            <li class="nav-item">
                                <a href="#description" class="nav-link active" data-toggle="tab" role="tab">{{ 'modal.GinisleyinMaglumat'|_ }}</a>
                            </li>
                            {% if user %}
                            <li class="nav-item">
                                <a href="#reviews" class="nav-link" data-toggle="tab" role="tab">{{'teswir'|_}} <span class="text-muted">({{ product.comments_count }})</span></a>
                            </li>
                            {% endif %}
                            <li class="nav-item">
                                <a href="#addi-info" class="nav-link" data-toggle="tab" role="tab">{{ 'product.GosmacaMaglumat'|_ }}</a>
                            </li>
                            <li class="nav-item">
                                <a href="#refund" class="nav-link" data-toggle="tab" role="tab">{{ 'product.YzynaTabsyrmak'|_ }} &amp; {{ 'product.ZakazyYatyrmak'|_ }}</a>
                            </li>
                        </ul>
                        <!-- Tab Content -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane fade show active" id="description">
                                <div class="description_area">
                                    <h5>{{ 'modal.GinisleyinMaglumat'|_ }}</h5>
                                    <p>{{ product.description|raw }}</p>
                                </div>
                            </div>

                            {% if user %}

                            <div role="tabpanel" class="tab-pane fade" id="reviews">
                                <div class="reviews_area">
                                    <ul>
                                        <li>
                                            {% for comment in product.comments %}
                                                <div class="single_user_review mb-15">
                                                    <div class="review-rating">
                                                        <i class="fa fa-star {{ (comment.rating == 1 or comment.rating > 1) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                                        <i class="fa fa-star {{ (comment.rating == 2 or comment.rating > 1) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                                        <i class="fa fa-star {{ (comment.rating == 3 or comment.rating > 2) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                                        <i class="fa fa-star {{ (comment.rating == 4 or comment.rating > 3) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                                        <i class="fa fa-star {{ (comment.rating == 5 or comment.rating > 4) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                                        <span>{{ comment.comment }}</span>
                                                    </div>
                                                    <div class="review-details">
                                                        <p><a href="#">{{ comment.user.name }}</a> <span>{{ comment.created_at|date('d.m.Y') }}</span></p>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </li>
                                    </ul>
                                </div>

                                <div class="submit_a_review_area mt-20">
                                    <h4>{{ 'product.KammentariaYazmak'|_ }}</h4>
                                    <form id="commentForm"
                                        data-request="onCommentSave"
                                        data-request-flash
                                        data-request-validate
                                        data-request-success="resetForm()"
                                        data-request-error="resetForm()"
                                        method="post">
                                        <div class="form-group">
                                            <div class="stars">
                                                <input type="radio" name="star" class="star-1" value="1" id="star-1">
                                                <label class="star-1" for="star-1">1</label>
                                                <input type="radio" name="star" class="star-2" value="2" id="star-2">
                                                <label class="star-2" for="star-2">2</label>
                                                <input type="radio" name="star" class="star-3" value="3" id="star-3">
                                                <label class="star-3" for="star-3">3</label>
                                                <input type="radio" name="star" class="star-4" value="4" id="star-4">
                                                <label class="star-4" for="star-4">4</label>
                                                <input type="radio" name="star" class="star-5" value="5" id="star-5">
                                                <label class="star-5" for="star-5">5</label>
                                                <span></span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="comments">Teswirler</label>
                                            <input type="hidden" name="product_id" value="{{ product.id }}">
                                            <textarea class="form-control" name="comment" id="comment" rows="5" data-max-length="300"></textarea>
                                        </div>
                                        <button type="submit" class="btn btn-primary">{{ 'product.KammentariaUgratmak'|_ }}</button>
                                    </form>
                                </div>
                            </div>

                            {% endif %}

                            <div role="tabpanel" class="tab-pane fade" id="addi-info">
                                <div class="additional_info_area">
                                    <h5>{{ 'product.GosmacaMaglumat'|_ }}</h5>
                                    <p>{{ product.description|raw }}</p>
                                </div>
                            </div>

                            <div role="tabpanel" class="tab-pane fade" id="refund">
                                <div class="refund_area">
                                    {% content 'refund' %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Single Product Details Area End -->

{% put scripts %}
<script>
    function resetForm() {
        document.getElementById('commentForm').reset(); // Reset the form
    }
</script>
{% endput %}