@extends('frontend.layouts.app', ['title' => 'New Products'])

@section('content')
    <x-breadcrumb :items="[
        [
            'label' => 'New Products',
            'url' => null,
        ],
    ]" />
    <div class="new_product new_product_page">
        <div class="container">
            <div class="section-header both-section-div">
                <h2 class="section-title">New Products
                </h2>
                <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>
            </div>

            <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 new_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">
                                <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>
    </div>
@endsection