@extends('front.master')

@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
@endsection
@section('body')
<main class="main">
    <div class="section-box">
        <div class="breadcrumbs-div">
            <div class="container">
                <ul class="breadcrumb">
                    <li><a class="font-xs color-gray-500" href="/">Home</a></li>
                    <li><a class="font-xs color-gray-500" href="#">{{ $product->title }}</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Mobile product images slider -->
    <section id="hydedesktop">
        <div class="swiper-container">
            @php
                 $slideCount = $product->uploads->count() + 1; //Including the main product image
            @endphp
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="display: flex;justify-content: center;align-items: center;width: 443px;margin-right: 10px;">
                    @if ($slideCount<2)
                    <label class="label image-count-label">{{$slideCount}} photo</label>
                    @else <label class="label image-count-label">{{$slideCount}} photos</label>
                    @endif
                    <img src="{{$product->product_image }}" alt="product image">
                </div>
                @foreach ($product->uploads as $single)
                    <div class="swiper-slide" style="display: flex;justify-content: center;align-items: center;width: 443px;margin-right: 10px;">
                        @if ($slideCount<2)
                        <label class="label image-count-label">{{$slideCount}} photo</label>
                        @else <label class="label image-count-label">{{$slideCount}} photos</label>
                        @endif
                        <img src="{{ $single->image }}" alt="product image">
                    </div>
                @endforeach
            </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination" style="text-align: center;"></div>
        <!-- Add Navigation -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        </div>
    </section>
    <section class="section-box shop-template">
        <div class="container">
            <div class="row">
                <div class="col-lg-6" id="hydemobile">
                    <div class="gallery-image">
                        <div class="galleries">
                            @php
                            $slideCount = $product->uploads->count() + 1;
                            @endphp
                            <div class="detail-gallery">
                                @if ($slideCount<2)
                                <label class="label">{{$slideCount}} photo</label>
                                @else
                                <label class="label">{{$slideCount}} photos</label>
                                @endif

                                <div class="product-image-slider">
                                    <figure class="border-radius-10"><img src="{{ $product->product_image }}" alt="product image"></figure>
                                    @foreach ($product->uploads as $single)
                                    <figure class="border-radius-10"><img src="{{ $single->image }}" alt="product image"></figure>
                                    @endforeach
                                </div>
                            </div>
                            <div class="slider-nav-thumbnails">
                                <div>
                                    <div class="item-thumb"><img src="{{ $product->product_image }}" alt="product image">
                                    </div>
                                </div>
                                @foreach ($product->uploads as $single)
                                <div>
                                    <div class="item-thumb"><img src="{{ $single->image }}" alt="product image">
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h3 class="color-brand-3 mb-25">{{ $product->title }}</h3>
                    <div class="row align-items-center">
                        <div class="col-lg-8 col-md-8 col-sm-3 mb-mobile"><span class="font-medium bytext color-gray-500 font-md">by</span><a class="font-lg byAUthor font-lg" href="#" style="color: #f08237;"> {{ $product->vendor->first_name.' '.$product->vendor->last_name}}</a>
                            {{-- <div class="mt-5 rating"><img src="{{ asset('admin/assets/imgs/template/icons/star.svg') }}" alt="Ecom"><img src="{{ asset('admin/assets/imgs/template/icons/star.svg') }}" alt="Ecom"><img src="{{ asset('admin/assets/imgs/template/icons/star.svg') }}" alt="Ecom"><img src="{{ asset('admin/assets/imgs/template/icons/star.svg') }}" alt="Ecom"><img src="{{ asset('admin/assets/imgs/template/icons/star.svg') }}" alt="Ecom"><span class="font-medium font-xs color-gray-500"> (65 reviews)</span></div> --}}
                        </div>

                    </div>
                    <div class="pt-10 mb-20 border-bottom"></div>
                    <div class="box-product-price">
                        <h3 class="mr-10 color-brand-3 price-main d-inline-block">₦{{ number_format($product->price, 2) }}</h3><span class="color-gray-500 price-line font-xl line-througt"></span>
                    </div>
                    <div class="mt-20 product-description color-gray-900">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-12">
                              <ul class="list-dot">
                                <li style="color:#23262c">Check feedbacks to make sure the person is reliable</li>
                                <li style="color:#23262c">For products, ensure that what's in the package is exactly what you expect</li>
                                <li style="color:#23262c">Avoid sending any prepayments</li>
                              </ul>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                              <ul class="list-dot">
                                <li style="color:#23262c">Meet in person at a safe public place</li>
                                <li style="color:#23262c">Agree on the product/service before committing yourself</li>
                                <li style="color:#23262c">Check all the docs and only pay if you're satisfied</li>
                              </ul>
                            </div>
                          </div>
                    </div>
                    <div class="mt-20 state-area">
                        <img src="{{ asset('admin/assets/imgs/page/product/icon-location.svg') }}" alt="" style="vertical-align: middle; margin-bottom: -1px;">
                        {{ $product->area.', '.$product->state }}
                    </div>
                    <div class="mt-20 box-product-color">
                        {{-- <p class="font-sm color-gray-900">Color:<span class="color-brand-2 nameColor">Pink Gold</span></p> --}}
                        <ul class="list-colors">
                            <li><img src="{{ $product->product_image }}" alt="Vintage" title="Pink"></li>
                            @foreach ($product->uploads as $single)
                            <li><img src="{{ $single->image }}" alt="Vintage" title=""></li>
                            @endforeach
                        </ul>
                    </div>



                </div>
            </div>

        </div>
    </section>
    <section class="section-box shop-template">
        <div class="container">
            <div class="mb-10 pt-30">
                <ul class="nav nav-tabs nav-tabs-product" role="tablist">
                    <li><a class="active" href="#tab-description" data-bs-toggle="tab" role="tab" aria-controls="tab-description" aria-selected="true">Description</a></li>
                    <li><a href="#tab-specification" data-bs-toggle="tab" role="tab" aria-controls="tab-specification" aria-selected="true">Specification</a></li>
                    <li><a href="#tab-additional" data-bs-toggle="tab" role="tab" aria-controls="tab-additional" aria-selected="true">Additional information</a></li>
                    <li ><a href="#tab-reviews" data-bs-toggle="tab" role="tab" aria-controls="tab-reviews" aria-selected="true">Reviews ({{ $product->reviews->count() }})</a></li>
                    @if (Auth::guard('admin')->check())
                    <li><a href="#tab-vendor" data-bs-toggle="tab" role="tab" aria-controls="tab-vendor" aria-selected="true">Vendor</a></li>
                    @else
                    <li>
                        {{-- <a class="btn w-auto mb-10" href="/">Login</a> --}}
                        <a class="btn w-auto mb-10" href="{{ route('admin-login-page') }}">Login To Access Vendor</a>
                    </li>
                    @endif
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade active show" id="tab-description" role="tabpanel" aria-labelledby="tab-description">
                        <div class="display-text-short">
                            {{ $product->description }}
                        </div>
                        <div class="mt-20 text-center"><a class="btn btn-border font-sm-bold pl-80 pr-80 btn-expand-more">More
                                Details</a></div>
                    </div>
                    <div class="tab-pane fade" id="tab-specification" role="tabpanel" aria-labelledby="tab-specification">
                        <h5 class="mb-25">Specification</h5>
                        <div class="table-responsive">
                            <table class="table table-striped">
                                @foreach ($product->basic as $bInfo)
                                <tr>
                                    <td>{{ $bInfo->label }}</td>
                                    <td>{{ $product->{$bInfo->name} }}</td>
                                </tr>
                                @endforeach

                            </table>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab-additional" role="tabpanel" aria-labelledby="tab-additional">
                        <h5 class="mb-25">Additional information</h5>
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <tbody>
                                    @foreach ($product->more as $mInfo)
                                    <tr>
                                        <td>{{ $mInfo->label }}</td>
                                        <td>
                                            <p>{{ $product->{$mInfo->name} }}</p>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div  class="tab-pane fade" id="tab-reviews" role="tabpanel" aria-labelledby="tab-reviews">
                        <div class="comments-area">
                            <div class="row">
                                <div class="col-lg-8">
                                    <h4 class="mb-30 title-question">Customer Reviews </h4>
                                    <div class="comment-list">
                                        @foreach ($product->reviews as $review)
                                            <div class="single-comment justify-content-between d-flex mb-30 hover-up @if($review->id % 2 != 0) ml-30 @endif">
                                                <div class="user justify-content-between d-flex">
                                                    <div class="text-center thumb">
                                                        <img src="{{ asset('avatar-png.png') }}" alt="Ecom" class="img-fluid">
                                                        <a class="font-heading d-block mt-2" href="#" style="color: #353333;">{{ $review->reviewer }}</a>
                                                    </div>
                                                    <div class="desc">
                                                        <div class="mb-10 d-flex justify-content-between">
                                                            <div class="d-flex align-items-center"><span class="font-xs color-gray-700">{{ \Carbon\Carbon::parse($review->created_at)->format('F j, Y \a\t g:i a') }}</span></div>
                                                        </div>
                                                        <p class="mb-10 font-sm color-gray-900" style="color: #585756">
                                                           {{$review->description}}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab-vendor" role="tabpanel" aria-labelledby="tab-vendor">

                        <ul class="contact-infor mb-50">
                            <li><img src="{{ asset('admin/assets/imgs/page/product/support.svg') }}" alt=""><strong>Seller:</strong><span> {{ $product->vendor->first_name.' '.$product->vendor->last_name}}</span></li>
                            <li><img src="{{ asset('admin/assets/imgs/page/product/icon-location.svg') }}" alt=""><strong>Address:</strong><span> {{ $product->office_address.', '.$product->area.', '.$product->state }}</span></li>
                            <li><img src="{{ asset('admin/assets/imgs/page/product/icon-contact.svg') }}" alt=""><strong>Contact Seller:</strong><span> {{ $product->vendor->mobile}}</span></li>
                            <div class="box-quantity">

                                <div class="button-buy"><a class="btn btn-cart" href="https://wa.me/{{ $product->vendor->mobile }}" target="_blanck"><i class="fab fa-whatsapp" aria-hidden="true" style="margin-right: 5px;"></i>Chat On Whatsapp</a>
                                    <a class="btn btn-buy" target="_blanck" href="tel:{{ $product->vendor->mobile }}"><i class="fa fa-phone" style="margin-right: 5px;"></i>Call Now</a></div>
                            </div>
                        </ul>
                        <p class="font-sm color-gray-500" style="visibility:hidden;">
                            Proin congue dapibus rhoncus. Curabitur ipsum orci, malesuada in porttitor a, porttitor quis diam. Nunc at arcu ut turpis facilisis volutpat. Proin tristique, mauris non gravida dignissim,
                            purus mauris malesuada tellus, in tincidunt orci enim eget ligula. Quisque bibendum, ipsum id malesuada placerat, purus felis vehicula risus, vel fringilla justo erat ullamcorper ligula. Fusce
                            congue ullamcorper ligula, at commodo turpis molestie vel.
                        </p>
                    </div>




                    <div class="pt-20 mb-40 border-bottom"></div>
                    @if($products->count() > 0)
                    <h4 class="color-brand-3">Similar products you might love</h4>
                    <div class="mt-20 list-products-5">
                        @foreach ($products as $product)
                        <div class="card-grid-style-3">
                            <div class="card-grid-inner">
                                <div class="tools" style="visibility: hidden;"><a class="mb-10 btn btn-wishlist btn-tooltip" href="#" aria-label="Add To Wishlist"></a></div>
                                <div class="image-box">
                                    <a href="{{ route('view-product', empty($product->slug) ? $product->id : $product->slug) }}"><img src="{{ $product->product_image }}" alt="Vintage"></a></div>
                                <div class="info-right" id="infoRight"><a class="font-md-bold color-brand-3" href="{{ route('view-product', empty($product->slug) ? $product->id : $product->slug) }}">{!! Str::limit($product->title ,18, ' ...') !!}</a><br>
                                    {{-- <a class="color-brand-3 font-sm-bold" href="{{ route('view-product', empty($product->slug) ? $product->id : $product->slug) }}">{!! Str::limit($product->description ,20, ' ...') !!}</a> --}}

                                    <div class="price-info"><strong class="font-sm-bold price-main" style="color:#f08237;">₦{{ number_format($product->price, 2) }}</strong><span class="color-gray-500 price-line"></span></div>

                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
</main>
@endsection