{% 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>Haryt barada giňişleýin maglumat</h5>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ 'index'|page }}">Esasy sahypa</a></li>
                        <li class="breadcrumb-item"><a href="#">Harytlar</a></li>
                        <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 }} teswir)</span>
                        </div>
                        <h4 class="price mb-4">{{ product.price }} TMT</h4>

                        <!-- Overview -->
                        <div class="short_overview mb-4">
                            <div class="row">
                                <div class="col-2">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>
                            <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">Sebede goş</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>3D model</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> Halanlaryma</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> Paýlaşmak</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">Giňişleýin maglumat</a>
                            </li>
                            {% if user %}
                            <li class="nav-item">
                                <a href="#reviews" class="nav-link" data-toggle="tab" role="tab">Teswirler <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">Goşmaça maglumat</a>
                            </li>
                            <li class="nav-item">
                                <a href="#refund" class="nav-link" data-toggle="tab" role="tab">Yzyna tabşyrmak &amp; Zakazy ýatyrmak</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>Giňişleýin maglumat</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>Teswir ýazmak</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">Teswiri ugratmak</button>
                                    </form>
                                </div>
                            </div>

                            {% endif %}

                            <div role="tabpanel" class="tab-pane fade" id="addi-info">
                                <div class="additional_info_area">
                                    <h5>Goşmaça maglumatlar</h5>
                                    <p>{{ product.description|raw }}</p>
                                </div>
                            </div>

                            <div role="tabpanel" class="tab-pane fade" id="refund">
                                <div class="refund_area">
                                    <h6>Harydy yzyna gaýtarmak</h6>
                                    <p>Gowy hilli harytlary yzyna gaýtarmagyň möhleti, haryt satylanda başgaça ylalaşylmadyk bolsa, haryt alnan gününden 10 gün. Satyn alyjy tarapyndan harytlary yzyna gaýtarmagyň sebäpleri aşakdakylar bolup biler: </p>

                                    <h6>Sebäpler</h6>
                                    <ul class="mb-30 ml-30">
                                        <li><i class="icofont-check"></i> Hili pes</li>
                                        <li><i class="icofont-check"></i> Dostawka haýal</li>
                                        <li><i class="icofont-check"></i> Başga haryt geldi</li>
                                        
                                    </ul>

                                    <h6>Sorag. Gelen harydyň hili pes bolan ýagdaýynda näme edip bilerin?</h6>
                                    <p>Satyn alyjy tarapyndan harytlaryň yzyna gaýtarylmagynyň sebäbi harytlaryň önümçilik kemçiligi (nikasy) bolup biler. Satyn alyjy öndüriji tarapyndan kesgitlenen kepillik möhletinde şeýle harytlaryň yzyna gaýtarylmagyny talap edip biler. Önüm üçin kepillik möhleti öndüriji tarapyndan kesgitlenmedik bolsa, şeýle harytlary yzyna gaýtarmak möhleti 2 (iki) aý.</p>
                                </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 %}