@extends('v1.enduser.layouts.default')

@section('content')
    <div class="productDetailCon">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="pinfoNav">
                        <a href="{{ route('product.list', ['lang' => app('request')->lang, 'categorySlug' => $info['category']['slug']]) }}" class="pinfoCC">{{ $info['category']['name'] }}&nbsp;&nbsp;&nbsp;></a>
                        <span class="pinfoCItem">{{ $info['name'] }}</span>
                    </div>
                </div>
                <div class="col-lg-5 col-md-6 col-sm-12">
                    <div class="productGalleCon">
                        <div class="productGalle">
                            @foreach($info['galleries'] as $gallery)
                                <figure>
                                    <img src="{{ $gallery['image'] }}"/>
                                </figure>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="col-lg-7 col-md-6  col-sm-12">
                    <div class="productInfoCon">
                        <h2 class="pinfoTitle">{{ $info['name'] }}</h2>
                        <h3 class="pinfoSubTitle"></h3>
                        <table class="pinfoSpecs">
                            <tr>
                                <th>Category</th>
                                <td><a href="{{ route('product.list', ['lang' => app('request')->lang, 'categorySlug' => $info['category']['slug']]) }}">{{ $info['category']['name'] }}</a></td>
                            </tr>
                            @foreach($info['specifications'] as $spec)
                                <tr>
                                    <th>{{ $spec['title'] }}</th>
                                    <td>{!! $spec['content'] !!}</td>
                                </tr>
                            @endforeach
                        </table>
                    </div>
                </div>
                @if(count($products)>0)
                    <div class="col-sm-12">
                        <div class="productSuggestion">
                            <h4 class="psugHeading">
                                Other {{ $info['category']['name'] }}
                            </h4>
                            <div class="productSuggestionSlider">
                                @foreach($products as $product)
                                    @include('v1.enduser.product.productListItem')
                                @endforeach
                            </div>
                            <div class="text-center">
                                <a href="{{ route('product.list', ['lang' => app('request')->lang, 'categorySlug' => $info['category']['slug']]) }}" class="btnRadiusOutlineInvert seeAllSuggestion">See All</a>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('footerScript')
    <script>
        $(document).ready(function() {
            $('.productGalle').slick({
                arrows: false,
                dots: true
            });
            $('.productSuggestionSlider').slick({
                slidesToShow: 6,
                arrows: false,
                dots: false,
                responsive: [
                    {
                        breakpoint: 991,
                        settings: {
                            slidesToShow: 5,
                            slidesToScroll: 5,
                            dots: true
                        }
                    },
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3,
                            dots: true
                        }
                    },
                    {
                        breakpoint: 576,
                        settings:{
                            slidesToShow: 2,
                            slidesToScroll: 2,
                            dots: true
                        }
                    },
                ]
            });
        });
    </script>
@endPush