@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">
                        <form action="{{ route('user.add_to_cart_from_detail') }}" class="MyForm" method="post">
                            @csrf
                            <input type="hidden" name="productid" value="{{ $product->id }}">
                            <div class="ht__product__dtl">
                                <h2>{{ $product->name }}</h2>
                                <br>
                                <ul class="pro__prize">
                                    @if(!empty($product->cut_price))
                                        <li class="old__prize">
                                            <del>{{ $setting->currency_symbol }}{{ $product->cut_price }}</del>
                                        </li>
                                    @endif
                                    <li>{{ $setting->currency_symbol }}{{ $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="quantity" 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">
                                        @if(isset($product->colors) && !empty($product->colors))
                                            <div class="sin__desc align--left" style="margin-top: 4px !important;">
                                                <ul class="pro__color">
                                                    @forelse($product->colors as $c=>$color)
                                                        <li class="green">
                                                            <input type="radio" id="i{{ $c }}" name="color"
                                                                   value="{{ $color->id }}">
                                                            <label for="i{{ $c }}"
                                                                   style="background-color: {{ $color->color }} !important;width: 15px !important;height: 15px !important;color: {{ $color->color }} !important;"></label>
                                                        </li>
                                                    @empty
                                                    @endforelse
                                                </ul>
                                            </div>
                                        @endif
                                    </div>
                                    @if($product->stock=="in stock")
                                        <div class="col-md-12 col-12">
                                            <button class="btn btn-dark MyHover My30Radius w-100 MyButton">Add to cart
                                            </button>
                                        </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>
                        </form>
                    </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 onclick="ShowLoader()"
                                                   href="{{ route('user.add_to_cart_single',[$relatedproduct->id]) }}"><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>{{ $setting->currency_symbol }}{{ $relatedproduct->cut_price }}</del>
                                            </li>
                                        @endif
                                        <li>{{ $setting->currency_symbol }}{{ $relatedproduct->price }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @empty
                        <center>
                            <h2>No products available</h2>
                        </center>
                    @endforelse
                </div>
            </div>
        </div>
    </section>
    <!-- End Product Area -->

@endsection