@extends('website.includes.master')

@section('title')
    Product Detail
@endsection

@section('content')

    <!-- Start Product Details Area -->
    <section class="htc__product__details bg__white pb-0 pt-0 mt-0">
        <!-- Start Product Details Top -->
        <div class="htc__product__details__top">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-lg-5 col-sm-12 col-xs-12">
                        <div class="htc__product__details__tab__content">
                            <!-- Start Product Big Images -->
                            <div class="product__big__images">
                                <div class="portfolio-full-image tab-content">
                                    <div role="tabpanel" class="tab-pane fade show active" id="img-tab-1">
                                        <img src="{{ URL::asset('admin/assets/uploads/'.$product->image) }}"
                                             style="width:100%;max-height:600px"
                                             alt="full-image">
                                    </div>
                                    @forelse($product->images as $p=>$image)
                                        <div role="tabpanel" class="tab-pane fade" id="img-tab-{{ $p }}">
                                            <img src="{{ URL::asset('admin/assets/uploads/'.$image->image) }}"
                                                 style="width:100%;max-height:600px"
                                                 alt="full-image">
                                        </div>
                                    @empty
                                    @endforelse
                                </div>
                            </div>
                            <!-- End Product Big Images -->
                            <!-- Start Small images -->
                            <ul class="product__small__images nav navs-tab flex-nowrap" role="tablist">
                                <li role="presentation" class="pot-small-img">
                                    <a class="active" href="#img-tab-1" role="tab" data-bs-toggle="tab">
                                        <img src="{{ URL::asset('admin/assets/uploads/'.$product->image) }}"
                                             alt="small-image">
                                    </a>
                                </li>
                                @forelse($product->images as $p1=>$image1)
                                    <li role="presentation" class="pot-small-img">
                                        <a href="#img-tab-{{ $p1 }}" role="tab" data-bs-toggle="tab">
                                            <img src="{{ URL::asset('admin/assets/uploads/'.$image1->image) }}"
                                                 alt="small-image">
                                        </a>
                                    </li>
                                @empty
                                @endforelse
                            </ul>
                            <!-- End Small images -->
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-7 col-sm-12 col-xs-12 smt-40 xmt-40">
                        <div class="ht__product__dtl">
                            <h2>{{ $product->name }}</h2>
                            <br>
                            <ul class="pro__prize">
                                @if(!empty($product->cut_price))
                                    <li class="old__prize">
                                        <del>${{ $product->cut_price }}</del>
                                    </li>
                                @endif
                                <li>${{ $product->price }}</li>
                            </ul>
                            <div class="ht__pro__desc">
                                <div class="sin__desc">
                                    <p><span>Availability:</span> {{ $product->stock }}</p>
                                </div>
                                @if(!empty($product->tags))
                                    <div class="sin__desc align--left mb-3">
                                        <p><span>Tags:</span></p>
                                        <ul class="pro__cat__list">
                                            <li><a>{{ $product->tags }}</a></li>
                                        </ul>
                                    </div>
                                @endif
                            </div>
                            <div class="row my-3">
                                <div class="col-md-2 col-6 mb-3">
                                    <select name="" class="form-control">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                    </select>
                                </div>
                                <div class="col-md-10 col-6">
                                    <div class="sin__desc align--left" style="margin-top: 4px !important;">
                                        <ul class="pro__color">
                                            <li class="red"><a href="#">red</a></li>
                                            <li class="green"><a href="#">green</a></li>
                                            <li class="balck"><a href="#">balck</a></li>
                                        </ul>
                                    </div>
                                </div>
                                @if($product->stock=="in stock")
                                    <div class="col-md-12 col-12">
                                        <a href="" class="btn btn-dark MyHover My30Radius w-100">Add to cart</a>
                                    </div>
                                @else
                                    <div class="col-md-12 col-12">
                                        <button type="button" class="btn btn-dark MyHover My30Radius w-100"
                                                style="cursor:not-allowed">{{ $product->stock }}</button>
                                    </div>
                                @endif
                            </div>

                            <div class="row">

                                <div class="col-md-12 mt-4">
                                    <h2>
                                        Product Details
                                    </h2>
                                </div>

                                <div class="col-md-12">
                                    <p class="pro__info">{{ $product->shortdetail }}</p>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Product Details Top -->
    </section>
    <!-- End Product Details Area -->
    <!-- Start Product Description -->
    <section class="htc__produc__decription bg__white">
        <div class="container">

            <div class="row">
                <hr>
                <div class="col-xs-12">
                    <div class="ht__pro__details__content">
                        <!-- Start Single Content -->
                        <div role="tabpanel" class="pro__single__content">
                            <div class="pro__tab__content__inner">
                                {{--                                <h4 class="ht__pro__title">Description</h4>--}}
                                {!! $product->description !!}
                            </div>
                        </div>
                        <!-- End Single Content -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Product Description -->
    <!-- Start Product Area -->
    <section class="htc__product__area--2 pb--100 product-details-res">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="section__title--2 text-center">
                        <h2 class="title__line">Related Products</h2>
                        <p>But I must explain to you how all this mistaken idea</p>
                    </div>
                </div>
            </div>
            <div class="product__wrap clearfix">
                <div class="row">
                    @forelse($relatedproducts as $relatedproduct)
                        <div class="col-md-3 col-6">
                            <div class="category">
                                <div class="ht__cat__thumb">
                                    @if(!empty($relatedproduct->discount))
                                        <div class="sale-tag MyHover">{{ $relatedproduct->discount }}%</div>
                                    @endif
                                    <a href="{{ route('product_detail',[$relatedproduct->slug]) }}">
                                        <img src="{{ URL::asset('admin/assets/uploads/'.$relatedproduct->image) }}"
                                             style="width:100%;height:auto;max-height:380px"
                                             alt="product images">
                                    </a>
                                </div>
                                <div class="fr__hover__info">
                                    <ul class="product__action">
                                        @if($relatedproduct->stock=="in stock")
                                            <li><a href="{{ route('cart') }}"><i class="icon-handbag icons"></i></a>
                                            </li>
                                        @endif
                                    </ul>
                                </div>
                                <div class="fr__product__inner">
                                    <h4><a href="">{{ $relatedproduct->name }}</a></h4>
                                    <ul class="fr__pro__prize">
                                        @if(!empty($relatedproduct->cut_price))
                                            <li class="old__prize">
                                                <del>${{ $relatedproduct->cut_price }}</del>
                                            </li>
                                        @endif
                                        <li>${{ $relatedproduct->price }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @empty
                        <center>
                            <h2>No products available</h2>
                        </center>
                    @endforelse
                </div>
            </div>
        </div>
    </section>
    <!-- End Product Area -->

@endsection