@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('resources.cat', ['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">{{ $info['description'] }}</h3>
                        <table class="pinfoSpecs">
                            <tr>
                                <th>Category</th>
                                <td><a
                                        href="{{ route('resources.cat', ['lang' => app('request')->lang, 'categorySlug' => $info['category']['slug']]) }}">{{ $info['category']['name'] }}</a>
                                </td>
                            </tr>
                        </table>
                        <a href="{{ $info['link'] }}" class="btnRadiusFill" download target="_blank">Download</a>
                    </div>
                </div>
            </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