@extends('master.front')
@section('content')
    <!-- Start Bradcaump area -->
    <div class="ht__bradcaump__area bg-image--1"></div>
    <!-- End Bradcaump area -->
    <!-- Start main Content -->
    <div class="maincontent bg--white pt--80 pb--55">
        <div class="container">
            <div class="row">
                <div class="col-lg-9 col-12">
                    @foreach($product as $prod)
                    <div class="wn__single__product">
                        <div class="row">
                            <div class="col-lg-6 col-12">
                                <div class="wn__fotorama__wrapper">
                                    <div class="fotorama wn__fotorama__action" data-nav="thumbs">
                                        <img src="{{ url('/') }}/settings/product/{{ $prod->image }}" alt="{{ $prod->name }}">
{{--                                        <a href="2.jpg"><img src="images/product/2.jpg" alt=""></a>--}}
{{--                                        <a href="3.jpg"><img src="images/product/3.jpg" alt=""></a>--}}
{{--                                        <a href="4.jpg"><img src="images/product/4.jpg" alt=""></a>--}}
{{--                                        <a href="5.jpg"><img src="images/product/5.jpg" alt=""></a>--}}
{{--                                        <a href="6.jpg"><img src="images/product/6.jpg" alt=""></a>--}}
{{--                                        <a href="7.jpg"><img src="images/product/7.jpg" alt=""></a>--}}
{{--                                        <a href="8.jpg"><img src="images/product/8.jpg" alt=""></a>--}}
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="product__info__main">
                                    <h1>{{ $prod->name }}</h1>
                                    <div class="product-reviews-summary d-flex">
                                        <div class="rated">
                                            @foreach($reviews as $review)
                                                @for($i = 1; $i <= 5; $i ++)
                                                    @if($review->rew > 0)
                                                        @while($i <= round($review->rating/$review->rew))
                                                            <div class="rated-btn"></div>
                                                                                                                    @endwhile
                                                    @endif
                                                    <div class="rate-btn"></div>
                                                @endfor
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="price-box">
                                        @if($prod->discount != null)
                                            <span>{{ $prod->price-($prod->price*$prod->discount/100) }} AZN</span>
                                        @else
                                            <span>{{ $prod->price }} AZN</span>
                                        @endif
                                    </div>
                                    <form action="{{ route('front.addtocart', ['id' => $prod->id]) }}" method="post">
                                        <div class="box-tocart d-flex">
                                            <span>Ədəd</span>
                                            <input class="input-text qty" name="qty" type="text">
                                            <div class="addtocart__actions">
                                                <button class="tocart">Səbətə at</button>
                                            </div>
                                        </div>
                                        {{ csrf_field() }}
                                    </form>
                                    <div class="product_meta">
											<span class="posted_in">Kateqoriya:
												<a href="#">{{ $prod->c_name }}</a>
											</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product__info__detailed">
                        <div class="pro_details_nav nav justify-content-start" role="tablist">
                            <a class="nav-item nav-link active" data-toggle="tab" href="#nav-details" role="tab">Haqqında</a>
                            <a class="nav-item nav-link" data-toggle="tab" href="#nav-review" role="tab">Rəylər</a>
                        </div>
                        <div class="tab__container">
                            <!-- Start Single Tab Content -->
                            <div class="pro__tab_label tab-pane fade show active" id="nav-details" role="tabpanel">
                                <div class="description__attribute">
                                    <p></p>
                                </div>
                                <div class="wn__related__product pt--80 pb--50">
                                    <div class="section__title text-center">
                                        <h2 class="title__be--2">Digər məhsullar</h2>
                                    </div>
                                    <div class="row mt--60">
                                        <div class="productcategory__slide--2 arrows_style owl-carousel owl-theme">
                                            <!-- Start Single Product -->
                                            @if(count($products))
                                                @foreach($products as $p)
                                                    <div class="product product__style--3 col-lg-4 col-md-4 col-sm-6 col-12">
                                                        <div class="product__thumb">
                                                            <a class="first__img" href="{{ route('front.product', ['slug' => $p->slug]) }}"><img src="{{ url('/') }}/settings/product/{{ $p->image }}" alt="{{ $p->name }}"></a>
                                                            <a class="second__img animation1" href="{{ route('front.product', ['slug' => $p->slug]) }}"><img src="{{ url('/') }}/settings/product/{{ $p->image }}" alt="{{ $p->name }}"></a>
                                                            @if($p->discount != null)
                                                                <div class="hot__box">
                                                                    <span class="hot-label">ENDİRİMDƏ</span>
                                                                </div>
                                                            @endif
                                                        </div>
                                                        <div class="product__content content--center">
                                                            <h4><a href="{{ route('front.product', ['slug' => $p->slug]) }}">{{ $p->name }}</a></h4>
                                                            @if($p->discount != null)
                                                                <ul class="prize d-flex">
                                                                    <li>{{ $p->price-($p->price*$p->discount/100) }} AZN</li>
                                                                    <li class="old_prize">{{ $p->price }} AZN</li>
                                                                </ul>
                                                            @else
                                                                <ul class="prize d-flex">
                                                                    <li>{{ $p->price }} AZN</li>
                                                                </ul>
                                                            @endif
                                                            <div class="action">
                                                                <div class="actions_inner">
                                                                    <ul class="add_to_links">
                                                                        <li><a class="cart" href="{{ route('front.singleaddtocart', ['slug' => $p->slug]) }}"><i class="bi bi-shopping-bag4"></i></a></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endif
                                            <!-- Start Single Product -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Single Tab Content -->
                            <!-- Start Single Tab Content -->
                            <div class="pro__tab_label tab-pane fade" id="nav-review" role="tabpanel">
                                <div class="review__attribute">
                                    <h1>Müştəri rəyləri</h1>
                                </div>
                                <div class="blog-details">
                                    <div class="comments_area">
                                        <h3 class="comment__title">{{ count($comments) }} rəy</h3>
                                        <ul class="comment__list">
                                            @foreach($comments as $comment)
                                                <li>
                                                    <div class="wn__comment">
                                                        <div class="thumb">
                                                            <img src="/front/images/blog/comment/1.jpeg" alt="">
                                                        </div>
                                                        <div class="content">
                                                            <div class="comnt__author d-block d-sm-flex">
{{--                                                                <span><a href="#">admin</a> Post author</span>--}}
                                                                <span>{{ $comment->post_date }} saat {{ $comment->post_time }}</span>
{{--                                                                <div class="reply__btn">--}}
{{--                                                                    <a href="#">Reply</a>--}}
{{--                                                                </div>--}}
                                                            </div>
                                                                                                                    </div>
                                                    </div>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                                <div class="review-fieldset">
                                    <div class="review-field-ratings">
                                        <div class="product-review-table">
                                            <div class="review-field-rating d-flex">
                                                <span>Keyfiyyət</span>
                                                <div class="rate">
                                                    <div id="1" class="btn-1 rate-btn"></div>
                                                    <div id="2" class="btn-2 rate-btn"></div>
                                                    <div id="3" class="btn-3 rate-btn"></div>
                                                    <div id="4" class="btn-4 rate-btn"></div>
                                                    <div id="5" class="btn-5 rate-btn"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="review_form_field">
                                        <form action="{{ route('front.review', ['id' => $prod->id]) }}" method="post">
                                            {{ csrf_field() }}
                                            <div class="input__box">
                                                <span>Rəy</span>
                                                <input type="hidden" id="rate" name="rating">
                                                <textarea name="reviewProduct"></textarea>
                                            </div>
                                            <div class="review-form-actions">
                                                <button>Göndər</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!-- End Single Tab Content -->
                        </div>
                    </div>
                    @endforeach

                </div>
                <div class="col-lg-3 col-12 md-mt-40 sm-mt-40">
                    <div class="shop__sidebar">
                        <aside class="wedget__categories poroduct--cat">
                            <h3 class="wedget__title">Kateqoriyalar</h3>
                            <ul>
                            @foreach($categories as $category)
                                <li><a href="/public/products/?category={{ $category->name }}">{{ $category->name }} <span>({{ $category->qty }})</span></a></li>
                            @endforeach
                            </ul>
                        </aside>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End main Content -->
@endsection
@section('js')
    <script>
        $(function(){
            $('.rate-btn').hover(function(){
                $('.rate-btn').removeClass('rate-btn-hover');
                var therate = $(this).attr('id');
                for (var i = therate; i >= 0; i--) {
                    $('.btn-'+i).addClass('rate-btn-hover');
                };
            });

            $('.rate-btn').mouseover(function(){
                var therate = $(this).attr('id');
                $('.rate-btn').removeClass('rate-btn-active');
                for (var i = therate; i >= 0; i--) {
                    $('.btn-'+i).addClass('rate-btn-active');
                };
                $("#rate").val(therate);
            });
        });
    </script>
    <script>
    $(document).on({
    "contextmenu": function(e) {
        console.log("ctx menu button:", e.which); 

        // Stop the context menu
        e.preventDefault();
    },
    "mousedown": function(e) { 
        console.log("normal mouse down:", e.which); 
    },
    "mouseup": function(e) { 
        console.log("normal mouse up:", e.which); 
    }
});
    </script>
@endsection