@extends($theme.'.layouts.admin')
@section('content')
<!--Slider Start-->
<div class="paralax-section-slide-data1" style="background-image:url('assets/img/banners/banner1.1.jpg');    min-height: 230px;background-color: #dedede;">
    <h1 style="font-size: 35px;">{{ $product->name_en }} </h1>
    <nav class="breadcrumb-bar" aria-label="breadcrumb">
        <ol class="container breadcrumb text-center text-lg-left">
            <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('sub_categories.list', ['id' => $main_category_id]) }}">{{ $main_category_name }}</a></li>
            <li class="breadcrumb-item current-page" aria-current="page"><a href="{{ route('sub_categories.products.list', ['id' => $sub_category_id]) }}">{{ $sub_category_name }}</a></li>
            <li class="breadcrumb-item current-page" aria-current="page"><a href="javascript:;">{{ $product_name }}</a></li>
        </ol>
    </nav>
</div>
<!--Slider End-->

<!-- START HEADING SECTION -->
<div class="about_content pt-0">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="product-body">
                    <div class="row product-list product-detail">
                       {{-- <div class="col-12 col-lg-6 product-detail-slider">
                            <div class="wrapper">
                                <div class="Gallery swiper-container img-magnifier-container" id="gallery">
                                    <div class="swiper-wrapper myimgs">
                                        <div class="swiper-slide"> <a href="{{ $product->image1 }}" data-fancybox="1" title="Zoom In"><img class="myimage" src="{{ $product->image1 }}" alt="gallery"/></a></div>
                                        @if(!empty($product->image2))
                                            <div class="swiper-slide"> <a href="{{ $product->image2 }}" data-fancybox="1" title="Zoom In"><img class="myimage" src="{{ $product->image2 }}" alt="gallery"/></a></div>
                                        @endif
                                        @if(!empty($product->image3))
                                            <div class="swiper-slide"> <a href="{{ $product->image3 }}" data-fancybox="1" title="Zoom In"><img class="myimage" src="{{ $product->image3 }}" alt="gallery"/></a></div>
                                        @endif
                                        @if(!empty($product->image4))
                                            <div class="swiper-slide"> <a href="{{ $product->image4 }}" data-fancybox="1" title="Zoom In"><img class="myimage" src="{{ $product->image4 }}" alt="gallery"/></a></div>
                                        @endif
                                    </div>
                                </div>
                                <div class="Thumbs swiper-container" id="thumbs">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide"> <img src="{{ $product->image1 }}" alt="thumnails"/></div>
                                        @if(!empty($product->image2))
                                            <div class="swiper-slide"> <img src="{{$product->image2}}" alt="thumnails"/></div>
                                        @endif
                                        @if(!empty($product->image3))
                                            <div class="swiper-slide"> <img src="{{$product->image3}}" alt="thumnails"/></div>
                                        @endif
                                        @if(!empty($product->image4))
                                            <div class="swiper-slide"> <img src="{{$product->image4}}" alt="thumnails"/></div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>--}}

                        <div class="col-12 col-lg-6 product-slick-slider">
                            @if(!empty($product->discount_label))
                            <div class="offer-box"> {{ $product->discount_label }}</div>
                            @endif
                            <div class="rtl-slider-flex 123">
                                <div class="rtl-slider">
                                    <div class="rtl-slider-slide container__img-holder">
                                    <img src="{{ $product->image1 }}" class="img-1" alt="Image">
                                </div>
                                    @if(!empty($product->image2))
                                    <div class="rtl-slider-slide container__img-holder">
                                    <img src="{{ $product->image2 }}" class="img-1" alt="Image">
                                </div>
                                    @endif
                                    @if(!empty($product->image3))
                                    <div class="rtl-slider-slide container__img-holder">
                                    <img src="{{ $product->image3 }}" class="img-1" alt="Image">
                                </div>
                                    @endif
                                    @if(!empty($product->image4))
                                    <div class="rtl-slider-slide container__img-holder">
                                    <img src="{{ $product->image4 }}" class="img-1" alt="Image">
                                </div>
                                    @endif
                                </div>
                                <div class="rtl-slider-nav">
                                    <div class="rtl-slider-slide" style="background-image: url({{$product->image1}})"></div>
                                    @if(!empty($product->image2))
                                        <div class="rtl-slider-slide" style="background-image: url({{$product->image2}})"></div>
                                    @endif
                                    @if(!empty($product->image3))
                                        <div class="rtl-slider-slide" style="background-image: url({{$product->image3}})"></div>
                                    @endif
                                    @if(!empty($product->image4))
                                        <div class="rtl-slider-slide" style="background-image: url({{$product->image4}})"></div>

                                    @endif
                                </div>
                                {{--<span class="thumb-prev"><i class="fa fa-angle-up fa-lg"></i></span>
                                <span class="thumb-next"><i class="fa fa-angle-down fa-lg"></i><span>--}}
                            </div>
                        </div>

                        <div class="col-12 col-lg-6 text-center text-lg-left pro-details">
                            <div class="product-single-price">
                                <h4><span class="real-price">{{ $currency_code }} {{ number_format($product->discounted_price,2) }}</span>
                                    @if($product->price != $product->discounted_price)
                                        <span> <del>{{ $currency_code }} {{ number_format($product->price,2) }}</del> </span>
                                    @endif
                                </h4>
                            </div>
                            <div class="dd-cover">
                                @if(count($product->group_variants) > 1)
                                    <select class="form-control variant">
                                        @foreach($product->group_variants as $group_variant)
                                            <option @if($product->id == $group_variant->id) selected @endif data-link="{{ route('products.detail', ['id' => $group_variant->id, 'group_name_slug' => $group_variant->group_name_slug]) }}">{{ $group_variant->group_variant_name }}</option>
                                        @endforeach
                                    </select>
                                @else
                                    <p class="pro-description"> {!! $product->product_color .'-'.$product->product_size !!}</p>
                                @endif
                            </div>
                            <p class="pro-description">{!! strip_tags($product->description_en) !!}</p>
                            
                            <div class="row product-quantity input_plus_mins no-gutters">

                                <div class="qty col-12 col-lg-3 d-lg-flex  align-items-lg-center d-inline-block">
                                    <span class="minus bg-dark"><i class="lni-minus"></i></span>
                                    <input type="number" class="count" name="qty" id="qty_count" value="{{ $qty }}">
                                    <span class="plus bg-dark"><i class="lni-plus"></i></span>
                                </div>
                                <div class="col-12 col-lg-9">
                                    <a href="javascript:;" class="btn pink-gradient-btn-into-black"
                                        data-id="{{ $product->id }}" data-name="{{ $product->name_en }}" data-price="{{ $product->price }}" data-discounted-price="{{ $product->discounted_price }}" data-sub-category="{{ $product->second_level_category_name }}" data-image="{{ $product->image1 }}" data-product-size="{{ $product->product_size }}" data-product-color="{{ $product->product_color }}" data-qty="1" data-gst-amount="{{ $product->gst_amount}}" data-gst-percent="{{ $product->gst_percent }}" data-group-name-slug="{{ $product->group_name_slug }}" id="add_cart">@if($show_add_cart_btn) ADD TO CART @else UPDATE TO CART @endif</a>
                                </div>
                            </div>


                            <div class="dropdown-divider"></div>

                          <div class="product-tags-list">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><p class="d-inline">SKU: <span>{{$product->sku_code}}</span></p></li>
                                        @if (!empty($product->main_category_name))
                                            <li class="breadcrumb-item"><span class="d-inline">Categories: 
                                                <a href="{{url('/sub-categories/'.$product->main_category_id)}}">{{$product->main_category_name}}</a>
                                                                                            </span></li>
                                        @endif
                                                                            </ol>
                                </nav>
                            </div>

                           <!-- <div class="share-product-details">
                                <ul class="share-product-icons">
                                    <li><p>Share Link:</p></li>
                                    <li><a href="javascript:void(0)" onclick="javascript:genericSocialShare('{{ session()->get('fb_link') }}/sharer.php?u={{$share_link}}')" class="facebook-bg-hvr"><i class="fab fa-facebook-f" aria-hidden="true" target="_blank"></i></a></li>
                                    <li><a href="javascript:void(0)" onclick="javascript:genericSocialShare('{{ session()->get('twitter_link') }}/sharer?text=check out this awesome product on Deena &url={{$share_link}}')" class="twitter-bg-hvr"><i class="fab fa-twitter" aria-hidden="true" target="_blank"></i></a> </li>
                                </ul>
                            </div> -->

                        </div>

                  <div class="col-12 mt-4 mb-4">
                            <div class="row no-gutters product-all-details">

                                <ul class="col-12 nav nav-tabs" id="myTab" role="tablist">
                                    {{--<li class="col-6 nav-item">
                                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="false">Product Description</a>
                                    </li>
                                    <li class="col-6 nav-item">
                                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Additional Information</a>
                                    </li>--}}
                                    <li class="col-6 nav-item">
                                        <a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="true">Reviews</a>
                                    </li>
                                </ul>
                                <div class="col-12 tab-content" id="myTabContent">
                                    {{--<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                        <p class="product-tab-description text-center text-lg-left">If you are a small business and you are interested in small rebranding then this is a perfect plan for you, having Five years experience in Blogging, photographing, Disgning and love to cycling,Writting,Singing and Traveling around the world</p>
                                        <p class="product-tab-description text-center text-lg-left">If you are a small business and you are interested in small rebranding then this is a perfect plan for you, having Five years experience in Blogging, photographing, Disgning and love to cycling,Writting,Singing and Traveling around the world</p>
                                    </div>
                                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                        <div class="row">
                                            <div class="col-12">
                                                <table class="table table-striped">
                                                    <thead>
                                                    <tr>
                                                        <th scope="col">#</th>
                                                        <th scope="col">First</th>
                                                        <th scope="col">Last</th>
                                                        <th scope="col">Handle</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <th scope="row">1</th>
                                                        <td>Mark</td>
                                                        <td>Otto</td>
                                                        <td>@mdo</td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">2</th>
                                                        <td>Jacob</td>
                                                        <td>Thornton</td>
                                                        <td>@fat</td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">3</th>
                                                        <td>Larry</td>
                                                        <td>the Bird</td>
                                                        <td>@twitter</td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>--}}

                                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">








                                        <div class="tab-pane fade active show" id="reviews" role="tabpanel">
                                            <div class="reviews_wrapper">
                                                <h2>{{$rating_count}} reviews</h2>
                                                @foreach($product->rating as $rating)
                                                    <div class="reviews_comment_box">
                                                        <div class="comment_thmb">
                                                            <img src="{{ url($theme."/assets/img/comment2.jpg") }}"  >
                                                        </div>
                                                        <div class="comment_text">
                                                            <div class="reviews_meta">
                                                                <div class="star_rating">
                                                                    <ul>
                                                                       @for($i=1;$i<=5;$i++)
                                                                            @if($i<=$rating->rating)
                                                                                <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                                            @else
                                                                                <li><a href="#"><i class="far fa-star"></i></a></li>
                                                                            @endif
                                                                        @endfor
                                                                    </ul>
                                                                </div>
                                                                                                                                <p><strong>{{$rating->user_name}} </strong>- {{$date}}</p>
                                                                <span>{{$rating->rating_descriptions}}</span>
                                                            </div>
                                                        </div>

                                                    </div>
                                                @endforeach
                                        </div>




                                    </div>

                                </div>

                            </div>



                        </div>

                    </div>


                </div>

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

    <!--START LATEST ARRIVALS-->
    <div class="lastest_arrivals remove-margins">
        <div class="container">
            <div class="row">
                <div class="col-12 mb-4">
                    <h1>Related Products</h1>
                </div>

                <div class="col-12">
                    <div class="lastest_featured_products owl-carousel owl-theme">

                         @foreach($related_product as $related_data)
                        <div class="lastest_arrival_items item">
                            <div class="card">
                                {{-- <span class="product-type">NEW</span> --}}
                                @if(!empty($related_data->discount_label))
                                    <div class="offer-box"> {{ $related_data->discount_label }}</div>
                                @endif
                                <div class="image-holder">
                                    <div class="ico-box">
                                        {{-- <a href="#" class="lastest-addto-cart"><i class="fa fa-shopping-cart"></i></a> --}}
                                        <a href="{{ route('products.detail', ['id' => $related_data->id, 'group_name_slug' => $related_data->group_name_slug]) }}" class="lastest-addto-cart"><i class="fa fa-eye"></i></a>
                                    </div>

                                    <a href="{{ route('products.detail', ['id' => $related_data->id, 'group_name_slug' => $related_data->group_name_slug]) }}"  data-fancybox="lastest_product"  data-title="Shirt Name">
                                        <img src="{{ $related_data->image1 }}" class="card-img-top" alt="Lastest Arrivals 1">
                                    </a>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-12 text-center">
                                            <a href="{{ route('products.detail', ['id' => $related_data->id, 'group_name_slug' => $related_data->group_name_slug]) }}">
                                            <h5 class="card-title">{{ $related_data->name_en }}</h5>
                                            </a>
                                        </div>
                                        <div class="col-12 text-center">
                                            <p class="card-text">{{ $currency_code }} {{ $related_data->discounted_price }}
                                                @if($related_data->price != $related_data->discounted_price)
                                                    <span> <del>{{ $currency_code }} {{ $related_data->price }}</del> </span>
                                                @endif
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 btn-box">
                                    <input type="hidden" value="