@extends('layouts.app')

@section('content')


    <!-- Start Page Header Wrapper -->
    <div class="page-header-wrapper">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <div class="page-header-content">
                        <h2>{{$entity->name}}</h2>
                        <nav class="page-breadcrumb">
                            <ul class="d-flex justify-content-center">
                                <li><a href="{{url('/')}}">Home</a></li>
                                <li><a href="{{route('products.userIndex')}}">Products</a></li>
                                <li><a href="{{route('products.showUser', $entity->slug)}}" class="active">{{$entity->name}}</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Page Header Wrapper -->

    <!--== Start Single Product Page Wrapper ==-->
    <div id="single-product-page" class="pt-90 pt-md-60 pt-sm-50 pb-92 pb-md-58 pb-sm-50">
        <div class="container-fluid">
            <div class="row">
                <!-- Start Single Product Thumbnail -->
                <div class="col-xl-7 col-lg-6">
                    <div class="single-product-thumb-wrap p-0 pb-sm-30 pb-md-30">
                        <!-- Product Thumbnail Large View -->
                        <div class="product-thumb-large-view">
                            <div class="product-thumb-carousel">
                                <figure class="product-thumb-item">
                                    <img src="{{asset($entity->displayimage)}}" alt="Single Product"/>
                                </figure>
                                <figure class="product-thumb-item">
                                    <img src="{{asset($entity->altdisplayimage)}}" alt="Single Product"/>
                                </figure>
                            </div>

                            <!-- Product Thumb Button  -->
                            <div class="product-thumb-btns">
                                <button class="btn-zoom-popup"><i class="dl-icon-zoom-in"></i></button>
{{--                                <a href="https://player.vimeo.com/video/225547551?autoplay=1&title=0&byline=0&portrait=0"--}}
{{--                                   class="btn-video-popup"><i class="dl-icon-format-video"></i></a>--}}
                            </div>
                        </div>

                        <!-- Product Thumbnail Nav -->
                        <div class="product-thumbnail-nav">
                            <figure class="product-thumb-item">
                                <img src="{{asset($entity->displayimage)}}" alt="Single Product"/>
                            </figure>
                            <figure class="product-thumb-item">
                                <img src="{{asset($entity->altdisplayimage)}}" alt="Single Product"/>
                            </figure>
                        </div>
                    </div>
                </div>
                <!-- End Single Product Thumbnail -->

                <!-- Start Single Product Content -->
                <div class="col-xl-5 col-lg-6">
                    <div class="single-product-content-wrapper">
                        <div class="single-product-details">
                            <h2 class="product-name">{{$entity->name}}</h2>
                            <div class="prices-stock-status d-flex align-items-center justify-content-between">
                                <div class="prices-group">
                                    @if($entity->hasDiscount())
                                        <del class="oldPrice">{{$entity->displayprice}}</del>
                                        <span class="price">{{$entity->discountedPrice()}}</span>
                                    @else
                                        <span class="price">{{$entity->displayprice}}</span>
                                    @endif
                                        <br><small style="font-size:14px" class="price">{{$entity->kg}} Kilogram</small>


                                </div>
                                <span class="stock-status"><i class="dl-icon-check-circle1"></i> {{$entity->inStock() ? 'In Stock' : 'Ouf of Stock' }}</span>
                            </div>
                            <p class="product-desc">
                                {{$entity->description}}
                            </p>

                            @if($entity->inStock())
                                <div class="quantity-btn-group d-flex">
                                    <div class="pro-qty">
                                        <input type="text" id="quantity" value="1"/>
                                    </div>
                                    <div class="list-btn-group">
                                        <a href="javascript:void(0)" class="btn btn-black btn-addToCart productShow" id="cart" data-product_id="{{$entity->id}}">Add to Cart</a>
                                    </div>
                                </div>
                                <div class="list-btn-group">
                                    <a href="{{route('userCart')}}" style="padding: 25px 80px;" class="btn btn-warning">Checkout</a>
                                </div>
                            @endif
                        </div>
                        <div class="single-product-footer d-block d-sm-flex justify-content-between">
                            <div class="prod-footer-left mb-xs-26">
                                <ul class="prod-footer-list">
                                    <li class="list-name">Categories:</li>
                                    <li>{{$entity->category->name}}</li>
                                </ul>
                            </div>

                            <div class="prod-footer-right">
                                @php
                                    $link= route('products.showUser', $entity->slug)
                                @endphp

                                <dl class="social-share">
                                    <dt>Share with</dt>
                                    <dd><a target="_blank"
                                           href="https://facebook.com/sharer/sharer.php?u={{$link}}"><i class="fa fa-facebook"></i></a></dd>
                                    <dd><a target="_blank"
                                           href="https://twitter.com/home?status={{$link}}"><i class="fa fa-twitter"></i></a></dd>
                                    <dd><a target="_blank"
                                           href="https://pinterest.com/pin/create/button/?url={{$link}}&media=&description="><i class="fa fa-pinterest-p"></i></a></dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Single Product Content -->
            </div>
        </div>
    </div>
    <!--== End Single Product Page Wrapper ==-->

    <!--== Start Related Products Area ==-->
    <section id="related-products-wrapper" class="pb-48 pb-md-18 pb-sm-8">
        <div class="container-fluid">
            <div class="row">
                <!-- Start Section title -->
                <div class="col-lg-8 m-auto text-center">
                    <div class="section-title-wrap">
                        <h2>Related Products</h2>
                    </div>
                </div>
                <!-- End Section title -->
            </div>

            <div class="row products-on-column">
                @forelse($entity->getRelatedProducts() as $entity)
                    <!-- Start Single Product -->
                        <div class="col-lg-3 col-sm-6">
                            <div class="single-product-wrap">
                                <!-- Product Thumbnail -->
                                <figure class="product-thumbnail">
                                    <a href="{{route('products.showUser', $entity->slug)}}" class="d-block">
                                        <img class="primary-thumb" src="{{asset($entity->displayimage)}}"
                                             alt="{{$entity->name}}"/>
                                        <img class="secondary-thumb" src="{{asset($entity->altdisplayimage)}}"
                                             alt="{{$entity->name}}"/>
                                    </a>
                                    <figcaption class="product-hvr-content">
                                        <a href="#" class="btn btn-black btn-addToCart productHome" data-product_id="{{$entity->id}}">Add to Cart</a>

                                        @if($entity->hasDiscount())
                                            <span class="product-badge sale">{{$entity->discountPercentage()}}</span>
                                        @elseif($entity->isHot())
                                            <span class="product-badge hot">Hot</span>
                                        @elseif($entity->isNew())
                                            <span class="product-badge">New</span>
                                        @endif


                                    </figcaption>
                                </figure>

                                <!-- Product Details -->
                                <div class="product-details">
                                    <h2 class="product-name">
                                        <a href="{{route('products.showUser', $entity->slug)}}">{{$entity->name}}</a>
                                    </h2>
                                    <div class="product-prices">
                                        @if($entity->hasDiscount())
                                            <del class="oldPrice">{{$entity->displayprice}}</del>
                                            <span class="price">{{$entity->discountedPrice()}}</span>
                                        @else
                                            <span class="price">{{$entity->displayprice}}</span>
                                        @endif
                                            <br><small style="font-size:14px" class="price">{{$entity->kg}} Kilogram</small>
                                    </div>
                                    <div class="list-view-content">
                                        <p class="product-desc">{{$entity->description}}</p>

                                        <div class="list-btn-group mt-30 mt-sm-14">
                                            <a href="javascript:void(0)" class="btn btn-black btn-addToCart productHome" data-product_id="{{$entity->id}}">Add to Cart</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Single Product -->
                @empty
                @endforelse
            </div>
        </div>
    </section>
    <!--== End Related Products Area ==-->

    @include('includes.productfooter')

@endsection