@extends('layout.app')

@section('page-title', 'Teak Furniture Collections')

@section('breadcrumb')
    <div class="tf-breadcrumb">
        <div class="container">
            <div class="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
                <div class="tf-breadcrumb-list">
                    <a href="{{ url('new-design/home.php') }}" class="text">Home</a>
                    <i class="icon icon-arrow-right"></i>
                    <span class="text">Collections</span>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div id="listLayout" class="wt-pages collections">
        @foreach($collections as $key => $collection)
            <!-- Shop Collection -->
            <section class="loadItem flat-spacing-wt pb_0 pt_0">
                <div class="container">
                    <div class="tf-grid-layout @if($key % 2 === 0) md-col-1-2 @else md-col-2-1 @endif tf-img-with-text style-1">
                        @if($key % 2 === 0)
                            <div class="wow fadeInUp wt-mobile" data-wow-delay="0s">
                                <img class="lazyload"
                                     data-src="{{ url('new-design/images/category-wow/' . $collection->img_src) }}"
                                     src="{{ url('new-design/images/category-wow/' . $collection->img_src) }}"
                                     alt="Collection {{ $collection->name }}"
                                >
                            </div>
                            <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                                <div class="heading">{{ $collection->name }}</div>
                                <span class="sub-heading">{{ $collection->short_description }}</span>
                                <p class="description">{{ $collection->description }}</p>
                                <a href="{{ url($collection->url) }}" class="link">
                                    <button id="lear-more-sustainability-btn" class="action-btn tf-btn-loading tf-loading-default tf-loading animate-hover-btn">
                                        <span class="text text-uppercase">See Collection</span>
                                    </button>
                                </a>
                            </div>
                            <div class="wow fadeInUp wt-desktop" data-wow-delay="0s">
                                <img class="lazyload"
                                     data-src="{{ url('new-design/images/category-wow/' . $collection->img_src) }}"
                                     src="{{ url('new-design/images/category-wow/' . $collection->img_src) }}"
                                     alt="Collection {{ $collection->name }}"
                                >
                            </div>
                        @else
                            <div class="wow fadeInUp" data-wow-delay="0s">
                                <img class="lazyload"
                                     data-src="{{ url('new-design/images/category-wow/' . $collection->img_src) }}"
                                     src="{{ url('new-design/images/category-wow/' . $collection->img_src) }}"
                                     alt="Collection {{ $collection->name }}"
                                >
                            </div>
                            <div class="tf-content-wrap wow fadeInUp" data-wow-delay="0s">
                                <div class="heading">{{ $collection->name }}</div>
                                <span class="sub-heading">{{ $collection->short_description }}</span>
                                <p class="description">{{ $collection->description }}</p>
                                <a href="{{ url($collection->url) }}" class="link">
                                    <button id="lear-more-sustainability-btn" class="action-btn tf-btn-loading tf-loading-default tf-loading animate-hover-btn">
                                        <span class="text text-uppercase">See Collection</span>
                                    </button>
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </section>
            <!-- /Shop Collection -->
        @endforeach
        <!-- Load Item -->
        <div class="text-center pt-3 pb-5">
            <button id="loadMoreListBtn" class="tf-btn-loading tf-loading-default tf-loading animate-hover-btn">
                <span class="text text-uppercase">See more</span>
            </button>
        </div>
    </div>
@endsection

@push('after-foot-js')
    <script type="text/javascript" src="{{ asset('new-design/js/nouislider.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('new-design/js/shop.js') }}"></script>
@endpush