@extends('website.layouts.app')

@section('content')

    @include('website.layouts.crumb')

    <!-- product-single start -->
    <section class="product-single theme3 pt-60">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mb-5 mb-lg-0">
                    <div class="position-relative">
                        <span class="badge badge-danger top-right">{{ $product->offer() }}</span>

                    </div>
                    <div class="product-sync-init mb-20" dir="ltr">
                        <div class="single-product">
                            <div class="product-thumb">
                                <img src="{{ getImage('products', $product->image) }}" alt="product-thumb">
                            </div>
                        </div>
                        @foreach ($product->gallery as $ar)
                            <!-- single-product end -->
                            <div class="single-product">
                                <div class="product-thumb">
                                    <img src="{{ getImage('products', $ar->image) }}" alt="product-thumb">
                                </div>
                            </div>
                            <!-- single-product end -->
                        @endforeach

                    </div>

                    <div class="product-sync-nav single-product">
                        <div class="single-product">
                            <div class="product-thumb">
                                <a href="javascript:void(0)"> <img src="{{ getImage('products', $product->image) }}"
                                        alt="product-thumb"></a>
                            </div>
                        </div>
                        @foreach ($product->gallery as $ar)

                            <!-- single-product end -->
                            <div class="single-product">
                                <div class="product-thumb">
                                    <a href="javascript:void(0)"> <img src="{{ getImage('products', $ar->image) }}"
                                            alt="product-thumb"></a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-lg-6 mt-5 mt-md-0">
                    <div class="single-product-info">
                        <div class="single-product-head">
                            <h2 class="title mb-20">{{ $product['name_' . getLang()] }}</h2>
                            <div class="star-content mb-20">
                                @for ($i = 1; $i <= 5; $i++)
                                    <span class="star-on "><i
                                            class="ion-ios-star{{ $i > $product->avgrate ? '-o' : '' }}"></i></span>
                                @endfor

                                <a href="#" id="write-comment"><span class="ml-2"><i class="far fa-comment-dots"></i></span>
                                    Read reviews <span>( {{ countReview($product->id) }} )</span></a>
                                <a href="#" data-toggle="modal" data-target="#exampleModalCenter"><span class="edite"><i
                                            class="far fa-edit"></i></span> Write a review</a>
                            </div>
                        </div>
                        <div class="product-body mb-40">
                            <div class="d-flex align-items-center mb-30">
                                <h6 class="product-price mr-20">
                                    @if (!empty($product->old_price))
                                        <del class="del">{{ $product['old_price'] . ' ' . trans('admin.LE') }}</del>
                                    @endif
                                    <span class="onsale">{{ $product->price . ' ' . trans('admin.LE') }}</span>
                                </h6>
                                @if (!empty($product->old_price))
                                    <span class="badge position-static bg-dark rounded-0">{{ $product->offer() }}</span>
                                @endif
                            </div>
                            <p>{{ $product['description_' . getLang()] }}</p>
                            <p>
                                <br>
                                @if (getStock($product->id) > 0)
                                    <button type="button" class="btn btn-success ">
                                        {{ trans('home.Stock') }}
                                        {{-- <span class="badge badge-light">
                                            {{ getStock($product->id) }}
                                        </span> --}}
                                    </button>
                                @else
                                    <span class="badge badge-success ">{{ trans('home.Out Of Stock') }}</span>
                                @endif
                            </p>
                        </div>
                        <div class="product_meta">
                            <span>
                                {{ trans('admin.category') }}:
                                <a
                                    href="{{ route('get.category', [$product->category->id, preg_replace('/\s+/', '-', $product->category['name_' . getLang()])]) }}">
                                    {{ $product->category['name_' . getLang()] }}
                                </a>
                            </span>
                        </div>
                        <div class="product-footer">
                            <form method="post" action="{{ route('set.cart') }}">
                                <div class="product-count style d-flex flex-column flex-sm-row mt-30 mb-30">
                                    {{ csrf_field() }}
                                    <input type="hidden" name="productID" value="{{ $product->id }}">
                                    @if (getStock($product->id) > 0)
                                        <div class="count d-flex">
                                            <input type="number" min="1" max="100" step="1" value="1" name="qty">
                                            <div class="button-group">
                                                <button class="count-btn increment"><i
                                                        class="fas fa-chevron-up"></i></button>
                                                <button class="count-btn decrement"><i
                                                        class="fas fa-chevron-down"></i></button>
                                            </div>
                                        </div>

                                        <div>

                                            <button class="btn theme-btn--dark3 btn--xl mt-5 mt-sm-0 rounded-5"
                                                type="submit">
                                                <span class="mr-2"><i class="ion-android-add"></i></span>
                                                {{ trans('home.addToCart') }}
                                            </button>
                                        </div>
                                    @endif
                                </div>
                            </form>

                            <div class="addto-whish-list">
                                <a href="{{ route('set.Wishlist', $product->id) }}" title="{{ trans('home.addWishlist') }}">
                                    <i class="icon-heart"></i> {{ trans('home.addWishlist') }}
                                </a>
                            </div>
                            <div class="pro-social-links mt-10">
                                <div class="priduct_social">
                                    <ul>
                                        <!-- AddToAny BEGIN -->
                                        <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
                                            <a class="a2a_button_facebook"></a>
                                            <a class="a2a_button_twitter"></a>
                                            <a class="a2a_button_email"></a>
                                            <a class="a2a_button_whatsapp"></a>
                                            <a class="a2a_button_telegram"></a>
                                            <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
                                        </div>
                                        <script async src="https://static.addtoany.com/menu/page.js"></script>
                                        <!-- AddToAny END -->
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- product-single end -->



    <!-- product tab start -->
    <div class="product-tab theme3 bg-white pt-60 pb-80">
        <div class="container">
            <div class="product-tab-nav">
                <div class="row align-items-center">
                    <div class="col-12">
                        <nav class="product-tab-menu single-product">
                            <ul class="nav nav-pills justify-content-center" id="pills-tab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home"
                                        role="tab" aria-controls="pills-home"
                                        aria-selected="true">{{ trans('admin.description') }}</a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact"
                                        role="tab" aria-controls="pills-contact" aria-selected="false">
                                        {{ trans('admin.review') }}</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <!-- product-tab-nav end -->
            <div class="row">
                <div class="col-12">
                    <div class="tab-content" id="pills-tabContent">
                        <!-- first tab-pane -->
                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                            aria-labelledby="pills-home-tab">
                            <div class="single-product-desc">
                                {!! $product['content_' . getLang()] !!}
                            </div>
                        </div>

                        <!-- third tab-pane -->
                        <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
                            <div class="single-product-desc">
                                @foreach ($reviews as $review)
                                    <div class="grade-content">
                                        {{-- <span class="grade">Grade </span>
                                        --}}
                                        @for ($i = 1; $i <= $review->rate; $i++)
                                            <span class="star-on"><i class="ion-ios-star"></i> </span>
                                        @endfor
                                        <h6 class="sub-title">{{ $review->user->name }}</h6>
                                        <p> {{ $review->created_at->format('Y-m-d') }}</p>
                                        {{-- <h4 class="title">test</h4>
                                        --}}
                                        <p>{{ $review->comment }}</p>
                                    </div>
                                    <hr class="hr">
                                @endforeach
                                @if (auth()->user())
                                    <a href="#" class="btn theme-btn--dark3 theme-btn--dark3-sm btn--sm rounded-5 mt-15"
                                        data-toggle="modal" data-target="#exampleModalCenter">{{ trans('home.writeReview') }}</a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- product tab end -->

    <!-- new arrival section start -->
    <section class="theme3 bg-white pb-80">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title text-center mb-30">
                        <h2 class="title text-dark text-capitalize">{{ trans('home.related') }}</h2>
                        {{-- <p class="text mt-10">Add Related products to weekly line up
                        </p> --}}
                    </div>
                </div>
                <div class="col-12">
                    <div class="product-slider-init slick-nav" @if(getLang() == 'ar') dir="ltr" @endif>

                        @foreach ($rProducts as $featured)

                            <div class="slider-item">
                                <div class="card product-card">
                                    <div class="card-body p-0">
                                        <div class="media flex-column">
                                            <div class="product-thumbnail position-relative">
                                                {{-- <span
                                                    class="badge badge-danger top-right">New</span>
                                                --}}
                                                <span class="badge badge-success top-left">{{ $featured->offer() }}</span>
                                                <a href="{{ $featured->url }}">
                                                    <img class="first-img"
                                                        src="{{ getImage('products', $featured->image) }}" alt="thumbnail">
                                                </a>
                                                <!-- product links -->
                                                <ul class="product-links d-flex justify-content-center">
                                                    <li>
                                                        <a href="{{ route('set.Wishlist', $featured->id) }}">
                                                            <span data-toggle="tooltip" data-placement="bottom"
                                                                title="add to wishlist" class="icon-heart">
                                                            </span>
                                                        </a>
                                                    </li>
                                                    {{-- <li>
                                                        <a href="#" data-toggle="modal" data-target="#compare">
                                                            <span data-toggle="tooltip" data-placement="bottom"
                                                                title="Add to compare" class="icon-shuffle"></span>
                                                        </a>
                                                    </li> --}}
                                                    <li>
                                                        <a href="#" data-toggle="modal" class="quick_button"
                                                            data-target="#quick-view"
                                                            data-url="{{ route('get.productView', $featured->id) }}">
                                                            <span data-toggle="tooltip" data-placement="bottom"
                                                                title="Quick view" class="icon-magnifier"></span>
                                                        </a>
                                                    </li>
                                                </ul>
                                                <!-- product links end-->
                                            </div>
                                            <div class="media-body">
                                                <div class="product-desc">
                                                    <h3 class="title">
                                                        <a
                                                            href="{{ $featured->url }}">{{ $featured['name_' . getLang()] }}</a>

                                                    </h3>
                                                    <div class="star-rating">
                                                        @for ($i = 1; $i <= 5; $i++)
                                                            <span
                                                                class="ion-ios-star{{ $i > $featured->avgrate ? '-o' : '' }} "></span>
                                                        @endfor
                                                    </div>

                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <h6 class="product-price">{{ $featured->price }}
                                                        </h6>
                                                        <button class="pro-btn add_to_cart">
                                                            <i class="icon-basket" data-id="{{ $featured->id }}"
                                                                data-url="{{ route('setToCart', $featured->id) }}"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- new arrival section end -->

    @auth()
        <!-- third modal -->
        <div class="modal fade show style4" id="exampleModalCenter" tabindex="-1" role="dialog" aria-modal="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header d-block">
                        <h5 class="modal-title bg-dark text-white">{{ trans('home.writeReview') }}</h5>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="modal-thumb">
                                    <img src="{{ getImage('products', $product->image) }}" alt="modal-thumb">
                                    <h3 class="title">{{ $product['name_' . getLang()] }}</h3>
                                </div>
                            </div>
                            <div class="col-md-6 mt-4 mt-md-0">
                                <div class="modal-form">
                                    <h3 class="title"> {{ trans('home.writeReview') }}</h3>
                                    {{-- <div class="star-content pb-3">
                                        <span class="quality mr-2">Quality</span>
                                        <span class="star-on"><i class="ion-ios-star"></i> </span>
                                        <span class="star-on"><i class="ion-ios-star"></i> </span>
                                        <span class="star-on"><i class="ion-ios-star"></i> </span>
                                        <span class="star-on"><i class="ion-ios-star"></i> </span>
                                        <span class="star-on"><i class="ion-ios-star"></i> </span>
                                    </div> --}}
                                    @include('admin.layouts.error')

                                    <form action="{{ route('review') }}" method="post" id="form-review">
                                        {{ csrf_field() }}
                                        <input type="hidden" name="product_id" value="{{ $product->id }}">

                                        <div class="form-group">
                                            <label class="title" for="text-filed113">{{ trans('home.rate') }}<sup
                                                    class="required">*</sup></label>
                                            <select id="review-stars" class="form-control" name="rating">
                                                <option value="5">5 {{ trans('home.star') }}</option>
                                                <option value="4">4 {{ trans('home.star') }}</option>
                                                <option value="3">3 {{ trans('home.star') }}</option>
                                                <option value="2">2 {{ trans('home.star') }}</option>
                                                <option value="1">1 {{ trans('home.star') }}</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="text-filed21">{{ trans('home.message') }}<sup class="required">*</sup></label>
                                            <textarea class="form-control textarea" id="text-filed21" rows="3" name="comment"></textarea>
                                        </div>
                                      
                                    </form>
                                    <div class="form-group mt-3">
                                        {{-- <span class="required"><sup>*</sup> Required fields</span> --}}
                                        <div class="text-right">
                                            <button type="submit"
                                                class="btn theme-btn--dark3 theme-btn--dark3-sm btn--sm rounded-5" form="form-review" type="submit">{{ trans('home.review') }}</button>
                                            <span class="d-inline-block mx-2 or"> {{ trans('home.or') }} </span>
                                            <button type="button"
                                                class="btn theme-btn--dark3 theme-btn--dark3-sm btn--sm rounded-5"
                                                data-dismiss="modal">{{ trans('home.cancel') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- modals end -->
    @endauth

@endsection