@extends('layouts.layout5')
@php
    $title = 'Products Grid';
    $subtitle = 'Our Shop';
@endphp
@section('title', 'Products Grid || Transwide || Professional Transportation & Logistics Laravel Template')
@section('content')

    <section class="product-page section-space">
        <div class="container">
            <div class="row gutter-y-30 justify-content-center">
                <div class="col-lg-12">
                    <div class="product__info-top">
                        <div class="product__showing-text-box">
                            <p class="product__showing-text">Showing 1–9 of 12 Results</p>
                        </div>
                        <div class="product__showing-sort">
                            <select class="selectpicker" aria-label="Sort by popular">
                                <option selected>Short By Popular</option>
                                <option value="1">Sort by view</option>
                                <option value="2">Sort by price</option>
                                <option value="3">Sort by ratings</option>
                            </select>
                        </div>
                    </div>

                    <div class="row gutter-y-30">
                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="product__item wow fadeInUp" data-wow-duration='1500ms' data-wow-delay='000ms'>
                                <div class="product__item__image">
                                    <img src="{{ asset("/assets/images/products/product-1-1.png") }}" alt="Boss Chair">
                                    <div class="product__item__btn-group">
                                        <a href="{{ url("cart") }}"><i class="icon-heart"></i></a>
                                        <a href="{{ url("product-details") }}"><i class="icon-eye"></i></a>
                                        <a href="{{ url("checkout") }}"><i class="icon-loop"></i></a>
                                    </div><!-- /.product-btn-group -->
                                </div><!-- /.product-image -->
                                <div class="product__item__content">
                                    <h4 class="product__item__title"><a href="{{ url("product-details") }}">Boss Chair</a></h4><!-- /.product-title -->
                                    <p class="product__item__price">
                                        <span>$80.00</span>
                                        <span class="product__item__price__old">$82.00</span>
                                    </p><!-- /.product-price -->
                                    <div class="transwide-ratings">
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                    </div><!-- /.transwide-ratings -->
                                    <a href="{{ url("cart") }}" class="transwide-btn">
                                        <span class="transwide-btn__text transwide-btn__text--1">Add to Cart</span>
                                        <span class="transwide-btn__text transwide-btn__text--2">Add to Cart</span>
                                    </a><!-- /.transwide-btn -->
                                </div><!-- /.product-content -->
                            </div><!-- /.product-item -->
                        </div><!-- /.col-xl-3 col-lg-4 col-sm-6 -->
                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="product__item wow fadeInUp" data-wow-duration='1500ms' data-wow-delay='100ms'>
                                <div class="product__item__image">
                                    <img src="{{ asset("/assets/images/products/product-1-2.png") }}" alt="Smart Chair">
                                    <div class="product__item__btn-group">
                                        <a href="{{ url("cart") }}"><i class="icon-heart"></i></a>
                                        <a href="{{ url("product-details") }}"><i class="icon-eye"></i></a>
                                        <a href="{{ url("checkout") }}"><i class="icon-loop"></i></a>
                                    </div><!-- /.product-btn-group -->
                                </div><!-- /.product-image -->
                                <div class="product__item__content">
                                    <h4 class="product__item__title"><a href="{{ url("product-details") }}">Smart Chair</a></h4><!-- /.product-title -->
                                    <p class="product__item__price">
                                        <span>$75.00</span>
                                        <span class="product__item__price__old">$78.00</span>
                                    </p><!-- /.product-price -->
                                    <div class="transwide-ratings">
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                    </div><!-- /.transwide-ratings -->
                                    <a href="{{ url("cart") }}" class="transwide-btn">
                                        <span class="transwide-btn__text transwide-btn__text--1">Add to Cart</span>
                                        <span class="transwide-btn__text transwide-btn__text--2">Add to Cart</span>
                                    </a><!-- /.transwide-btn -->
                                </div><!-- /.product-content -->
                            </div><!-- /.product-item -->
                        </div><!-- /.col-xl-3 col-lg-4 col-sm-6 -->
                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="product__item wow fadeInUp" data-wow-duration='1500ms' data-wow-delay='200ms'>
                                <div class="product__item__image">
                                    <img src="{{ asset("/assets/images/products/product-1-3.png") }}" alt="Office Chair">
                                    <div class="product__item__btn-group">
                                        <a href="{{ url("cart") }}"><i class="icon-heart"></i></a>
                                        <a href="{{ url("product-details") }}"><i class="icon-eye"></i></a>
                                        <a href="{{ url("checkout") }}"><i class="icon-loop"></i></a>
                                    </div><!-- /.product-btn-group -->
                                </div><!-- /.product-image -->
                                <div class="product__item__content">
                                    <h4 class="product__item__title"><a href="{{ url("product-details") }}">Office Chair</a></h4><!-- /.product-title -->
                                    <p class="product__item__price">
                                        <span>$30.00</span>
                                        <span class="product__item__price__old">$33.00</span>
                                    </p><!-- /.product-price -->
                                    <div class="transwide-ratings">
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                    </div><!-- /.transwide-ratings -->
                                    <a href="{{ url("cart") }}" class="transwide-btn">
                                        <span class="transwide-btn__text transwide-btn__text--1">Add to Cart</span>
                                        <span class="transwide-btn__text transwide-btn__text--2">Add to Cart</span>
                                    </a><!-- /.transwide-btn -->
                                </div><!-- /.product-content -->
                            </div><!-- /.product-item -->
                        </div><!-- /.col-xl-3 col-lg-4 col-sm-6 -->
                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="product__item wow fadeInUp" data-wow-duration='1500ms' data-wow-delay='300ms'>
                                <div class="product__item__image">
                                    <img src="{{ asset("/assets/images/products/product-1-4.png") }}" alt="Round Chair">
                                    <div class="product__item__btn-group">
                                        <a href="{{ url("cart") }}"><i class="icon-heart"></i></a>
                                        <a href="{{ url("product-details") }}"><i class="icon-eye"></i></a>
                                        <a href="{{ url("checkout") }}"><i class="icon-loop"></i></a>
                                    </div><!-- /.product-btn-group -->
                                </div><!-- /.product-image -->
                                <div class="product__item__content">
                                    <h4 class="product__item__title"><a href="{{ url("product-details") }}">Round Chair</a></h4><!-- /.product-title -->
                                    <p class="product__item__price">
                                        <span>$45.00</span>
                                        <span class="product__item__price__old">$49.00</span>
                                    </p><!-- /.product-price -->
                                    <div class="transwide-ratings">
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                    </div><!-- /.transwide-ratings -->
                                    <a href="{{ url("cart") }}" class="transwide-btn">
                                        <span class="transwide-btn__text transwide-btn__text--1">Add to Cart</span>
                                        <span class="transwide-btn__text transwide-btn__text--2">Add to Cart</span>
                                    </a><!-- /.transwide-btn -->
                                </div><!-- /.product-content -->
                            </div><!-- /.product-item -->
                        </div><!-- /.col-xl-3 col-lg-4 col-sm-6 -->
                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="product__item wow fadeInUp" data-wow-duration='1500ms' data-wow-delay='00ms'>
                                <div class="product__item__image">
                                    <img src="{{ asset("/assets/images/products/product-1-5.png") }}" alt="Stool Chair">
                                    <div class="product__item__btn-group">
                                        <a href="{{ url("cart") }}"><i class="icon-heart"></i></a>
                                        <a href="{{ url("product-details") }}"><i class="icon-eye"></i></a>
                                        <a href="{{ url("checkout") }}"><i class="icon-loop"></i></a>
                                    </div><!-- /.product-btn-group -->
                                </div><!-- /.product-image -->
                                <div class="product__item__content">
                                    <h4 class="product__item__title"><a href="{{ url("product-details") }}">Stool Chair</a></h4><!-- /.product-title -->
                                    <p class="product__item__price">
                                        <span>$29.00</span>
                                        <span class="product__item__price__old">$31.00</span>
                                    </p><!-- /.product-price -->
                                    <div class="transwide-ratings">
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                    </div><!-- /.transwide-ratings -->
                                    <a href="{{ url("cart") }}" class="transwide-btn">
                                        <span class="transwide-btn__text transwide-btn__text--1">Add to Cart</span>
                                        <span class="transwide-btn__text transwide-btn__text--2">Add to Cart</span>
                                    </a><!-- /.transwide-btn -->
                                </div><!-- /.product-content -->
                            </div><!-- /.product-item -->
                        </div><!-- /.col-xl-3 col-lg-4 col-sm-6 -->
                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="product__item wow fadeInUp" data-wow-duration='1500ms' data-wow-delay='100ms'>
                                <div class="product__item__image">
                                    <img src="{{ asset("/assets/images/products/product-1-6.png") }}" alt="Classy Chair">
                                    <div class="product__item__btn-group">
                                        <a href="{{ url("cart") }}"><i class="icon-heart"></i></a>
                                        <a href="{{ url("product-details") }}"><i class="icon-eye"></i></a>
                                        <a href="{{ url("checkout") }}"><i class="icon-loop"></i></a>
                                    </div><!-- /.product-btn-group -->
                                </div><!-- /.product-image -->
                                <div class="product__item__content">
                                    <h4 class="product__item__title"><a href="{{ url("product-details") }}">Classy Chair</a></h4><!-- /.product-title -->
                                    <p class="product__item__price">
                                        <span>$48.00</span>
                                        <span class="product__item__price__old">$50.00</span>
                                    </p><!-- /.product-price -->
                                    <div class="transwide-ratings">
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                    </div><!-- /.transwide-ratings -->
                                    <a href="{{ url("cart") }}" class="transwide-btn">
                                        <span class="transwide-btn__text transwide-btn__text--1">Add to Cart</span>
                                        <span class="transwide-btn__text transwide-btn__text--2">Add to Cart</span>
                                    </a><!-- /.transwide-btn -->
                                </div><!-- /.product-content -->
                            </div><!-- /.product-item -->
                        </div><!-- /.col-xl-3 col-lg-4 col-sm-6 -->
                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="product__item wow fadeInUp" data-wow-duration='1500ms' data-wow-delay='200ms'>
                                <div class="product__item__image">
                                    <img src="{{ asset("/assets/images/products/product-1-7.png") }}" alt="Sofa Chair">
                                    <div class="product__item__btn-group">
                                        <a href="{{ url("cart") }}"><i class="icon-heart"></i></a>
                                        <a href="{{ url("product-details") }}"><i class="icon-eye"></i></a>
                                        <a href="{{ url("checkout") }}"><i class="icon-loop"></i></a>
                                    </div><!-- /.product-btn-group -->
                                </div><!-- /.product-image -->
                                <div class="product__item__content">
                                    <h4 class="product__item__title"><a href="{{ url("product-details") }}">Sofa Chair</a></h4><!-- /.product-title -->
                                    <p class="product__item__price">
                                        <span>$78.00</span>
                                        <span class="product__item__price__old">$80.00</span>
                                    </p><!-- /.product-price -->
                                    <div class="transwide-ratings">
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                    </div><!-- /.transwide-ratings -->
                                    <a href="{{ url("cart") }}" class="transwide-btn">
                                        <span class="transwide-btn__text transwide-btn__text--1">Add to Cart</span>
                                        <span class="transwide-btn__text transwide-btn__text--2">Add to Cart</span>
                                    </a><!-- /.transwide-btn -->
                                </div><!-- /.product-content -->
                            </div><!-- /.product-item -->
                        </div><!-- /.col-xl-3 col-lg-4 col-sm-6 -->
                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="product__item wow fadeInUp" data-wow-duration='1500ms' data-wow-delay='300ms'>
                                <div class="product__item__image">
                                    <img src="{{ asset("/assets/images/products/product-1-8.png") }}" alt="Relax Chair">
                                    <div class="product__item__btn-group">
                                        <a href="{{ url("cart") }}"><i class="icon-heart"></i></a>
                                        <a href="{{ url("product-details") }}"><i class="icon-eye"></i></a>
                                        <a href="{{ url("checkout") }}"><i class="icon-loop"></i></a>
                                    </div><!-- /.product-btn-group -->
                                </div><!-- /.product-image -->
                                <div class="product__item__content">
                                    <h4 class="product__item__title"><a href="{{ url("product-details") }}">Relax Chair</a></h4><!-- /.product-title -->
                                    <p class="product__item__price">
                                        <span>$65.00</span>
                                        <span class="product__item__price__old">$69.00</span>
                                    </p><!-- /.product-price -->
                                    <div class="transwide-ratings">
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                        <span class="transwide-ratings__icon"><i class="fas fa-star"></i></span>
                                    </div><!-- /.transwide-ratings -->
                                    <a href="{{ url("cart") }}" class="transwide-btn">
                                        <span class="transwide-btn__text transwide-btn__text--1">Add to Cart</span>
                                        <span class="transwide-btn__text transwide-btn__text--2">Add to Cart</span>
                                    </a><!-- /.transwide-btn -->
                                </div><!-- /.product-content -->
                            </div><!-- /.product-item -->
                        </div><!-- /.col-xl-3 col-lg-4 col-sm-6 -->
                    </div><!-- /.row -->
                </div><!-- /.col-lg-9 -->
                <div class="col-lg-12">
                    <ul class="post-pagination wow fadeInUp" data-wow-duration="1500ms">
                        <li>
                            <a href="{{ url("#") }}">
                                <span class="post-pagination__icon">
                                    <i class="fas fa-chevron-left"></i>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ url("#") }}">01</a>
                        </li>
                        <li>
                            <a href="{{ url("#") }}">02</a>
                        </li>
                        <li class="active">
                            <a href="{{ url("#") }}">
                                <span class="post-pagination__icon post-pagination__icon--right">
                                    <i class="fas fa-chevron-right"></i>
                                </span>
                            </a>
                        </li>
                    </ul><!-- /.post-pagination -->
                </div><!-- /.col-lg-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.product-page section-space -->

    <x-footer />
    <x-mobileMenu />
    <x-searchPopup />
    <x-scroll-to-top />
@endsection