@extends('template.main-template')

@section('content')
    <div class="custom-hero"></div>
    <!-- Popular Products -->
    <section class="padding-top-100 padding-bottom-100">
        <div class="container">

            <!-- SHOP DETAIL -->
            <div class="shop-detail">
                <div class="row">

                    <!-- Popular Images Slider -->
                    <div class="col-md-7">

                        <!-- Images Slider -->
                        <div class="images-slider">
                            <ul class="slides">
                                @foreach ($product->images as $image)
                                    <li data-thumb="{{ asset('storage/' . $image->file) }}"> <img class="img-responsive"
                                            src="{{ asset('storage/' . $image->file) }}" alt=""> </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    <!-- COntent -->
                    <div class="col-md-5">
                        <h4>{{ $product->product_title }}</h4>
                        {{-- <span class="price"><small>$</small>299</span> --}}

                        <!-- Sale Tags -->
                        {{-- <div class="on-sale"> </div> --}}
                        <ul class="item-owner">
                            <li>Category :<span> {{ $product->category->category_title }}</span></li>
                            <li>slug:<span> {{ $product->product_slug }}</span></li>
                        </ul>

                        <!-- Item Detail -->
                        <p>{{ $product->long_description }}</p>

                        <!-- Short By -->
                        <div class="some-info">
                            <ul class="row margin-top-30">
                                <li class="col-xs-4">
                                    <div class="quinty">
                                        <!-- QTY -->
                                        <select class="selectpicker" disabled>
                                            <option>1</option>
                                        </select>
                                    </div>
                                </li>

                                {{-- @foreach ($product->variations as $variation)

                                    <div class="row" style="margin-left: 15px;">
                                        @if (view()->exists('template.components.variations.' . Str::slug($variation->variation_title)))
                                            @component('template.components.variations.' . Str::slug($variation->variation_title), ['options' => $variation->options, 'variation' => $variation])

                                            @endcomponent
                                        @else
                                        @component('template.components.variations.variation', ['options' => $variation->options, 'variation' => $variation])

                                        @endcomponent
                                        @endif
                                    </div>

                                @endforeach --}}
                                <input type="hidden" name="idp" value="{{ $product->id }}">
                                @csrf
                                <!-- ORDER SAMPLE -->
                                <li class="col-xs-12">
                                    <button {{ ($product->allow_order === 0) ? 'disabled':'' }} onclick="cart.addToCart({{ $product->id }})" class="btn">Order
                                        Sample
                                    </button>
                                </li>

                                <!-- LIKE -->
                                <li class="col-xs-12">
                                    <a href="{{ route('pages.all', 'visualizer') }}" class="view-in-your-home">View in Your
                                        Room</a>
                                </li>
                            </ul>

                            <!-- INFOMATION -->
                            {{-- <div class="inner-info">
                                <h6>DELIVERY INFORMATION</h6>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus ligula a
                                    scelerisque gravida. Nullam laoreet tortor ac maximus alique met, consectetur adipiscing
                                    elit. </p>
                                <h6>SHIPPING & RETURNS</h6>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus ligula a
                                    scelerisque gravida. Nullam laoreet tortor ac maximus alique met, consectetur adipiscing
                                    elit. </p>

                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>

            <!--======= PRODUCT DESCRIPTION =========-->
            <div class="item-decribe">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs animate fadeInUp" data-wow-delay="0.4s" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#descr" role="tab" data-toggle="tab">SPECIFICATIONS
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#review" role="tab" data-toggle="tab">
                            REVIEWS ({{ count($product->ratings) }})

                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#tags" role="tab" data-toggle="tab">
                            RESOURCES
                        </a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content animate fadeInUp" data-wow-delay="0.4s">
                    <!-- DESCRIPTION -->
                    <div role="tabpanel" class="tab-pane fade in active" id="descr">

                        @component('template.components.products.product_specs', ['specs' => $product->specifications])
                        @endcomponent

                    </div>

                    <!-- REVIEW -->
                    <div role="tabpanel" class="tab-pane fade" id="review">
                        <h6>{{ count($product->ratings) }} REVIEW{{ count($product->ratings) === 1 ? '' : 'S' }} FOR
                            {{ $product->product_title }}</h6>

                        @foreach ($product->ratings as $rating)
                            <!-- REVIEW PEOPLE 1 -->
                            <div class="media">
                                <div class="media-left">
                                    <!--  Image -->
                                    <div class="avatar"> <a href="#"> <img class="media-object"
                                                src="images/avatar-1.jpg" alt=""> </a> </div>
                                </div>
                                <!--  Details -->
                                <div class="media-body">
                                    <p><b>{{ $rating->title }}</b></p>
                                    <p class="font-playfair">“{{ $rating->description }}”</p>
                                    <h6>{{ $rating->customer->customer_name }} <span
                                            class="pull-right">{{ \Carbon\Carbon::parse($rating->created_at)->diffForHumans() }}</span>
                                    </h6>
                                </div>
                            </div>
                        @endforeach

                    </div>

                    <!-- TAGS -->
                    <div role="tabpanel" class="tab-pane fade" id="tags">
                        @component('template.components.products.product_resources', ['resources' => $product->resources])
                        @endcomponent
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('javascript')
    <script src="{{ asset('shop/js/cart.js') }}"></script>
    <script>
        cart.init()
    </script>
@endpush