@extends('frontend.layouts.app', ['title' => $sub_category->title])

@section('content')
    <x-breadcrumb :items="[
        [
            'label' => $sub_category->sub_category_parent->title,
            'url' => route('shop_grid', $sub_category->sub_category_parent->slug),
        ],
        ['label' => $sub_category->title, 'url' => null],
    ]" />
    <div class="category_wise_product_list">
        <div class="container">
            <div class="row">
                <div class="section-header">
                    <h2 class="section-titl">{{ $sub_category->title }}</h2>
                </div>
            </div>
            <div class="row">
                @if (isset($products) && count($products) > 0)
                    <div class="sorting_elements_div">
                        <form method="GET" action="{{ url()->current() }}" id="sortForm">
                            <div class="sorting_elements">
                                <label for="sort">Sort by:</label>
                                <select name="sort" id="sort"
                                    onchange="document.getElementById('sortForm').submit();">
                                    <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Latest
                                    </option>
                                    <option value="price_low_high"
                                        {{ request('sort') == 'price_low_high' ? 'selected' : '' }}>
                                        Price: Low to High</option>
                                    <option value="price_high_low"
                                        {{ request('sort') == 'price_high_low' ? 'selected' : '' }}>
                                        Price: High to Low</option>
                                    <option value="name_asc" {{ request('sort') == 'name_asc' ? 'selected' : '' }}>Name
                                        (A-Z)
                                    </option>
                                </select>
                            </div>
                        </form>
                    </div>
                    <section class="best-seller">
                        <div class="container">
                            <div class="product-card-grid row">
                                @foreach ($products as $product)
                                    @php
                                        $isInWishlist = $wishlist->contains('product_id', $product->product_id);
                                    @endphp
                                    <div class="col-md-3 product-item" data-product-id="{{ $product->product_id }}">
                                        <a href="{{ route('single.product.view', $product->slug) }}">
                                            <div class="product-card">
                                                <img src="{{ asset('storage/' . $product->product_image) }}"
                                                    alt="Summer Collection" class="product-card-image category_wise_image">
                                                <div class="wishlist">
                                                    <span
                                                        class="like-icon {{ $isInWishlist ? 'liked' : 'add-to-wishlist' }}"
                                                        title="wishlist"></span>
                                                    {{-- <i class="far fa-heart"></i> --}}
                                                </div>
                                                <div class="product-card-info">
                                                    <h3 class="product-card-title">{{ $product->product_name }}</h3>
                                                    <p class="product-card-subtitle">{{ $product->description }}</p>
                                                    <div class="product-card-price">
                                                        <span
                                                            class="current-price">₹{{ number_format($product->base_price, 0) }}</span>
                                                        <span
                                                            class="original-price">₹{{ number_format($product->base_mrp, 0) }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </section>
                @else
                    <div class="Image-not-found"><img src="{{ asset('images/banner/Image-not-found.png') }}"
                            alt="">
                        <h4 class="mt-4 text-dark text-center">No Products Found.</h4>
                        <div class="goto-shop">
                            <a href="{{ route('shop.page.index') }}"><button class="hover-btn">Go to Shop</button></a>
                        </div>
                    </div>
                @endif
            </div>
            {{ $products->links('pagination::bootstrap-4') }}
        </div>
    </div>
@endsection