@extends('page_layout')
@section('section')
    <div data-elementor-type="wp-post" data-elementor-id="1029" class="elementor elementor-1029"
        data-elementor-post-type="envato_tk_templates">
        <section
            class="elementor-section elementor-top-section elementor-element elementor-element-7af85c9 elementor-section-boxed elementor-section-height-default elementor-section-height-default"
            data-id="7af85c9" data-element_type="section"
            data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
            <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b9658dd"
                    data-id="b9658dd" data-element_type="column">
                    <div class="elementor-widget-wrap elementor-element-populated">
                        <div class="elementor-element elementor-element-8ff69a9 elementor-widget elementor-widget-heading"
                            data-id="8ff69a9" data-element_type="widget" data-widget_type="heading.default">
                            <div class="elementor-widget-container">
                                <h2 class="elementor-heading-title elementor-size-default">Product Details</h2>
                            </div>
                        </div>
                        <div class="elementor-element elementor-element-cbae4ff elementor-icon-list--layout-inline elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list"
                            data-id="cbae4ff" data-element_type="widget" data-widget_type="icon-list.default">
                            <div class="elementor-widget-container">
                                <ul class="elementor-icon-list-items elementor-inline-items">
                                    <li class="elementor-icon-list-item elementor-inline-item">
                                        <span class="elementor-icon-list-text">Home</span>
                                    </li>
                                    <li class="elementor-icon-list-item elementor-inline-item">
                                        <span class="elementor-icon-list-icon">
                                            <i aria-hidden="true" class=" arrow_triangle-right_alt2"></i> </span>
                                        <span class="elementor-icon-list-text">Product Details</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <section
            class="elementor-section elementor-top-section elementor-element elementor-element-fd5d819 elementor-section-boxed elementor-section-height-default elementor-section-height-default"
            data-id="fd5d819" data-element_type="section"
            data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
            <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-010fba8"
                                    data-id="010fba8" data-element_type="column">
                                    <div class="elementor-widget-wrap elementor-element-populated">
                                        <div class="elementor-element elementor-element-cf395be ekit-equal-height-disable elementor-widget elementor-widget-elementskit-image-box"
                                            data-id="cf395be" data-element_type="widget"
                                            data-widget_type="elementskit-image-box.default">
                                            <div class="elementor-widget-container">
                                                <div class="ekit-wid-con">
                                                    <div
                                                        class="elementskit-info-image-box ekit-image-box text-center simple-card">

                                                        <div class="elementor-element elementor-element-dffbd3d elementor-invisible elementor-widget elementor-widget-heading"
                                                            data-id="dffbd3d" data-element_type="widget"
                                                            data-settings="{&quot;_animation&quot;:&quot;fadeInRight&quot;}"
                                                            data-widget_type="heading.default">
                                                            <div class="elementor-widget-container">
                                                                <h2 class="elementor-heading-title elementor-size-default">Relatable Products</h2>
                                                            </div>
                                                        </div>
                                                        <div class="elementor-element elementor-element-12837f6 elementor-grid-1 elementor-posts--thumbnail-left elementor-grid-tablet-2 elementor-grid-mobile-1 elementor-widget elementor-widget-posts"
                                                            data-id="12837f6" data-element_type="widget"
                                                            data-settings="{&quot;classic_columns&quot;:&quot;1&quot;,&quot;classic_columns_tablet&quot;:&quot;2&quot;,&quot;classic_columns_mobile&quot;:&quot;1&quot;,&quot;classic_row_gap&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:35,&quot;sizes&quot;:[]},&quot;classic_row_gap_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;classic_row_gap_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}"
                                                            data-widget_type="posts.classic">
                                                            <div class="elementor-widget-container">
                                                                <div
                                                                    class="elementor-posts-container elementor-posts elementor-posts--skin-classic elementor-grid">
                                                                    @foreach($product_lists as $product_list)
                                                                    <article
                                                                        class="elementor-post elementor-grid-item post-77 post type-post status-publish format-standard has-post-thumbnail hentry category-insight tag-apparel tag-design tag-trends">
                                                                        <a class="elementor-post__thumbnail__link"
                                                                            href="{{ asset('images/' . $product_list->image) }}"
                                                                            tabindex="-1">
                                                                            <div class="elementor-post__thumbnail"><img loading="lazy" width="300"
                                                                                    height="200"
                                                                                    src="{{ asset('images/' . $product_list->image) }}"
                                                                                    class="attachment-medium size-medium wp-image-78"
                                                                                    alt="Male worker preparing screen printing film in workshop" />
                                                                            </div>
                                                                        </a>
                                                                        <div class="elementor-post__text">
                                                                            <h3 class="elementor-post__title">
                                                                                <a
                                                                                    href="{{ route('product_detail', ['id' => $product_list->id]) }}">
                                                                                    {{ $product_list->title }} </a>
                                                                            </h3>
                                                                            <p>
                                                                                {{ Str::words($product_list->description, 15, '...') }}
                                                                            </p>
                                                                            <div class="elementor-post__meta-data">
                                                                                <span class="elementor-post-date">
                                                                                    {{ $product_list->created_at->format('d M Y') }} </span>
                                                                                <!--<span class="elementor-post-avatar">-->
                                                                                <!--    No Comments </span>-->
                                                                            </div>
                                                                        </div>
                                                                    </article>
                                                                    @endforeach
                                                                </div>
                                
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                <!--<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-4595411"-->
                <!--    data-id="4595411" data-element_type="column">-->
                <!--    <div class="elementor-widget-wrap elementor-element-populated">-->
                <!--        <section-->
                <!--            class="elementor-section elementor-inner-section elementor-element elementor-element-479db3f elementor-section-boxed elementor-section-height-default elementor-section-height-default"-->
                <!--            data-id="479db3f" data-element_type="section"-->
                <!--            data-settings="{&quot;sticky&quot;:&quot;top&quot;,&quot;sticky_parent&quot;:&quot;yes&quot;,&quot;sticky_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;],&quot;sticky_offset&quot;:0,&quot;sticky_effects_offset&quot;:0}">-->
                <!--            <div class="elementor-container elementor-column-gap-default">-->
                <!--                <div class="elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-622020c"-->
                <!--                    data-id="622020c" data-element_type="column">-->
                <!--                    <div class="elementor-widget-wrap elementor-element-populated">-->
                <!--                        <div class="elementor-element elementor-element-de3487f elementor-widget elementor-widget-heading"-->
                <!--                            data-id="de3487f" data-element_type="widget"-->
                <!--                            data-widget_type="heading.default">-->
                <!--                            <div class="elementor-widget-container">-->
                <!--                                <h2 class="elementor-heading-title elementor-size-default">Our Team-->
                <!--                                </h2>-->
                <!--                            </div>-->
                <!--                        </div>-->
                <!--                        <div class="elementor-element elementor-element-8df37e6 elementor-invisible elementor-widget elementor-widget-heading"-->
                <!--                            data-id="8df37e6" data-element_type="widget"-->
                <!--                            data-settings="{&quot;_animation&quot;:&quot;fadeInLeft&quot;}"-->
                <!--                            data-widget_type="heading.default">-->
                <!--                            <div class="elementor-widget-container">-->
                <!--                                <h2 class="elementor-heading-title elementor-size-default">Teamwork-->
                <!--                                    makes the dream work</h2>-->
                <!--                            </div>-->
                <!--                        </div>-->
                <!--                        <div class="elementor-element elementor-element-a58f2be elementor-widget elementor-widget-text-editor"-->
                <!--                            data-id="a58f2be" data-element_type="widget"-->
                <!--                            data-widget_type="text-editor.default">-->
                <!--                            <div class="elementor-widget-container">-->
                <!--                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit-->
                <!--                                    tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>-->
                <!--                            </div>-->
                <!--                        </div>-->
                <!--                        <div class="elementor-element elementor-element-505dfd7 elementor-tablet-align-center elementor-widget elementor-widget-button"-->
                <!--                            data-id="505dfd7" data-element_type="widget"-->
                <!--                            data-widget_type="button.default">-->
                <!--                            <div class="elementor-widget-container">-->
                <!--                                <div class="elementor-button-wrapper">-->
                <!--                                    <a class="elementor-button elementor-button-link elementor-size-sm"-->
                <!--                                        href="#">-->
                <!--                                        <span class="elementor-button-content-wrapper">-->
                <!--                                            <span class="elementor-button-icon">-->
                <!--                                                <i aria-hidden="true" class=" ti-arrow-top-right"></i>-->
                <!--                                            </span>-->
                <!--                                            <span class="elementor-button-text">Meet All Team</span>-->
                <!--                                        </span>-->
                <!--                                    </a>-->
                <!--                                </div>-->
                <!--                            </div>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--            </div>-->
                <!--        </section>-->
                <!--    </div>-->
                <!--</div>-->
                <div class="elementor-column elementor-col-66 elementor-top-column elementor-element elementor-element-79d71ff"
                    data-id="79d71ff" data-element_type="column">
                    <div class="elementor-widget-wrap elementor-element-populated">
                        <div class="elementor-widget-wrap elementor-element-populated">
                                        <div class="elementor-element elementor-element-39c02bf elementor-widget__width-auto elementor-widget elementor-widget-post-info"
                                            data-id="39c02bf" data-element_type="widget" data-widget_type="post-info.default">
                                            <div class="elementor-widget-container">
                                                <ul class="elementor-inline-items elementor-icon-list-items elementor-post-info">
                                                    <li class="elementor-icon-list-item elementor-repeater-item-e711266 elementor-inline-item"
                                                        itemprop="about">
                                                        <span class="elementor-icon-list-icon">
                                                            <i aria-hidden="true" class="fas fa-tags"></i> </span>
                                                        <span
                                                            class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms">
                                                            <span class="elementor-post-info__terms-list">
                                                                <a href="https://point.moxcreative.com/camisseta/category/apparel/"
                                                                    class="elementor-post-info__terms-list-item">Apparel</a> </span>
                                                        </span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="elementor-element elementor-element-c97f6ff elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image"
                                            data-id="c97f6ff" data-element_type="widget"
                                            data-widget_type="theme-post-featured-image.default">
                                            <div class="elementor-widget-container">
                                                <img loading="lazy" width="1080" height="810"
                                                    src="{{ asset('images/' . $product->image) }}"
                                                    class="attachment-full size-full wp-image-126"
                                                    alt="Portrait of young beautiful woman posing in studio"
                                                    srcset="{{ asset('images/' . $product->image) }}"
                                                    sizes="(max-width: 1080px) 100vw, 1080px" />
                                            </div>
                                                                            <p class="fw-bold text-primary" style="text-align:left;">
                                                                                ₹{{ $product_list->price }}
                                                                            </p>
                                        </div>
                                        <section
                                            class="elementor-section elementor-inner-section elementor-element elementor-element-256fd5c elementor-section-boxed elementor-section-height-default elementor-section-height-default"
                                            data-id="256fd5c" data-element_type="section">
                                            <div class="elementor-container elementor-column-gap-default">
                                                <div class="elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-bdae515"
                                                    data-id="bdae515" data-element_type="column">
                                                    <div class="elementor-widget-wrap elementor-element-populated">
                                                        <div class="elementor-element elementor-element-ef7e695 elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading"
                                                            data-id="ef7e695" data-element_type="widget"
                                                            data-widget_type="theme-post-title.default">
                                                            <div class="elementor-widget-container">
                                                                <h1 class="elementor-heading-title elementor-size-default">
                                                                    {{ $product->title }} </h1>
                                                            </div>
                                                        </div>
                                                        <div class="elementor-element elementor-element-a1f4424 elementor-widget elementor-widget-theme-post-content"
                                                            data-id="a1f4424" data-element_type="widget"
                                                            data-widget_type="theme-post-content.default">
                                                            <div class="elementor-widget-container">
                                                                <p>{{ $product->description }}</p>
                                                            </div>
                                                        </div>
                                                        <div class="elementor-element elementor-element-209b3cc elementor-widget elementor-widget-button"
                                                            data-id="209b3cc" data-element_type="widget"
                                                            data-widget_type="button.default">
                                                            <div class="elementor-widget-container">
                                                                <div class="elementor-button-wrapper">
                                                                    @auth
                                                                        <form action="{{ route('cart.add', $product->id) }}" method="post">
                                                                            @csrf
                                                                            <button type="submit" class="elementor-button elementor-button-link elementor-size-sm">
                                                                                <span class="elementor-button-content-wrapper">
                                                                                    <span class="elementor-button-text">Add to Cart</span>
                                                                                </span>
                                                                            </button>
                                                                        </form>
                                                                        <!--<a class="elementor-button elementor-button-link elementor-size-sm"-->
                                                                        <!--    href="#">-->
                                                                        <!--    <span class="elementor-button-content-wrapper">-->
                                                                        <!--        <span class="elementor-button-text">Add to Cart</span>-->
                                                                        <!--    </span>-->
                                                                        <!--</a>-->
                                                                    @endauth
                                                                    @guest
                                                                        <a class="elementor-button elementor-button-link elementor-size-sm"
                                                                            href="{{ route('user.login') }}">
                                                                            <span class="elementor-button-content-wrapper">
                                                                                <span class="elementor-button-text">Please log in to continue</span>
                                                                            </span>
                                                                        </a>
                                                                    @endguest
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="elementor-element elementor-element-141968a elementor-widget elementor-widget-post-info"
                                                            data-id="141968a" data-element_type="widget"
                                                            data-widget_type="post-info.default">
                                                            <div class="elementor-widget-container">
                                                                <ul
                                                                    class="elementor-inline-items elementor-icon-list-items elementor-post-info">
                                                                    <li class="elementor-icon-list-item elementor-repeater-item-5a6d95c elementor-inline-item"
                                                                        itemprop="author">
                                                                        <a
                                                                            href="#">
                                                                            <span class="elementor-icon-list-icon">
                                                                                <i aria-hidden="true" class="far fa-user-circle"></i>
                                                                            </span>
                                                                            <span
                                                                                class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-author">
                                                                                <span class="elementor-post-info__item-prefix">Written
                                                                                    by</span>
                                                                                Admin </span>
                                                                        </a>
                                                                    </li>
                                                                    <li class="elementor-icon-list-item elementor-repeater-item-6254125 elementor-inline-item"
                                                                        itemprop="datePublished">
                                                                        <a href="#">
                                                                            <span class="elementor-icon-list-icon">
                                                                                <i aria-hidden="true" class="far fa-calendar-alt"></i>
                                                                            </span>
                                                                            <span
                                                                                class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date">
                                                                                <span
                                                                                    class="elementor-post-info__item-prefix">Published
                                                                                    on</span>
                                                                                <time>{{ $product->created_at->format('d M Y') }}</time>
                                                                            </span>
                                                                        </a>
                                                                    </li>
                                                                    <li
                                                                        class="elementor-icon-list-item elementor-repeater-item-20a2ca3 elementor-inline-item">
                                                                        <span class="elementor-icon-list-icon">
                                                                            <i aria-hidden="true" class="far fa-clock"></i> </span>
                                                                        <span
                                                                            class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-time">
                                                                            <time>7:43 am</time> </span>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </section>
                                    </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection