@extends('front.layout.app')
@section('title', 'Product Page')
@section('content')

<section class="shop-page">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="shop-filter">
                    <h2 class="heading">Categories</h2>
                    <ul class="timelist">
                        <li>softies</li>
                        <li>lps</li>
                        <li> sps</li>
                    </ul>
                    <div class="rabge-set">
                        <label for="amount">Price <span><i class="fas fa-filter"></i></span> </label>

                        <div id="slider-range"></div>
                        <p>
                            <input type="text" id="amount" readonly="">
                            <input type="text" id="amount1" readonly="">
                        </p>

                    </div>
                </div>

                <div class="march">
                    <h2>March Discount</h2>
                    <h4>Up to 70% Off for All Items in March</h4>
                    <a href="#" class="themeBtn">shop now</a>
                </div>

            </div>
            <div class="col-md-9">
                <div class="searchbtn">
                    <form class="search-form">
                        <input type="text" placeholder="Search products">
                        <button><i class="far fa-search"></i></button>
                    </form>
                </div>
                <div class="filter">
                    <div>
                        <ul>
                            <li>
                                <a href="#"><i class="fas fa-th-large"></i></a>
                            </li>
                            <li><a href="#"><i class="fal fa-list"></i></a></li>
                        </ul>
                        <span>Showing 1-9 Results</span>
                    </div>
                    <div class="rightselect">
                        <p> Sort by</p>
                        <select>
                            <option>Newest</option>
                        </select>
                        <a href=""><i class="far fa-bars"></i></a>
                    </div>
                </div>
                {{-- @dd($product); --}}
                <div id="coralColonies">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="product__card" data-aos="zoom-in">
                                <figure class="product__card_img">
                                    <a href="" class="d-block">
                                        <img
                                        src="{{ $product->getFirstMediaUrl('product_image', 'thumb') ?: asset('upload/No-Image.png') }}"
                                        alt="{{ $product->name }}"
                                        class="img-fluid">
                                        {{-- <img src="images/product1.webp" alt="image" class="img-fluid"> --}}
                                    </a>
                                    <a href="" class="hover-img d-block">
                                        <img src="images/product-hoverimg1.webp" alt="image" class="img-fluid">
                                    </a>
                                </figure>
                                <div class="product__card_content">
                                    <h3><a href="">{{$product->name}}</a></h3>
                                    <ul class="d-flex align-items-center gap-05">
                                        <li><a href="">{{$product->name}}</a></li>
                                        {{-- <li><a href="">Perpetual/Annual Plaques</a></li> --}}
                                    </ul>
                                    <h5>&dollar;{{$product->price}}</h5>
                                </div>
                                <ul class="product__card_btn">
                                    <li><a href=""><i class="fa-regular fa-cart-shopping"></i></a></li>
                                    <li><a href=""><i class="far fa-search"></i></a></li>
                                    <li><a href=""><i class="fa-solid fa-code-compare"></i></a></li>
                                    <li><a href=""><i class="fa-regular fa-heart"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        {{-- <div class="col-lg-4">
                            <div class="product__card" data-aos="zoom-in">
                                <figure class="product__card_img">
                                    <a href="" class="d-block">
                                        <img src="images/product2.webp" alt="image" class="img-fluid">
                                    </a>
                                    <a href="" class="hover-img d-block">
                                        <img src="images/product-hoverimg2.webp" alt="image" class="img-fluid">
                                    </a>
                                </figure>
                                <div class="product__card_content">
                                    <h3><a href="">“PREMIUM” 12 Month Employee Recognition Award Package</a></h3>
                                    <ul class="d-flex align-items-center gap-05">
                                        <li><a href="">Wood Plaques,</a></li>
                                        <li><a href="">Perpetual/Annual Plaques</a></li>
                                    </ul>
                                    <h5>&dollar;1,079.00</h5>
                                </div>
                                <ul class="product__card_btn">
                                    <li><a href=""><i class="fa-regular fa-cart-shopping"></i></a></li>
                                    <li><a href=""><i class="far fa-search"></i></a></li>
                                    <li><a href=""><i class="fa-solid fa-code-compare"></i></a></li>
                                    <li><a href=""><i class="fa-regular fa-heart"></i></a></li>
                                </ul>
                            </div>
                        </div> --}}
                        {{-- <div class="col-lg-4">
                            <div class="product__card" data-aos="zoom-in">
                                <figure class="product__card_img">
                                    <a href="" class="d-block">
                                        <img src="images/product3.webp" alt="image" class="img-fluid">
                                    </a>
                                </figure>
                                <div class="product__card_content">
                                    <h3><a href="">{{$product->name}}</a></h3>
                                    <ul class="d-flex align-items-center gap-05">
                                        <li><a href="">Accessories</a></li>
                                    </ul>
                                </div>
                                <ul class="product__card_btn">
                                    <li><a href=""><i class="fa-regular fa-cart-shopping"></i></a></li>
                                    <li><a href=""><i class="far fa-search"></i></a></li>
                                    <li><a href=""><i class="fa-solid fa-code-compare"></i></a></li>
                                    <li><a href=""><i class="fa-regular fa-heart"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="product__card" data-aos="zoom-in">
                                <figure class="product__card_img">
                                    <a href="" class="d-block">
                                        <img src="images/product4.webp" alt="image" class="img-fluid">
                                    </a>
                                </figure>
                                <div class="product__card_content">
                                    <h3><a href="">Acrylic Plate on Black High Gloss Plaque</a></h3>
                                    <ul class="d-flex align-items-center gap-05">
                                        <li><a href="">Wood Plaques,</a></li>
                                        <li><a href="">Perpetual/Annual Plaques</a></li>
                                    </ul>
                                    <h5>&dollar;69.00</h5>
                                </div>
                                <ul class="product__card_btn">
                                    <li><a href=""><i class="fa-regular fa-cart-shopping"></i></a></li>
                                    <li><a href=""><i class="far fa-search"></i></a></li>
                                    <li><a href=""><i class="fa-solid fa-code-compare"></i></a></li>
                                    <li><a href=""><i class="fa-regular fa-heart"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="product__card" data-aos="zoom-in">
                                <figure class="product__card_img">
                                    <a href="" class="d-block">
                                        <img src="images/product5.webp" alt="image" class="img-fluid">
                                    </a>
                                </figure>
                                <div class="product__card_content">
                                    <h3><a href="">Acrylic Plate on Rosewood High Gloss Plaque</a></h3>
                                    <ul class="d-flex align-items-center gap-05">
                                        <li><a href="">Wood Plaques,</a></li>
                                        <li><a href="">Perpetual/Annual Plaques</a></li>
                                    </ul>
                                    <h5>&dollar;69.00</h5>
                                </div>
                                <ul class="product__card_btn">
                                    <li><a href=""><i class="fa-regular fa-cart-shopping"></i></a></li>
                                    <li><a href=""><i class="far fa-search"></i></a></li>
                                    <li><a href=""><i class="fa-solid fa-code-compare"></i></a></li>
                                    <li><a href=""><i class="fa-regular fa-heart"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-4"> --}}
                            {{-- <div class="product__card" data-aos="zoom-in">
                                <figure class="product__card_img">
                                    <a href="" class="d-block">
                                        <img src="images/product6.webp" alt="image" class="img-fluid">
                                    </a>
                                </figure>
                                <div class="product__card_content">
                                    <h3><a href="">Airflyte® Black High Lustr Plaque</a></h3>
                                    <ul class="d-flex align-items-center gap-05">
                                        <li><a href="">Wood Plaques,</a></li>
                                        <li><a href="">Piano Finish Plaques</a></li>
                                    </ul>
                                    <h5>&dollar;63.00 – &dollar;90.00</h5>
                                </div>
                                <ul class="product__card_btn">
                                    <li><a href=""><i class="fa-regular fa-cart-shopping"></i></a></li>
                                    <li><a href=""><i class="far fa-search"></i></a></li>
                                    <li><a href=""><i class="fa-solid fa-code-compare"></i></a></li>
                                    <li><a href=""><i class="fa-regular fa-heart"></i></a></li>
                                </ul>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection