@extends('admin.layout.layout')
@section('content')
<main class="main">
    <div class="section-box">
        <div class="breadcrumbs-div">
            <div class="container">
                <ul class="breadcrumb">
                    <li><a class="font-xs color-gray-1000" href="/admin/dashboard">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">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="display: flex;justify-content: center;align-items: center;width: 443px;margin-right: 10px;"><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;"><img src="{{ $single->image }}" alt="product image"></div>
                @endforeach
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Navigation -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></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">
                            <div class="detail-gallery">
                                {{-- <label class="label">-17%</label> --}}
                                <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="mb-mobile"><span class="font-md bytext color-gray-500 font-md">by</span><a class="font-lg byAUthor color-gray-900 font-lg" href="#"> {{ $product->vendor->first_name.' '.$product->vendor->last_name}}</a>
                        </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 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="Ecom" title="Pink"></li>
                            @foreach ($product->uploads as $single)
                            <li><img src="{{ $single->image }}" alt="Ecom" 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 style="display: none"><a href="#tab-reviews" data-bs-toggle="tab" role="tab" aria-controls="tab-reviews" aria-selected="true">Reviews (2)</a></li>
                    <li><a href="#tab-vendor" data-bs-toggle="tab" role="tab" aria-controls="tab-vendor" aria-selected="true">Vendor</a></li>
                </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-vendor" role="tabpanel" aria-labelledby="tab-vendor">
                        <div class="vendor-logo d-flex mb-30">
                            <div class="vendor-name ml-15">
                                <h6><a href="#">{{ $product->vendor->first_name.' '.$product->vendor->last_name}}</a></h6>

                            </div>
                        </div>
                        <ul class="contact-infor mb-50">
                            <li><img src="{{ asset('admin/assets/imgs/page/product/icon-location.svg') }}" alt=""><strong>Address:</strong><span> {{ $product->office_address}}/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>
                        </ul>
                    </div>

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