@extends('pages.layouts.app')
@section('content')
    <div class="main-page-wrapper">


        <!-- MAIN CONTENT AREA -->
        <div class="container">
            <div class="row content-layout-wrapper align-items-start">
                <div class="site-content shop-content-area col-12 content-with-products wd-builder-on" role="main">

                    <div data-elementor-type="wp-post" data-elementor-id="1239" class="elementor elementor-1239">
                        <div class="elementor-element elementor-element-e794b4e e-flex e-con-boxed e-con e-parent"
                            data-id="e794b4e" data-element_type="container">
                            <div class="e-con-inner">
                                <div class="elementor-element elementor-element-0d7839b e-con-full e-flex e-con e-child"
                                    data-id="0d7839b" data-element_type="container">
                                    <div class="elementor-element elementor-element-70d7493 wd-nowrap-md wd-single-breadcrumbs wd-breadcrumbs text-left elementor-widget elementor-widget-wd_wc_breadcrumb"
                                        data-id="70d7493" data-element_type="widget"
                                        data-widget_type="wd_wc_breadcrumb.default">
                                        <div class="elementor-widget-container">
                                            <nav class="woocommerce-breadcrumb" aria-label="Breadcrumb"> <a
                                                    href="{{ route('home') }}" class="breadcrumb-link breadcrumb-link-last">
                                                    {{ __('Home') }} </a>
                                                <span class="breadcrumb-last">
                                                    {{ __('Products') }} </span>
                                            </nav>
                                        </div>
                                    </div>
                                    <div class="elementor-element elementor-element-a061ebb elementor-hidden-mobile elementor-hidden-tablet wd-shop-result-count elementor-widget elementor-widget-wd_shop_archive_result_count"
                                        data-id="a061ebb" data-element_type="widget"
                                        data-widget_type="wd_shop_archive_result_count.default">
                                        <div class="elementor-widget-container">
                                            <p class="woocommerce-result-count" role="alert" aria-relevant="all"
                                                data-is-sorted-by="true">
                                                {{ __('Showing') }}
                                                1&ndash;{{ $productsCount > 18 ? '18' : $productsCount }}
                                                {{ __('of') }} {{ $productsCount }} {{ __('results') }}<span
                                                    class="screen-reader-text"> {{ __('Sorted by popularity') }} </span></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="elementor-element elementor-element-1ad6cc9 wd-width-100 elementor-widget elementor-widget-wd_product_categories"
                                    data-id="1ad6cc9" data-element_type="widget"
                                    data-widget_type="wd_product_categories.default">
                                    <div class="elementor-widget-container">

                                        <div class="wd-img-width wd-cats products woocommerce columns-4 wd-cats-element wd-carousel-container"
                                            id="carousel-6784f6ebbbe8e">
                                            <div class="wd-carousel-inner">
                                                <div class="wd-carousel wd-grid" data-scroll_per_page="yes"
                                                    style="--wd-col-lg:7;--wd-col-md:3;--wd-col-sm:2;--wd-gap-lg:10px;">
                                                    <div class="wd-carousel-wrap">
                                                        @forelse ($categories as $category)
                                                            <div class="wd-carousel-item">

                                                                <div class="category-grid-item cat-design-alt product-category product first"
                                                                    data-loop="1">
                                                                    <div class="wrapp-category">
                                                                        <div class="category-image-wrapp">
                                                                            <a href="{{ route('productsBycategory', $category->id) }}"
                                                                                class="category-image">

                                                                                <img data-recalc-dims="1" loading="lazy"
                                                                                    decoding="async" width="150"
                                                                                    height="150"
                                                                                    src="{{ asset('storage/' . $category->image) }}"
                                                                                    class="attachment-200x200 size-200x200"
                                                                                    alt="{{ $category->name }}"
                                                                                    sizes="(max-width: 200px) 100vw, 200px" />
                                                                            </a>
                                                                        </div>
                                                                        <div class="hover-mask">
                                                                            <h3 class="wd-entities-title">
                                                                                {{ app()->getLocale() === 'ar' ? $category->name_ar : $category->name }}
                                                                            </h3>

                                                                            <div class="more-products">
                                                                                <a href="">{{ $category->products_count }}
                                                                                    {{ __('products') }}</a>

                                                                            </div>

                                                                        </div>


                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @empty
                                                            <div class="wd-carousel-item">
                                                                <div class="wd-empty-state">
                                                                    <div class="empty-state-icon"></div>
                                                                    <h3 class="empty-state-title">
                                                                        {{ __('No categories found') }}</h3>
                                                                </div>
                                                            </div>
                                                        @endforelse
                                                    </div>
                                                </div>

                                                <div class="wd-nav-arrows wd-pos-sep wd-hover-1 wd-icon-1">
                                                    <div class="wd-btn-arrow wd-prev wd-disabled">
                                                        <div class="wd-arrow-inner"></div>
                                                    </div>
                                                    <div class="wd-btn-arrow wd-next">
                                                        <div class="wd-arrow-inner"></div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="elementor-element elementor-element-20bf0ad e-flex e-con-boxed e-con e-parent"
                            data-id="20bf0ad" data-element_type="container">
                            <div class="e-con-inner">

                                <div class="elementor-element elementor-element-6e35ee3 e-con-full wd-col-content-md-sm wd-col-content-sm e-flex e-con e-child"
                                    data-id="6e35ee3" data-element_type="container">
                                    <div class="elementor-element elementor-element-ffd647a e-flex e-con-boxed e-con e-child"
                                        data-id="ffd647a" data-element_type="container">
                                        <div class="e-con-inner">
                                            <div class="elementor-element elementor-element-7e0e964 e-con-full e-flex e-con e-child"
                                                data-id="7e0e964" data-element_type="container">
                                                <div class="elementor-element elementor-element-fc288f9 wd-woo-page-title text-left elementor-widget elementor-widget-wd_shop_archive_woocommerce_title"
                                                    data-id="fc288f9" data-element_type="widget"
                                                    data-widget_type="wd_shop_archive_woocommerce_title.default">
                                                    {{-- <div class="elementor-widget-container">
                                                        <h1 class="entry-title title">
                                                            {{ __('By Category') }} {{ app()->getLocale() === 'ar' ? $category->name_ar : $category->name }}</h1>
                                                    </div> --}}
                                                </div>
                                            </div>
                                            <div class="elementor-element elementor-element-db664df e-con-full e-flex e-con e-child"
                                                data-id="db664df" data-element_type="container">
                                                <div class="elementor-element elementor-element-23042f1 elementor-hidden-desktop elementor-widget elementor-widget-wd_builder_off_canvas_column_btn"
                                                    data-id="23042f1" data-element_type="widget"
                                                    data-widget_type="wd_builder_off_canvas_column_btn.default">
                                                    <div class="elementor-widget-container">

                                                        <div
                                                            class="wd-off-canvas-btn wd-action-btn wd-style-text wd-burger-icon">
                                                            <a href="#" rel="nofollow">
                                                                Show sidebar </a>
                                                        </div>

                                                    </div>
                                                </div>

                                                <div class="elementor-element elementor-element-a0904b9 elementor-hidden-tablet elementor-hidden-mobile wd-shop-view elementor-widget elementor-widget-wd_shop_archive_view"
                                                    data-id="a0904b9" data-element_type="widget"
                                                    data-widget_type="wd_shop_archive_view.default">
                                                    <div class="elementor-widget-container">
                                                        <div class="wd-products-shop-view products-view-grid_list">

                                                            <a rel="nofollow noopener"
                                                                href="index27d9.html?shop_view=list"
                                                                class="shop-view per-row-list" aria-label="List view"></a>


                                                            <a rel="nofollow noopener"
                                                                href="indexcc7b.html?shop_view=grid&amp;per_row=3"
                                                                class="shop-view per-row-3" aria-label="Grid view 3"></a>

                                                            <a rel="nofollow noopener"
                                                                href="index475d.html?shop_view=grid&amp;per_row=4"
                                                                class="shop-view per-row-4" aria-label="Grid view 4"></a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="elementor-element elementor-element-0605206 wd-shop-ordering elementor-widget elementor-widget-wd_shop_archive_orderby"
                                                    data-id="0605206" data-element_type="widget"
                                                    data-widget_type="wd_shop_archive_orderby.default">
                                                    <div class="elementor-widget-container">
                                                        <form class="woocommerce-ordering wd-style-underline"
                                                            method="get">
                                                            <select name="orderby" class="orderby"
                                                                aria-label="Shop order" onchange="this.form.submit()">
                                                                <option value="">
                                                                    {{ __('Select Filter') }}
                                                                </option>
                                                                <option value="date"
                                                                    {{ request('orderby') == 'date' ? 'selected' : '' }}>
                                                                    {{ __('Sort by latest') }}
                                                                </option>
                                                                <option value="price"
                                                                    {{ request('orderby') == 'price' ? 'selected' : '' }}>
                                                                    {{ __('Sort by price') }}: {{ __('low to high') }}
                                                                </option>
                                                                <option value="price-desc"
                                                                    {{ request('orderby') == 'price-desc' ? 'selected' : '' }}>
                                                                    {{ __('Sort by price') }}: {{ __('high to low') }}
                                                                </option>
                                                            </select>
                                                        </form>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="elementor-element elementor-element-8848961 wd-wc-notices elementor-widget elementor-widget-wd_wc_notices"
                                        data-id="8848961" data-element_type="widget"
                                        data-widget_type="wd_wc_notices.default">
                                        <div class="elementor-widget-container">
                                            <div class="woocommerce-notices-wrapper"></div>
                                        </div>
                                    </div>
                                    <div class="elementor-element elementor-element-02967c8 wd-width-100 elementor-widget elementor-widget-wd_products"
                                        data-id="02967c8" data-element_type="widget"
                                        data-widget_type="wd_products.default">
                                        <div class="elementor-widget-container">

                                            <div class="wd-products-element">





                                                <div class="products wd-products grid-columns-6 elements-grid wd-grid-g wd-stretch-cont-lg wd-stretch-cont-md wd-stretch-cont-sm wd-products-with-bg"
                                                    data-paged="1"
                                                    data-atts="{&quot;carousel_id&quot;:&quot;5000&quot;,&quot;speed&quot;:null,&quot;slides_per_view&quot;:null,&quot;slides_per_view_tablet&quot;:{&quot;size&quot;:&quot;&quot;},&quot;slides_per_view_mobile&quot;:{&quot;size&quot;:&quot;&quot;},&quot;wrap&quot;:null,&quot;loop&quot;:false,&quot;autoplay&quot;:null,&quot;autoheight&quot;:null,&quot;hide_pagination_control&quot;:null,&quot;hide_pagination_control_tablet&quot;:&quot;yes&quot;,&quot;hide_pagination_control_mobile&quot;:&quot;yes&quot;,&quot;dynamic_pagination_control&quot;:null,&quot;hide_prev_next_buttons&quot;:null,&quot;carousel_arrows_position&quot;:null,&quot;hide_scrollbar&quot;:null,&quot;hide_scrollbar_tablet&quot;:&quot;yes&quot;,&quot;hide_scrollbar_mobile&quot;:&quot;yes&quot;,&quot;scroll_per_page&quot;:null,&quot;dragEndSpeed&quot;:200,&quot;center_mode&quot;:null,&quot;custom_sizes&quot;:false,&quot;sliding_speed&quot;:false,&quot;animation&quot;:false,&quot;content_animation&quot;:false,&quot;post_type&quot;:&quot;bestselling&quot;,&quot;slider&quot;:&quot;&quot;,&quot;library&quot;:&quot;&quot;,&quot;css&quot;:&quot;&quot;,&quot;effect&quot;:&quot;&quot;,&quot;spacing&quot;:&quot;&quot;,&quot;spacing_tablet&quot;:&quot;&quot;,&quot;spacing_mobile&quot;:&quot;&quot;,&quot;carousel_sync&quot;:null,&quot;sync_parent_id&quot;:null,&quot;sync_child_id&quot;:null,&quot;scroll_carousel_init&quot;:null,&quot;disable_overflow_carousel&quot;:null,&quot;element_title&quot;:&quot;&quot;,&quot;query_post_type&quot;:&quot;product&quot;,&quot;include&quot;:null,&quot;taxonomies&quot;:&quot;&quot;,&quot;offset&quot;:&quot;&quot;,&quot;orderby&quot;:&quot;&quot;,&quot;query_type&quot;:&quot;OR&quot;,&quot;order&quot;:null,&quot;meta_key&quot;:null,&quot;exclude&quot;:&quot;&quot;,&quot;shop_tools&quot;:null,&quot;hide_out_of_stock&quot;:&quot;yes&quot;,&quot;ajax_recently_viewed&quot;:null,&quot;layout&quot;:&quot;grid&quot;,&quot;pagination&quot;:&quot;&quot;,&quot;pagination_arrows_position&quot;:null,&quot;items_per_page&quot;:6,&quot;columns&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:6,&quot;sizes&quot;:[]},&quot;columns_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:3,&quot;sizes&quot;:[]},&quot;columns_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:2,&quot;sizes&quot;:[]},&quot;products_masonry&quot;:&quot;&quot;,&quot;products_different_sizes&quot;:&quot;&quot;,&quot;product_quantity&quot;:&quot;&quot;,&quot;product_hover&quot;:&quot;inherit&quot;,&quot;sale_countdown&quot;:&quot;0&quot;,&quot;stretch_product&quot;:null,&quot;stretch_product_tablet&quot;:0,&quot;stretch_product_mobile&quot;:0,&quot;stock_progress_bar&quot;:&quot;0&quot;,&quot;highlighted_products&quot;:&quot;0&quot;,&quot;products_bordered_grid&quot;:&quot;0&quot;,&quot;products_bordered_grid_style&quot;:null,&quot;products_with_background&quot;:&quot;1&quot;,&quot;products_shadow&quot;:&quot;0&quot;,&quot;products_color_scheme&quot;:&quot;default&quot;,&quot;img_size&quot;:&quot;medium_large&quot;,&quot;img_size_custom&quot;:null,&quot;grid_gallery&quot;:&quot;&quot;,&quot;grid_gallery_control&quot;:null,&quot;grid_gallery_enable_arrows&quot;:null,&quot;ajax_page&quot;:&quot;&quot;,&quot;force_not_ajax&quot;:&quot;no&quot;,&quot;lazy_loading&quot;:&quot;no&quot;,&quot;elementor&quot;:true,&quot;wrapper_classes&quot;:&quot;&quot;}"
                                                    data-source="shortcode" data-columns="6"
                                                    data-grid-gallery="{&quot;grid_gallery&quot;:&quot;1&quot;,&quot;grid_gallery_control&quot;:&quot;hover&quot;,&quot;grid_gallery_enable_arrows&quot;:&quot;arrows&quot;}"
                                                    style="--wd-col-lg:6;--wd-col-md:3;--wd-col-sm:2;--wd-gap-lg:6px;">



                                                    @forelse ($products as $product)
                                                        <div class="wd-product wd-with-labels wd-hover-base wd-hover-with-fade wd-col product-grid-item product type-product post-16181 status-publish instock product_cat-audio has-post-thumbnail shipping-taxable purchasable product-type-variable"
                                                            data-loop="1" data-id="16181">


                                                            <div class="product-wrapper">
                                                                <div class="content-product-imagin"></div>
                                                                <a href="{{ route('productDetails', $product->id) }}">
                                                                    <div class="product-element-top wd-quick-shop">
                                                                        <img loading="lazy" decoding="async"
                                                                            width="768" height="768"
                                                                            src="{{ $product->images && $product->images->isNotEmpty() ? asset('storage/' . $product->images->first()->image) : asset('empty.jpg') }}"
                                                                            class="attachment-medium_large size-medium_large"
                                                                            style="width: 150px; height: 150px;"
                                                                            sizes="(max-width: 768px) 100vw, 768px" />
                                                                    </div>
                                                                </a>

                                                                <div class="product-element-bottom product-information">
                                                                    <h3 class="wd-entities-title"><a
                                                                            href="{{ route('productDetails', $product->id) }}">{{ app()->getLocale() === 'ar' ? $product->name_ar : $product->name }}</a>
                                                                    </h3>
                                                                    <div class="wd-product-brands-links">
                                                                        <a>{{ __('JOKADE') }}</a>
                                                                    </div>
                                                                    <div class="product-rating-price">
                                                                        <div class="wrapp-product-price">

                                                                            <span class="price">
                                                                                <span
                                                                                    class="woocommerce-Price-amount amount">
                                                                                    <bdi>
                                                                                        <span class="woocommerce-Price-currencySymbol">
                                                                                            {{ app()->getLocale() === 'ar' ? 'دأ ' : 'JD' }}
                                                                                        </span>

                                                                                        @if($product->price_after_discount)
                                                                                            <!-- Display the old price with a strikethrough and the new price -->
                                                                                            <del>{{ $product->price }}</del>
                                                                                            {{ $product->price_after_discount }}
                                                                                        @else
                                                                                            <!-- Display only the original price if no discount -->
                                                                                            {{ $product->price }}
                                                                                        @endif
                                                                                    </bdi>



                                                                                </span></span>
                                                                        </div>
                                                                    </div>
                                                                    <div class="fade-in-block wd-scroll">
                                                                        <div class="hover-content wd-more-desc">
                                                                            <div
                                                                                class="hover-content-inner wd-more-desc-inner">
                                                                            </div>
                                                                            <a href="#" rel="nofollow"
                                                                                class="wd-more-desc-btn"
                                                                                aria-label="Read more description"><span></span></a>
                                                                        </div>
                                                                        <div class=" wd-bottom-actions">
                                                                            <div class="wrap-wishlist-button">
                                                                                <div
                                                                                    class="wd-wishlist-btn wd-action-btn wd-style-icon {{ $product->favorites->contains('user_id', auth()->id()) ? 'wd-wishlist-icon-full' : 'wd-wishlist-icon' }}">
                                                                                    <a class=""
                                                                                        href="{{ route('addtofavorite', $product->id) }}"
                                                                                        rel="nofollow"
                                                                                        data-added-text="Browse Wishlist">
                                                                                        <span>{{ __('Add to favorites') }}</span>
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                            <div class="wd-add-btn wd-add-btn-replace">
                                                                                <!-- Add to Cart Link (Using <a> Tag with a Unique Class) -->
                                                                                <a class="button product_type_variable add-to-cart-link"
                                                                                    rel="nofollow"
                                                                                    data-product-id="{{ $product->id }}"
                                                                                    data-quantity="1">
                                                                                    <span>{{ __('Add to cart') }}</span>
                                                                                </a>
                                                                            </div>
                                                                            <div class="wrap-quickview-button">
                                                                                <div
                                                                                    class="quick-view wd-action-btn wd-style-icon wd-quick-view-icon">
                                                                                    <a href="{{ route('productDetails', $product->id) }}"
                                                                                        class="quick-view-button"
                                                                                        rel="nofollow"
                                                                                        data-id="16181">{{ __('Quick view') }}</a>
                                                                                </div>
                                                                            </div>
                                                                        </div>



                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @empty
                                                        <p>{{ __('No products found matching') }}</p>
                                                    @endforelse


                                                </div>



                                            </div>
                                            {!! $products->links('pagination::default') !!}
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- .main-page-wrapper -->
        </div> <!-- end row -->
    </div> <!-- end container -->
@endsection