@extends('front.include.app')
@section('content')

    <section class="logo-sec">
        <figure class="custom-logo">
            <img src="{{ asset('front/images/custom-top.png')}}" class="img-fluid" alt="">
        </figure>
    </section>
<div class="inner-ban">
    <img src="{{ pagesSingleImage('PagesSection', 'apparel_top_banner_image') }}" class="img-fluid" alt="">
    <div class="overlay">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>{{ $pageData['PagesSection']['apparel_top_title'] ?? '' }}</h2>
                </div>
            </div>
        </div>
    </div>
</div>



<section class="shop-page apparel-page">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3" data-aos="fade-up">
                <div class="bgfaq">
                    <div id="accordion" class="faq-content">
                        <div class="card">

                            <form class="footForm search-wrap">
                                <input type="text" class="form-control" placeholder="Search">
                                <i class="far fa-search"></i>
                            </form>
                            {{-- <div class="card-header" id="headingOne">
                                <button class="btn" data-toggle="collapse" data-target="#collapseOne"
                                        aria-expanded="true" aria-controls="collapseOne">
                                    availability <i class="fas fa-caret-down"></i>
                                </button>
                            </div>
                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                 data-parent="#accordion">
                                <div class="card-body">
                                    <div class="form-check checkbox1">
                                        <input class="form-check-input" type="checkbox" value=""
                                               id="flexCheckChecked">
                                        <label class="form-check-label" for="flexCheckChecked">
                                            in stock
                                        </label>
                                    </div>
                                    <div class="form-check checkbox1">
                                        <input class="form-check-input" type="checkbox" value=""
                                               id="flexCheckChecked">
                                        <label class="form-check-label" for="flexCheckChecked">
                                            out of (0)stock
                                        </label>
                                    </div>
                                    <div class="shop-filter">
                                        <!-- <label for="amount">Price: $0 — $200</label> -->
                                        <!-- <h2 class="heading">Filter By Price</h2> -->
                                        <h3>price</h3>
                                        <div class="rabge-set">
                                            <p>
                                                <input type="text" id="amount" readonly="">
                                                <input type="text" id="amount1" readonly="">
                                            </p>
                                            <div id="slider-range"></div>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                        </div>

{{-- 
                        <div class="card">
                            <div class="card-header" id="headingthre">
                                <button class="btn" data-toggle="collapse" data-target="#collapsethre"
                                        aria-expanded="true" aria-controls="collapsethre">
                                    More filters<i class="fas fa-caret-down"></i>
                                </button>
                            </div>
                            <div id="collapsethre" class="collapse show" aria-labelledby="headingthre"
                                 data-parent="#accordion">
                                <div class="card-body">
                                    <div class="form-check checkbox1">
                                        <input class="form-check-input" type="checkbox" value=""
                                               id="flexCheckDefault">
                                        <label class="form-check-label" for="flexCheckDefault">
                                            plotBoost (7)
                                        </label>

                                    </div>
                                    <div class="form-check checkbox1">
                                        <input class="form-check-input" type="checkbox" value=""
                                               id="flexCheckChecked">
                                        <label class="form-check-label" for="flexCheckChecked">
                                            PlotStart (6)
                                        </label>
                                    </div>
                                    <div class="form-check checkbox1">
                                        <input class="form-check-input" type="checkbox" value=""
                                               id="flexCheckChecked">
                                        <label class="form-check-label" for="flexCheckChecked">
                                            PlotTill (2)
                                        </label>
                                    </div>

                                </div>
                            </div>
                        </div> --}}

                        <div class="card">
                            <div class="card-header" id="headingOne">
                                <button class="btn" data-toggle="collapse" data-target="#collapseOne"
                                        aria-expanded="true" aria-controls="collapseOne">
                                    Categories <i class="fas fa-caret-down"></i>
                                </button>
                            </div>
                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                 data-parent="#accordion">
                                <div class="card-body">
                                    <div class="form-check checkbox1">
                                        <input class="form-check-input" type="checkbox" name="availability[]" value="in_stock" id="in_stock">
                                        <label class="form-check-label" for="in_stock">Soil Amendment</label>
                                    </div>
                                    <div class="form-check checkbox1">
                                        <input class="form-check-input" type="checkbox" name="availability[]" value="out_of_stock" id="out_stock">
                                        <label class="form-check-label" for="out_stock">LIQUID FERTILIZERS</label>
                                    </div>
                                    <div class="form-check checkbox1">
                                        <input class="form-check-input" type="checkbox" name="availability[]" value="out_of_stock" id="out_stock">
                                        <label class="form-check-label" for="out_stock">OUR SEEDS BLENDS</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                @forelse ($groupedProducts as $categoryName => $products)
                    <div class="row align-items-center">
                        <div class="col-md-12" data-aos="fade-up">
                            <h2 class="heading1">{{ $categoryName }}</h2>
                        </div>

                        @foreach ($products as $product)
                            <div class="col-md-4" data-aos="fade-up">
                                <a href="{{ route('product-detail', $product->id) }}" class="shopwrap">
                                    <figure>
                                        <img src="{{ asset($product->productImage() ) }}" class="img-fluid" alt="{{ $product->name }}">
                                    </figure>
                                    <h3>{{ $product->name }}</h3>
                                    <h5>${{ $product->price }}</h5>
                                </a>
                            </div>
                        @endforeach
                    </div>
                @empty
                    <p>No products found in this category.</p>
                @endforelse
            </div>

        </div>
    </div>
    </div>
</section>

























<section class="customer-sec about-customer">
    <div class="container">
        <div class="row">
            <div class="col-md-5" data-aos="fade-up" data-duration="1000">
                <div class="customer-content">
                    <h4>Customer reviews</h4>
                    <p>Trusted by over 400,000 individual and corporate customers. <a href="">all reviews</a></p>
                </div>
            </div>
        </div>
        <div class="row" data-aos="fade-up" data-duration="1000">
            <div class="col-md-10">
                <div class="swiper customer-slider">
                    <div class="swiper-wrapper">

                        <div class="swiper-slide">
                            <div class="customer-wrapp">
                                <div class="clinet-content">
                                    <p>“Lorem Ipsum has been the industry's standard dummy text ever since the a
                                        galley o scrambled it to make a type specimen bt has survived not onle
                                        centuries”</p>
                                    <figure class="customer-imag">
                                        <img src="{{ asset('front/images/c-1.webp') }}" class="img-fluid" alt="">
                                        <h5>Douglas Thomas <span>2 days ago</span></h5>
                                    </figure>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="customer-wrapp">
                                <div class="clinet-content">
                                    <p>“Lorem Ipsum has been the industry's standard dummy text ever since the a
                                        galley o scrambled it to make a type specimen bt has survived not onle
                                        centuries”</p>
                                    <figure class="customer-imag">
                                        <img src="{{ asset('front/images/c-2.webp') }}" class="img-fluid" alt="">
                                        <h5>Juan Bonilla<span>2 days ago</span></h5>
                                    </figure>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="customer-wrapp">
                                <div class="clinet-content">
                                    <p>“Lorem Ipsum has been the industry's standard dummy text ever since the a
                                        galley o scrambled it to make a type specimen bt has survived not onle
                                        centuries”</p>
                                    <figure class="customer-imag">
                                        <img src="{{ asset('front/images/c-3.webp') }}" class="img-fluid" alt="">
                                        <h5>John Stone <span>2 days ago</span></h5>
                                    </figure>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="customer-wrapp">
                                <div class="clinet-content">
                                    <p>“Lorem Ipsum has been the industry's standard dummy text ever since the a
                                        galley o scrambled it to make a type specimen bt has survived not onle
                                        centuries”</p>
                                    <figure class="customer-imag">
                                        <img src="{{ asset('front/images/c-1.webp') }}" class="img-fluid" alt="">
                                        <h5>Douglas Thomas <span>2 days ago</span></h5>
                                    </figure>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="customer-wrapp">
                                <div class="clinet-content">
                                    <p>“Lorem Ipsum has been the industry's standard dummy text ever since the a
                                        galley o scrambled it to make a type specimen bt has survived not onle
                                        centuries”</p>
                                    <figure class="customer-imag">
                                        <img src="{{ asset('front/images/c-2.webp') }}" class="img-fluid" alt="">
                                        <h5>Juan Bonilla<span>2 days ago</span></h5>
                                    </figure>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="customer-wrapp">
                                <div class="clinet-content">
                                    <p>“Lorem Ipsum has been the industry's standard dummy text ever since the a
                                        galley o scrambled it to make a type specimen bt has survived not onle
                                        centuries”</p>
                                    <figure class="customer-imag">
                                        <img src="{{ asset('front/images/c-3.webp') }}" class="img-fluid" alt="">
                                        <h5>John Stone <span>2 days ago</span></h5>
                                    </figure>
                                </div>
                            </div>
                        </div>


                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
        <figure class="customer-bg">
            <img src="{{ asset('front/images/customer-bg.webp') }}" class="img-fluid" alt="">
        </figure>
    </div>
</section>

@endsection